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