Async update of cookies
Unanswered
Evanion posted this in #help-forum
EvanionOP
How can I perform an async operation and update the request and response cookies in my app?
* I'm trying to build an application in next.js that uses a separate backend.
* In order to authenticate with this backend, the users
* The backend requires that the token is included in the
* In order to store the token between requests, I'm using
* The
* I started making a async function that I called in RSCs to get the cookie from the incoming request, validate it, and refresh it if needed, but since I apparently can't set cookies at this stage, I have to perform this logic somewhere else.
* I tried to do this in middleware, as it runs before the rendering starts, and discovered in the docs that middleware only supports the
So, my question is; where and how, can I check cookies and perform async operations and then update the cookies so that the new cookies are both updated on the users browser, and available for RSCs/route handlers/server actions, etc, that support both the
* I'm trying to build an application in next.js that uses a separate backend.
* In order to authenticate with this backend, the users
accessToken needs to be included in requests that require the user to be auth:ed.* The backend requires that the token is included in the
Authorization header.* In order to store the token between requests, I'm using
httpOnly cookies* The
accessToken is short lived, and comes with a refreshToken that I need to use in order to get a new accessToken.* I started making a async function that I called in RSCs to get the cookie from the incoming request, validate it, and refresh it if needed, but since I apparently can't set cookies at this stage, I have to perform this logic somewhere else.
* I tried to do this in middleware, as it runs before the rendering starts, and discovered in the docs that middleware only supports the
edge runtime (source: https://nextjs.org/docs/app/building-your-application/routing/middleware#runtime).So, my question is; where and how, can I check cookies and perform async operations and then update the cookies so that the new cookies are both updated on the users browser, and available for RSCs/route handlers/server actions, etc, that support both the
edge and node.js runtimes, as the default runtime is node.js?5 Replies
Komondor
From your description, it sounds like the server is the one who is performing the token refresh, not the client? I would instead let the client perform the token refresh. The server should just validate the token and if it's invalid it's expected that the client is responsible for getting a new one.
So let the client receive the 'token invalid' error, then have the client make a request to the server for a new token, have the client store that new token in the cookies, then have the client make the request again this time using the new token
EvanionOP
Well, Next is the client. The backend just has an endpoint that next calls to get a new token when needed.
You don't want to cookies to be accessible from the JS thread in the browser, thats why they are set as httpOnly.
Sure, I could do all the requests from the browser directly to the backend. But that defeats the purpose of using next in the first place, In that case I might as well go with CRA.
You don't want to cookies to be accessible from the JS thread in the browser, thats why they are set as httpOnly.
Sure, I could do all the requests from the browser directly to the backend. But that defeats the purpose of using next in the first place, In that case I might as well go with CRA.
Komondor
"but since I apparently can't set cookies at this stage, I have to perform this logic somewhere else."
What is preventing you from setting the cookies? The documentation shows this, and it's running on the server:
What is preventing you from setting the cookies? The documentation shows this, and it's running on the server:
'use server'
import { cookies } from 'next/headers'
async function create(data) {
cookies().set('name', 'lee')
// or
cookies().set('name', 'lee', { secure: true })
// or
cookies().set({
name: 'name',
value: 'lee',
httpOnly: true,
path: '/',
})
}
import { cookies } from 'next/headers'
async function create(data) {
cookies().set('name', 'lee')
// or
cookies().set('name', 'lee', { secure: true })
// or
cookies().set({
name: 'name',
value: 'lee',
httpOnly: true,
path: '/',
})
}