Hi, I’m using Okta custom login with widget & VueJS. I followed all the demo apps and my application successfully authenticate. The issue I’m having is, after successful login, the page gets redirected to “/implicit/callback” and then to home “/”.
Question
How do I specify after successful callback to redirect to the specific page eg “/secured” or handle this event?
In my app.vue
I was trying to use Callback & Authenticated
which redirects to the secured
page and I can see console.log but the straight after bounce back to home?
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()
if (this.$route.name === 'callback' && this.authenticated) {
console.log('Callback & Authenticated')
console.log(this.$route)
// Navigate to the projects page
this.$router.push({
name: 'secured'
})
}
},
async login() {
this.$auth.loginRedirect('/')
},
async logout() {
await this.$auth.logout()
await this.isAuthenticated()
// Navigate back to home
this.$router.push({ path: '/' })
}
}
}
</script>
router.vue
import Vue from 'vue'
import Router from 'vue-router'
import AppConfig from '@/config/config'
import Home from './views/home/Home.vue'
import SignIn from './views/signin/SignIn.vue'
import Secured from './views/secured/Secured.vue'
import Auth from '@okta/okta-vue'
Vue.use(Router)
Vue.use(Auth, AppConfig.oidc)
const router = new Router({
mode: 'history',
routes: [{
path: '*',
redirect: {
name: 'home',
}
},
{
path: '/',
name: 'home',
component: Home
},
{
path: '/sign-in',
name: 'sign-in',
component: SignIn
},
{
path: '/secured',
name: 'secured',
component: Secured,
meta: {
requiresAuth: true
}
},
{
path: "/implicit/callback",
name: 'callback',
component: Auth.handleCallback()
}
]
})
// Okta Authentication Redirect
const onAuthRequired = async (from, to, next) => {
(from.matched.some(record => record.meta.requiresAuth) && !(await Vue.prototype.$auth.isAuthenticated())) ? next({
path: "/sign-in"
}) : next()
}
router.beforeEach(onAuthRequired);
export default router;
secured.vue
<template>
<h1>Secured</h1>
</template>
<script>
import AppConfig from '@/config/config'
export default {
name: 'Secured',
created() {
console.log('Secured')
},
}
</script>