User Authentication

Below is a summary of the user authentication steps I have implemented.

Initial visit

1. Unauthenticated user visits website
2. AuthProvider isAuthenticated === false so unauthenticated app is rendered
3. User is able to login/register
4. Server issues an accessToken (JWT with 15 min expiry) as well as a refreshToken (Cookie with 1 month expiry) which is created in the database, associated to the user's account
5. accessToken is set in the AuthProvider context and refreshToken is set as a Cookie at which point AuthProvider's context is set with user info and isAuthenticated === true
6. Authenticated app is rendered

Revisit with valid refreshToken

1. User has refreshToken cookie which is looked up in the database
2. If valid, the associated account is returned and a accessToken is issued
3. AuthProvider context is set and the authenticated app is rendered

Other implementation details

• All calls to protected API routes will be validated with the accessToken (which automatically refreshes every ~15 minutes)
• One user can have multiple refresh tokens associated with their account (i.e. to allow access on multiple devices). This is neccessary as the refreshToken is re-created every time it is used to authenticate a user.

Helpful tutorials I found

While these don't explain exactly how to implement the above, they provided a great deal of information:

• https://zachgoll.github.io/blog/2019/choosing-authentication-strategy/
• https://hasura.io/blog/best-practices-of-using-jwt-with-graphql/#login