Redux & Redux Toolkit Course
Redux & Redux Toolkit
/
Advanced

JWT Storage

Definition

The security implications of deciding exactly where to store JSON Web Tokens in a Redux architecture.

Explain Like I'm New

You have three choices for storing a JWT: 1. Redux State Only (Ultra secure, but logs you out on refresh). 2. LocalStorage (Survives refresh, but vulnerable to XSS hacking). 3. HttpOnly Cookies (Survives refresh, immune to XSS, but vulnerable to CSRF).

Real World Example

Enterprise security apps DO NOT use LocalStorage. They use an HttpOnly cookie. Redux never actually sees the Token. Redux just keeps a boolean `isLoggedIn: true`, and the browser automatically sends the cookie with every API call.

Common Use Cases

  • •Preventing Cross-Site Scripting (XSS) attacks

Interactive Example

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

Interview Questions

basic

  • Can a hacker run JavaScript to steal a token stored in `localStorage`?

intermediate

  • What is the most secure way to handle tokens in a Redux app?

Flash Cards

Question

Steal from localStorage?

Click to reveal answer
Answer

Yes. This is called an XSS (Cross-Site Scripting) attack. Any malicious script injected into your page can easily read `localStorage.getItem('token')`.

Question

Most secure way?

Click to reveal answer
Answer

Do not store tokens in Redux or LocalStorage. Have your backend send the Token inside an `HttpOnly` cookie. JavaScript (and hackers) physically cannot read `HttpOnly` cookies, but the browser will still attach them to API requests.