Note: This document is only for Okta Classic Engine. If you are using Okta Identity Engine, see Sign in to SPA with Auth JS. 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-auth-js
>= v5.0.0 and < 6.0.0, vue
3.
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 application with appropriate values for your app. For example:
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. Follow their guide (opens new window) or use the steps below.
Install Dependencies
A simple way to add authentication to a Vue app is using the Okta Auth JS library. You can install it via npm
:
If the Okta Sign-In Widget does not fit your needs, AuthJS provides lower-level access to User Lifecycle operations, MFA, and more. For this example, you'll create a simple username and password form without MFA.
Create src/components/About.vue
with the following HTML:
Create src/components/Dashboard.vue
. This page will only be viewable to authenticated folks.
Create a src/auth.js
file:
You'll need to replace {yourOktaDomain}
with your Okta domain in the previous code example. Replace {clientId}
with the client ID from the app you created in the beginning.
Change src/App.vue
to have the following code:
Add a src/components/Login.vue
to render your sign-in form:
To make the v-focus
directive on the email field work, modify app creation code in src/main.js
as follows:
Create Routes
Some routes require authentication in order to render. Let's take a look at what routes are needed for this example:
/
: The default landing page. /about
: A simple about page. /dashboard
: A route that's protected. /login
: The sign-in form. /logout
: A route to logout and redirect back to the default page.
Create src/router/index.js
with the following code.
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.