How do you handle token refresh in Next.js?

Handling token refresh in a Next.js application is crucial for maintaining user authentication and ensuring a seamless experience. When dealing with tokens, especially JWTs (JSON Web Tokens), it's important to implement a strategy that allows for automatic refreshing without interrupting the user's session. Below, I will outline a comprehensive approach to managing token refresh in Next.js, including practical examples, best practices, and common pitfalls to avoid.

Understanding Token Expiration

Tokens typically have an expiration time, after which they become invalid. This is a security measure to minimize the risk of token theft. When a token expires, the user must obtain a new one, usually through a refresh token mechanism.

Implementing Token Refresh

In Next.js, you can handle token refresh using a combination of client-side and server-side logic. Here’s a step-by-step approach:

1. Store Tokens Securely

First, ensure that you store your access and refresh tokens securely. The recommended approach is to use HTTP-only cookies for storing these tokens to prevent XSS attacks.

import Cookies from 'js-cookie';

// Set tokens
Cookies.set('accessToken', token, { httpOnly: true, secure: true });
Cookies.set('refreshToken', refreshToken, { httpOnly: true, secure: true });

2. Intercept Requests

Use an Axios interceptor or a similar mechanism to check the validity of the access token before making API requests. If the token is expired, trigger a refresh.

import axios from 'axios';

const apiClient = axios.create();

apiClient.interceptors.request.use(async (config) => {
  const accessToken = Cookies.get('accessToken');
  config.headers['Authorization'] = `Bearer ${accessToken}`;
  return config;
}, async (error) => {
  return Promise.reject(error);
});

3. Refresh Token Logic

When an API call fails due to an expired token, implement logic to refresh the token. This typically involves sending the refresh token to a dedicated endpoint.

apiClient.interceptors.response.use(response => response, async (error) => {
  const originalRequest = error.config;

  if (error.response.status === 401 && !originalRequest._retry) {
    originalRequest._retry = true;
    const response = await axios.post('/api/refresh-token', {
      refreshToken: Cookies.get('refreshToken')
    });

    const { accessToken } = response.data;
    Cookies.set('accessToken', accessToken);
    originalRequest.headers['Authorization'] = `Bearer ${accessToken}`;
    return apiClient(originalRequest);
  }

  return Promise.reject(error);
});

Best Practices

• Use HTTP-only cookies for storing tokens to enhance security.
• Implement token refresh logic on the client-side to avoid unnecessary server load.
• Ensure that your refresh token has a longer expiration time than the access token.
• Log out users if the refresh token is expired or invalid.

Common Mistakes

• Not handling token expiration gracefully, leading to poor user experience.
• Storing tokens in local storage, which is vulnerable to XSS attacks.
• Failing to invalidate refresh tokens after use, which can lead to security risks.

By following these guidelines, you can effectively manage token refresh in your Next.js applications, ensuring a secure and user-friendly experience.