Redux & Redux Toolkit Course
Redux & Redux Toolkit
/
Intermediate

Authentication Flow

Definition

The standard pattern for handling user login, storing the session token, and maintaining the authenticated state across page reloads using Redux.

Explain Like I'm New

1. User submits Login Form. 2. Redux Thunk sends email/pass to server. 3. Server returns a JWT (Token). 4. Redux stores the Token in the state AND saves it to LocalStorage. 5. The UI reads `state.isLoggedIn = true` and redirects to the Dashboard.

Real World Example

Whenever the user refreshes the page, the Redux state resets. A `useEffect` in your core `App.js` must check `localStorage.getItem('token')` and dispatch an action to log the user back in before the page finishes loading.

Common Use Cases

  • •Securing web applications
  • •JWT management

Interactive Example

Loading...
Console output will appear here...

Interview Questions

basic

  • If you store a user token in Redux, what happens when the user hits 'Refresh' in their browser?

intermediate

  • Why is it important to store the authentication status globally?

Flash Cards

Question

What happens on refresh?

Click to reveal answer
Answer

The Redux state is completely wiped out and reset to initial state. You MUST sync the token to `localStorage` or read it from an `HttpOnly Cookie` on boot to keep the user logged in.

Question

Why globally?

Click to reveal answer
Answer

Because almost every part of an app relies on it. The Navbar needs to show a 'Logout' button, the Router needs to block protected pages, and API calls need to attach the Token to their headers.