Auth0-NextJs SDK: Learn to redirect users to the same page post-logout using cookies

Hello Everyone! I have been working on a Next.js project that uses Auth0 to manage user flows securely. It has multiple sections and routes where users can log in or out. Currently, when users log out, they are redirected to the homepage. However, I want to modify this behaviour to redirect users to the exact same page or route from which they initiated the logout.

Do you think there is a simple and straightforward solution in the Auth0-Next.js SDK?

The answer is both YES AND NO!

Yes - It is simple if you have a default logout page, and want to redirect to the homepage.

No - If you have dynamic logout URLs.

With the Auth0-Next.js SDK, logout URLs must be specified in the Auth0 dashboard settings. Users can only be redirected to the URLs specified on the dashboard, and you will encounter errors if you attempt to redirect to any other page after logging out.

How did I manage to fix it?

Using a browser Cookies 🍪

Here are the steps I took:

1. When users click on the sign-out button, a new cookie(returnTo:"<Current page URL>") will be set on their browser.

2. I created a new redirect route (www.saseek.com/redirect) and added it to the allowed logout URL for the application in the Auth0 dashboard.

3. Auth0 will redirect users to the new redirect page upon successful logout and check whether the cookie is on their browser.

4. If the cookie is present, users will be redirected to the URL stored in that cookie and that cookie will be destroyed.

5. If it's not present, they will be redirected to the homepage.

6. I also added a loading indicator to display until the redirection is completed.

Actual Code implementation for reference

import React from 'react';
import Cookies from 'js-cookie'
import Loader from './Loader';

const LogoutRedirect = (props) => {
  React.useEffect(() => {
    const returnToCookie = Cookies.get('returnTo');
    Cookies.remove('returnTo', { domain: window.location.hostname });
    window.location.href = returnToCookie ? returnToCookie : '/';
  }, []);

  return <Loader loaderText='Redirecting...' />
};

export default LogoutRedirect;

And... that's it! Now I can redirect users to any page you want without any issues 🙌🏼

If you've reached this point, thank you very much. I hope that this article has been helpful to you and I'll see you all in the next.