Configure the SDK

You need two values from the Okta application and the Admin Console that you worked with in Create an Okta application:

  • Client ID — Find it in the applications list or on the application's General tab.
  • Okta domain — You can find the Okta Domain in the Admin Console's global header in the upper-right corner of the page. Click the section that displays your email and company name. A drop-down box appears and displays general org information including the full Okta domain (for example, subdomain.okta.com).

In your application code, build a config object. This is used to initialize the Okta services with the values specific to your application:

const config = {
  clientId: '{clientId}',
  issuer: 'https://${yourOktaDomain}/oauth2/default',
  redirectUri: 'http://localhost:8080/login/callback',
  scopes: ['openid', 'profile', 'email'],
  pkce: true
};

You can also build it from dynamic values like environment variables:

const OKTA_DOMAIN = process.env.DOMAIN;
const CLIENT_ID = process.env.CLIENT_ID;
const CALLBACK_PATH = '/login/callback';

const ISSUER = `https://${OKTA_DOMAIN}/oauth2/default`;
const HOST = window.location.host;
const REDIRECT_URI = `http://${HOST}${CALLBACK_PATH}`;
const SCOPES = 'openid profile email';

const config = {
  issuer: ISSUER,
  clientId: CLIENT_ID,
  redirectUri: REDIRECT_URI,
  scopes: SCOPES.split(/\s+/)
};

Note:

openid, profile, and email are reserved scopes in OpenID Connect that allow you to get access to user's data. You can read more about scopes here.

The issuer in the configuration above points to the default Custom Authorization Server, which is created by default with the Okta Developer Edition (opens new window) account. See Which Authorization Server should you use for more information on the types of Authorization Servers available to you and what you can use them for.

With the configuration ready, initialize the SDK:

Instructions for