Skip to content

Commit 5cea538

Browse files
authored
Update 2025-02-26-okta-hosted-sign-in-widget.md
1 parent 545ea64 commit 5cea538

File tree

1 file changed

+3
-3
lines changed

1 file changed

+3
-3
lines changed

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -646,7 +646,7 @@ Add the following code:
646646

647647
{% raw %}
648648
```html
649-
<!-- Let's add a reference to JQuery for easy object manipulation. You do not have to do this; you can use vanila JS instead -->
649+
<!-- Let's add a reference to jQuery for easy object manipulation. You do not have to do this; you can use vanila JS instead -->
650650
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
651651
<script type="text/javascript" nonce="{{nonceValue}}">
652652
/*****
@@ -819,15 +819,15 @@ CSP is located under the **Settings** tab on the **Sign-in page** section, **Cus
819819

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

822-
## Troubleshooting your Okta hosted sign in widget
822+
## Troubleshooting your Okta Hosted Sign-In Widget
823823
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
826826
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

830-
For more examples of customizing the Okta Sign-In Widget check out these blogs and resources:
830+
For more examples of customizing the Okta Sign-In Widget, check out these blogs and resources:
831831
- [A Secure and Themed Sign-in Page](blog/2023/01/12/signin-custom-domain#set-up-the-angular-micro-frontend-site-and-add-okta)
832832
- [i18n in Java 11, Spring Boot, and JavaScript](blog/2019/02/25/java-i18n-internationalization-localization)
833833
- [Style the Sign-In page](https://developer.okta.com/docs/guides/custom-widget/main/#modify-the-css)

0 commit comments

Comments
 (0)