From a3b602a1f61f6073478dbbfcec41a28522d3e916 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxt.com>
Date: Wed, 28 Aug 2024 23:42:34 +0200
Subject: [PATCH] fix: fetch session directly when ssr disabled

---
 playground/nuxt.config.ts                 |  1 +
 playground/pages/index.vue                |  8 ++++++++
 playground/pages/secret.vue               | 19 +++++++++++++++++++
 src/runtime/app/plugins/session.client.ts |  6 +++++-
 4 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 playground/pages/secret.vue

diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index a45afb94..3cafbd8e 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -1,4 +1,5 @@
 export default defineNuxtConfig({
+  // ssr: false,
   compatibilityDate: '2024-06-17',
   devServer: {
     host: '127.0.0.1',
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index 0440b6d3..4717a3c1 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -9,6 +9,14 @@
           ...
         </template>
       </AuthState>
+      <UButton
+        to="/secret"
+        class="mt-2"
+        variant="link"
+        :padded="false"
+      >
+        Secret page
+      </UButton>
     </UPageBody>
   </UPage>
 </template>
diff --git a/playground/pages/secret.vue b/playground/pages/secret.vue
new file mode 100644
index 00000000..90fa1603
--- /dev/null
+++ b/playground/pages/secret.vue
@@ -0,0 +1,19 @@
+<script setup>
+definePageMeta({
+  middleware() {
+    const { loggedIn } = useUserSession()
+    if (!loggedIn.value) {
+      return navigateTo('/')
+    }
+  },
+})
+</script>
+
+<template>
+  <div>
+    <h1>Secret</h1>
+    <NuxtLink to="/">
+      Home
+    </NuxtLink>
+  </div>
+</template>
diff --git a/src/runtime/app/plugins/session.client.ts b/src/runtime/app/plugins/session.client.ts
index 1dca9653..6844ff33 100644
--- a/src/runtime/app/plugins/session.client.ts
+++ b/src/runtime/app/plugins/session.client.ts
@@ -1,7 +1,11 @@
 import { defineNuxtPlugin, useUserSession } from '#imports'
 
 export default defineNuxtPlugin(async (nuxtApp) => {
-  if (!nuxtApp.payload.serverRendered || Boolean(nuxtApp.payload.prerenderedAt) || Boolean(nuxtApp.payload.isCached)) {
+  if (!nuxtApp.payload.serverRendered) {
+    await useUserSession().fetch()
+  }
+  else if (Boolean(nuxtApp.payload.prerenderedAt) || Boolean(nuxtApp.payload.isCached)) {
+    // To avoid hydration mismatch
     nuxtApp.hook('app:mounted', async () => {
       await useUserSession().fetch()
     })