Nuxt Supabase server side

[Visioneery]

Hi , I am a quite new to nuxt and supabase . I see that supabase is usually implemented in client side(composables and components). But isn't it a best practice to implement authentication on the server side?

I am asking because currently I have a problem when users are already signed in and they try to access /signin page , nuxt preloads /signin page for a second and then redirects user back to the index page

It does not matter if I am using navigateTo based on supabase user or session in middleware.ts , or using OnMount or WatchEffect, outcome is always the same, page is still preloaded for a half of a second.

watchEffect(() => {
    const user = useSupabaseUser()

    if (user?.value) {
        navigateTo('/')
    }
})

When I tried to move signIn logic into server side I faced an issue that it is not signing in , not redirecting etc. So I assume that I am doing something wrong here.

  const fetchLibrary = async (provider) => {
    const queryParams = {
      provider: provider,
    };
    const { body } = await $fetch('/api/signIn?provider=github', {
      method: 'get'
    })
    console.log('server side signin data', body);
  }
  
  
export default eventHandler(async (event) => {
    const { auth } = await serverSupabaseClient(event)

    const { data, error } = await auth.signInWithOAuth({
        provider: 'github',
        options:{
            redirectTo: "http://localhost:3000/"
        }
    })
    
    return data;
})

Maybe someone knows what would be the best way to solve this issue? It would be nice to see some implementation example if possible. Thank you

[yakubka]

You are right that authentication checks belong on the server side to avoid the preload flash. The module supports this via a Nuxt server middleware combined with the redirectOptions configuration.

In nuxt.config.ts:

supabase: {
redirectOptions: {
login: "/signin",
callback: "/confirm",
exclude: ["/", "/public-*"],
},
}

The module ships a built-in middleware that runs on the server and redirects unauthenticated users to the login page before the page is ever sent to the browser. The flash you see happens when you rely on client-side navigation guards (useSupabaseUser in onMounted or a client-only middleware) because the HTML is already painted before the check runs.

If you want to protect a specific route on the server, create a server middleware:

// server/middleware/auth.ts
import { serverSupabaseUser } from "#supabase/server"

export default defineEventHandler(async (event) => {
const user = await serverSupabaseUser(event)
const path = getRequestURL(event).pathname
if (!user && path.startsWith("/admin") && path !== "/signin") {
return sendRedirect(event, "/signin", 302)
}
})

This runs before Nitro renders any page and the browser never sees the protected content for unauthenticated users.