Supabase oauth redirectUrl not working | Nuxt 3

Question

I'm trying to set up authentication in Supabase using GitHub OAuth.

The issue is that after clicking the login button, nothing happens!

when I try to access a restricted link I am redirected to the login page, so the url looks like this "http://localhost:3000/login?redirectTo=/aaaaa/bbbb/cccc/ddddd/eeeeeee"

login.vue file:

<template>
  <div class="prose w-full max-w-2xl h-9">
    <h1>Log in to {{ title }}</h1>
    <button
      class="bg-blue-600 text-white font-bold py-2 px-4 rounded"
      @click="login"
    >
      Log in with Github
    </button>
  </div>
</template>

<script setup lang="ts">
const { title } = useCourse();
const { query } = useRoute();
const supabase = useSupabaseClient();
const user = useSupabaseUser();

watchEffect(async () => {
  if (user.value) {
    await navigateTo(query.redirectTo as string, {
      replace: true,
    });
  }
});

const login = async () => {
  const redirectTo = `${window.location.origin}${query.redirectTo}`;
  console.log('redirectTo', redirectTo);
  const { error } = await supabase.auth.signInWithOAuth({
    provider: 'github',
    options: { redirectTo: redirectTo },
  });

  if (error) {
    console.log(error);
  }
};
</script>

Supabase config in the nuxt.config.ts

supabase: {
    url: process.env.SUPABASE_URL,
    key: process.env.SUPABASE_KEY,
    redirectOptions: {
      login: '/login',
      callback: '/confirm',
      exclude: ['/*'],
    },
  },

I also tried to add the url in the supabase dashboard but nothing happens

Answer 1

I just had to create a confirm.vue page and it worked