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