Redirect URL for email verification not working as expected

Help
1

Hi Team,

We have a react next.js application integrated with Auth0.

I ran into an issue where the RedirectURL that I provide in the verification email template does not work as expected.

The RedirectURL contains a route along with the base url, {base_url}/login/email
I observe the below behavior:

  1. If I click on verify email link the link opens in the new tab but it removes the query params that auth0 adds - (supportsignup=true&supportforgotpassword=true&email=man22%40shark.com&message=your%20email%20was%20verified.%20you%20can%20continue%20using%20the%20application.&success=true&code=success#)
    and the path /email/login and the url looks something like {base_URL}/#/inbox
    where inbox is the path that was there in mailbox url where I received the verify email.

I would want the redirectURL to work correctly and auth0 to redirect to {base_URL}/login/email.

Could you please suggest how to make this work?

2

Hi @manleen.bhatia ,

Welcome to the Community!

Please refer to below link and let us know if it helps:

Redirect URL doesn’t work

1 Like
3

Go to your Auth0 dashboard and navigate to Emails Auth Pipeline section.
Find the email template for email verification and click on it to edit.

Check that the RedirectURL in the email template is set correctly to base_url}/login/email
note: If your RedirectURL contains query parameters, make sure to encode it properly before using it in the email template.

Your client-side code should be correctly handles the URL parameters that Auth0 adds to the verification link.

You can use JavaScript to extract and handle the query parameters from the URL and then redirect the user to the desired {base_url}/login/email route with the necessary parameters.

Here’s a code example…

import { useEffect } from 'react';
import { useRouter } from 'next/router';

const VerifyEmailPage = () => {
  const router = useRouter();

  useEffect(() => {
    // Get the query parameters from the URL
    const queryParams = router.query;

    // Handle the query parameters as needed
    // For example, you can check for success=true or code=success to determine if the email verification was successful.

    // Redirect to the desired route with the query parameters preserved
    router.push('/login/email');
  }, []);

  return (
    <div>
      {/* Your verification email page content */}
    </div>
  );
};

export default VerifyEmailPage;

you can check that the RedirectURL works correctly and redirects the user to the desired {base_url}/login/email route with the necessary parameters. You can use this tool https://redirectchecker.com/ to get its detail chain and status.