I am developing a web application that involves working with an external API alongside my team member. We are making API requests using Next.js. I have implemented nextAuth for authentication, but I am facing issues with token rotation. After successful login, the user receives an Access Token and Refresh Token from our backend. The Access Token expires in 10 minutes while the refresh token has a longer lifespan. I store the Access Token in the nextAuth session for app-wide access. Whenever the user makes an API request, I include the access token to facilitate the request using Axios. To handle expired Access Tokens, I have set up an axios interceptor to automatically request a new Access Token as long as the refresh token is valid. This process works well, generating new access and refresh tokens when needed. However, nextAuth still attaches the old and expired access token to the API requests, leading to request failures. I'm unsure about what I might be doing wrong as this is my first experience with Next.js. We are considering abandoning nextAuth in favor of implementing our custom solution. Our proposed approach involves obtaining the access token and refresh token, storing the refresh token in redis, passing the refresh token as an HTTP-only cookie, saving the user's sessionId in local storage for persistent login, storing the access token in-memory, and attaching it to every API call. We are uncertain if this alternative method is robust enough or if we should persist in trying to make nextAuth work. Your guidance on this matter would be greatly appreciated.
Here are snippets of some of my code:
`const authOptions: NextAuthOptions = {
session: {
strategy: "jwt",
},
providers:[
CredentialsProvider({
type: "credentials",
credentials: {},
async authorize(credentials, req){
const { username, password } = credentials as {
username: string;
password: string;
};
if(!credentials){
return null
}
const userData = {
username: username,
password: password
}
try {
const response = await axios.post(`${BASE_URL}/login`, userData);
if(response?.data){
const user: jwtDecodedAttributes = jwt_decode(response?.data?.userToken);
return {
id: user.userId,
name: user.username,
role: user.role,
profilepicture: user.profilepicture,
iat: user?.iat,
exp: user?.exp,
username: user?.username,
token: response?.data?.userToken,
email: user.email,
userId: user?.userId,
refresh: response?.data.userRefreshToken
};
}
} catch (error) {
}
return null
}
})
],
pages: {
signIn: "/login",
},
callbacks:{
async jwt({token, user, trigger, session}){
if (trigger === "update") {
return { ...token, ...session.user };
}
return {...token, ...user} ;
},
async session({session, token, user}){
session.user = token
return session
}
}
};
export default NextAuth(authOptions);`
The function to handle refreshing the token:
export const RefreshFunction = () => {
const { status, data, update } = useSession();
const refreshToken = async() => {
const getItem = localStorage.getItem('refresh');
const refreshData = {
refresh: getItem,
}
if(data?.user.refresh){
try {
const res = await axios.post<axiosGetRefreshTokenAttributes>(`${BASE_URL}/refresh`, refreshData);
const accessToken = res?.data?.userToken
const refreshToken = res?.data?.refreshToken
localStorage.removeItem('refresh');
if(data?.user){
await update({
...data,
user:{
...data?.user,
token: accessToken,
refresh: refreshToken
}
})
}
localStorage.setItem('refresh', refreshToken as string)
} catch (error) {
return error
}
}
}
return refreshToken
}; The Axios interceptor function:
const useAxiosPrivate = () => {
const { status, data } = useSession();
const refreshToken = RefreshFunction()
useEffect(() => {
const requestInterceptors = axiosPrivate.interceptors.request.use(
config => {
if(!config.headers['authorization']){
config.headers['authorization'] = `Bearer ${data?.user?.token}`
}
return config;
}, (error) => Promise.reject(error)
);
const responseIntercept = axiosPrivate.interceptors.response.use(
response => response,
async (error)=>{
const prevRequest = error?.config;
console.log(error.response.status, 'kkk')
if(error?.response.status === 401 && !prevRequest?.sent){
prevRequest.sent = true;
const token = await refreshToken()
prevRequest.headers['authorization'] = `Bearer ${token}`;
return axiosPrivate(prevRequest);
}
return Promise.reject(error);
}
);
return() =>{
axiosPrivate.interceptors.request.eject(requestInterceptors)
axiosPrivate.interceptors.response.eject(responseIntercept)
}
}, [data?.user?.token])
return axiosPrivate;
};
export default useAxiosPrivate;An example of an API call:
const { status, data } = useSession();
await axiosPrivate.post(`/createcompany`, companyData,
{withCredentials: true, headers: {Authorization: `
${data?.user.token}`}});
Despite the refresh endpoints successfully generating new access and refresh tokens upon expiry detection, the new access token fails to get attached to the nextAuth session. The error message indicates that my access token has expired, implying that the newly generated access token does not get properly linked.