Instructions for

On this page

Sign in to your SPA with the embedded Okta Sign-In Widget

Identity Engine
Instructions for

About using the Sign-In Widget with your SPA app

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 (opens new window), the Okta Apps API, or through the Admin Console with the following steps.

  1. In the Admin Console, go to Applications > Applications.

  2. Click Create App Integration.

  3. Select OIDC - OpenID Connect as the Sign-in method.

  4. Select Single-Page Application for the Application Type, and then click Next.

  5. 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.

      Note: If the Interaction Code checkbox doesn’t appear, the Interaction Code grant type isn’t enabled for your org. To enable it, go to Settings > Account > Embedded widget sign-in support. See Verify that the Interaction Code grant type is enabled.

    • 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.

  6. In the Assignments section, select Allow everyone in your organization to access, and click Save.

  7. In the General Settings section on the General tab, click Edit.

  8. 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.

  9. Click Save.

  10. Select the Sign On tab and scroll down to the User authentication section. New apps are automatically assigned the shared default authentication policy (opens new window). 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.

  11. For this use case, we want to use only the password factor. Click Edit and select the Password only preset policy (opens new window) to assign it to your app.

  12. Click Save.

    Note: Be sure to also update the password authenticator policy rule to not require any additional verification.

  13. 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.

    Note: If the Interaction Code checkbox doesn’t appear, the Interaction Code grant type isn’t enabled for your org. To enable it, go to Settings > Account > Embedded widget sign-in support. See Verify that the Interaction Code grant type is enabled.

  14. In the Security > API > Trusted Origins page, ensure that there is an entry for your sign-in redirect URI. See Enable CORS.

Okta org app integration configuration settings

You need two pieces of information from your org and app integration for your React app:

  • Client ID: From the General tab of your app integration, save the generated Client ID value.
  • Issuer: From the General tab of your app integration, save the Okta domain value. Use your Okta domain value for the issuer setting that represents the authorization server. Use https://${yourOktaDomain}/oauth2/default as the issuer for your app if you're using an Okta Developer Edition org. See Issuer configuration if you want to use another Okta custom authorization server.

Install the SDK

Load the Sign-In Widget

Basic sign-in flow

Run the sample application

Next steps

See also