Sử dụng Axios interceptor để refresh token cho Next-Auth

Khá nhiều developers thích sủ dụng Next-Auth để authenticate cho dự án NextJs, và cũng không ít developers thích sự dụng Axios (một mình hoặc đi kèm thư viện như React-Query). Một ngày đẹp trời bạn nhận ra Next-Auth lưu data ở cookie vậy làm sao để hoạt động với thằng Axios nhỉ? Bài viết này mình sẽ hướng dẫn các bạn sử dụng cobo Next-Auth Axios (Tanstack React Query) để refresh token khi access token hết hạn.

Khi sử dụng Axios đi kèm với Next-Auth chúng ta cần xử lý được 2 phần: Đưa access token vào Header với request interceptor, refresh được token với response interceptor khi access token hết hạn. Next-Auth không hỗ trợ việc update session từ phía client mà ngoài componen nên đẹp nhất chúng ta sẽ tạo ra axios auth dưới dạng 1 hook.

Thiết lập ApiAuth Hook

Khởi tạo axios instance

Tạo file tại lib/api.ts

// lib/api.ts
import { API_URL } from "@/config/const";
import axios from "axios"; export const ApiAuth = axios.create({ baseURL: API_URL,
}); 

Giải thích: File này không có gì đáng nói các bạn nhớ linh hoạt API_URL nhé, đây là enpoint của backend

Api Auth Hook

Tạo file tại hooks/auth/useApiAuth.ts

// hooks/auth/useApiAuth.ts import { useSession } from "next-auth/react";
import { useEffect } from "react";
import { useRefreshToken } from "./useRefreshToken";
import { ApiAuth } from "@/lib/Api"; const useApiAuth = () => { const { data: session } = useSession(); const refreshToken = useRefreshToken(); useEffect(() => { const requestIntercept = ApiAuth.interceptors.request.use( (config) => { if (!config.headers["Authorization"]) { config.headers[ "Authorization" ] = `Bearer ${session?.tokens?.accessToken}`; } return config; }, (error) => Promise.reject(error) ); const responseIntercept = ApiAuth.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?.tokens.accessToken}`; return ApiAuth(prevRequest); } return Promise.reject(error); } ); return () => { ApiAuth.interceptors.request.eject(requestIntercept); ApiAuth.interceptors.response.eject(responseIntercept); }; }, [session, refreshToken]); return ApiAuth;
}; export default useApiAuth; 

Giải thích: Hook này thiết lập request interceptor cho axios với access token lấy từ Next-Auth session. Đối với response interceptor nếu nhận về response status 401 thì tiến hành refresh token và gọi lại request

Refresh Token Hook

Tạo file tại hooks/auth/useRefreshToken.ts

// hooks/auth/useRefreshToken.ts
import { Api } from "@/lib/Api";
import { signIn, useSession } from "next-auth/react"; export const useRefreshToken = () => { const { data: session } = useSession(); const refreshToken = async () => { // Gọi tới backend để lấy access token mới và trả về const res = await Api.post("/auth/refresh-token", { refreshToken: session?.tokens.refreshToken, }); if (session) session.tokens.accessToken = res.data.tokens.accessToken; else signIn(); }; return refreshToken;
};

Giải thích: useRefreshToken lấy thông tin refresh token trong Next-Auth session, gọi lên backend để lấy access token mới, cập nhật vào Next-Auth session, và trả về giá trị access token

Sử dụng

Thuần Axios

Lúc này useApiAuth() đã trở thành 1 hook các bạn có thể gọi trong component như bình thường. Ví dụ:

// component posts
import useAxiosAuth from "@lib/hooks/useAxiosAuth"; import { useSession } from "next-auth/react";
import { useState } from "react"; const Posts = () => { const [posts, setPosts] = useState(); const fetchPost = async () => { const res = await axiosAuth.get("/posts"); setPosts(res.data); }; useEffect(() => { fetchPost() }, []} return ( ... );
}; export default HomePage;

Với React Query

Tạo 1 hook kết hợp Api Auth và React Query

// hooks/post/useGetPost.ts
import { useMutation } from "@tanstack/react-query";
import useApiAuth from "@hooks/api/useApiAuth"; export const useGetPosts = () => { const apiAuth = useApiAuth(); return useQuery({ queryKey: ["getPosts"], queryFn: () => Api.get("/posts").then((res) => res.data), });
};

Sử dụng trong component

// component posts
import useGetPosts from "@hooks/post/useGetPost"; const Posts = () => { const { isLoading, data } = useGetPosts(); return ( ... );
};