SupabaseS
Supabase•12mo ago
Revadike

[Nuxt] Login flow with magic link

For some reason, I can't make the magic link work.
I have a nuxt 3 project with @nuxtjs/supabase module.
I run supabase start && supabase functions serve
I have an edge function login that does the following:
import { createClient } from "jsr:@supabase/supabase-js@2";

Deno.serve(async () => {
  const supabase = createClient(
    Deno.env.get("SUPABASE_URL") ?? "",
    // Deno.env.get("SUPABASE_ANON_KEY") ?? "",
    Deno.env.get("SUPABASE_SERVICE_ROLE_KEY") ?? "",
  );

  const email = "email@example.com";

  const { data, error } = await supabase.auth.admin.generateLink({
    type: "magiclink",
    email,
    options: {
      redirectTo: "http://localhost:3000/confirm",
    },
  });

  console.log({ data, error });

  return new Response(
    JSON.stringify({
      url: `${data?.properties?.action_link}/confirm&email=${
        encodeURIComponent(email)
      }`,
    }),
    { headers: { "Content-Type": "application/json" } },
  );
});


when I generate a magic link and open it on my nuxt 3 application, I don't get logged in automatically. This is what supposed to happen, right? user from useSupabaseUser remains 
null
.

Here is confirm.vue:
<script setup>
  const user = useSupabaseUser();

  watch(() => user.value, () => {
    if (user.value) {
      navigateTo('/');
    }
  });
</script>

<template>
  <div>
    Redirecting...
  </div>
</template>


I even added this to config.toml:
additional_redirect_urls = ["https://127.0.0.1:3000","http://127.0.0.1:3000/inloggen","http://127.0.0.1:3000/confirm"]
Was this page helpful?