JWT Access & Refresh Token Flow

Avoid using Cookies or Local Storage for storing JWT tokens, by:

1. Storing the Access Token in the app state
2. Storing the Refresh Token in an HttpOnly Cookie.

HttpOnly Cookie, cannot be accessed by JavaScript, but it can be sent back to the server, where it's going to be recognized.

Getting started

1. Clone the repo

   git clone https://github.com/sitek94/jwt-refresh-token-demo.git

2. Install all dependencies

   npm run install-deps

3. Make sure you have a Docker running
4. Start the client

   npm run dev:client

5. Start the server

   npm run dev:server

6. Open the browser and navigate to http://localhost:3000

Resources

• NestJs JWT - Access Tokens & Refresh Tokens by Vlad Agaev
• React Login Authentication with JWT Access, Refresh Tokens, Cookies and Axios by Dave Gray
• React Security Fundamentals by Ryan Chekie
• NestJS Demo - repo that I used as a starter for server part of this project
• Create React App - client part of the project
• All You Need to Know About Storing JWT in the Frontend