Im new to auth0, and have a website that users log into.
It’s important on each page, i check if they are logged in otherwise force them to ‘/’ path. This is how i’ve impmented it succesfully, but is it correct/best practices?
if (user) {
return ( placeholder}
}
return (
router.push(‘/’)
)
}
This is how my web app checks if a user is logged in, otherwise it redirects. Am I doing this correctly? I cant find the documentation or explanation for this usecase, and just want to follow best practices.
Thank you for posting your question. Generally what you are looking for are protected routes. If the user is not logged <=> they don’t have permission to visit your page.
In terms of provided code snippet the few things that could make it “better” are:
Avoid Side Effects in Render:
Directly calling a redirect (like router.push('/')) in the body of a component can lead to unexpected behaviors and can be considered a side effect.
Instead, consider using React’s useEffect hook to handle side effects like redirection.
Error Handling: What happens if the redirection fails? Or what if there’s an error with the authentication state? It might be good to have some error handling in place.
I will leave for you a few code snippets that can help you follow the best practise (assuming you are using React).
Thanks so much for your response
I am using NextJS auth0, was a little difficult to follow examples as i am new to frontend.
If you get time, can you confirm the new code is inline with best practices.
Kind regards,
Viraj
const { user, error, isLoading } = useUser();
// Redirect if not authenticated
useEffect(() => {
if (!isLoading && !user) {
router.push('/');
}
}, [isLoading, user]);
// Show loading state
if (isLoading) return <div></div>;
// Show error state
if (error) return <div>{error.message}</div>;
// If user is authenticated
if (user) {
return (
<main>