{"data":{"content":{"fields":{"slug":"/labs/capstone","type":"lab"},"frontmatter":{"title":"Capstone"},"html":"

Lab Six - Capstone

\n

Switch to Lab06

\n\n
cd ../ # presuming still in previous lab\ncd lab-06\nyarn start
\n

Are we done yet?

\n

The application is pretty much feature-complete at this point. Nice work!

\n

…but then you notice that just about anybody can modify data. Not good.\nWe need to add some security to this app, fast!

\n

What do we need?

\n

We need to restrict access by requiring the user log in using valid credentials.\nThe good news is that our server team has put together a simple set of Rest services to support a login/logout capability.

\n

Note: This is a very naïve login/logout capability as a simple example. Don’t use it in production code!

\n

How are we going to do it?

\n

There aren’t any new concepts in this section - we’re just applying all the things you’ve learned from previous labs.\nTry and implement each step yourself - don’t be afraid to ask questions or collaborate with classmates to work out a solution.\nIf you truly get stuck then each section has a code hint you can refer to.

\n
\n

Note that many of the files you’ll be working with don’t exist in the baseline yet, so you’ll need to create them. In addition, you’ll need to keep an eye out for any missing import statements and get those fixed. Just another bit of fun in modern JS development 😃

\n
\n

Build the Action Types for Auth

\n

Our app is going to have to accept credentials, log the user in, and pull the current user from the server\nso we can get info about them.

\n

We need to define our types for Authentication actions.

\n\n
\n Code hint:\n
AuthActionTypes.js
\n
export const SET_USER = 'SET_USER';\nexport const ERROR = 'ERROR';
\n
\n

 

\n

Build the Actions

\n

Now we need a way to fire off login & logout actions based on user interaction.

\n

We need async actions for making API calls to the following endpoints:

\n\n

Then we need actions:

\n\n
\n Code hint:\n
AuthActionCreator.js
\n
export const setUser = user => {\n  return {\n    type: AuthActionTypes.SET_USER,\n    user: user\n  };\n};\n\nexport const error = error => {\n  return {\n    type: AuthActionTypes.ERROR,\n    error: error\n  }\n};\n\nexport const login = (credentials) => {\n  return dispatch => {\n    return Axios.post('/api/login', credentials)\n      .then(response => {\n        dispatch(setUser(response.data));\n        console.log('Login successful');\n        return true;\n      })\n      .catch(err => {\n        console.log('There was an error logging in.');\n        dispatch(error('Failed to login'));\n      });\n  };\n};\n\nexport const logout = () => {\n  return dispatch => {\n    return Axios.post('/api/logout')\n      .then(response => {\n        dispatch(setUser(null));\n        console.log('Logout successful');\n        return true;\n      })\n      .catch(err => {\n        console.log('There was an error logging out.');\n      });\n  };\n};
\n
\n

 

\n

Build the Reducer

\n

We need a reducer to handle our actions

\n\n
\n Code hint:\n
auth-reducer.js
\n
import * as AuthActionTypes from '../actions/AuthActionTypes';\n\nexport default (state = { user: {} }, action) => {\n  switch (action.type) {\n    case AuthActionTypes.SET_USER:\n      return { ...state, user: action.user };\n    case AuthActionTypes.ERROR:\n      return { ...state, error: action.error };\n    default:\n      return state;\n  }\n};
\n
\n

 

\n\n

Create a Login form

\n\n
\n Code hint:\n
Login.js
\n
import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Form, Formik } from 'formik';\nimport FieldWrapper from '../form/FieldWrapper';\nimport FormControls from '../form/FormControls';\n\nclass LoginForm extends React.Component {\n\n  validate = (values) => {\n    const errors = {};\n\n    if (!values.username) {\n      errors.username = 'Required';\n    }\n    if (!values.password) {\n      errors.password = 'Required';\n    }\n\n    return errors;\n  };\n\n  login = (values) => {\n    this.props.onLogin({\n      username: values.username,\n      password: values.password\n    });\n  };\n\n  render() {\n    const { loginError } = this.props;\n\n    return (\n      <div>\n        <Formik\n          validate={this.validate}\n          onSubmit={this.login}\n          initialValues={{\n            username: '',\n            password: ''\n          }}>\n          {({ isValid, errors, touched, handleSubmit, handleReset }) => (\n            <Form>\n              <FieldWrapper type=\"text\" name=\"username\" label=\"Username\" invalid={errors.username} touched={touched.username} />\n              <FieldWrapper type=\"password\" name=\"password\" label=\"Password\" invalid={errors.password} touched={touched.password} />\n\n              <FormControls\n                action=\"Login\"\n                allowSubmit={isValid}\n                onSubmit={handleSubmit}\n                onReset={handleReset}\n              />\n            </Form>\n          )}\n        </Formik>\n        {loginError && (\n          <p style={{ color: 'red' }}>{loginError}</p>\n        )}\n      </div>\n    );\n  }\n}\n\nLoginForm.propTypes = {\n  onLogin: PropTypes.func.isRequired,\n  loginError: PropTypes.string\n};\n\nexport default LoginForm;
\n
\n

 

\n

Get data for Login Form

\n\n
\n Code hint:\n
App.js
\n
const mapStateToProps = state => ({\n  user: state.auth.user,\n  loginError: state.auth.error\n});\n\nconst mapDispatchToProps = {\n  login: AuthActionCreators.login\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(App);
\n
\n

 

\n

Add a Logout button

\n

We want to let the user log out from the navbar, so we’ll need to add a new link that can fire off the ‘Logout’ action.

\n\n
\n Code hint:\n
Navigation.js
\n
Navigation.propTypes = {\n  onLogout: PropTypes.func.isRequired\n};
\n
\n

 

\n\n
\n Code hint:\n
Navigation.js
\n
<Nav pullRight>\n <NavItem>\n   <Button onClick={this.props.onLogout}>Logout</Button>\n </NavItem>\n</Nav>
\n
\n

 

\n

Grab props to pass into Navigation

\n

Now that Navigation needs a ‘onLogout’ function to call, we need to get that from Redux and pass it in.

\n\n
\n Code hint:\n
App.js
\n
const mapStateToProps = state => ({\n  user: state.auth.user,\n  loginError: state.auth.error\n});\n\nconst mapDispatchToProps = {\n  login: AuthActionCreators.login,\n  logout: AuthActionCreators.logout\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(App);
\n
\n

 

\n\n
\n Code hint:\n
App.js
\n
<Navigation onLogout={this.props.logout}/>
\n
\n

 

\n

Render login form until user successfully logs in

\n

We have all the pieces in place, now we just need to prevent the user from accessing the application until they’ve logged in.

\n\n
\n Code hint:\n
App.js
\n
{!this.props.user ? (\n  <LoginForm onLogin={this.props.login} loginError={this.props.loginError} />\n) : (\n  <Switch>\n    ...\n  </Switch>\n)}
\n
\n

 

\n

Try it out

\n

Let’s see if the app does what we want.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
UsernamePassword
adminpassword
userpassword
\n\n

Commit your changes to Git.

\n
git add .\ngit commit -m "We are React masters"
\n

Extra Credit

\n\n

git add . and git commit -m "extra credit" when you are done

"}},"pageContext":{"next":{},"slug":"/labs/capstone"}}