Noob in authentication and having issue with nuxt auth cookie strategy.
My backend is golang, and I set cookie after successful login
http.SetCookie(w, &http.Cookie{
Name: "session_token",
Value: sessionToken,
Path: "/",
HttpOnly: true,
})
saw that there was issues with httpOnly, but this is not impacting my problem.
I have minimal configuration at the moment.
auth: {
strategies: {
cookie: {
endpoints: {
login: { url: "/api/auth/login", method: "post" },
logout: false, // will be implemented
user: false, // will be implemented
},
},
},
},
My issue is that I set session cookie, which means that it is unset after browser is closed (at least that's how I understand it). But it seems that nuxt doesn't care if there is cookie or not.
Log in works fine - I get loggedIn: true. But when cookie is deleted (after browser close) I am still loged in.
if ssr: true I also get this error:
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
and site hangs.
Is there a way to log out a user when cookie is not present? Or I should rethink my approach?
Tried other config options, like token.required:true etc. Also changing cookie token name with prefixes auth.. But nothing seems to help.
EDIT: this is my code for auth:
<template>
<div class="layout">
<form @submit.prevent="userLogin">
<div>
<label>Email</label>
<input type="email" v-model="login.email" />
</div>
<div>
<label>Password</label>
<input type="password" v-model="login.password" />
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
</div>
</template>
<script>
export default {
data() {
return {
login: {
email: "",
password: "",
},
};
},
methods: {
async userLogin() {
try {
let response = await this.$auth.loginWith("cookie", {
data: this.login,
});
console.log(response);
this.$router.push("secret");
} catch (err) {
console.log(err);
}
},
},
};
</script>
In header part I have:
...
<nuxt-link
v-bind:class="{ active: routeName === 'secret' }"
class="link"
to="/secret"
v-if="isAuthenticated"
>Secret</nuxt-link
>
</nav>
<div class="auth">
<div v-if="isAuthenticated">
<a class="link" @click="logout">Logout</a>
</div>
<div v-else>
<nuxt-link
v-bind:class="{ active: routeName === 'register' }"
class="link"
to="/register"
>Register</nuxt-link
>
<nuxt-link class="button" to="/login">Login</nuxt-link>
</div>
</div>
...
<script>
import { mapGetters } from "vuex";
export default {
...
computed: {
...
...mapGetters(["isAuthenticated", "loggedInUser"]),
},
};
</script>
SECOND EDIT:
changed my config to try other variants and probably leaving session cookies behind.
auth: {
// cookie: false,
strategies: {
local: {
token: {
// property: 'session_token',
// global: true,
required: false,
type: false
},
endpoints: {
login: { url: "/api/auth/login", method: "post" },
logout: false,
user: false,
},
},
},
},
but I'm still getting The client-side rendered virtual DOM tree is not matching server-rendered content. When I close and reopen browser. Noticed that this appears only when I have code with v-if="$auth.loggedIn" or v-if="isAuthenticated". Am I doing something wrong? If I wrap it with <client-only> tag it solves the warning, but seems like a hack.
