Reset Password Mail directs to Okta Widget

[TedOH]

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?

[andrea]

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 Okta requires this macro, ${resetPasswordLink} to be present in the email template in order to save it. You can handle this by simply putting it in a hidden html element:

<div style="display:none">${resetPasswordLink}</div>

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.

.

[TedOH]

Thanks andreaskouras.

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

[andrea]

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

[TedOH]

Thanks for getting back to me.

[lanewsa2022]

Hi @andrea:

Your reply to a question is over a year old, so my apologies!

I am using the free account, and I have a similar issue - the password reset redirects to the Okta page for that user and I am unable to edit the email template (presumably because it is locked out for free accounts).

However, as a general principle, I would hope that password resets would be permitted to redirect back to application pages even for free accounts. Is there any approach that you could suggest to allow me to do that?

Greatly appreciate any guidance that you can give.

BTW, it was ridiculously straightforward to set up using Flask and the Okta python modules. Okta needs to be commended for the simple way in which they have allowed OpenID Connect to be set up.

Regards.