Failed to signin with google using @nuxtjs/supabase

[edgy wind]

Hi @wise sparrow. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Your issue is a common one when using @nuxtjs/supabase with OAuth providers like Google. Based on the knowledge sources, here are the key points and possible solutions:

1. Redirection to /login with code param
   The behavior where you are redirected to /login?code=... instead of /confirm is typically due to the Supabase module's default redirect handling. By default, the module redirects unauthenticated users to the login page, and this can interfere with your custom callback route if not configured correctly.

2. Callback Page (confirm.vue)
   You did the right thing by creating a confirm.vue page, as this is required for the callback to work. This is confirmed by another user who resolved a similar issue by simply creating the confirm.vue page, which allowed the redirect to work as expected. However, if you are still being redirected to /login, it suggests that the authentication state is not being set correctly or the redirect options are not being respected by the module or your Supabase project configuration Supabase oauth redirectUrl not working | Nuxt 3.

3. Supabase Module Redirect Options
   The Supabase module for Nuxt has a redirectOptions config, and you have set:

   redirectOptions: {
     login: "/login",
     callback: "/confirm",
     exclude: ["/*"],
   }
   

   According to the documentation, this should work, but if you are still being redirected to /login, it may be because the module is not recognizing the user as authenticated after the OAuth flow, possibly due to a misconfiguration or a missing step in the Supabase dashboard (such as not whitelisting the callback URL) Nuxt.js localhost redirects to /login automatically, resulting in 404 error.

4. Supabase Dashboard Configuration
   Make sure that the callback URL (<http://localhost:3000/confirm>) is correctly set in your Supabase project's authentication settings for the Google provider. If this is not set, Supabase may not complete the OAuth flow properly, resulting in the user not being authenticated and the module redirecting to /login.

5. Module Default Behavior
   The Supabase module will automatically redirect to the login page if a non-authenticated user tries to access a guarded route. You can disable all redirects by setting this option to false in your config if you want to handle redirects manually Nuxt.js localhost redirects to /login automatically, resulting in 404 error.

Summary of steps to check:

• Ensure /confirm exists and is accessible.
• Double-check that <http://localhost:3000/confirm> is whitelisted in your Supabase dashboard for Google OAuth.
• Consider disabling automatic redirects in the Supabase module if you want full control.
• Make sure your confirm.vue page is not being protected by any middleware that would redirect unauthenticated users to /login before the OAuth flow completes.

If after these checks the issue persists, the knowledge sources do not provide further troubleshooting steps specific to your scenario. You may need to consult the latest Supabase Nuxt module documentation or open an issue with your configuration details.

---

References integrated above from:

• Supabase oauth redirectUrl not working | Nuxt 3
• Nuxt.js localhost redirects to /login automatically, resulting in 404 error

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: