Nuxt•3mo ago

Failed to signin with google using @nuxtjs/supabase

Hey, i'm using Supabase for the authentication with Google, I have this function

const loading = ref(false)
const error = ref(null)
const supabase = useSupabaseClient()

async function signInWithGoogle() {
    loading.value = true
    error.value = null

    try {
        const { data, error } = await supabase.auth.signInWithOAuth({
            provider: "google",
            options: {
                redirectTo: `http://localhost:3000/confirm`,
            },
        })

        if (error) {
            throw error
        }
    } catch (err) {
        console.error("Login error:", err)
        loading.value = false
    }
}

const loading = ref(false)
const error = ref(null)
const supabase = useSupabaseClient()

async function signInWithGoogle() {
    loading.value = true
    error.value = null

    try {
        const { data, error } = await supabase.auth.signInWithOAuth({
            provider: "google",
            options: {
                redirectTo: `http://localhost:3000/confirm`,
            },
        })

        if (error) {
            throw error
        }
    } catch (err) {
        console.error("Login error:", err)
        loading.value = false
    }
}

const loading = ref(false)
const error = ref(null)
const supabase = useSupabaseClient()

async function signInWithGoogle() {
    loading.value = true
    error.value = null

    try {
        const { data, error } = await supabase.auth.signInWithOAuth({
            provider: "google",
            options: {
                redirectTo: `http://localhost:3000/confirm`,
            },
        })

        if (error) {
            throw error
        }
    } catch (err) {
        console.error("Login error:", err)
        loading.value = false
    }
}

const loading = ref(false)
const error = ref(null)
const supabase = useSupabaseClient()

async function signInWithGoogle() {
    loading.value = true
    error.value = null

    try {
        const { data, error } = await supabase.auth.signInWithOAuth({
            provider: "google",
            options: {
                redirectTo: `http://localhost:3000/confirm`,
            },
        })

        if (error) {
            throw error
        }
    } catch (err) {
        console.error("Login error:", err)
        loading.value = false
    }
}

The authentication works, but not the redirection, it redirect me to

/login

/login

/login

/login with this option

?code=XXX-XXX....

?code=XXX-XXX....

?code=XXX-XXX....

?code=XXX-XXX.....

Any idea why ?

kapa.ai•10/16/25, 2:50 AM

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

kapa.ai•10/16/25, 2:50 AM

----------------------
The issue you're experiencing—being redirected to

/login

/login

with a ?code=...?code=... parameter after Google authentication—relates to how the Supabase Nuxt module handles OAuth redirects. According to the knowledge sources, this behavior is typically due to the Supabase module's default redirect settings and the need for a callback page.

Key points from the sources:

