Stretch Your Imagination and Build a Delightful Sign-In Experience

Summary

This tutorial shows how to customize the Okta-hosted Sign-In Widget (SIW) for a fictional to-do application while retaining Okta Identity Engine authentication flows. It covers configuring a custom domain and enabling SIW Gen3, then using brand settings, design tokens, custom CSS properties, and page code to change fonts, colors, layout, and background treatment. The implementation uses the widget’s afterTransform method and FormBag to revise the identify form, remove help, unlock, and divider elements, change the title, and add a custom blog link. It also explains the default HTML and JavaScript rendering configuration and describes updating an OpenID Connect application to use the brand’s custom sign-in URL as its issuer.

Takeaways

1. 1

   SIW Gen3 is required for the tutorial’s code, and the example organization uses SIW version 7.36.

2. 2

   The afterTransform hook targets the identify form through FormBag, changing the title, removing help, unlock, and divider elements, and adding a footer link.

3. 3

   A custom domain enables the code editor and broader page customization; the OIDC application must use the brand’s custom URL as its issuer.