Build a User Management App with Nuxt 3: Can't login with magic link in SSR mode

[tanin-t]

Improve documentation

Link

https://supabase.com/docs/guides/getting-started/tutorials/with-nuxt-3?database-method=dashboard

Describe the problem

// app.vue

<script setup>
const user = useSupabaseUser()
</script>

<template>
  <div class="container" style="padding: 50px 0 100px 0">
    <Account v-if="user" />
    <Auth v-else />
  </div>
</template>

Can not login with the magic link. The example always display <Auth> component

Describe the improvement

Add ssr: false to nuxt.config.ts solve the problem, but I still have no clue how to make it work with SSR mode.
Since Nuxt3 has ssr: true by default, I think the tutorial should mention details about how Supabase auth works with SSR (server-side-rendering) / CSR (client-side-rending) application

I don't know why the magic link doesn't work is SSR mode, but my guess is

• In ssr mode, when Supabase redirect to http://localhost:3000, the useSupabaseUser() was run on server-side and redirect to login page (and lost the token) instead of logging user in.

Additional context

package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxtjs/supabase": "^1.1.3",
    "nuxt": "^3.8.1",
    "vue": "^3.3.8",
    "vue-router": "^4.2.5"
  }
}

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  ssr: false, // magic link doesn't work when ssr: true
  devtools: { enabled: true },
  modules: ['@nuxtjs/supabase'],
  css: ['@/assets/main.css'],
})

[caliguian]

I agree wholeheartedly with this recommendation. It would be a quick and easy thing to do to update the documentation for this. I was building my first Nuxt app using the User Management App tutorial, and I had no clue why the magick link registration step wasn't working until I found this bug/discussion. Help us newbies out by updating the docs for this, please. :)

[Revadike]

I had this issue, in case someone else has it too: It was not related to nuxt SSR, but my local edge function that generated a magic link was not using the same supabase instance as my nuxt app (it was using my production tokens).