I just started learning NuxtJS and I want to implement authentication by auth module for Nuxt. I don't know why, but login with loginWith seems working, on vue files I can get data about logged user and loggedIn variable has true value. But I noticed when I set middleware from auth module, even if I'm logged in, server is redirecting always to login endpoint. I saw that I can make my middleware file, but there loggedIn has value false, so I can't be redirected correctly.
index.vue
<template>
<div id="main-page">
<panel />
</div>
</template>
<script>
import panel from "~/components/Panel.vue"
export default {
middleware: ['authenticated'],
'components': {
panel
},
};
</script>
My login component:
<template>
<div id="form-wrapper">
<b-form-group
class="ml-3 mr-5"
label="Username"
label-for="id-username"
:invalid-feedback="invalidFeedback"
:state='state'
>
<b-form-input id="id-username" v-model="username" type="text" placeholder="elo"></b-form-input>
</b-form-group>
<b-form-group
class="ml-3 mr-5"
label="Password"
label-for="id-password"
:invalid-feedback="invalidFeedbackPass"
:state='statePass'
>
<b-form-input id="id-password" v-model="password" type="password"></b-form-input>
</b-form-group>
<b-button v-b-modal.login-modal class="ml-3 mr-5" variant="outline-success">Login</b-button>
<div v-if="$auth.loggedIn">{{ $auth.loggedIn }}</div> // here is true after login
<b-modal ref="login-modal" id="login-modal" hide-footer hide-header>
<p>Login: {{ username }} Hasło: {{ password }}</p>
<b-button @click="loginUser({username, password})">Send</b-button>
</b-modal>
</div>
</template>
<script>
import "bootstrap-vue"
import axios from "axios"
export default {
name: "loginForm",
data() {
return{
username: '',
password: '',
}
},
props: {
},
methods: {
async loginUser(loginInfo){
try {
await this.$auth.loginWith('local', {
data: loginInfo
});
} catch (e) {
this.$router.push('/');
}
}
},
...
</script>
nuxt.config.js for auth
auth: {
strategies: {
local: {
endpoints: {
login: { url: '/auth/token/login/', method: 'post', propertyName: 'auth_token' },
logout: { url: '/auth/token/logout/', method: 'post' },
user: { url: '/auth/users/me/', method: 'get', propertyName: false }
},
tokenRequired: true,
tokenType: 'Token',
tokenName: 'Authorization'
}
},
redirect: {
login: "/",
logout: "/",
home: "/home"
},
},
autenticated.js in middleware
export default function ({ store, redirect }) {
console.log(store.state.auth.loggedIn); // here returns false, even after success login
if (store.state.auth.loggedIn) {
return redirect('/home')
}
}
Worth to mention is that, it's running on docker. Maybe that's a problem.
UPDATE I changed nuxt mode from SSR to SPA and now everything works from nuxt auth module.
But I want to that works on SSR, so if someone have solution, please share.