Hashan94
Reputation: 115
User is not redirecting to the dashboard after the keycloak login with Nuxt V2.17.3 and Nuxt Auth V5
I'm currently working on a bit old project with Nuxt V2.17.2. I need to integrate the login flow with Keycloak V21.1.2. But after user logged In using Keycloak, Its not redirecting to the dashboard page which I prefer to go.
These are the related packages
"@nuxtjs/auth-next": "5.0.0-1667386184.dfbbb54", "@nuxtjs/axios":"^5.13.6", "nuxt": "^2.17.2",
This is my current nuxt.config.js file
env: {
tenant: "admin_sa",
},
/*
** Nuxt rendering mode
** See https://nuxtjs.org/api/configuration-mode
*/
ssr: true,
/*
** Nuxt target
** See https://nuxtjs.org/api/configuration-target
*/
target: "server",
/*
** Headers of the page
** See https://nuxtjs.org/api/configuration-head
*/
plugins: [
"~/plugins/loader.js",
"~/plugins/notifier.js",
"~/plugins/svg-icon",
"~/plugins/axios",
"~/plugins/vuetifyImageInput",
"~/plugins/filter",
"~/plugins/birthdayPicker",
{ src: "~plugins/vue-quill-editor", ssr: false },
],
/*
** Auto import components
** See https://nuxtjs.org/api/configuration-components
*/
components: true,
/*
** Nuxt.js dev-modules
*/
buildModules: ["@nuxtjs/vuetify"],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
"@nuxtjs/axios",
"@nuxtjs/auth-next",
// "bootstrap-vue/nuxt",
"@nuxtjs/moment",
"@nuxtjs/svg",
"cookie-universal-nuxt",
"vue-currency-filter/nuxt",
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {
baseURL: `${process.env.API_HOST}/api/bff/user-mgt`,
// Used as fallback if no runtime config is provided
},
publicRuntimeConfig: {
apiHost: process.env.API_HOST,
realm: process.env.AUTH_REALM,
clientId: process.env.AUTH_CLIENT_ID,
redirectURL: process.env.REDIRECT_URL2,
logoutURL: `${process.env.API_HOST}/auth/realms/${process.env.AUTH_REALM}/protocol/openid-connect/logout?redirect_uri=${process.env.API_HOST}`,
userInfoURL: `${process.env.API_HOST}/auth/realms/${process.env.AUTH_REALM}/protocol/openid-connect/userinfo`,
},
auth: {
strategies: {
local: false,
keycloak: {
// scheme: '~/plugins/keycloak.js',
scheme: "oauth2",
endpoints: {
authorization: `${process.env.API_HOST}/auth/realms/${process.env.AUTH_REALM}/protocol/openid-connect/auth`,
token: `${process.env.API_HOST}/auth/realms/${process.env.AUTH_REALM}/protocol/openid-connect/token`,
userInfo: `${process.env.API_HOST}/auth/realms/${process.env.AUTH_REALM}/protocol/openid-connect/userinfo`,
logout: {
url:
`${process.env.API_HOST}/auth/realms/${process.env.AUTH_REALM}/protocol/openid-connect/logout?redirect_uri=` +
encodeURIComponent(String(process.env.REDIRECT_URL)),
method: "get",
},
},
token: {
property: "access_token",
type: "Bearer",
name: "Authorization",
maxAge: 1800,
global: true,
},
// refreshToken: {
// property: "refresh_token",
// maxAge: 60 * 60 * 24 * 30,
// },
clientId: `${process.env.AUTH_CLIENT_ID}`,
responseType: "code",
grantType: "authorization_code",
codeChallengeMethod: "S256",
scope: ["openid", "profile", "email"],
autoLogout: true,
},
},
redirect: {
login: "/login",
logout: "/login",
callback: "/callback",
home: "/admin/dashboard",
},
},
/*
** vuetify module configuration
** https://github.com/nuxt-community/vuetify-module
*/
server: {
port: 8080,
},
/*
** Build configuration
** See https://nuxtjs.org/api/configuration-build/
*/
build: {
babel: {
compact: true,
},
},
router: {
middleware: ["auth"],
},
};
This is my index.vue component
<template>
<div></div>
</template>
<script>
export default {
layout: "home",
created() {
this.$router.replace("admin/dashboard");
},
};
</script>
<style></style>
this is my login.vue component
<template>
<div>
<v-overlay opacity="0.1" :value="true">
<div class="ma-5 pa-5 mt-10">
<v-layout row wrap align-center>
<v-flex class="text-xs-center">
<v-row justify="center">
<img class="home-logo" src="~static/images/bank.png" />
<!-- <img class="home-logo" src="~static/images/logo-ekyc.png" /> -->
</v-row>
<loader-custom
:loading="true"
color="#3F5E9B"
width="10px"
height="40px"
></loader-custom>
</v-flex>
</v-layout>
</div>
</v-overlay>
</div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import LoaderCustom from "vue-spinner/src/ScaleLoader.vue";
export default {
layout: "home",
components: {
LoaderCustom,
},
async mounted() {
this.$auth.loginWith("keycloak");
},
};
</script>
<style>
.home-logo {
width: 300px;
}
.login-btn {
font-family: "CircularStd-Medium";
margin-top: 10px !important;
margin-bottom: auto !important;
background: #3f5e9b !important;
/* background: #6a6a6a !important; */
box-shadow: 0px 8px 15px #e7eaf0 !important;
border-radius: 12px !important;
opacity: 1 !important;
width: 250px !important;
height: 46px !important;
color: white !important;
}
</style>
This is my callback.vue
<template>
<div>
<v-overlay opacity="0.1" :value="true">
<div class="ma-5 pa-5 mt-10">
<v-layout row wrap align-center>
<v-flex class="text-xs-center">
<v-row justify="center">
<img class="home-logo" src="~static/images/bank.png" />
<!-- <img class="home-logo" src="~static/images/logo-ekyc.png" /> -->
</v-row>
<loader-custom
:loading="true"
color="#3F5E9B"
width="10px"
height="40px"
></loader-custom>
</v-flex>
</v-layout>
</div>
</v-overlay>
</div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import LoaderCustom from "vue-spinner/src/ScaleLoader.vue";
export default {
layout: "home",
// auth: false,
components: {
LoaderCustom,
},
mounted() {
console.log("Callback", this.$auth.loggedIn);
console.log("Callback", this.$store.state.auth.loggedIn);
},
};
</script>
<style>
.home-logo {
width: 300px;
}
</style>
this is my store/index.js file
export const state = () => ({
allowedPermissions: [],
loading: false,
userId: null,
});
export const getters = {
canBankMangement(state) {
return state.allowedPermissions.includes(PERMISSIONS.CAN_BANK);
},
sectionConfigManagement(state) {
return state.allowedPermissions.includes(PERMISSIONS.CAN_BANK);
},
};
export const mutations = {
SET_ALLOWED_PERMISSIONS(state, permissionsList) {
state.allowedPermissions = permissionsList;
},
SET_USERID(state, id) {
state.userId = id;
},
setLoader(state, bool) {
state.loading = bool;
},
};
export const actions = {
async nuxtServerInit({ commit }, { req ,app }) {
if (app.$auth.loggedIn) {
const userToken = await app.$auth.strategies.keycloak.token.get();
// const userToken = app.$auth.getToken("keycloak").split(" ")[1];
const {
realm_access: { roles: userRoles },
} = jwtDecode(userToken);
await commit("SET_USERID", jwtDecode(userToken).sub);
await commit("SET_ALLOWED_PERMISSIONS", userRoles);
}
},
};
After user loggedIn Goes to the callback page and then goes to the login page. This is looping though.
Upvotes: 0
Views: 58