Configure the SDK

You'll need two values from the Okta application and the Developer 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 — Find it on the Developer Console dashboard in the upper-right corner as the Org URL.

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
};

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.

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,
  scope: SCOPES.split(/\s+/),
});

With the configuration ready, initialize the SDK:

• Angular
• React
• Vue.js

Configure a Security component in your top-level component. This component provides the React.Context to make an authService object and an authState object available to child or descendant components.

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { Security } from '@okta/okta-react';

const config = {
  // Configuration here
};

const App = () => { 
  return (
    <Router>
      <Security {...config}>
        { /* App routes go here */ }
      </Security>
    </Router>
  );
};

export default App;

Next: Add a button to sign in