What is Authentication Flow?

Authentication flow is the process of confirming a user's identity and managing their access to certain parts of an application. When you're working with a web app (like a social media site), this involves checking if the user is who they say they are (login) and then giving them access to certain features.

How Does It Work in React?

In React, when you want to handle user authentication, you usually interact with a backend server that handles the heavy lifting. Here's how it typically works:

1. Registration and Login Endpoints

• Registration Endpoint: When a new user signs up, they send their details (like username, email, password) to the server. The server then creates an account for them.
• Login Endpoint: When an existing user logs in, they send their username and password to the server. The server checks if these details are correct.

2. Tokens: Access Token and Refresh Token

After a successful login, the server sends back two important tokens:

• Access Token:

  • This is like a short-term pass that allows the user to access certain features of the app. It usually has a short lifespan (in this case, 5 minutes).
  • Every time the user makes a request (like viewing their profile or posting something), this token is sent to the server to prove they are logged in.

• Refresh Token:

  • This is like a backup pass that’s used when the access token expires. It’s more long-lasting.
  • When the access token expires (after 5 minutes), instead of making the user log in again, the app can use the refresh token to get a new access token.

3. Storing Tokens in the Browser

Once the user logs in and receives these tokens, the app needs to store them somewhere on the user's device. This is where localStorage comes in:

• localStorage: This is a feature in web browsers that allows you to store data (like the tokens) in the user's browser.
  • setItem() Method: This is used to store data. For example, you store the access token and refresh token with something like localStorage.setItem('accessToken', tokenValue).
  • getItem() Method: This is used to retrieve stored data. For example, you get the stored access token with something like localStorage.getItem('accessToken').

4. Making Requests with the Access Token

Every time the user does something that requires server interaction (like posting a status or viewing their messages), the app sends a request to the server with the access token attached in the Authorization header. This tells the server that the user is logged in and allowed to perform the action.

5. Handling Expired Tokens

• Access Token Expiration: If the server responds with a 401 error, it means the access token has expired. The app will then use the refresh token to request a new access token.

• Refresh Token Expiration: If the refresh token has also expired (which might happen after a long time), the server will again respond with a 401 error. At this point, the app will redirect the user to the login page, asking them to log in again to get fresh tokens.

6. Resending the Failed Request

Once the app gets a new access token using the refresh token, it will resend the original request that failed because of the expired token. This way, the user doesn't experience any interruption.

Summary

• Authentication Flow: This is how the app confirms who you are and gives you access to features.
• Access Token: A short-term key to access resources in the app. Expires quickly.
• Refresh Token: A long-term backup key to get a new access token when the old one expires.
• localStorage: The browser's way of storing these tokens on the user's device.
• Authorization Header: Where the access token is included in requests to the server.
• 401 Error: A signal that the token has expired and that the app needs to take action (either refresh the token or ask the user to log in again).

This flow ensures that the user can stay logged in and use the app securely without having to re-enter their credentials all the time.