From 7f7b4b04d2f12da8f220b235e38ea78d4ba1aed7 Mon Sep 17 00:00:00 2001 From: Susan Harper Date: Tue, 25 Nov 2025 16:06:42 -0700 Subject: [PATCH 1/4] siw concept update --- .../docs/concepts/sign-in-widget/index.md | 61 ++++++++++--------- 1 file changed, 32 insertions(+), 29 deletions(-) diff --git a/packages/@okta/vuepress-site/docs/concepts/sign-in-widget/index.md b/packages/@okta/vuepress-site/docs/concepts/sign-in-widget/index.md index f61f3abd78f..18d333dd152 100644 --- a/packages/@okta/vuepress-site/docs/concepts/sign-in-widget/index.md +++ b/packages/@okta/vuepress-site/docs/concepts/sign-in-widget/index.md @@ -7,17 +7,17 @@ meta: # The Okta Sign-In Widget -The Sign-In Widget renders a user-friendly sign-in form for all aspects of the identity verification lifecycle, from initial registration to multifactor authentication and acts as the front door to your app or website. +The Sign-In Widget renders a user-friendly sign-in form for all aspects of the identity verification lifecycle, from initial registration to multifactor authentication. It acts as the front door to your app or website. + +
+ + ![Sign-In Widget](/img/siw/okta-sign-in-javascript.png) -
- - ![Sign-In Widget](/img/siw/okta-sign-in-javascript.png) -
-It's a JavaScript library that you can integrate in several ways to authenticate users into web and mobile apps for your org. It provides a complete, accessible, pre-built sign-in experience that you can use as is or customize based on your requirements. +The Sign-In Widget is a JavaScript library that you can integrate in several ways to authenticate users into web and mobile apps for your org. It provides a complete, accessible, pre-built sign-in experience that you can use as is or customize based on your requirements. -## Benefits +## Benefits * Improve productivity and reduce development overhead @@ -25,50 +25,53 @@ It's a JavaScript library that you can integrate in several ways to authenticate You can easily integrate it with your web or mobile app in any of the following ways: - * Redirect to a dedicated Okta-hosted page + * Redirect to a dedicated Okta-hosted page - * Load it using the Okta CDN + * Load it using the Okta CDN - * Install it as an npm module + * Install it as an npm module - Okta also provides SDKs for popular frameworks like Angular, React, and Vue, which further streamline the integration process. + Okta also provides SDKs for popular frameworks like Angular, React, and Vue, which further streamline the integration process. * Provide a centralized and consistent sign-in experience - You can customize the sign-in form's appearance using the code editor to seamlessly integrate with your brand. Customization options include your company logo, color schemes, favicon, the text for various labels and links, and the ability to add or modify supported languages. + You can customize the sign-in form's appearance using the code editor to seamlessly integrate with your brand. Customization options include your company logo, color schemes, favicon, the text for various labels and links, and the ability to add or modify supported languages. - You don't need to run a code deployment when you enforce security policies (password complexity, session duration, and MFA requirements) through the Admin Console. The changes are instantly reflected in the Sign-In Widget. + > **Note**: See the Okta GitHub repo that contains [Sign-In Widget customization examples](https://github.com/oktadev/okta-js-siw-customization-example) for different examples of how to customize the Okta-hosted Sign-In Widget for your brand. - You can let Okta host the Sign-In Widget or you can embed it in your code base. + You don't need to run a code deployment when you enforce security policies (password complexity, session duration, and MFA requirements) through the Admin Console. The changes are instantly reflected in the Sign-In Widget. + You can let Okta host the Sign-In Widget or you can embed it in your code base. -### Okta-hosted Sign-In Widget (recommended) +## Okta-hosted Sign-In Widget (recommended) -With this approach, the user is redirected to the Okta-hosted sign-in page. After they authenticate, they’re redirected back to your app or website. This minimizes the security risks associated with handling user credentials directly. You also get the speed of an out-of-the-box solution while retaining the power of Okta's centralized identity management platform. Okta-hosted Sign-In Widget is the recommended approach. +With this approach, the user is redirected to the Okta-hosted sign-in page. After they authenticate, they’re redirected back to your app or website. This minimizes the security risks associated with handling user credentials directly. You also get the speed of an out-of-the-box solution while retaining the power of the Okta centralized identity management platform. Okta-hosted Sign-In Widget is the recommended approach. Because Okta hosts the Sign-In Widget, Okta is responsible for its security and maintenance. This means that you don't have to keep it updated with the latest security patches and features. Okta handles this for you automatically. -You can customize the look and feel of the standard sign-in form directly from the Admin Console. This approach is best if you want a branded experience without needing to host the code yourself. You need to configure a custom domain to use the most advanced customization features. +You can customize the look and feel of the standard sign-in form directly from the Admin Console. This approach is best if you want a branded experience without needing to host the code yourself. Configure a custom domain to use the most advanced customization features. -#### Standard +### Standard Use the standard sign-in form hosted at your unique Okta URL for a no-code implementation. You can make the following customizations: - * Upload your own company logo, a background image, and a favicon - * Define a primary and secondary color palette - * Change the labels and text for various elements in the Sign-In Widget, such as headings, labels, and links. This includes customizing the **Username** field to specify what identifiers users can use, or adding a custom help link. +* Upload your own company logo, a background image, and a favicon +* Define a primary and secondary color palette +* Change the labels and text for various elements in the Sign-In Widget, such as headings, labels, and links. This includes customizing the **Username** field to specify what identifiers users can use, or adding a custom help link. + +The standard sign-in form also allows you to customize the sign-in experience for each app or website. For example, if you have multiple brands with distinct websites and domain names under a parent company, you can use distinct branding for each. You can also use distinct branding for each app that needs a different sign-in experience. See [Branding](https://help.okta.com/okta_help.htm?type=oie&id=ext-branding). -The standard sign-in form also allows you to customize the sign-in experience for each app or website. For example, if you have multiple brands with distinct websites and domain names under a parent company or you need a different sign-in experience for various apps, you can use distinct branding for each. See [Branding](https://help.okta.com/okta_help.htm?type=oie&id=ext-branding). +### Advanced -#### Advanced If you've configured a custom domain and need more control over the Sign-In Widget's appearance, use the built-in code editor. You can make more advanced changes to the HTML, CSS, and JavaScript of the sign-in form. -For the third-generation widget, you can use design tokens to customize elements like colors, fonts, borders, and spacing, ensuring consistency with your brand's style guide. See [Style the Sign-In Widget (third generation)](https://developer.okta.com/docs/guides/custom-widget-gen3/main/) or [Style for redirect authentication (second generation)](https://developer.okta.com/docs/guides/custom-widget/main/#style-the-okta-hosted-sign-in-widget). +For the third-generation widget, you can use design tokens to customize elements like colors, fonts, borders, and spacing. This ensures consistency with your brand's style guide. See [Style the Sign-In Widget (third generation)](https://developer.okta.com/docs/guides/custom-widget-gen3/main/) or [Style for redirect authentication (second generation)](https://developer.okta.com/docs/guides/custom-widget/main/#style-the-okta-hosted-sign-in-widget). +## Self-hosted Sign-In Widget -### Self-hosted Sign-In Widget +Embed the Sign-In Widget into your own code base to host the authentication client on your servers. Use this approach if you need the highest level of customization. -Embed the Sign-In Widget into your own code base to host the authentication client on your servers. Use this approach if you need the highest level of customization. Since the authentication client is hosted on your servers, security is a shared responsibility and you must update Sign-In Widget packages. You can specify the version of the Sign-In Widget to use, either by referencing it from a CDN or installing it locally through npm. This helps to manage updates and ensure stability. +Since the authentication client is hosted on your servers, security is a shared responsibility, and you must update Sign-In Widget packages. You can specify the version of the Sign-In Widget to use, either by referencing it from a CDN or installing it locally through npm. This helps to manage updates and ensure stability. When you initialize the Sign-In Widget in your code, you pass a configuration object. This object allows you to specify various options: @@ -82,8 +85,8 @@ See [Embedded Okta Sign-In Widget fundamentals](https://developer.okta.com/docs/ ## Related topics - [Okta Sign-In Widget](https://github.com/okta/okta-signin-widget) +* [Okta Sign-In Widget GitHub repo](https://github.com/okta/okta-signin-widget) - [Okta deployment models - redirect vs. embedded](https://developer.okta.com/docs/concepts/redirect-vs-embedded/) +* [Okta deployment models - redirect vs. embedded](/docs/concepts/redirect-vs-embedded/) - [Sign users in overview](https://developer.okta.com/docs/guides/sign-in-overview/main/) +* [Sign users in overview](/docs/guides/sign-in-overview/main/) From a55cc8965a1384459406c84c4a0aba19e7f8be09 Mon Sep 17 00:00:00 2001 From: Susan Harper Date: Tue, 25 Nov 2025 16:13:23 -0700 Subject: [PATCH 2/4] update after viewing locally --- .../@okta/vuepress-site/docs/concepts/sign-in-widget/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@okta/vuepress-site/docs/concepts/sign-in-widget/index.md b/packages/@okta/vuepress-site/docs/concepts/sign-in-widget/index.md index 18d333dd152..5a1c89d3998 100644 --- a/packages/@okta/vuepress-site/docs/concepts/sign-in-widget/index.md +++ b/packages/@okta/vuepress-site/docs/concepts/sign-in-widget/index.md @@ -37,7 +37,7 @@ The Sign-In Widget is a JavaScript library that you can integrate in several way You can customize the sign-in form's appearance using the code editor to seamlessly integrate with your brand. Customization options include your company logo, color schemes, favicon, the text for various labels and links, and the ability to add or modify supported languages. - > **Note**: See the Okta GitHub repo that contains [Sign-In Widget customization examples](https://github.com/oktadev/okta-js-siw-customization-example) for different examples of how to customize the Okta-hosted Sign-In Widget for your brand. + > **Note**: See the Okta GitHub repo that contains [Sign-In Widget customization examples](https://github.com/oktadev/okta-js-siw-customization-example) for different examples of how to customize the Okta-hosted Sign-In Widget for your brand. You don't need to run a code deployment when you enforce security policies (password complexity, session duration, and MFA requirements) through the Admin Console. The changes are instantly reflected in the Sign-In Widget. From 0c816ce1db225e9d66b3ea166365b44a6fbf57e7 Mon Sep 17 00:00:00 2001 From: Susan Harper Date: Wed, 26 Nov 2025 12:43:44 -0700 Subject: [PATCH 3/4] empty commit From f66284820b6cbe315c471f54f08da0e1afb21bde Mon Sep 17 00:00:00 2001 From: Susan Harper Date: Tue, 2 Dec 2025 10:40:00 -0700 Subject: [PATCH 4/4] commenting out stylesheet repo until it's done --- .../vuepress-site/docs/concepts/sign-in-widget/index.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/@okta/vuepress-site/docs/concepts/sign-in-widget/index.md b/packages/@okta/vuepress-site/docs/concepts/sign-in-widget/index.md index 5a1c89d3998..cf093a32d35 100644 --- a/packages/@okta/vuepress-site/docs/concepts/sign-in-widget/index.md +++ b/packages/@okta/vuepress-site/docs/concepts/sign-in-widget/index.md @@ -37,8 +37,7 @@ The Sign-In Widget is a JavaScript library that you can integrate in several way You can customize the sign-in form's appearance using the code editor to seamlessly integrate with your brand. Customization options include your company logo, color schemes, favicon, the text for various labels and links, and the ability to add or modify supported languages. - > **Note**: See the Okta GitHub repo that contains [Sign-In Widget customization examples](https://github.com/oktadev/okta-js-siw-customization-example) for different examples of how to customize the Okta-hosted Sign-In Widget for your brand. - + You don't need to run a code deployment when you enforce security policies (password complexity, session duration, and MFA requirements) through the Admin Console. The changes are instantly reflected in the Sign-In Widget. You can let Okta host the Sign-In Widget or you can embed it in your code base. @@ -85,8 +84,7 @@ See [Embedded Okta Sign-In Widget fundamentals](https://developer.okta.com/docs/ ## Related topics -* [Okta Sign-In Widget GitHub repo](https://github.com/okta/okta-signin-widget) - * [Okta deployment models - redirect vs. embedded](/docs/concepts/redirect-vs-embedded/) * [Sign users in overview](/docs/guides/sign-in-overview/main/) + \ No newline at end of file