Hi @craggy geyser. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#how to implement refresh tokens in app router
balmy heronBOT
To implement refresh tokens in the Next.js App Router, you can use the NextLoader function in your middleware. This function runs before the page is loaded in the NodeJS runtime. Here's an example of how you can use it to refresh tokens:
export const loader: NextLoader = async (request: NextRequest) => {
const {url, cookies} = request
// Get all the tokens
const accessToken = cookies.get('accessToken')?.value
const idToken = cookies.get('idToken')?.value
const refreshToken = cookies.get('refreshToken')?.value
// If the token has expired...
if (tokenExpired(idToken)) {
const newTokens = await refreshTokens(refreshToken)
const session = NextResponse.next()
// Set the new tokens in the cookies
session.cookies.set('idToken', newTokens.idToken)
session.cookies.set('accessToken', newTokens.accessToken)
session.cookies.set('refreshToken', refreshToken)
return session
}
return NextResponse.next()
}
In this example, the tokenExpired function checks if the token has expired, and refreshTokens is a function that refreshes the tokens. If the token has expired, new tokens are fetched and set in the cookies.
Please note that this is just an example and you might need to adjust it according to your specific needs and setup. Also, be aware that there are some limitations when working with cookies in the middleware, as mentioned in the Github Issue (https://github.com/vercel/next.js/issues/65769).
For more information about the NextLoader function and the NextRequest and NextResponse objects, you can refer to the Next.js documentation (https://nextjs.org/docs/app/api-reference/functions/use-router).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
craggy geyser
@balmy heron will this work with every server action
balmy heronBOT
Let me check the knowledge base for you. One moment! :books:
The NextLoader function in the middleware runs before every page load, including when server actions are called. However, the specific implementation of refresh tokens in the middleware might not work with every server action, depending on how those actions are set up.
For example, if a server action requires an access token to be sent in the headers of the request, and that token is refreshed in the middleware, the server action might not have access to the refreshed token if it was called before the token was refreshed.
In the Github Issue (https://github.com/vercel/next.js/issues/49408), a user reported a problem with server actions when using generateStaticParams. This suggests that there might be some limitations or specific considerations when using server actions with certain features or configurations in Next.js.
Therefore, while the middleware runs before every page load and can be used to refresh tokens, whether this will work with every server action depends on the specific requirements and setup of those actions. You might need to adjust the implementation or consider other approaches depending on your specific needs.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
craggy geyser
@balmy heron can you suggest me some other approaches
balmy heronBOT
Let me check the knowledge base for you. One moment! :books:
I'm sorry, but the provided knowledge sources do not contain specific alternative approaches for implementing refresh tokens with server actions in Next.js. However, here are some general suggestions:
-
Use an Authentication Library: There are several libraries available that handle token management and can be used with Next.js, such as next-auth (https://next-auth.js.org/). These libraries provide methods for refreshing tokens and can be configured to work with different authentication providers.
-
Handle Token Refreshing in API Routes: Instead of refreshing tokens in the middleware, you could handle it in your API routes. Each time an API route is called, you could check if the token needs to be refreshed and refresh it if necessary.
-
Use a Global State Management Library: Libraries like Redux or Zustand can be used to manage your authentication state globally. You can store your tokens in the global state and create a middleware function that checks if the token needs to be refreshed each time an action is dispatched.
Please note that these are general suggestions and might need to be adjusted according to your specific needs and setup. For more detailed guidance, you might want to refer to the Next.js documentation or other resources that provide specific examples or tutorials for implementing refresh tokens with server actions in Next.js.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
craggy geyser
@balmy heron can you show me an example of 2
balmy heronBOT
Let me check the knowledge base for you. One moment! :books:
I'm sorry, but the provided knowledge sources do not contain specific examples of handling token refreshing in API routes in Next.js. However, I can provide a general idea of how it could be done:
// pages/api/your-api-route.js
export default async function handler(req, res) {
// Get the token from the request headers
const token = req.headers.authorization;
// Check if the token needs to be refreshed
if (tokenExpired(token)) {
// Refresh the token
const newToken = await refreshTokens(token);
// Set the new token in the response headers
res.setHeader('Authorization', `Bearer ${newToken}`);
}
// Handle the API route as usual
// ...
}
In this example, tokenExpired is a function that checks if the token has expired, and refreshTokens is a function that refreshes the token. If the token has expired, a new token is fetched and set in the response headers.
Please note that this is a simplified example and might not cover all aspects of handling token refreshing in API routes. You might need to adjust it according to your specific needs and setup, such as how to securely send the new token back to the client, how to handle errors when refreshing the token, etc.
For more detailed guidance, you might want to refer to the Next.js documentation on API Routes (https://nextjs.org/docs/api-routes/introduction) or other resources that provide specific examples or tutorials for implementing refresh tokens in API routes.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
craggy geyser
@balmy heron
balmy heronBOT
Let me check the knowledge base for you. One moment! :books:
Sorry @craggy geyser, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?
craggy geyser
@balmy heron Here's an example of a server action I have
export async function editIdeation({
ideationId,
title,
description,
vision,
}: EditIdeationProps): Promise<AsyncActionResponse<EditIdeationResponse>> {
const token = getAccessToken();
const editIdeationAsync = () =>
PATCH<EditIdeationBody, EditIdeationResponse>(
api/v1/voyages/ideations/${ideationId},
token,
"default",
{ title, description, vision },
);
const [res, error] = await handleAsync(editIdeationAsync);
if (res) {
revalidateTag(CacheTag.ideation);
}
return [res, error];
}
The get accesstoken function retrieves the access token. I also have another function to get the refresh token. What if I implement a function that checks for these 2 tokens and if a token is expired, I sent a request to get a new one and replace the getAccessToken() with that new function. Would that work
balmy heronBOT
Let me check the knowledge base for you. One moment! :books:
Yes, that approach could work. You can create a new function that checks if the access token is expired and if so, refreshes it. Here's a simplified example of how you could implement this:
async function getValidAccessToken() {
const accessToken = getAccessToken();
const refreshToken = getRefreshToken();
// If the access token is expired, refresh it
if (tokenExpired(accessToken)) {
const newAccessToken = await refreshTokens(refreshToken);
return newAccessToken;
}
// If the access token is not expired, return it
return accessToken;
}
In this example, tokenExpired is a function that checks if the token has expired, and refreshTokens is a function that refreshes the token. If the access token has expired, a new token is fetched using the refresh token.
Then, in your editIdeation function, you can replace getAccessToken() with getValidAccessToken():
export async function editIdeation({
ideationId,
title,
description,
vision,
}: EditIdeationProps): Promise<AsyncActionResponse<EditIdeationResponse>> {
const token = await getValidAccessToken();
// Rest of your code...
}
Please note that this is a simplified example and might not cover all aspects of handling token refreshing in your server action. You might need to adjust it according to your specific needs and setup, such as how to handle errors when refreshing the token, etc.
For more detailed guidance, you might want to refer to the Next.js documentation on API Routes (https://nextjs.org/docs/api-routes/introduction) or other resources that provide specific examples or tutorials for implementing refresh tokens in server actions.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
craggy geyser
@balmy heron can you link me documentation about this loader middleware thing
balmy heronBOT
Let me check the knowledge base for you. One moment! :books:
I'm sorry for the confusion, but the provided knowledge sources do not contain a direct link to the documentation for the NextLoader function or middleware in Next.js. However, you can find more information about middleware in Next.js in the official Next.js documentation (https://nextjs.org/docs/middleware).
For more specific information about the NextLoader function, you might want to refer to other resources or the Next.js community, as it's not directly mentioned in the provided knowledge sources.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
craggy geyser
@balmy heron can i make http requests in middleware
balmy heronBOT
Let me check the knowledge base for you. One moment! :books:
Yes, you can make HTTP requests in Next.js middleware. However, you should be aware of the performance implications. Middleware runs on every request, so making HTTP requests in middleware could potentially slow down your application if not managed properly.
Also, keep in mind the limitations of Edge Middleware as mentioned in the Vercel documentation (https://vercel.com/docs/functions/edge-middleware/limitations#limits-on-requests). For example, Edge Middleware must begin sending a response within 25 seconds, and the maximum request body length is 4 MB.
Here's a basic example of how you might make an HTTP request in middleware:
import { NextRequest, NextResponse } from 'next/server'
import fetch from 'node-fetch'
export function middleware(request: NextRequest) {
// Make an HTTP request
const response = await fetch('<https://api.example.com/data'>)
// Process the response...
return NextResponse.next()
}
Please note that this is a simplified example and you might need to adjust it according to your specific needs and setup.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
craggy geyser
@balmy heron what about sending http request with cookies
balmy heronBOT
Let me check the knowledge base for you. One moment! :books:
Yes, you can send HTTP requests with cookies in Next.js middleware. You can access cookies from the NextRequest object and include them in your HTTP request headers. Here's a basic example:
import { NextRequest, NextResponse } from 'next/server'
import fetch from 'node-fetch'
export async function middleware(request: NextRequest) {
// Get cookies from the request
const cookies = request.cookies.getAll()
// Convert cookies to a string
const cookiesString = Object.entries(cookies)
.map(([name, value]) => `${name}=${value}`)
.join('; ')
// Make an HTTP request with cookies
const response = await fetch('<https://api.example.com/data',> {
headers: {
'Cookie': cookiesString
}
})
// Process the response...
return NextResponse.next()
}
In this example, request.cookies.getAll() is used to get all cookies from the request, and these cookies are then included in the 'Cookie' header of the HTTP request.
Please note that this is a simplified example and you might need to adjust it according to your specific needs and setup. For more detailed guidance, you might want to refer to the Next.js documentation on Middleware (https://nextjs.org/docs/middleware) and the Fetch API documentation (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) for making HTTP requests.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
craggy geyser
@balmy heron I get an error saying Cookies can only be modified in a Server Action or Route Handler
balmy heronBOT
Let me check the knowledge base for you. One moment! :books:
This error occurs when you're trying to modify cookies in a place where it's not allowed. In Next.js, you can only modify cookies in a Server Action or Route Handler.
Here's a brief explanation of each:
-
Server Action: These are functions that run on the server and can be called from the client. They are defined in your Next.js application and are prefixed with
'use server'. They can be used to handle form submissions, mutations, and other server-side operations. -
Route Handler: These are functions that handle requests to specific routes in your Next.js application. They are defined in the
pages/apidirectory and can handle different HTTP methods (GET, POST, etc.).
If you're trying to set a cookie in a server component (a React component prefixed with 'use server'), you'll get this error because it's not allowed. Server components are meant for rendering HTML on the server and cannot modify cookies.
Here's an example of how to set a cookie in a Server Action:
'use server'
import { cookies } from 'next/headers'
export async function setCookieServerAction(name: string, value: string) {
cookies().set(name, value)
}
And here's an example of how to set a cookie in a Route Handler:
import { NextResponse } from 'next/server'
export function handler(req, res) {
return NextResponse.next().cookie('name', 'value')
}
For more detailed information, you can refer to the Next.js documentation on cookies (https://nextjs.org/docs/app/api-reference/functions/cookies#cookiessetname-value-options) and the Next.js documentation on Server Actions (https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
craggy geyser
@balmy heron I was doing it in middleware
balmy heronBOT
Let me check the knowledge base for you. One moment! :books:
In Next.js, you can read cookies in middleware, but you cannot modify them (i.e., set or delete cookies). This is why you're seeing the error "Cookies can only be modified in a Server Action or Route Handler."
If you need to modify cookies based on the result of an HTTP request made in the middleware, you might need to adjust your approach. For example, you could make the HTTP request in the middleware, then pass the result to a Server Action or Route Handler where you can modify the cookies.
Here's an example of how you might do this:
// pages/_middleware.ts
import { NextRequest, NextResponse } from 'next/server'
import fetch from 'node-fetch'
export async function middleware(request: NextRequest) {
// Make an HTTP request
const apiResponse = await fetch('<https://api.example.com/data'>)
// Process the response...
// Pass the result to a Server Action or Route Handler
const newUrl = `/api/handleResponse?result=${apiResponse}`
return NextResponse.rewrite(newUrl)
}
// pages/api/handleResponse.ts
import { NextApiRequest, NextApiResponse } from 'next'
export default function handler(req: NextApiRequest, res: NextApiResponse) {
// Get the result from the query parameters
const result = req.query.result
// Set a cookie based on the result
res.setHeader('Set-Cookie', `result=${result}; Path=/; HttpOnly`)
res.status(200).json({ message: 'Cookie set' })
}
In this example, the middleware makes an HTTP request and then rewrites the request to a Route Handler (/api/handleResponse). The Route Handler then sets a cookie based on the result of the HTTP request.
Please note that this is a simplified example and you might need to adjust it according to your specific needs and setup. For more detailed guidance, you might want to refer to the Next.js documentation on Middleware (https://nextjs.org/docs/middleware) and the Next.js documentation on API Routes (https://nextjs.org/docs/api-routes/introduction).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
craggy geyser
@balmy heron how would I pass this to a server action
balmy heronBOT
Let me check the knowledge base for you. One moment! :books:
To pass the result of an HTTP request made in middleware to a Server Action, you could use a similar approach as with a Route Handler, but instead of rewriting the request to an API route, you would rewrite it to a page that uses a Server Action.
Here's an example of how you might do this:
// pages/_middleware.ts
import {{ NextRequest, NextResponse }} from 'next/server'
import fetch from 'node-fetch'
export async function middleware(request: NextRequest) {{
// Make an HTTP request
const apiResponse = await fetch('<https://api.example.com/data'>)
// Process the response...
// Pass the result to a Server Action
const newUrl = `/handleResponse?result=${{apiResponse}}`
return NextResponse.rewrite(newUrl)
}}
// pages/handleResponse.tsx
import {{ GetServerPropsContext }} from 'next'
export async function getServerProps(context: GetServerPropsContext) {{
// Get the result from the query parameters
const result = context.query.result
// Call a Server Action and pass the result
const response = await yourServerAction(result)
// Pass the response to your component as a prop
return {{ props: {{ response }} }}
}}
export default function HandleResponsePage({{ response }}) {{
// Render your component...
}}
In this example, the middleware makes an HTTP request and then rewrites the request to a page (/handleResponse). The getServerProps function in the page gets the result from the query parameters and passes it to a Server Action (yourServerAction). The response from the Server Action is then passed to the component as a prop.
Please note that this is a simplified example and you might need to adjust it according to your specific needs and setup. For more detailed guidance, you might want to refer to the Next.js documentation on Middleware (https://nextjs.org/docs/middleware), the Next.js documentation on Data Fetching (https://nextjs.org/docs/basic-features/data-fetching), and the Next.js documentation on Server Actions (https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
craggy geyser
@balmy heron how to do this in app router
balmy heronBOT
Let me check the knowledge base for you. One moment! :books:
In the App Router model of Next.js, you can use Server Actions to handle data fetching and mutations. However, the provided knowledge sources do not contain specific examples or instructions on how to pass data from middleware to a Server Action in the App Router model.
Generally, in the App Router model, you would define your Server Actions in your app directory and call them from your components or pages. However, the process of passing data from middleware to a Server Action might be more complex and could depend on various factors, such as the structure of your application and the specific requirements of your Server Action.
For more detailed guidance, you might want to refer to the Next.js documentation on the App Router (https://nextjs.org/docs/app) and the Next.js documentation on Server Actions (https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations). You might also find it helpful to consult other resources or the Next.js community for specific examples or tutorials.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
craggy geyser
@balmy heron can you show me how to pass data from middleware to route handler
balmy heronBOT
Let me check the knowledge base for you. One moment! :books:
In Next.js, you can pass data from middleware to a route handler by rewriting the request URL to include the data as query parameters. Here's a basic example:
// pages/_middleware.ts
import { NextRequest, NextResponse } from 'next/server'
import fetch from 'node-fetch'
export async function middleware(request: NextRequest) {
// Make an HTTP request
const apiResponse = await fetch('<https://api.example.com/data'>)
// Process the response...
// Pass the result to a Route Handler
const newUrl = `/api/handleResponse?result=${apiResponse}`
return NextResponse.rewrite(newUrl)
}
// pages/api/handleResponse.ts
import { NextApiRequest, NextApiResponse } from 'next'
export default function handler(req: NextApiRequest, res: NextApiResponse) {
// Get the result from the query parameters
const result = req.query.result
// Process the result...
res.status(200).json({ message: 'Result processed' })
}
In this example, the middleware makes an HTTP request and then rewrites the request to an API route (/api/handleResponse). The API route then gets the result from the query parameters and processes it.
Please note that this is a simplified example and you might need to adjust it according to your specific needs and setup. For more detailed guidance, you might want to refer to the Next.js documentation on Middleware (https://nextjs.org/docs/middleware) and the Next.js documentation on API Routes (https://nextjs.org/docs/api-routes/introduction).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
craggy geyser
@balmy heron please give me solution from app router
balmy heronBOT
Let me check the knowledge base for you. One moment! :books:
In the App Router model of Next.js, you can use Server Actions and Route Handlers to handle data fetching and mutations. However, the provided knowledge sources do not contain specific examples or instructions on how to pass data from middleware to a Server Action or Route Handler in the App Router model.
Generally, in the App Router model, you would define your Server Actions in your app directory and call them from your components or pages. However, the process of passing data from middleware to a Server Action or Route Handler might be more complex and could depend on various factors, such as the structure of your application and the specific requirements of your Server Action or Route Handler.
For more detailed guidance, you might want to refer to the Next.js documentation on the App Router (https://nextjs.org/docs/app) and the Next.js documentation on Server Actions (https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations). You might also find it helpful to consult other resources or the Next.js community for specific examples or tutorials.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
craggy geyser
@balmy heron import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
import { getRefreshToken } from "./utils/getCookie";
export async function middleware(request: NextRequest) {
if (request.cookies.has("refresh_token")) {
if (request.cookies.has("access_token")) {
return NextResponse.next();
}
const token = getRefreshToken()!;
try {
const res = await fetch(
${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/refresh,
{
method: "POST",
headers: {
"Content-Type": "application/json",
Cookie: token,
},
cache: "no-store",
},
);
// if (!res.ok) {
// throw new Error(
// `Status code: ${res.status}, Message: ${res.statusText}`,
// );
// }
const accessToken = res.headers
.getSetCookie()[0]
.split("access_token=")[1];
const accessTokenValue = accessToken.split("; ")[0];
const accessTokenMaxAge = accessToken.split("; ")[1].split("=")[1];
const response = NextResponse.next();
response.cookies.set({
name: "access_token",
value: accessTokenValue,
httpOnly: true,
maxAge: +accessTokenMaxAge,
path: "/",
secure: true,
});
return NextResponse.next(response);
} catch (error) {
throw error;
}
}
return NextResponse.next();
}
When I remove my access token, it seems to work first time to get a new access token, but 2nd time it gives me this error
TypeError: Cannot read properties of undefined (reading 'split')
balmy heronBOT
Let me check the knowledge base for you. One moment! :books:
The error message "TypeError: Cannot read properties of undefined (reading 'split')" typically occurs when you're trying to call the split method on a variable that is undefined.
In your code, you're calling split on accessToken:
const accessToken = res.headers
.getSetCookie()[0]
.split("access_token=")[1];
This error can occur if res.headers.getSetCookie()[0] is undefined, or if it doesn't contain the string "access_token=". If either of these conditions is true, then split("access_token=")[1] will be undefined, and when you try to call split on it again, you'll get the error.
To fix this issue, you could add some error checking to make sure that accessToken is not undefined before you try to split it:
const setCookieHeader = res.headers.getSetCookie()[0];
if (!setCookieHeader || !setCookieHeader.includes("access_token=")) {
throw new Error("Access token not found in Set-Cookie header");
}
const accessToken = setCookieHeader.split("access_token=")[1];
This code will throw an error if the Set-Cookie header is undefined or if it doesn't contain the string "access_token=", which should help you debug the issue.
Please note that this is a simplified example and you might need to adjust it according to your specific needs and setup. For more detailed guidance, you might want to refer to the Next.js documentation on Middleware (https://nextjs.org/docs/middleware) and the Fetch API documentation (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) for making HTTP requests.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
craggy geyser
@balmy heron the issue I'm running into is after 1st refresh of an expired access token, the response I get back from the fetch doesn't contain any cookie
first time I get new access token this is what I get from a getsetcookie
[
'access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Implc3NpY2Eud2lsbGlhbXNvbkBnbWFpbC5jb20iLCJzdWIiOiI2M2NiNzAwYS05Mjg1LTRjMTMtOTdhMi1jOTkzMDJhNzFmMmEiLCJpYXQiOjE3MjQzMDA4NTAsImV4cCI6MTcyNDMwMjY1MH0.7f3UC1cXibxdumh83CTWkagEfygZaL76VPVsxTJrptc; Max-Age=1800; Path=/; Expires=Thu, 22 Aug 2024 04:57:30 GMT; HttpOnly; Secure, refresh_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Implc3NpY2Eud2lsbGlhbXNvbkBnbWFpbC5jb20iLCJzdWIiOiI2M2NiNzAwYS05Mjg1LTRjMTMtOTdhMi1jOTkzMDJhNzFmMmEiLCJpYXQiOjE3MjQzMDA4NTAsImV4cCI6MTcyNDkwNTY1MH0.4KnhH7W-3ADnU1RsRhdWb6KbS4V8z5TuS-RyOdzxHFM; Max-Age=604800; Path=/; Expires=Thu, 29 Aug 2024 04:27:30 GMT; HttpOnly; Secure'
]
2nd time I get []
balmy heronBOT
Let me check the knowledge base for you. One moment! :books:
The issue you're experiencing might be due to the server not sending the Set-Cookie headers in the response after the first refresh of the access token. This could be because the server is configured to only issue a new access token once per refresh token, or because the server doesn't issue a new access token if the current one is still valid.
Here are a few things you could check:
-
Server Configuration: Check the server-side logic for refreshing the access token. Ensure that it's correctly set up to issue a new access token and refresh token each time the refresh endpoint is hit with a valid refresh token.
-
Request Headers: Ensure that you're correctly sending the refresh token in the headers of your request to the refresh endpoint. If the server doesn't receive a valid refresh token, it might not send back the
Set-Cookieheaders. -
Response Headers: Check the headers of the response from the server. If the
Set-Cookieheaders are not present, this indicates that the server didn't issue a new access token. -
Error Handling: Add error handling to your fetch request to catch and handle any errors that might occur. This could help you identify if something is going wrong with the request.
If you're still having trouble, you might want to reach out to the maintainers of the server or API you're using for more specific guidance.
Please note that without more specific information about your server setup and the exact request and response headers, it's difficult to provide a more precise answer. For more detailed guidance, you might want to refer to the Fetch API documentation (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) and the Next.js documentation on Middleware (https://nextjs.org/docs/middleware).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
craggy geyser
@balmy heron the api is fine. I am able to get multiple access tokens per refresh token when testing with swagger
balmy heronBOT
Let me check the knowledge base for you. One moment! :books:
If the API is working fine and you're able to get multiple access tokens per refresh token when testing with Swagger, then the issue might be with how the fetch request is being made in your middleware or how the response is being handled.
Here are a few things you could check:
-
Fetch Request: Ensure that you're correctly sending the refresh token in the headers of your fetch request. Also, make sure that the URL and other parameters of the fetch request match exactly what you're using in Swagger.
-
Handling the Fetch Response: Check how you're reading the
Set-Cookieheaders from the fetch response. Ensure that you're correctly parsing the headers and extracting the access token. -
Async/Await: Make sure you're correctly using async/await with your fetch request. If you're not waiting for the fetch request to complete before reading the response, this could cause issues.
-
Error Handling: Add error handling to your fetch request to catch and handle any errors that might occur. This could help you identify if something is going wrong with the request.
Here's an example of how you might structure your fetch request and handle the response:
try {
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/refresh`, {
method: "POST",
headers: {
"Content-Type": "application/json",
Cookie: token,
},
cache: "no-store",
});
if (!res.ok) {
throw new Error(`Status code: ${res.status}, Message: ${res.statusText}`);
}
const setCookieHeader = res.headers.get('Set-Cookie');
if (!setCookieHeader || !setCookieHeader.includes("access_token=")) {
throw new Error("Access token not found in Set-Cookie header");
}
const accessToken = setCookieHeader.split("access_token=")[1];
// Continue processing...
} catch (error) {
console.error(error);
}
This code includes error handling to catch any issues with the fetch request or the response headers.