Store Long-Lived Access Tokens Inside Next.js 14 and Handle Recurring Refresh

Are you tired of dealing with access tokens that expire in no time, leaving your users frustrated and your app in a state of disarray? Well, buckle up, folks! In this article, we’re going to dive into the world of long-lived access tokens in Next.js 14 and explore how to store them securely and handle recurring refreshes like a pro.

What are Long-Lived Access Tokens?

Before we dive into the nitty-gritty, let’s take a step back and understand what long-lived access tokens are. In a nutshell, an access token is a unique identifier issued by an authentication server that grants access to a protected resource. Long-lived access tokens, on the other hand, are tokens that remain valid for an extended period, often several hours, days, or even weeks.

Now, you might be wondering why we need long-lived access tokens in the first place. The answer is quite simple: they provide a seamless user experience, eliminating the need for frequent re-authentication and reducing the risk of token expiration-related errors.

Storing Long-Lived Access Tokens in Next.js 14

So, how do we store long-lived access tokens in Next.js 14? The answer lies in the world of cookies and secure storage. Here are a few approaches you can take:

Cookies

Cookies are a great way to store long-lived access tokens, especially when paired with the `httpOnly` flag. This flag ensures that the cookie is only accessible by the web server and not by client-side JavaScript, providing an additional layer of security.

import { setCookie } from 'nookies';

// Set the access token as a cookie
setCookie(null, 'accessToken', token, {
  maxAge: 30 * 24 * 60 * 60, // 30 days
  httpOnly: true,
  secure: true,
  sameSite: 'strict',
});

Secure Storage

If cookies aren’t your cup of tea, you can use a secure storage solution like Redis or a encrypted database to store long-lived access tokens. This approach provides an additional layer of security and scalability.

import Redis from 'ioredis';

const redis = new Redis({
  host: 'localhost',
  port: 6379,
});

// Set the access token in Redis
await redis.set('accessToken', token, 'EX', 30 * 24 * 60 * 60); // 30 days

Handling Recurring Refreshes

Now that we’ve stored our long-lived access tokens, it’s time to tackle the elephant in the room: recurring refreshes. When an access token expires, we need to refresh it to maintain a seamless user experience. Here are a few strategies you can employ:

Silent Refresh

Silent refresh is a technique that refreshes the access token in the background, without interrupting the user’s workflow. This approach is ideal for web applications that require continuous access to protected resources.

import axios from 'axios';

// Silent refresh function
async function silentRefresh() {
  try {
    const response = await axios.post('/token', {
      grant_type: 'refresh_token',
      refresh_token: refreshToken,
    });

    // Store the new access token
    setCookie(null, 'accessToken', response.data.access_token, {
      maxAge: 30 * 24 * 60 * 60, // 30 days
      httpOnly: true,
      secure: true,
      sameSite: 'strict',
    });
  } catch (error) {
    console.error('Error refreshing access token:', error);
  }
}

// Schedule the silent refresh
setInterval(silentRefresh, 24 * 60 * 60 * 1000); // 24 hours

Refresh on Token Expiration

Another approach is to refresh the access token when it expires. This method is more straightforward and doesn’t require continuous background refreshes.

import { useCallback, useEffect } from 'react';

// Function to refresh the access token
const refreshTokenFunc = useCallback(async () => {
  try {
    const response = await axios.post('/token', {
      grant_type: 'refresh_token',
      refresh_token: refreshToken,
    });

    // Store the new access token
    setCookie(null, 'accessToken', response.data.access_token, {
      maxAge: 30 * 24 * 60 * 60, // 30 days
      httpOnly: true,
      secure: true,
      sameSite: 'strict',
    });
  } catch (error) {
    console.error('Error refreshing access token:', error);
  }
}, [refreshToken]);

// Use the refresh token function when the access token expires
useEffect(() => {
  const tokenExpiration = getCookie('accessTokenExpiration');

  if (tokenExpiration < Date.now() / 1000) {
    refreshTokenFunc();
  }
}, [refreshTokenFunc]);

Best Practices and Considerations

When working with long-lived access tokens in Next.js 14, it’s essential to keep the following best practices and considerations in mind:

• Token Revocation: Implement a token revocation mechanism to invalidate access tokens when a user’s account is compromised or they revoke access.
• Token Expiration: Set a reasonable expiration time for access tokens to minimize the attack surface in case of a token leak.
• Secure Storage: Store access tokens securely using cookies or encrypted storage solutions to prevent unauthorized access.
• Rate Limiting: Implement rate limiting on token refresh requests to prevent abuse and denial-of-service attacks.

Conclusion

In conclusion, storing long-lived access tokens in Next.js 14 and handling recurring refreshes requires careful planning and implementation. By following the approaches outlined in this article, you can provide a seamless user experience, reduce the risk of token expiration-related errors, and maintain a secure and scalable architecture.

Remember to keep best practices and considerations in mind, such as token revocation, expiration, secure storage, and rate limiting, to ensure the integrity of your access token management system.

Approach	Description
Cookies	Store access tokens as cookies with the `httpOnly` flag for added security.
Secure Storage	Use Redis or an encrypted database to store access tokens securely.
Silent Refresh	Refresh access tokens in the background using a scheduling mechanism.
Refresh on Token Expiration	Refresh access tokens when they expire, eliminating the need for continuous background refreshes.

This article has provided a comprehensive guide to storing long-lived access tokens in Next.js 14 and handling recurring refreshes. By following the instructions and best practices outlined here, you’ll be well on your way to implementing a secure and efficient access token management system.

Happy coding, and don’t forget to subscribe to our newsletter for more informative articles and tutorials on Next.js and related topics!

Frequently Asked Questions

Get the inside scoop on storing long-lived access tokens inside NextJS 14 and handling recurring refreshes!