Redirect/Log out flow

[virajvaitha1995]

Hey all

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.

[dawid.matuszczyk]

Hi @virajvaitha1995

Welcome back in the Auth0 Community!

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).

React Authentication By Example: Using React Router 6

React Router 6 Code Sample: Basic Authentication

Thanks
Dawid

[virajvaitha1995]

@dawid.matuszczyk

Welcome back in the Auth0 Community!

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.

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>