Nuxt Fullstack Linear Clone – SSR/Auth Help

Hi everyone

,

I'm working on a fullstack Nuxt app (Linear clone) and I have two major issues:

First visit: The login page loads with broken styles. I have to refresh the page to see the correct UI.

Home page: When I refresh the home page, I get a 500 error, while refreshing other pages works fine.

Here's some context:

I use a Pinia store auth with a checkAuth function:

const checkAuth = async () => {
  try {
    const { user: authUser } = await $fetch('/api/auth/me')
    user.value = authUser
    return authUser
  } catch {
    user.value = null
    return null
  }
}

//And a global middleware auth.global.ts:

export default defineNuxtRouteMiddleware(async (to) => {
  const authStore = useAuthStore()
  const publicRoutes = ['/login', '/signup']
  if (publicRoutes.includes(to.path)) return

  if (!authStore.user) {
    try {
      const user = await authStore.checkAuth()
      if (!user) return navigateTo('/login')
    } catch {
      return navigateTo('/login')
    }
  }
})

const checkAuth = async () => {
  try {
    const { user: authUser } = await $fetch('/api/auth/me')
    user.value = authUser
    return authUser
  } catch {
    user.value = null
    return null
  }
}

//And a global middleware auth.global.ts:

export default defineNuxtRouteMiddleware(async (to) => {
  const authStore = useAuthStore()
  const publicRoutes = ['/login', '/signup']
  if (publicRoutes.includes(to.path)) return

  if (!authStore.user) {
    try {
      const user = await authStore.checkAuth()
      if (!user) return navigateTo('/login')
    } catch {
      return navigateTo('/login')
    }
  }
})

const checkAuth = async () => {
  try {
    const { user: authUser } = await $fetch('/api/auth/me')
    user.value = authUser
    return authUser
  } catch {
    user.value = null
    return null
  }
}

//And a global middleware auth.global.ts:

export default defineNuxtRouteMiddleware(async (to) => {
  const authStore = useAuthStore()
  const publicRoutes = ['/login', '/signup']
  if (publicRoutes.includes(to.path)) return

  if (!authStore.user) {
    try {
      const user = await authStore.checkAuth()
      if (!user) return navigateTo('/login')
    } catch {
      return navigateTo('/login')
    }
  }
})

const checkAuth = async () => {
  try {
    const { user: authUser } = await $fetch('/api/auth/me')
    user.value = authUser
    return authUser
  } catch {
    user.value = null
    return null
  }
}

//And a global middleware auth.global.ts:

export default defineNuxtRouteMiddleware(async (to) => {
  const authStore = useAuthStore()
  const publicRoutes = ['/login', '/signup']
  if (publicRoutes.includes(to.path)) return

  if (!authStore.user) {
    try {
      const user = await authStore.checkAuth()
      if (!user) return navigateTo('/login')
    } catch {
      return navigateTo('/login')
    }
  }
})

It feels like an SSR / hydration issue with the store and middleware, but I’m not sure how to fix it.

Does anyone have suggestions for handling first-visit login styles and preventing 500 on refresh for protected pages?

Repo link : https://github.com/ElvinKyungu/linear-nuxt-fullstack/
Preview link: https://linear-ehn.pages.dev/login

Thanks a lot!

GitHub

GitHub - ElvinKyungu/linear-nuxt-fullstack: A sleek and efficient p...

A sleek and efficient project management interface inspired by Linear. Built with Nuxt.js, GSAP, Tailwindcss and and Nuxt UI, it enables seamless issue tracking, project management, and team collab...

Nuxt Fullstack Linear Clone – SSR/Auth Help

Similar Threads

Similar Threads

Similar Threads