Reset Password Mail directs to Okta Widget

Hi,

We are using the Okta SignOn widget on our site. I’ve been able to customize the CSS on the primary auth and forgot password views. When the user clicks Reset Password, they get sent an email which takes them to Okta to reset their password.

I understand that I can customize the reset password email, and change the password href in the mail, but can I send it back to the Okta widget on our site and have it show the correct view?

Yup, you can definitely do this.

There are two parts to this strategy:
1 - Modify the email template to link to your site. Inside the template, you’ll find the button and its link configured here:

<td align="center" style="height:32px;padding-top:24px;padding-bottom:8px"> <a id="reset-password-link" href="${resetPasswordLink}" style="text-decoration:none"><span style="padding:9px 32px 7px 31px;border:1px solid;text-align:center;cursor:pointer;color:#fff;border-radius:3px;background-color:#44bc98;border-color:#328c71 #328c71 #2f856b;box-shadow:0 1px 0 #d8d8d8">Reset Password</span></a> </td>

In here, you will need to update the href to point to your widget and pass along the recoveryToken that was generated for the user. Example:
<td align="center" style="height:32px;padding-top:24px;padding-bottom:8px"> <a id="reset-password-link" href="http://localhost:8000?token=${recoveryToken}" style="text-decoration:none"><span style="padding:9px 32px 7px 31px;border:1px solid;text-align:center;cursor:pointer;color:#fff;border-radius:3px;background-color:#44bc98;border-color:#328c71 #328c71 #2f856b;box-shadow:0 1px 0 #d8d8d8">Reset Password</span></a> </td>

Note that you’ll find you cannot save the email template if the original {resetPasswordLink} is not present. You can simply include and then hide this in an HTML element elsewhere in the email. To get the token itself, you will use {recoveryToken} in place of ${resetPasswordLink}

2 - Set up your widget to bootstrap the token. The Widget allows you to bootstrap in a recovery token in order to have the widget open into the reset password flow immediately.

This is done by passing the recoveryToken from the email link into the widget config, as noted here. If you include it as a query parameter to your sign in page as I did, you can parse the url when the page loads and set it in the widget config.

.

Thanks andreaskouras.

We have different environments for development and QA. Is there a way to tell it which environment to point to?

unfortunately, no; modifying the email template in your Org will affect all users.

Thanks for getting back to me. :slight_smile: