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

First, pass the configuration to the Auth handler from the okta-vue package. Use the router.beforeEach() call to instruct Vue to check the authorization permissions before rendering a route.

// router/index.js

import Vue from 'vue'
import Auth from '@okta/okta-vue'
import Router from 'vue-router'

const config = { 
  // Configuration here
}

Vue.use(Auth, {...config})

// router configuration from previous section here

router.beforeEach(Vue.prototype.$auth.authRedirectGuard()) // Add this

Vue.use(Router)

export default router

Then, create your top-level component and have it render the components of the current route. Set an 'authenticated' property on this top-level component that lower components can read.

// App.vue

<template>
  <div>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'app',
  data: function () {
    return { authenticated: false }
  },
  created () { this.isAuthenticated() },
  watch: {
    // Everytime the route changes, check for auth status
    '$route': 'isAuthenticated'
  },
  methods: {
    async isAuthenticated () {
      this.authenticated = await this.$auth.isAuthenticated()
    }
  }
}
</script>

export default App;

Next: Add a button to sign in