The Supabase Nuxt module automatically redirects unauthenticated users to the configured login page. If you haven't set up the callback page (e.g., `/confirm`), the module won't know where to send users after authentication, and you may end up back at `/login` with the OAuth code in the URL. [See explanation here](<https://stackoverflow.com/questions/78746436>)
To fix this, you need to create a `confirm.vue` page in your `pages/` directory. This page will handle the OAuth callback and finalize the authentication process. [See solution here](<https://stackoverflow.com/questions/78707068>)

What you should do:

Create a pages/confirm.vuepages/confirm.vue file in your Nuxt project. It can be a simple placeholder or handle any post-auth logic you need.
**Ensure your Supabase config in `nuxt.config.ts` includes the correct callback:**```jssupabase: { url: process.env.SUPABASE_URL, key: process.env.SUPABASE_KEY, redirectOptions: { login: '/login', callback: '/confirm', exclude: ['/*'], },},```
**After successful authentication, Supabase will redirect to `/confirm` instead of `/login`.**

kapa.ai•10/16/25, 2:50 AM

This should resolve the issue and allow the redirection to work as expected after signing in with Google using Supabase in Nuxt 3.
Reference: Supabase oauth redirectUrl not working | Nuxt 3
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

kapa.ai•10/16/25, 2:50 AM

@358819659581227011 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

AsherOP•10/16/25, 3:30 AM

@kapa.ai i did created the confirm.vue but not working. here is my code

<script setup>
const user = useSupabaseUser()

watch(
    user,
    () => {
        if (user.value) {
            return navigateTo("/")
        }
    },
    { immediate: true }
)
</script>

<template>
    <div>Waiting for login...</div>
</template>

<script setup>
const user = useSupabaseUser()

watch(
    user,
    () => {
        if (user.value) {
            return navigateTo("/")
        }
    },
    { immediate: true }
)
</script>

<template>
    <div>Waiting for login...</div>
</template>

kapa.ai•10/16/25, 3:30 AM

Let me check the knowledge base for you again. One moment! :books:

kapa.ai•10/16/25, 3:31 AM

----------------------
Based on the knowledge sources, creating a confirm.vueconfirm.vue page is the correct step for handling the OAuth callback with Supabase in Nuxt 3. Your implementation of the confirm.vueconfirm.vue page looks correct: it watches the useruser object and redirects to

if the user is authenticated.

However, if you are still being redirected to

/login

/login

with a ?code=...?code=... parameter, it suggests that the Supabase module is not recognizing the authentication or the session is not being established correctly after the OAuth callback.

Possible reasons based on the knowledge sources:

**Supabase Module Redirect Behavior:** The Supabase Nuxt module, by default, redirects unauthenticated users to the login page. If the session is not established after the OAuth callback, you will be redirected back to `/login` even after visiting `/confirm` [Nuxt.js localhost redirects to /login automatically, resulting in 404 error](<https://stackoverflow.com/questions/78746436>).
**Callback URL Configuration:** Ensure that the `redirectTo` option in your `signInWithOAuth` call matches the `callback` path configured in your `nuxt.config.ts` and that this path is also allowed in your Supabase project settings.
**Supabase Project Settings:** Double-check that the OAuth redirect URL (e.g., `<http://localhost:3000/confirm`>) is whitelisted in your Supabase dashboard under Authentication > URL Configuration.
**Session Handling:** If the session is not being set, it could be due to cookies not being set properly (e.g., due to cross-origin issues or missing configuration).

kapa.ai•10/16/25, 3:31 AM

Summary:
Your confirm.vueconfirm.vue code is correct according to the knowledge sources. If it’s still not working, the issue is likely with the Supabase configuration or the OAuth redirect settings, not with your page code. The knowledge sources do not provide further troubleshooting steps for this specific scenario, so if the above checks do not resolve your issue, you may need to consult the Supabase documentation or check for issues with cookies or network requests in your browser.

If you have confirmed all the above and it still fails, please provide more details about your Supabase configuration and any errors in the browser console or network tab.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

kapa.ai•10/16/25, 3:31 AM

@358819659581227011 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

AsherOP•10/16/25, 4:33 AM

@kapa.ai i have tried another browser edge and it worked but safari is not working the session didn't got updated

kapa.ai•10/16/25, 4:33 AM

Let me check the knowledge base for you again. One moment! :books:

kapa.ai•10/16/25, 4:34 AM

----------------------
Your observation that authentication works in Edge but not in Safari, where the session does not get updated, aligns with known issues around browser compatibility and session/cookie handling in Nuxt and related modules.

From the knowledge sources, there are a few relevant points:

There are documented compatibility issues with Nuxt (including Nuxt 4) and Safari, especially on iOS. For example, one issue describes Safari failing to load modules or update sessions due to how it handles modern JavaScript features or caching. Workarounds sometimes involve clearing browser buffers or ensuring the server is fully started before refreshing, but these are not always reliable fixes for authentication/session issues [Nuxt 4 + Safari iOS 15 compatibility issue](<https://github.com/nuxt/nuxt/issues/33225>), [504 (Outdated Optimize Dep) on Safari](<https://github.com/nuxt/nuxt/issues/24631>).
Session and cookie handling can behave differently across browsers. If cookies are not set or sent correctly (due to SameSite, Secure, or HttpOnly flags, or due to cross-origin issues), the session may not be established in Safari even if it works in other browsers. The knowledge sources mention that you may need to handle cookie passing explicitly in Nuxt, especially when dealing with SSR or API responses [Passing Headers and Cookies](<https://nuxt.com/docs/3.x/getting-started/data-fetching#passing-headers-and-cookies>).

However, the knowledge sources do not provide a specific solution for Supabase session issues on Safari. They confirm that browser-specific issues exist and that session/cookie handling is a common cause, but do not offer a direct fix for your scenario.

kapa.ai•10/16/25, 4:34 AM

Summary:
I'm sorry, but the knowledge sources do not contain enough information to provide a definitive solution for Supabase session issues specifically on Safari. The problem is likely related to how Safari handles cookies or session storage, which is a known challenge in Nuxt and similar frameworks. You may need to further investigate cookie settings, cross-origin policies, or consult Supabase and Nuxt issue trackers for Safari-specific workarounds.

If you need more targeted help, consider checking the browser's developer tools for cookie and network issues, and ensure your Supabase and Nuxt configurations are compatible with Safari's stricter cookie policies.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

kapa.ai•10/16/25, 4:34 AM

@358819659581227011 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Failed to signin with google using @nuxtjs/supabase

Similar Threads

Similar Threads

Similar Threads