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')
    }
  }
})

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•6mo ago•

5 replies

Elvin code

Nuxt Fullstack Linear Clone – SSR/Auth Help

Hi everyone

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')
    }
  }
})

GitHub

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

Nuxt Fullstack Linear Clone – SSR/Auth Help

Nuxt Fullstack Linear Clone – SSR/Auth Help

Similar Threads

Similar Threads

Similar Threads