Modifying sign in page

[figandbones]

Hi,

I’d like to modify the sign in page html by putting a ‘Forgot password?’ link after the password label:

This image is an example of what I’m trying to do.

I’m using Okta Identity Engine and code editor for a sign in page. On that page, there is a div with id ‘okta-login-container’, which causes Okta to insert the inputs and buttons when the page loads.

Is there a way for me to modify that html?

Thanks,
Diana

[akash-okta]

Hi there,

To modify the HTML of the Okta Hosted Sign-In Widget (SIW), you can subscribe to the afterRender event and implement DOM manipulation. The afterRender event enables you to perform actions after the widget has completed rendering. This hook allows you to customize the widget’s behavior or appearance based on the user’s context.

You can find the example here - GitHub - okta/okta-signin-widget: HTML/CSS/JS widget that provides out-of-the-box authentication UX for your organization's apps

[figandbones]

Thanks Akash,

I was able to add javascript to modify the HTML on the page using the afterRender event, after the oktaSignIn.renderEl call.