NextAuth when refresh token
Unanswered
Thai posted this in #help-forum
ThaiOP
How to reassign the session after updating in useAxiosAuth. but it have problem session isn't update a new access_token when await refreshToken();. i want update session when access_token is expired. it always console.error('Token refresh failed:', error) and get 403 when old access_token is expired
this is useRefreshToken
export const useRefreshToken = () => {
const { data: session } = useSession();
const refreshToken = async () => {
try {
const res = await axios.post('/api/auth/refresh', {
refresh: session?.user.refresh_token,
});
if (session && res.data && res.data.access_token) {
session.user.access_token = res.data.access_token;
console.log('Access token refreshed:', res.data.access_token);
} else {
console.error(
'Token refresh failed. No access token found in response.'
);
}
} catch (error) {
console.error('Token refresh failed:', error);
// Handle errors appropriately (log, redirect, etc.)
}
};
return refreshToken;
};
this is useRefreshToken
export const useRefreshToken = () => {
const { data: session } = useSession();
const refreshToken = async () => {
try {
const res = await axios.post('/api/auth/refresh', {
refresh: session?.user.refresh_token,
});
if (session && res.data && res.data.access_token) {
session.user.access_token = res.data.access_token;
console.log('Access token refreshed:', res.data.access_token);
} else {
console.error(
'Token refresh failed. No access token found in response.'
);
}
} catch (error) {
console.error('Token refresh failed:', error);
// Handle errors appropriately (log, redirect, etc.)
}
};
return refreshToken;
};
1 Reply
ThaiOP
This is useAxiosAuth
const useAxiosAuth = () => {
const { data: session } = useSession();
const refreshToken = useRefreshToken();
useEffect(() => {
const requestIntercept = axiosAuth.interceptors.request.use(
(config) => {
if (!config.headers['Authorization']) {
config.headers[
'Authorization'
] =
console.log('Session:', session);
console.log('Access Token:', session?.user.access_token);
console.log('Refresh Token:', session?.user.refresh_token);
}
return config;
},
(error) => Promise.reject(error)
);
const responseIntercept = axiosAuth.interceptors.response.use(
(response) => response,
async (error) => {
const prevRequest = error?.config;
if (error?.response?.status === 401 && !prevRequest?.sent) {
prevRequest.sent = true;
await refreshToken();
prevRequest.headers[
'Authorization'
] =
console.log('access_token Token2:', session?.user.access_token);
console.log('Refresh Token2:', session?.user.refresh_token);
return axiosAuth(prevRequest);
}
return Promise.reject(error);
}
);
return () => {
axiosAuth.interceptors.request.eject(requestIntercept);
axiosAuth.interceptors.response.eject(responseIntercept);
};
}, [session, refreshToken]);
return axiosAuth;
};
export default useAxiosAuth;
const useAxiosAuth = () => {
const { data: session } = useSession();
const refreshToken = useRefreshToken();
useEffect(() => {
const requestIntercept = axiosAuth.interceptors.request.use(
(config) => {
if (!config.headers['Authorization']) {
config.headers[
'Authorization'
] =
Bearer ${session?.user?.access_token};console.log('Session:', session);
console.log('Access Token:', session?.user.access_token);
console.log('Refresh Token:', session?.user.refresh_token);
}
return config;
},
(error) => Promise.reject(error)
);
const responseIntercept = axiosAuth.interceptors.response.use(
(response) => response,
async (error) => {
const prevRequest = error?.config;
if (error?.response?.status === 401 && !prevRequest?.sent) {
prevRequest.sent = true;
await refreshToken();
prevRequest.headers[
'Authorization'
] =
Bearer ${session?.user.access_token};console.log('access_token Token2:', session?.user.access_token);
console.log('Refresh Token2:', session?.user.refresh_token);
return axiosAuth(prevRequest);
}
return Promise.reject(error);
}
);
return () => {
axiosAuth.interceptors.request.eject(requestIntercept);
axiosAuth.interceptors.response.eject(responseIntercept);
};
}, [session, refreshToken]);
return axiosAuth;
};
export default useAxiosAuth;