so iam working on a CMS project using next14 as the front-end and python for the custom backend “backend colleague“
the backend takes credintials and send my 2 httponly cookies in response “access-token” 10 mins expiration ,”refresh-token” 10 days expiration.
i handled protected routes state using wrapper component wraps the root layout.tsx and with react-query hitting an endpoint that validates the token in the backend and returns boolean
export const AuthorizationProvider = ({
children,
}: {
children: React.ReactNode;
}) => {
const router = useRouter();
const pathname = usePathname();
const { data, isLoading } = useQuery({
queryKey: ["authorized"],
queryFn: authorized,
staleTime: 10 * 60 * 1000, //10 mins
});
if (isLoading) {
return <div>loading...</div>;
}
if (!data) {
router.push("/login");
} else if (pathname === "/login") {
router.push("/domain");
}
return <>{children}</>;
};
so whenever a user try to access protected route by changing the path in the URL the wrapper checks if true go ahead false go back to login.
the questions are:
- is this the right way to handle protected routes? and if not what to do?
- how to handle the refresh token the right way?
most tutorials on youtube handle refresh very easily as the backend is next api, which is not helping in my case.