Fix authentication hydration issue (#1048)

* Fix authentication hydration issue

* reset existing cookies

* Update if statement chaining

composables/auth.js

@@ -20,10 +20,10 @@ export const initAuth = async (oldToken = null) => {
   }
   const route = useRoute()
   const authCookie = useCookie('auth-token', {
+    maxAge: 60 * 60 * 24 * 365 * 10,
+    sameSite: 'lax',
     secure: true,
-    sameSite: 'Strict',
     httpOnly: false,
-    expires: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
     path: '/',
   })
 

composables/cosmetics.js

@@ -2,7 +2,7 @@ export const useCosmetics = () =>
   useState('cosmetics', () => {
     const cosmetics = useCookie('cosmetics', {
       maxAge: 60 * 60 * 24 * 365 * 10,
-      sameSite: 'Strict',
+      sameSite: 'lax',
       secure: true,
       httpOnly: false,
       path: '/',
@@ -36,7 +36,7 @@ export const saveCosmetics = () => {
 
   const cosmeticsCookie = useCookie('cosmetics', {
     maxAge: 60 * 60 * 24 * 365 * 10,
-    sameSite: 'Strict',
+    sameSite: 'lax',
     secure: true,
     httpOnly: false,
     path: '/',

composables/theme.js

@@ -2,7 +2,7 @@ export const useTheme = () =>
   useState('theme', () => {
     const colorMode = useCookie('color-mode', {
       maxAge: 60 * 60 * 24 * 365 * 10,
-      sameSite: 'Strict',
+      sameSite: 'lax',
       secure: true,
       httpOnly: false,
       path: '/',
@@ -27,7 +27,7 @@ export const updateTheme = (value, updatePreference = false) => {
 
   const themeCookie = useCookie('color-mode', {
     maxAge: 60 * 60 * 24 * 365 * 10,
-    sameSite: 'Strict',
+    sameSite: 'lax',
     secure: true,
     httpOnly: false,
     path: '/',

helpers/package.js

@@ -137,8 +137,6 @@ export const createDataPackVersion = async function (
     primaryZipReader.file('quilt.mod.json', JSON.stringify(quiltModJson))
   }
   if (loaders.includes('forge')) {
-    console.log(forgeModsToml)
-    console.log(TOML.stringify(forgeModsToml, { newline: '\n' }))
     primaryZipReader.file('META-INF/mods.toml', TOML.stringify(forgeModsToml, { newline: '\n' }))
   }
 

plugins/1.theme.js

@@ -20,6 +20,5 @@ export default defineNuxtPlugin((nuxtApp) => {
   //     colorSchemeQueryList.addEventListener('change', setColorScheme)
   //   }
   // })
-
   nuxtApp.provide('colorMode', themeStore.value)
 })

server/plugins/theme.js

@@ -9,5 +9,26 @@ export default defineNitroPlugin((nitroApp) => {
     } else {
       html.htmlAttrs.push(`class="dark-mode"`)
     }
+
+    // Reset cookie attributes to correct ones
+    if (cookies) {
+      const opts = {
+        maxAge: 60 * 60 * 24 * 365 * 10,
+        sameSite: 'lax',
+        secure: true,
+        httpOnly: false,
+        path: '/',
+      }
+
+      if (cookies['auth-token']) {
+        setCookie(event, 'auth-token', cookies['auth-token'], opts)
+      }
+      if (cookies['color-mode']) {
+        setCookie(event, 'color-mode', cookies['color-mode'], opts)
+      }
+      if (cookies.cosmetics) {
+        setCookie(event, 'cosmetics', cookies.cosmetics, opts)
+      }
+    }
   })
 })