Skip to content

Commit 983fdf5

Browse files
authored
Update 2025-02-24-okta-hosted-sign-in-widget.md
1 parent 2542c63 commit 983fdf5

File tree

1 file changed

+4
-4
lines changed

1 file changed

+4
-4
lines changed

_source/_posts/2025-02-24-okta-hosted-sign-in-widget.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ github: https://github.com/oktadev/okta-hosted-sign-in-widget
1616
---
1717
The Okta Sign-In Widget is a powerful tool that allows developers to integrate Okta authentication into their web applications seamlessly. But did you know you can also customize the widget's look and feel to match your application's design, even if hosted on Okta? Whether you want to modify colors, add custom branding, or adjust the layout, Okta provides flexibility to make the widget fit your brand's identity.
1818

19-
In this guide, we'll transform the Okta Hosted Sign-In Widget using standard Javascript and CSS and its built-in functionality.
19+
In this guide, we'll transform the Okta Hosted Sign-In Widget using standard Javascript and CSS and its built-in functionality. If you want to jump to the completed project, you can find it in the [okta-hosted-sign-in-widget](https://github.com/oktadev/okta-hosted-sign-in-widget) GitHub repository.
2020

2121
{:toc}
2222

@@ -820,10 +820,10 @@ CSP is located under the **Settings** tab on the **Sign-in page** section, **Cus
820820
And that should be all! After you've added the necessary CSP information and have previewed your sign-in page, you can now click the **Publish** button under the **Page Design** tab to see your changes live. If you copied/pasted everything correctly, you should now have a sign-in widget that looks and functions like the one showcased at the beginning of this tutorial.
821821

822822
## Troubleshooting your Okta hosted sign in widget
823-
Before publishing live to production, be sure to test it on your preview org or developer org first. To target specific elements/attributes, refer to this [Okta doc on modifying CSS](https://developer.okta.com/docs/guides/custom-widget/main/#modify-the-css).
823+
Before publishing live to production, test it on your preview or developer org first. To target specific elements/attributes, refer to this [Okta doc on modifying CSS](https://developer.okta.com/docs/guides/custom-widget/main/#modify-the-css).
824824

825825
## More ways to customize your sign-in page
826-
The manipulation and styling were only done for login and registration. As bonus practice, I suggest you try to modify the MFA screens. To recap what I have demonstrated, customizing the Okta Sign-In Widget allows you to make authentication an integrated part of your app's user experience. From simple color changes to more complex UI tweaks, Okta's flexibility allows you to maintain your brand's visual identity while ensuring a secure and seamless login process.
826+
The manipulation and styling were only done for login and registration. You can check out the completed code in the [okta-hosted-sign-in-widget](https://github.com/oktadev/okta-hosted-sign-in-widget) GitHub repository. As bonus practice, I suggest you try to modify the MFA screens. To recap what I have demonstrated, customizing the Okta Sign-In Widget allows you to make authentication an integrated part of your app's user experience. From simple color changes to more complex UI tweaks, Okta's flexibility allows you to maintain your brand's visual identity while ensuring a secure and seamless login process.
827827

828828
Check out the [Okta Sign-In Widget Guide](https://developer.okta.com/docs/guides/embedded-siw/main/) for more detailed documentation and advanced options. Happy customizing!
829829

@@ -833,4 +833,4 @@ For more examples of customizing the Okta Sign-In Widget check out these blogs a
833833
- [Style the Sign-In page](https://developer.okta.com/docs/guides/custom-widget/main/#modify-the-css)
834834
- [Awesome Login CSS Customization! (feat. Amy Kapers)](https://www.youtube.com/watch?v=Q__ugprsOWo)
835835

836-
And to learn more content on ways you can customize your app's login experience, follow us @OktaDev on [X](https://twitter.com/oktadev) and subscribe to our [YouTube channel](https://www.youtube.com/c/OktaDev/)! We also want to hear from you about topics you want to see and questions you may have so please leave us a comment below!
836+
And to learn more content on ways you can customize your app's login experience, follow us @OktaDev on [X](https://twitter.com/oktadev) and subscribe to our [YouTube channel](https://www.youtube.com/c/OktaDev/)! We also want to hear from you about topics you want to see and questions you may have, so please leave us a comment below!

0 commit comments

Comments
 (0)