CODEWITHSUNDEEP
reactjsauth0
wuiiz93
wuiiz93

Reputation: 131

auth0 universal reset password page, React

I was hoping to direct a user to the Password Reset Page of the Auth0 Universal Login Page, I assumed Auth0 would handle the required functionality, in a similar way we use

const { loginWithRedirect } = useAuth0()

I know I can call loginWithRedirect() and then click on forgot password, however that takes 2 clicks and I want my Change Password button to immediately redirect me. Is there no trick like loginWithRedirect({ action: 'signup' })} which redirects me instantly to the signup form?

I know about sending a POST call to the Authentication API, I want to do this via the Universal Login Page.

Upvotes: 1

Views: 2403

Answers (2)

Ryan.Bartsch
Ryan.Bartsch

Reputation: 4190

Not sure if it's useful, but I'll explain how we deal with password reset (using Auth0) at the company I work for, which might push you in a slightly different direction.

First thing to understand is; there's 2 places where a user might need/want to reset their password.

  1. When they're signing in with their email/username and password, but have forgotten their password.
  2. They want to proactively change their password after they've already signed in.

In both scenarios we simply call an Auth0 authentication API to Change Password, which sends a change password email to the user. Note: for the #1 we might need to capture the email/username (that is, if we don't yet have this information), as this is required for the Change Password request. For #2 we should already have this information either in ID token or via the /userinfo endpoint (see here).

The change password email (which can be templated in Auth0) has a link to the Universal Login "Password Reset" widget. You can use the default widget, which offers some basic styling/branding. Alternatively you can fully customize this with your own SPA e.g. see below:

enter image description here

The default (non branded/styled) password reset widget looks like this: enter image description here

Upvotes: 1

jperl
jperl

Reputation: 5112

I have come to the conclusion that this still wasn't possible.

There's a property screen_hint that we can pass to

auth0.loginWithRedirect({ screen_hint: "signup" })

So it would have been great to be able to do this:

auth0.loginWithRedirect({ screen_hint: "password-reset" })

This question has already been asked here

And the answer was

Unfortunately this is not currently possible. The only options are to open with the login page or the sign-up page. This is a limitation with the Universal Login Page rather than this SDK, it simply doesn't allow for opening other screens as the default for the moment.

In the end, what we did was to provide a link, which when clicked on, would make a call to the API.

Upvotes: 1

Related Questions