Note: This document is only for Okta Classic Engine. If you are using Okta Identity Engine, see Sign in to SPA with embedded Widget. See Identify your Okta solution (opens new window) to determine your Okta version.
This guide will walk you through integrating authentication into a Vue app with Okta by performing these steps:
This guide is for @okta/okta-signin-widget
v5.7.3, @okta/okta-vue
v5.0.0 and @okta/okta-auth-js
v5.1.1.
Prerequisites
If you do not already have a Developer Edition Account, you can create one at https://developer.okta.com/signup/ (opens new window).
Add an OpenID Connect Client in Okta
- Sign in to the Okta Developer Dashboard, and select Create New App
- Choose Single Page App (SPA) as the platform, then populate your new OpenID Connect app with values similar to:
Setting | Value |
App Name | OpenId Connect App (must be unique) |
Login redirect URIs | http://localhost:8080/login/callback |
Logout redirect URIs | http://localhost:8080 |
Allowed grant types | Authorization Code |
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.
Note: CORS is automatically enabled for the granted login redirect URIs.
Create a Vue App
To quickly create a Vue app, we recommend the Vue CLI.
If you need more information, see the Vue CLI installation guide (opens new window).
Install Dependencies
A simple way to add authentication into a Vue app is using the Okta Sign-In Widget library. You can install it via npm
:
You'll also need @okta/okta-vue
for route protection and @okta/okta-auth-js
:
Create Okta Instances
Create a src/okta/index.js
file:
Make sure to replace the {...}
placeholders with values from your OIDC app on Okta.
Note: In Okta Sign-In Widget version 7 or later, Okta Identity Engine is enabled by default. If you're using version 7 or later and want to use Okta Classic Engine rather than Identity Engine, you need to specify useClassicEngine: true
in the configuration options (opens new window) passed into the new OktaSignIn()
call.
To provide a fully-featured and customizable sign-in experience, the Okta Sign-In Widget is available to handle User Lifecycle operations, MFA, and more. To render the Sign-In Widget in Vue, you must create a wrapper that allows us to treat it as a Vue component.
Create a src/components/Login.vue
file:
Create Routes
Some routes require authentication in order to render. Defining those routes is easy using Vue Router and @okta/okta-vue
. Let's take a look at what routes are needed for this example:
/
: A default page to handle basic control of the app. /profile
: A protected route to the current user's profile. /login
: Show the sign-in page. /login/callback
: A route to parse tokens after a redirect.
/ - index page
First, update src/App.vue
to provide links to navigate your app:
Next, create src/components/Home.vue
to welcome the user after they've signed in.
/profile
This route will only be visible to users with a valid accessToken
.
Create a new Profile
component at src/components/Profile.vue
:
/login
This route hosts the Sign-In Widget and redirects if the user is already logged in. If the user is coming from a protected page, they'll be redirected back to the page upon successful sign in.
You should have already created src/components/Login.vue
at the beginning of this guide.
/login/callback
The component for this route (LoginCallback) comes with @okta/okta-vue
. It handles token parsing, token storage, and redirecting to a protected page if one triggered the sign in.
Connect the Routes
This example is using Vue Router. Replace the code in src/router/index.js
with the following:
Replace the code in src/main.js
with the following:
Start your app
Finally, start your app:
Conclusion
You have now successfully authenticated with Okta! Now what? With a user's id_token
, you have basic claims for the user's identity. You can extend the set of claims by modifying the scopes
to retrieve custom information about the user. This includes locale
, address
, groups
, and more.