Nuxt 3 with Supabase OAuth: Login redirects to /confirm but user not logged in

[wet scarab]

I am using Nuxt 3 and trying to connect Supabase OAuth. I can log in with GitHub and Google, but after that, it just redirects me to the /confirm page without showing that the user is logged in. Can someone please help? I've spent almost a week on this without any success.

nuxt.config.ts

  supabase: {
    url: process.env.SUPABASE_URL,
    key: process.env.SUPABASE_KEY,
    redirect: true,
    redirectOptions: {
      login: '/login',
      callback: '/confirm',
      cookieRedirect: true,
      include: ['/test/supabase/test'],
    },
    cookieOptions: {
      maxAge: 60 * 60 * 8,
      sameSite: 'lax',
      secure: false,
      httpOnly: true,
      watch: true,
    },
    clientOptions: {
      auth: {
        flowType: 'pkce',
        persistSession: true,
      },
    },
    ```

nuxt.config.ts

  supabase: {
    url: process.env.SUPABASE_URL,
    key: process.env.SUPABASE_KEY,
    redirect: true,
    redirectOptions: {
      login: '/login',
      callback: '/confirm',
      cookieRedirect: true,
      include: ['/dashboard'],
    },
    cookieOptions: {
      maxAge: 60 * 60 * 8,
      sameSite: 'lax',
      secure: false,
      httpOnly: true,
      watch: true,
    },
    clientOptions: {
      auth: {
        flowType: 'pkce',
        persistSession: true,
      },
    },
    ```

login.vue

<script setup lang="ts">
  const supabase = useSupabaseClient();
  const redirectTo = 'http://url/confirm';
</script>

<template>
  <div class="min-h-full flex flex-col justify-center py-12 sm:px-6 lg:px-8">
    <h2 class="my-6 text-center text-3xl font-extrabold">
      Sign in to your account
    </h2>
    <LoginCard>
      <UButton
        class="mt-3"
        icon="i-mdi-github"
        block
        label="Github"
        color="gray"
        variant="solid"
        @click="
          supabase.auth.signInWithOAuth({
            provider: 'github',
            options: { redirectTo },
          })
        "
      />
      <UButton
        class="mt-3"
        icon="i-mdi-google"
        block
        label="Google"
        color="gray"
        variant="solid"
        @click="
          supabase.auth.signInWithOAuth({
            provider: 'google',
            options: { redirectTo },
          })
        "
      />
    </LoginCard>
  </div>
</template>

confirm.vue

<script setup lang="ts">
  const user = useSupabaseUser();
  const session = useSupabaseSession(); // Get the full session

  // Get redirect path from cookies
  const cookieName = useRuntimeConfig().public.supabase.cookieName;
  const redirectPath = useCookie(`${cookieName}-redirect-path`).value;
</script>

<template>
  <div>
    <!-- Display redirect path -->
    <p>The path to redirect to: {{ redirectPath || '/' }}</p>

    <!-- Display user information if logged in -->
    <div v-if="user">
      <h3>Logged-in User Information:</h3>
      <p><strong>Email:</strong> {{ user.email }}</p>
      <p><strong>Id:</strong> {{ user.id }}</p>
      <p><strong>Role:</strong> {{ user.role || 'N/A' }}</p>
    </div>
    <div v-else>
      <p>No user is logged in.</p>
    </div>

    <!-- Display full session details if available -->
    <div v-if="session">
      <h3>Session Information:</h3>
      <pre>{{ session }}</pre>
      <!-- This will print the entire session object as JSON -->
    </div>
    <div v-else>
      <p>No session available.</p>
    </div>
  </div>
</template>