Skip to content

Login

The login architecture of the prototype is based in this example from the official react-router-dom library. It implements a provider pattern to handle the authentication state.

Login process

  1. Fill login form: the user access the /login page and fills the username and password.
  2. Login mutation: the client sends a GraphQL mutation to the backend:
    1. Incorrect credentials: the user is asked to change the email or password, step 1.
    2. Correct credentials: the backend responds wtih the user info and authorization token (login resolver in the backend repo). This info is stored in sessionStorage through the useAuth hook (./src/providers/Auth), this implementation is based on this guide of "How To Add Login Authentication to React Applications" .
  3. Redirect: once the user has sucessfully logged in she is redirected to the issue-badge page.

Private routes

In order to generate a private space for users in the app, the implementation of a PrivateRoute component from this example from the official react-router-dom library as been applied.

If a user tries to access a private area such as /issue-badge) the <PrivateRoute> component will redirect her to the login page. The checking process tries to access the user info in the sessionStorage, if it doesn't exists the redirection is done through the use of useLocation and useHistory hooks from react-router library. More info in: ./src/components/PrivateRoute.js.

Last update: 2022-05-23