This article provides instructions for redirecting users to a self-hosted sign-in widget for Recovery Token bootstrapping and password reset completion. It describes the steps to personalize the email template, include a reset password button, substitute the desired URL for user redirection, include the recoveryToken as a query parameter, configure the sign-in widget to initiate the recoveryToken, and customize the email template.

• Self-hosted Sign-In Widget
• Okta Classic Engine

The default email template's link may not direct to the desired application or include a recoveryToken.
 

The capability to personalize email templates may not be available for all organizations. If the option is not present in the Okta organization, kindly contact Support. To ensure the email template's link directs to the desired application, modifications must be made within Okta.

 

1. Log in to the Okta Admin Console, click on Customizations > Brands > Select a brand > Emails tab. Click on the Forgot Password email template. Click the Edit button in the code panel and find the Reset Password button:

   <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>
   
   

2. Substitute the desired URL for user redirection, including the recoveryToken as a query parameter. This will maintain the flow within the self-hosted widget.

<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>

3. It is imperative that the ${resetPasswordLink} macro remains present within the email template. Failure to do so will prevent the template from being saved. To conceal its appearance in the email, the macro may be placed within a div located at the bottom of the template, for example:

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

4. As instructed in the Widget documentation located at Okta Sign-in Widget on the Classic Engine, configure the Sign-In Widget to initiate the recoveryToken. In the provided example, the recoveryToken is included as a query parameter and can be extracted as such. A sample of the widget code is provided below for reference:

   <script>
   	const loginUrl = new URLSearchParams(window.location.search)
   	const recoveryToken = loginUrl.get('token');
   
   	var config = {
   		baseUrl: OKTA_DOMAIN
   	}
   
   	if (recoveryToken){
   		config.recoveryToken = recoveryToken
   	}
   
   	var oktaSignIn = new OktaSignIn(config); 
   
   	oktaSignIn.showSignIn()
       ...
   </script>