Next.js Discord

Discord Forum

Next & JWT tokens

Unanswered
Argentine hake posted this in #help-forum
Open in Discord
Argentine hakeOP
Main premise is I have a custom back-end talking with a Next front-end. On login, using a server action, I set a cookie in Next with a JWT token which was minted back-end side with an expiration of for example 15 minutes.

Right now, when a back-end DB request is made, using React Server Components (RSC), the token is used as authorization. Then after the 15 minutes, the user is sent back to the login page as JWT is no longer valid.

If I'm using RSC to fetch data, how can I set a newly minted JWT token with a fresh 15 mins which is sent along with the fetched data? I don't want to switch over all of my fetching in RSC to route handlers as this is the benefit of using RSCs and not client components w/ many route handler invocations.

I too tired putting this logic in my middleware as my middleware protects all of my routes where fetching occurs, so theoretically a user would land on a new route, setting a new JTW, and then the fetching would happen. Besides setting cookies using the cookies package not being possible in the middleware but still kinda being able to, this seems hacky and doesn't truly fix my problem at hand as.

Cheers!

7 Replies

Satin Angora
To handle JWT token refresh in your Next.js frontend with React Server Components (RSC), you can follow these steps:

Backend Logic: Update your backend to detect expired tokens and generate new ones. Send these new tokens back with the data responses.

Middleware Handling: In your Next.js middleware, extract the new token from the backend response and set it as a cookie. This can be a bit complex but is doable with proper HTTP header management.

RSC Token Usage: Make sure your RSC fetches data using the latest token from cookies.

This approach allows you to refresh JWT tokens easier
Argentine hakeOP
@Satin Angora , could I ask you to pelase elaborate and even share a simple exmaple if you have.

I have been able to do all of the back-end stuff, but when it comes to the Next side of things I'm unsure. I understand the premis of your suggestion, but from testing things out on my own side, I have been unable to get the desired effect by setting cookies in the middleware and using the cookie in my RSC. Seemingly I'm running into something like described in https://github.com/vercel/next.js/issues/49442 ticket. Or even if I am able to get the cookie to be viewable in the browser cookie inspector on the RSC page, the old cookie value the one which is used for the fetch.

Thanks!
Argentine hakeOP
Quick update, I forgot to await a promise which was the problem. So I am able to set the cookie in the middleware. Although still wish there felt like a less hack-y way of doing this... Or at least have it documented in the docs about being able to do this even if not being able to use the cookies package.
Satin Angora
So what i've done is the past is just create a middleware function that creates an axios instance something like this : 

export const createAxiosInstanceWithCookies = (req) => {
    // Extract cookies from the request
    const cookies = req.headers.cookie;

    // Create an Axios instance with the extracted cookies
    return axios.create({
        headers: {
            'Cookie': cookies || ''
        }
    });
};
This is just a very simple example of course
But in essense you would then use this as your "client" and this should be exportable and you would use the context.req to pass in the cookies from the client hopefully also reducing the amount of packages you need to instasll to the app