Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

rename sample repo #1562

Merged
merged 1 commit into from
Feb 27, 2025
Merged

rename sample repo #1562

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions _source/_posts/2025-02-26-okta-hosted-sign-in-widget.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ github: https://github.com/oktadev/okta-js-sign-in-widget-customization-example
---
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.

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-js-sign-in-widget-customization-example) GitHub repository.
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-js-sign-in-widget-customization-example](https://github.com/oktadev/okta-js-sign-in-widget-customization-example) GitHub repository.

{:toc}

Expand Down Expand Up @@ -823,7 +823,7 @@ And that should be all! After you've added the necessary CSP information and hav
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).

## More ways to customize your sign-in page
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-js-sign-in-widget-customization-example) 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.
The manipulation and styling were only done for login and registration. You can check out the completed code in the [okta-js-sign-in-widget-customization-example](https://github.com/oktadev/okta-js-sign-in-widget-customization-example) 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.

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!

Expand Down
Loading