I hope that following basics will help beginners to understand oAuth purpose.

What is an Access Token and Refresh Token?

Access Token:
A short-lived token that grants a user or third-party applications access to specific user resources on a server. It typically contains user information and permissions (scopes) and is used to authenticate requests.
(You will store it in the database and use it on the frontend to include in request headers by retrieving it from the backend, or in some cases, use it on the backend to call third-party APIs.)

Refresh Token:
A long-lived token used to obtain a new access token when the current one expires. It’s only exchanged with the server, not sent with each request to protected resources.
(You will store it in the DB and only retrieve it from the database when the backend server needs a new access token. Once you get a new token, you can immediately update the access token in the database. If a new refresh token is also issued, it is a good practice to update the refresh token in the database as well.)

Why Do We Need Two Tokens Instead of One?

In the OAuth strategy, there are multiple steps of authorization and authentication to obtain an access token. Once the access token is issued, it means all steps have been completed. However, access tokens have an expiry limit for security purposes. The expiry duration varies for each app depending on its requirements and security concerns.

Without a refresh token, users would need to repeat the entire authentication process whenever the access token expires. This can be cumbersome, especially if the access token has a short expiry. With a refresh token, obtaining a new access token requires only a single request. This approach simplifies the process, as you only need to use the refresh token when the access token has expired, ensuring a seamless user experience.

How Does Using Two Tokens Enhance Security?

• Limited Exposure:
  Access tokens expire quickly, minimizing the risk of misuse if compromised.

• Refresh Token Storage:
  Refresh tokens are typically stored securely in the database, ensuring that they are not accessible to attackers.

Where to Store Tokens in a Django REST and React Project?

(Already mentioned in the first section in brackets.) Additionally, if you need them on the front-end, then:

1. Access Token:

   • Store in memory or React state.
   • Avoid using localStorage/sessionStorage to prevent XSS attacks.

2. Refresh Token:

   • Store in HTTP-only cookies for better security against XSS attacks. These cookies are inaccessible via JavaScript.

Example Workflow:

1. User logs in → Server issues both an access token and a refresh token.
2. Access token is used for API calls.
3. When the access token expires:
   • Use the refresh token to obtain a new access token.
4. If the refresh token also expires, the user is prompted to log in again.

Conclusion

Using both tokens provides a balance between security (short-lived access tokens) and user experience (long-lived refresh tokens). Store tokens properly to avoid vulnerabilities like XSS and CSRF.