You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 look and feel of the widget to match your application's design, even if the widget is 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.
16
+
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 it is 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.
17
17
18
-
In this guide, we'll transform the Okta-hosted widget using standard Javascript and CSS and its built-in functionality.
18
+
In this guide, we'll transform the Okta Hosted Sign-In Widget using standard Javascript and CSS and its built-in functionality.
{% img blog/okta-hosted-sign-in-widget/okta-hosted-sign-in-widget-after.gif alt:"animated gif of customized Okta hosted sign-in widget with sliding window effect for new signups" width:"800" %}{: .center-image }
28
+
{% img blog/okta-hosted-sign-in-widget/okta-hosted-sign-in-widget-after.gif alt:"animated gif of customized Okta Hosted Sign-In Widget with sliding window effect for new signups" width:"800" %}{: .center-image }
29
29
30
30
31
31
## Okta Sign-In Widget basics
32
-
Before diving into customization, let's go over a few basics. "Okta-hosted widget" means that when the user needs to authenticate, you redirect them from your application to Okta, and the sign-in screen that the user is presented with is hosted by Okta or on a custom domain. Hence, you can customize the widget and tailor code within Okta's Admin Console, which makes it very convenient for your developers.
32
+
Before diving into customization, let's go over a few basics. "Okta Hosted Sign-In Widget" means that when the user needs to authenticate, you redirect them from your application to Okta, and the sign-in screen that the user is presented with is hosted by Okta or on a custom domain. Hence, you can customize the widget and tailor code within Okta's Admin Console, which makes it very convenient for your developers.
33
33
34
34
**Prerequisites to this tutorial**
35
-
This guide assumes you already have a Single Sign-On (SSO) application that redirects to Okta for authentication. In addition, you already have a customized Okta-hosted widget with a [custom domain](https://help.okta.com/en-us/content/topics/settings/settings-configure-custom-url.htm) enabled to make the necessary edits I will be demonstrating in this tutorial. This tutorial doesn't use the Third-generation widget but uses the Sign-In Widget **version ^7** instead. And lastly, this guide assumes you have [Self-Service Registration (SSR)](https://support.okta.com/help/s/article/sign-up-link-missing-from-okta-login-page-during-sp-initiated-login?language=en_US) also enabled to handle user self-registration.
35
+
This guide assumes you already have:
36
+
- A Single Sign-On (SSO) application that redirects to Okta for authentication.
37
+
- A customized Okta Hosted Sign-In Widget with a [custom domain](https://help.okta.com/en-us/content/topics/settings/settings-configure-custom-url.htm) enabled to make the necessary edits that I will demonstrate in this tutorial.
38
+
- This tutorial uses the Sign-In Widget **version ^7**.
39
+
-[Self-Service Registration (SSR)](https://support.okta.com/help/s/article/sign-up-link-missing-from-okta-login-page-during-sp-initiated-login?language=en_US) enabled to handle user self-registration.
36
40
37
-
If you don't have the above setup just yet, you can test one of our [samples](https://github.com/okta-samples) with a free Developer Edition Account under (Sign up free for Developer Edition)[https://developer.okta.com/signup/].
41
+
If you don't have the above setup just yet, you can test one of our [samples](https://github.com/okta-samples) with a free Developer Edition Account under [Sign up free for Developer Edition](https://developer.okta.com/signup/).
38
42
39
43
>**Note:** You must use your work email address to sign up for a free developer account.
40
44
41
45
Within the samples, please refer to the ones labeled **Okta Hosted Login** or **Redirect Model**. For example, here is one in [React](https://github.com/okta-samples/okta-react-sample) and [Angular](https://github.com/okta-samples/okta-angular-quickstart). Each sample readme should have directions on creating an SSO application within Okta. Still, for more info, you can always refer to this page on [creating app integrations](https://help.okta.com/en-us/content/topics/apps/apps_app_integration_wizard_oidc.htm.). One last note, be sure you are using the correct authorization server for SSO and that is the [Okta Org Authorization Server](https://developer.okta.com/docs/concepts/auth-servers/#org-authorization-server).
42
46
43
-
For even more examples of how to get started with the Okta-hosted Sign-In Widget, check out this post, which walks you through the basic customizations and setting up a custom domain.
47
+
For even more examples of how to get started with the Sign-In Widget, check out this post, which walks you through the basic customizations and setting up a custom domain.
@@ -51,7 +55,7 @@ One of the easiest and basic ways to personalize the Okta Sign-In Widget is thro
51
55
We're not here to change the button color or simply slap a logo on the widget; we're here to learn how to slice and dice that widget so it dazzles and provides a better user experience. 🙂
52
56
53
57
We will accomplish this by utilizing standard Javascript and CSS.
54
-
If you use the Okta-hosted widget, you will find it under **Customizations** > **Brands** > **[your custom brand]** > **Pages** > **Sign-in** page. Click the **Configure** button and toggle the **Code editor** to **ON**. At this point, you should see some code appear like the one below:
58
+
If you use the Okta Hosted Sign-In Widget, you will find it under **Customizations** > **Brands** > **[your custom brand]** > **Pages** > **Sign-in** page. Click the **Configure** button and toggle the **Code editor** to **ON**. At this point, you should see some code appear like the one below:
55
59
56
60
{% raw %}
57
61
```html
@@ -122,13 +126,13 @@ Within the `<head>` section and below the following code,
insert the following code that points to the Font Awesome library, which is hosted on my AWS S3 bucket (you can use your own Font Awesome or any other library, but you would need to modify the code accordingly).
0 commit comments