JWT Authentication in React: Guide to Access Tokens & Refresh Tokens

What Are Access Tokens and Refresh Tokens? (And Why You Need Both) Before diving into implementation, let’s first understand the HTTP endpoints your frontend communicates with and what each of them does. A step by step flow in short: On login request we send the login and password to the server. The backend checks whether they match an existing user. If no, we will get an error response (typically 401 Unauthorized ). If yes, we will get a 200 response with a response body similar to this: "access_token" : "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MTYyMzkwMjIsInVzZXJfaWQiOjEsInJvbGUiOjJ9.RDsEg737AOckmF_rXiZehecfKZQZV_Zr_csnRZnJZVM" We will see later what to do with this response. What we need to remember for now is that we get an access token on authentication request (login request in simple words). Besides access token, the server will also send us a refresh token . You may wonder where it is, as we don't see anything besides access token in the response. Refresh token is sent