Merge pull request #5418 from okta/tbs-okta-922083-sign-in-spa-embedded-widget

Update sign in to SPA embedded SIW guide

Author: brentschaus-okta

packages/@okta/vuepress-site/docs/guides/sign-in-to-spa-embedded-widget/main/angular/create-app-integration.md

@@ -0,0 +1,37 @@
+Before you integrate Okta authentication in your app, register the app in your Okta org. This provides you with the OpenID Connect (OIDC) client ID for authentication requests from your app. Register your app by creating an app integration through the [Okta CLI](https://cli.okta.com/), the [Okta Apps API](https://developer.okta.com/docs/api/openapi/okta-management/management/tag/Application/), or through the [Admin Console](/docs/concepts/okta-organizations/#admin-console) using the following steps.
+
+1. In the Admin Console, go to **Applications** > **Applications**.
+1. Click **Create App Integration**.
+1. Select **OIDC - OpenID Connect** as the **Sign-in method**.
+1. Select **Single-Page Application** for the **Application Type**, and then click **Next**.
+1. On the **New Single-Page App Integration** page, enter the following information: 
+
+   * Enter an app name.
+   * Select the **Refresh Token** checkbox.
+   * Select **Advanced** in the **Grant type** section, and then select the **Interaction Code** checkbox.
+
+      <VerifyICGrantType />
+
+   * Set **Sign-in redirect URIs** to a URI that’s appropriate for your app. For example, `http://localhost:4200/login/callback` if you're using the sample app.
+   * Set **Sign-out redirect URIs** to a URI that’s appropriate for your app. For example, `http://localhost:4200` if you're using the sample app.
+
+1. In the **Assignments** section, select **Allow everyone in your organization to access**, and then click **Save**.
+1. In the **General Settings** section on the **General** tab, click **Edit**.
+1. Under **EMAIL VERIFICATION EXPERIENCE** set the **Callback URI** to a URI that’s appropriate for your app. For example, `http://localhost:4200/login/callback` if you're using the sample app.
+1. Click **Save**.
+
+1. Select the **Sign On** tab and scroll to the **User authentication** section. New apps are automatically assigned the shared default [authentication policy](https://help.okta.com/okta_help.htm?type=oie&id=ext-about-asop). This policy has a catch-all rule that allows a user access to the app using either one or two factors, depending on your org setup.
+1. For this use case, you want to use only the password factor. Click **Edit** and select the **Password only** [preset policy](https://help.okta.com/okta_help.htm?type=oie&id=ext-preset-auth-policies) to assign it to your app.
+1. Click **Save**.
+
+   > **Note:** Remember to [update the password authenticator policy rule](/docs/guides/oie-embedded-common-org-setup/nodejs/main/#update-the-password-authenticator-to-password-only) to not require any additional verification.
+
+1. Verify that the custom authorization server uses the **Interaction Code** grant type. 
+* Go to **Security** > **API** > **Authorization Servers**.
+* Select the **default** server. 
+* Edit the **Default Policy Rule**. 
+* Click **Advanced** in the **IF Grant type is** section and ensure that the **Interaction Code** checkbox is selected.
+
+   <VerifyICGrantType />
+
+1. On the **Security** > **API** > **Trusted Origins** page, ensure that there’s an entry for your sign-in redirect URI. See [Enable CORS](/docs/guides/enable-cors/).

packages/@okta/vuepress-site/docs/guides/sign-in-to-spa-embedded-widget/main/angular/load-app.md

@@ -19,7 +19,7 @@ To add or customize application styles, you need to update the `angular.json` co
  Run the following command. This replaces all existing styles, so you need to add any existing style files to this command.
 
 ```shell
-ng config projects.okta-signin-test.architect.build.options.styles '["src/styles.css", "./node_modules/@okta/okta-signin-widget/dist/css/okta-sign-in.min.css"]'
+ng config projects.okta-signin-test.architect.build.options.styles '["src/styles.css", "./node_modules/@okta/okta-signin-widget/css/okta-sign-in.min.css"]'
 ```
 
 #### Angular.json

packages/@okta/vuepress-site/docs/guides/sign-in-to-spa-embedded-widget/main/index.md

@@ -14,39 +14,7 @@ title: Sign in to your SPA with the embedded Okta Sign-In Widget
 
 ## Create an Okta app integration
 
-Before you integrate Okta authentication to your app, register your app in your Okta org. This provides you with the OpenID Connect client ID for authentication requests from your app. Register your app by creating an Okta app integration through the [Okta CLI](https://cli.okta.com/), the [Okta Apps API](https://developer.okta.com/docs/api/openapi/okta-management/management/tag/Application/), or through the [Admin Console](/docs/concepts/okta-organizations/#admin-console) with the following steps.
-
-1. In the Admin Console, go to **Applications** > **Applications**.
-1. Click **Create App Integration**.
-1. Select **OIDC - OpenID Connect** as the **Sign-in method**.
-1. Select **Single-Page Application** for the **Application Type**, and then click **Next**.
-1. On the **New Single-Page App Integration** page:
-
-   * Enter an application name.
-   * Select the **Refresh Token** checkbox.
-   * Select **Advanced** in the **Grant type** section, and then select the **Interaction Code** checkbox.
-
-      <VerifyICGrantType />
-
-   * Set **Sign-in redirect URIs** to a URI that is appropriate for your app. For example, `http://localhost:8080/login/callback` if you're using the sample app.
-   * Set **Sign-out redirect URIs** to a URI that is appropriate for your app. For example, `http://localhost:8080` if you're using the sample app.
-
-1. In the **Assignments** section, select **Allow everyone in your organization to access**, and click **Save**.
-1. In the **General Settings** section on the **General** tab, click **Edit**.
-1. Under **EMAIL VERIFICATION EXPERIENCE** set **Callback URI** to a URI that is appropriate for your app. For example, `http://localhost:8080/login/callback` if you're using the sample app.
-1. Click **Save**.
-
-1. Select the **Sign On** tab and scroll down to the **User authentication** section. New apps are automatically assigned the shared default [authentication policy](https://help.okta.com/okta_help.htm?type=oie&id=ext-about-asop). This policy has a catch-all rule that allows a user access to the app using either one or two factors, depending on your org setup.
-1. For this use case, we want to use only the password factor. Click **Edit** and select the **Password only** [preset policy](https://help.okta.com/okta_help.htm?type=oie&id=ext-preset-auth-policies) to assign it to your app.
-1. Click **Save**.
-
-   > **Note:** Be sure to also [update the password authenticator policy rule](/docs/guides/oie-embedded-common-org-setup/nodejs/main/#update-the-password-authenticator-to-password-only) to not require any additional verification.
-
-1. In the **Security** > **API** > **Authorization Servers** section, verify that the custom authorization server uses the Interaction Code grant type by selecting the **default** server, clicking **Access Policies**, and then editing the **Default Policy Rule**. Click **Advanced** in the **IF Grant type is** section to ensure that the **Interaction Code** checkbox is selected.
-
-   <VerifyICGrantType />
-
-1. In the **Security** > **API** > **Trusted Origins** page, ensure that there is an entry for your sign-in redirect URI. See [Enable CORS](/docs/guides/enable-cors/).
+<StackSnippet snippet="create-app-integration" />
 
 ### Okta org app integration configuration settings
 

packages/@okta/vuepress-site/docs/guides/sign-in-to-spa-embedded-widget/main/react/basic-sign-in.md

@@ -193,15 +193,15 @@ Rename the `src/index.js` file to `src/index.jsx` and edit the file to call the
 
 ```jsx
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { BrowserRouter as Router } from 'react-router-dom';
 import App from './App';
 
-ReactDOM.render(
+const root = createRoot(document.getElementById("root"))
+root.render(
   <Router>
     <App />
   </Router>,
-  document.getElementById('root'),
 );
 ```
 

packages/@okta/vuepress-site/docs/guides/sign-in-to-spa-embedded-widget/main/react/create-app-integration.md

@@ -0,0 +1,37 @@
+Before you integrate Okta authentication to your app, register your app in your Okta org. This provides you with the OpenID Connect client ID for authentication requests from your app. Register your app by creating an Okta app integration through the [Okta CLI](https://cli.okta.com/), the [Okta Apps API](https://developer.okta.com/docs/api/openapi/okta-management/management/tag/Application/), or through the [Admin Console](/docs/concepts/okta-organizations/#admin-console) with the following steps.
+
+1. In the Admin Console, go to **Applications** > **Applications**.
+1. Click **Create App Integration**.
+1. Select **OIDC - OpenID Connect** as the **Sign-in method**.
+1. Select **Single-Page Application** for the **Application Type**, and then click **Next**.
+1. On the **New Single-Page App Integration** page, enter the following information:
+
+   * Enter an app name.
+   * Select the **Refresh Token** checkbox.
+   * Select **Advanced** in the **Grant type** section, and then select the **Interaction Code** checkbox.
+
+      <VerifyICGrantType />
+
+   * Set **Sign-in redirect URIs** to a URI that’s appropriate for your app. For example, `http://localhost:3000/login/callback` if you're using the sample app.
+   * Set **Sign-out redirect URIs** to a URI that’s appropriate for your app. For example, `http://localhost:3000` if you're using the sample app.
+
+1. In the **Assignments** section, select **Allow everyone in your organization to access**, and then click **Save**.
+1. In the **General Settings** section on the **General** tab, click **Edit**.
+1. Under **EMAIL VERIFICATION EXPERIENCE**, set the **Callback URI** to a URI that’s appropriate for your app. For example, `http://localhost:3000/login/callback` if you're using the sample app.
+1. Click **Save**.
+
+1. Select the **Sign On** tab and scroll to the **User authentication** section. New apps are automatically assigned the shared default [authentication policy](https://help.okta.com/okta_help.htm?type=oie&id=ext-about-asop). This policy has a catch-all rule that allows a user access to the app using either one or two factors, depending on your org setup.
+1. For this use case, you want to use only the password factor. Click **Edit** and select the **Password only** [preset policy](https://help.okta.com/okta_help.htm?type=oie&id=ext-preset-auth-policies) to assign it to your app.
+1. Click **Save**.
+
+   > **Note:** Remember to [update the password authenticator policy rule](/docs/guides/oie-embedded-common-org-setup/nodejs/main/#update-the-password-authenticator-to-password-only) to not require any additional verification.
+
+1. Verify that the custom authorization server uses the **Interaction Code** grant type. 
+* Go to **Security** > **API** > **Authorization Servers**.
+* Select the **default** server. 
+* Edit the **Default Policy Rule**. 
+* Click **Advanced** in the **IF Grant type is** section and ensure that the **Interaction Code** checkbox is selected.
+
+   <VerifyICGrantType />
+
+1. In the **Security** > **API** > **Trusted Origins** page, ensure that there’s an entry for your sign-in redirect URI. See [Enable CORS](/docs/guides/enable-cors/).

packages/@okta/vuepress-site/docs/guides/sign-in-to-spa-embedded-widget/main/react/load-app.md

@@ -39,7 +39,7 @@ To render the Sign-In Widget in React, you must create a wrapper that allows you
 ```js
 import React, { useEffect, useRef } from 'react';
 import OktaSignIn from '@okta/okta-signin-widget';
-import '@okta/okta-signin-widget/dist/css/okta-sign-in.min.css';
+import '@okta/okta-signin-widget/css/okta-sign-in.min.css';
 import config from './config';
 
 const OktaSignInWidget = ({ onSuccess, onError }) => {

packages/@okta/vuepress-site/docs/guides/sign-in-to-spa-embedded-widget/main/vue/create-app-integration.md

@@ -0,0 +1,37 @@
+Before you integrate Okta authentication to your app, register your app in your Okta org. This provides you with the OpenID Connect client ID for authentication requests from your app. Register your app by creating an Okta app integration through the [Okta CLI](https://cli.okta.com/), the [Okta Apps API](https://developer.okta.com/docs/api/openapi/okta-management/management/tag/Application/), or through the [Admin Console](/docs/concepts/okta-organizations/#admin-console) with the following steps.
+
+1. In the Admin Console, go to **Applications** > **Applications**.
+1. Click **Create App Integration**.
+1. Select **OIDC - OpenID Connect** as the **Sign-in method**.
+1. Select **Single-Page Application** for the **Application Type**, and then click **Next**.
+1. On the **New Single-Page App Integration** page, enter the following information:
+
+   * Enter an app name.
+   * Select the **Refresh Token** checkbox.
+   * Select **Advanced** in the **Grant type** section, and then select the **Interaction Code** checkbox.
+
+      <VerifyICGrantType />
+
+   * Set **Sign-in redirect URIs** to a URI that’s appropriate for your app. For example, `http://localhost:8080/login/callback` if you're using the sample app.
+   * Set **Sign-out redirect URIs** to a URI that’s appropriate for your app. For example, `http://localhost:8080` if you're using the sample app.
+
+1. In the **Assignments** section, select **Allow everyone in your organization to access**, and then click **Save**.
+1. In the **General Settings** section on the **General** tab, click **Edit**.
+1. Under **EMAIL VERIFICATION EXPERIENCE** set the **Callback URI** to a URI that’s appropriate for your app. For example, `http://localhost:8080/login/callback` if you're using the sample app.
+1. Click **Save**.
+
+1. Select the **Sign On** tab and scroll down to the **User authentication** section. New apps are automatically assigned the shared default [authentication policy](https://help.okta.com/okta_help.htm?type=oie&id=ext-about-asop). This policy has a catch-all rule that allows a user access to the app using either one or two factors, depending on your org setup.
+1. For this use case, you want to use only the password factor. Click **Edit** and select the **Password only** [preset policy](https://help.okta.com/okta_help.htm?type=oie&id=ext-preset-auth-policies) to assign it to your app.
+1. Click **Save**.
+
+   > **Note:** Remember to [update the password authenticator policy rule](/docs/guides/oie-embedded-common-org-setup/nodejs/main/#update-the-password-authenticator-to-password-only) to not require any additional verification.
+
+1. Verify that the custom authorization server uses the **Interaction Code** grant type. 
+* Go to **Security** > **API** > **Authorization Servers**.
+* Select the **default** server. 
+* Edit the **Default Policy Rule**. 
+* Click **Advanced** in the **IF Grant type is** section and ensure that the **Interaction Code** checkbox is selected.
+
+   <VerifyICGrantType />
+
+1. In the **Security** > **API** > **Trusted Origins** page, ensure that there’s an entry for your sign-in redirect URI. See [Enable CORS](/docs/guides/enable-cors/).

packages/@okta/vuepress-site/docs/guides/sign-in-to-spa-embedded-widget/main/vue/load-app.md

@@ -68,7 +68,7 @@ To render the Sign-In Widget in Vue.js, you must create a wrapper that allows yo
 
 <script>
 import OktaSignIn from '@okta/okta-signin-widget'
-import '@okta/okta-signin-widget/dist/css/okta-sign-in.min.css'
+import '@okta/okta-signin-widget/css/okta-sign-in.min.css'
 
 import sampleConfig from '../config'