Create an Okta app integration

On This Page

Before you can sign a user in, you need to create an Okta app integration that represents your single-page application.

  1. Sign in to your Okta organization with your administrator account.

    Go to Admin Console

  2. From the Admin Console side navigation, click Applications > Applications.

  3. Click Add Application and then Create New App.

  4. Pick Single-Page App (SPA) as the platform and click Create.

    Note: It is important to choose the appropriate application type for apps which are public clients. Failing to do so may result in Okta API endpoints attempting to verify an app's client secret, which public clients are not designed to have, hence breaking the sign-in or sign-out flow.

  5. Enter a name for your app integration (or leave the default value).

  6. Enter values for the Login redirect URI. This is the callback from Define a callback route. Add values for local development (for example, http://localhost:8080/login/callback) and production (for example, https://app.example.com/login/callback).

  1. Click Save to finish creating the Okta app integration.

  2. On the General tab, scroll to General Settings and click Edit.

  3. In the Allowed grant types, make sure that Authorization Code and Refresh Token are selected.

    This enables PKCE flow for your application and the ability to refresh the access token when it expires without prompting the user to reauthenticate. Refresh token rotation is automatically set as the default refresh token behavior.

    Refresh token rotation for SPA is an Early Access feature. You can enable an Early Access (Self-Service) feature for your org in the Settings > Features page inside the Admin Console.

    Note: The default number of seconds for the Grace period for token rotation is set to 30 seconds. You can change the value to any number between 0 and 60 seconds. After the refresh token is rotated, the previous token remains valid for this amount of time to allow clients to get the new token. Using a value of 0 indicates that there is no grace period.

Enable Trusted Origins

To reduce possible attack vectors, you need to explicitly define the Trusted Origins that can access the Okta API for your app integration. Cross-Origin Resource Sharing (CORS) allows JavaScript hosted on your website to make a request using XMLHttpRequest to the Okta API with the Okta session cookie. For instructions on setting trusted origins, see Grant cross-origin access to websites.

Note: You should only grant access to specific origins (websites) that you control and trust to access the Okta API.