Universal login reset password screen, get the user email

Get Help
1

Hi Guys,

In universal login implementation with ACUL, from a reset pwd link like this
https://mydomain.com.au/u/reset-verify?ticket=nOwD3C3UtSsdfasdfasAIuVu7qdc4K#

When a user lands on the reset-password/reset-password screen is there any way to get the user’s email address in the code to show on screen

3

Hi @Jojo.Jose,

Welcome to the Auth0 Community!

I understand that you are trying to obtain the user’s email address to show on the reset-password screen when using ACUL.

There is indeed a built-in way to retrieve the user’s email address on the reset-password screen using the Auth0 Universal Login React SDK (ACUL).

When a user lands on the password reset page from a /u/reset-verify?ticket=... link, Auth0 associates the transaction with the verified user’s context. You can retrieve this information directly in your code using either the useUser() hook or the useUntrustedData() hook.

You can find this information in our auth0-acul-react Screens Password - ResetPassword documentation.

Using the useUser() Hook would be the recommended approach.

Because the ticket verifies who the user is, Auth0 associates the validated user profile with the current transaction context. You can call the useUser() hook to retrieve the user’s verified email address securely using a code snippet similar to shown below:

import { useUser } from '@auth0/auth0-acul-react/reset-password';

export default function MyResetPasswordScreen() {
  const user = useUser(); // Pulls the verified user profile linked to the reset ticket

  return (
    <div>
      Email: {user?.email}
    </div>
  );
}

You could also use the useUntrustedData() Hook.

If the email is not bound to a verified ticket session but is instead being passed down via URL query strings or authorization parameters (such as login_hint), you can extract it using the useUntrustedData() hook, such as:

import { useUntrustedData } from '@auth0/auth0-acul-react/reset-password';

export default function ResetPasswordScreen() {
  const untrustedData = useUntrustedData();
  const email = untrustedData?.authorizationParams?.login_hint;

  return (
    <div>
      Email: {email}
    </div>
  );
}

In order to choose between these 2 options you can:

  • Use useUser() if you want the verified email associated with the reset ticket.

  • Use useUntrustedData() if you are manually passing the email as an unverified query parameter in the URL.

I hope this helps and let me know if you have other questions!
Best regards,
Remus