Customizing Password Reset Email URL for Self-Hosted Flow Using Okta Auth SDK

We are currently using Okta’s self-hosted Forgot Password widget. When a user clicks the link in the password reset email, they are directed to an Okta-hosted page where they can update their password (self-service flow).

We are revamping this process and have created a dedicated page in our application for users to reset their password. This new page leverages the @okta/okta-auth-js SDK to handle password changes using the recovery token.

However, I’m struggling to update the password reset email to include a custom redirect URL. Specifically, I want the email to include a URL like this:

https://my-website.com/password/reset/{recovery_token}

Currently, I’m unable to configure Okta to generate the email with the desired URL structure. I encounter an error stating that either resetPasswordLink or otp needs to be used.

What configuration changes are required to modify the email’s reset URL so it embeds the recovery_token and redirects users to our custom password reset page?

If you haven’t already, you may want to try to add the required variable {resetPasswordLink} within a hidden div in your email template. That way you meet the requirement of including this variable within your email template, but not having it show up as a link clickable by end-users.

I will give this a try, and how can I make sure okta adds the recovery_token to the link to my website? Does it do it automatically? Is there a variable I have to append to my url?

Your sign in page will need to be able to detect the recoveryToken in the URL and then use that to bootstrap AuthJS.

If you’re using authn (useClassicEngine = true), you should be able to bootstrap the recoveryToken as in the example here: okta-auth-js/docs/authn.md at master · okta/okta-auth-js · GitHub

If you’re using IDX and implementing Email Magic Links, you would instead use the otp and state parameters sent back to your app, see okta-auth-js/docs/idx.md at master · okta/okta-auth-js · GitHub