how to add okta api to vuejs
- Install Okta Vue SDK:
npm install @okta/okta-vue
- Set up an Okta application:
a. Log in to your Okta Developer account.
b. Navigate to the Applications tab and click "Add Application."
c. Choose "Single-Page App" and click "Next."
d. Configure your app settings and click "Done."
e. Note down the Client ID and Issuer values.
- Configure Okta in your Vue app:
a. Open src/main.js and import the Okta library and configuration:
```javascript import { createApp } from 'vue'; import { OktaAuth } from '@okta/okta-vue';
const oktaAuth = new OktaAuth({ issuer: 'your-issuer-url', clientId: 'your-client-id', redirectUri: window.location.origin + '/login/callback', }); ```
b. Add OktaAuth to your app instance:
javascript
const app = createApp(App);
app.use(OktaAuth, { oktaAuth });
- Create a login page:
a. Create a new component, e.g., Login.vue.
b. Implement the login functionality using the OktaAuth instance:
```javascript
```
- Create a callback page:
a. Create a new component, e.g., LoginCallback.vue.
b. Handle the callback logic:
```javascript
Loading...
```
- Secure your routes:
a. Open your router file, e.g., src/router/index.js.
b. Add a meta field to secure routes:
javascript
const routes = [
{
path: '/',
component: Home,
meta: {
requiresAuth: true,
},
},
// other routes
];
c. Add a global navigation guard:
javascript
router.beforeEach(async (to, from, next) => {
if (to.matched.some((record) => record.meta.requiresAuth)) {
if (!(await oktaAuth.isAuthenticated())) {
// Redirect to the login page
return oktaAuth.signInWithRedirect();
}
}
next();
});
- Test your application:
a. Start your Vue app:
bash
npm run serve
b. Open your browser and navigate to http://localhost:8080.
That's it! Your Vue.js app should now be integrated with the Okta API for authentication.