Supabase auth (google) not working properly

[ibrahimkholil6210]

Bug report

Describe the bug

I've implement the supabase auth with google provider in a create-react-app enviroment. Now when i go through the signin process it redirects me to localhost with token instade of signin me in.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Bootstrap CRA and implement supabase auth

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

Initial Page

This is after is signed in with, it just sent me session information in url hast. But doesn't actually log me in.

I'm trying to get the user session but it doesn't returns anything.

If applicable, add screenshots to help explain your problem.

System information

• OS: masOs
• Browser chrome
• Version of supabase-js: 2.26.0
• Version of Node.js: v20.3.1

One thing i've tried the same with Nextjs it worked fine. I'm not sure what is the issue here.

[mallahyari]

I have had the same problem. My app stopped working since last night. It shows a blank page when redirecting from google. However, when I use Firefox and open dev tools it works. it's so weird.

[j4w8n]

Possibly related. Or just a coincidence.

supabase/supabase-js#811

[yeonjulee1005]

I have a same error
Not only google OAuth, but also another OAuth (kakao, apple, discord, google)
After OAuth process, it just return url, no return user authenticate data🥲

also, i'm using Nuxt3(latest)
(with nuxt/supabase)(latest)

you can show this problem, my side project..
dooramgi

[egemenu]

I agree with @mallahyari, works on Firefox but not Chrome, weird.

[GaryAustin1]

Not really up on this but... You mention works on Firefox and not Chrome. Is it possible you were running on Chrome, upgraded, or got upgraded and then it stopped. Then went to Firefox with the "new versions" or a clean slate? Maybe some local storage/cookie thing from an old version to new? Just speculating.

[mallahyari]

It was working. But all of a sudden since last night it stopped. I haven't updated Chrome or Firefox last couple of days. I even tested on Safari and Edge and it doesn't work, the same blank page appears. Even in Firefox, you have open "dev tools" otherwise it doesn't work. That's weird and frustrating, because my whole app depends on it. I am looking to replace Supabase with another platform.

[GaryAustin1]

@mallahyari that is more detail... I was mainly thinking along the lines of the supabase code updating and why one browser would work and another not. Not upgrade of the browser itself. But instead some data stored in the browser not being compatible between Supabase code updates. But I'm just throwing out ideas as a spectator.

[mallahyari]

@GaryAustin1 I understand and thank you for the ideas. They might help anyway. I have dug Chrome even service workers, indexedDb, etc, just to realize what's going on and why it happens. But nothing.

[ibrahimkholil6210]

I've tried an older version of supabase SDK (v1.35.7). This seems to work on chrome. But the latest version of the SDK doesn't work.

[kokecar11]

I am also having the same error with the twitch provider.

[okandavut]

I think our problems are same #811 and facing same problem. I tried downgrading the supabase-js version but not working.

[okandavut]

It was working. But all of a sudden since last night it stopped. I haven't updated Chrome or Firefox last couple of days. I even tested on Safari and Edge and it doesn't work, the same blank page appears. Even in Firefox, you have open "dev tools" otherwise it doesn't work. That's weird and frustrating, because my whole app depends on it. I am looking to replace Supabase with another platform.

Totally the same issue. It works on firefox dev tools opened. Other browsers don't work.

[yeonjulee1005]

@okandavut me too!! exactly same problem..
in firefox, activate normal.. but chrome not work signin...

i'm use Nuxt 3.6.5, nuxtjs/supabase@0.3.8

[quntherdev]

It was working. But all of a sudden since last night it stopped. I haven't updated Chrome or Firefox last couple of days. I even tested on Safari and Edge and it doesn't work, the same blank page appears. Even in Firefox, you have open "dev tools" otherwise it doesn't work. That's weird and frustrating, because my whole app depends on it. I am looking to replace Supabase with another platform.

Totally the same issue. It works on firefox dev tools opened. Other browsers don't work.

Same here, the login works only when dev tools opened (tried only on firefox).
When it's closed, I'm just redirected with the tokens in the url hash, but I'm not logged in.

PS : this happens only with OAuth, with email/password method, there are no problems.

[piscis]

I had the problem that await supabase.auth.getSession() after an client update suddenly never resolved which broke our login process (all oAuth providers). It seams the underlying issue is the go-true package. If you pin to 2.43.1 things start working again:

"pnpm": {
    "overrides": {
      "@supabase/gotrue-js": "2.43.1"
    }
  }

Found this here: nuxt-modules/supabase#207

[j4w8n]

Thanks @piscis, there was a big change in 2.44.0. I can't test until next week, but hopefully someone else can.

[oliverrees]

I've got the same issue on next JS 13.4 - more detail here. Strange that the dev / production distinction is related.

[okandavut]

I had the problem that await supabase.auth.getSession() after an client update suddenly never resolved which broke our login process (all oAuth providers). It seams the underlying issue is the go-true package. If you pin to 2.43.1 things start working again:

"pnpm": {
    "overrides": {
      "@supabase/gotrue-js": "2.43.1"
    }
  }

Found this here: nuxt-modules/supabase#207

But I am not using Nuxt actually I am using React app + Vite and I can't manually downgrade go-truejs

[okandavut]

hey again,

I overrided the package of gotrue-js and it's worked!!!

"overrides": {
    "@supabase/supabase-js": {
      "@supabase/gotrue-js": "2.43.1"
    }
  }

[j4w8n]

But I am not using Nuxt actually I am using React app + Vite and I can't manually downgrade go-truejs

Setting an override in your package.json should still work to effectively "downgrade" the gotrue-js version. Afterwards, you'd need to npm install or equivalent.

[quntherdev]

hey again,

I overrided the package of gotrue-js and it's worked!!!

"overrides": {
    "@supabase/supabase-js": {
      "@supabase/gotrue-js": "2.43.1"
    }
  }

It fixed the issue, thanks!
For anyone trying this fix, don't forget to delete yarn-lock, package-lock, node-modules, and clean cache/cookies

[piscis]

After additional tests it turns out that mobile safari does not like gotrue-js version 2.43.1, Safari does not support stack Guards and breaks the login. Also there is a new version of gotrue 2.45.0 which fixes the issue for stack guards in mobile safari, but the other issues still persist.

So to solve the issue of unsupported stack guards (2.43.1) and have a working login, we changed the overrides again to a combination of gotrue and supabase client which worked on our last release:

"pnpm": {
    "overrides": {
      "@supabase/supabase-js": "2.24.0",
      "@supabase/gotrue-js": "2.38.0"
    }
  }

At least this seems to work for our mobile users as well as for the desktop clients.

[evelynf]

anyone else getting: "Application error: a client-side exception has occurred (see the browser console for more information)." when using these fixes? It will work for a bit and then I get this error.

I also see in my console:
Multiple GoTrueClient instances detected in the same browser context. It is not an error, but this should be avoided as it may produce undefined behavior when used concurrently under the same storage key.1

[yeonjulee1005]

@evelynf
Me too, it's same getting error
I have been contacting customer service to resolve this issue, but they also seem unwilling to resolve this issue.

[j4w8n]

@evelynf @yeonjulee1005 this is not the same issue as the original post. I'd recommend creating an issue on the gotrue-js repo and asking for clarification about what the warning means.

https://github.com/supabase/gotrue-js

[yeonjulee1005]

@j4w8n
thank you! yes i understand 😄
I had an issue (supabase auth not working) for an issue I'm following,
and replaced gotrue-js with an older version to fix it.
I just only agreed with @evelynf mention about the problems that occurred during this replacement. 😃

[MickyRajkumar]

@rajan-personal you have to provide callback url like this

const { data, error } = await supabase.auth.signInWithOAuth({
        provider: 'google',
        options: {
            redirectTo: `${location.origin}/auth/v1/callback`,
          },
      })

you will get the code on /auth/v1/callback/route.tsx as query params. you have to exchange that code
supabase.auth.exchangeCodeForSession(code)

[rajan-personal]

@MickyRajkumar I am using dart and tried same. It is redirecting to supabase admin page directly after google.

User is redirected to google and he is not coming back to application. The callback is taking directly to supabase admin page.

[MickyRajkumar]

is this your supabase admin page https://api.mysave.app/?
Additionally, remember to include your desired redirect URL within the Supabase URL configuration under 'Redirect URLs'.

[rajan-personal]

Yeah.. I tried.

[rajan-personal]

I want to know whats the most stable version for supabase.

[leikoilja]

In my case only work on localhost development only, not working on deploymnet (vercel)

const { data, error } = await supabase.auth.signInWithOAuth({
        provider: 'google',
        options: {
            redirectTo: `${location.origin}/auth/callback`,
          },
      })

Thanks, that got me thinking in the right direction.
NextJS 13 , app directory with the latest versions of supabase and gotrue.

My issues was that authentication was going through just fine (locally using supabase docker sdk), but no session was set.
I needed to add

  const handleAuthGoogle = async () => {
    SupabaseBrowserClient.auth.signInWithOAuth({
      provider: "google",
      options: {
        redirectTo: `${location.origin}/api/auth/callback`,  <---- points to my app's directory endpoint where i change code for session (from email authentication implementation )
      },
    });
  };

[volkerp]

I'm facing the same issue. vue SPA (no SSR). My app will get stuck exactly as described in the first post of this issue. Glad I found this report to learn it can be workaround by fixating the version of gotrue-js and supabase-js
The versions that work for me are

"dependencies": {
    "@supabase/supabase-js": "2.36.0",

},
"overrides": {
    "@supabase/gotrue-js": "2.44.0"
},

[GaryAustin1]

I'm facing the same issue. vue SPA (no SSR). My app will get stuck exactly as described in the first post of this issue. Glad I found this report to learn it can be workaround by fixating the version of gotrue-js and supabase-js The versions that work for me are

"dependencies": {
    "@supabase/supabase-js": "2.36.0",

},
"overrides": {
    "@supabase/gotrue-js": "2.44.0"
},

Can you be specific on what is like the first post. Not clear from it what is meant by getSession does not return anything.

Do you make the getSession call and it never returns?

[volkerp]

I'm calling

async function handleOAuthLoginGithub() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'github',
    options: {
      redirectTo: 'http://localhost:8080/#/account',
    } })
  if (error) console.error('Error: ', error.message)

  console.log(data)
}

the redirection process kicks off, redirection to gihub, than back again to the redirectUrl in my vue app.

When it is not working (i.e. with recent supabase-js/gotrue-js version) the redirectUrl is called with added #access_token=eyJhbGci…&refresh_token=psVOeU…DNT2o2VA&token_type=bearer and get stuck at this point. i.e. the url is not cleaned up, the supabase.auth.onAuthStateChange() callback reports INITAL_SESSION null, successive calls to supabase.auth.getSession() return undefined.

Fixating the version as I described makes the problem go away (with no changes to the code, supabase configuration, auth provider configuration etc) In this case again a 302 redirect happens to the redirectUrl with added tokens in the same manner but now the url get processed and parameters are removed. supabase.auth.onAuthStateChange() callback reports SIGNED_IN and a valid session object, so do subsequent calls to getSession()

[GaryAustin1]

@volkerp Thanks. That is not in line with the other issue I was worried you might be encountering based on getSession actually returning. It was not clear if it was returning null or not returning based on the OPs original post. There is an issue that locks up the next supabase request IF you do a supabase call in the onAuthStateChange handler.
Got no help on what you are seeing.

[jerocosio]

I'm not sure if this can help some but I was stuck with this issue (Failed to fetch RSC payload for Falling back to browser navigation) for almost a full day, and I figured out that my error was that I was adding a re-direction after calling signInWithOAuth, like so:

const { data, error } = await supabase.auth.signInWithOAuth({
        provider: provider,
        options: {
          redirectTo: `${getURL()}auth/callback`
        }
      });
      if (!error) {
        router.push('/panel');
      }

So I just removed router.push( '/panel'); and it worked back again. For some reason it worked well on Chrome, but it failed on Safari / Webkit.

[alxvallejo]

Everyone's talking about redirectTo ${getURL()}auth/callback. Well what the hell is in that route? Shouldn't there be a provider wrapper that listens for the auth state change and handles storing the user/session automatically so you can just route to any protected route and the session will be there?

[YO-SC]

Hello, I am having similar issues as this closed issue.

I have an NextJS 14 app with email + password login, and I wanted to add Oauth into the mix. I am running all the login logic on Server Actions. Currently on a localhost environment, the app is not hosted at the moment.

The server action being used:

'use server'

import { createClient } from '@/utils/supabase/server'
import { cookies } from 'next/headers'

export async function loginWithGoogle() {
  const cookieStore = cookies()
  const supabase = createClient(cookieStore)
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
    options: {
      redirectTo: 'http://localhost:3000/',
      queryParams: {
        access_type: 'offline',
        prompt: 'consent',
      },
    },
  })

  if (error) {
    console.error(error.message)
    return error.message
  }

  redirect(data.url) // to google's auth page
}

Here are my dependencies:

    "@supabase/ssr": "^0.1.0",
    "@supabase/supabase-js": "^2.39.3",
    "next": "14.1.0",
    "react": "^18",
    "react-dom": "^18",

When I get redirected back to my app, both session and user are still null. Using the getUser() and getSession() functions on my SSR front-end.

I ask, do I need @supabase/gotrue-js? Doesn't @supabase/ssr | supabase-js have the same functionality? Thx y'all

For more context, I followed the official Supabase instructions

[charislam]

No, you shouldn't need to separately install @supabase/gotrue-js, it's already a dependency of @supabase/ssr.

Have you tried the instructions that are specific to Server-Side Auth? With @supabase/ssr, you are automatically opted into the PKCE flow, so you'll need to handle the code exchange.

[YO-SC]

No, you shouldn't need to separately install @supabase/gotrue-js, it's already a dependency of @supabase/ssr.

Have you tried the instructions that are specific to Server-Side Auth? With @supabase/ssr, you are automatically opted into the PKCE flow, so you'll need to handle the code exchange.

hello, I didn't noticed those instructions. Thx. 👍🏼 . I will read them and take the appropriate steps.

UPDATE: it works, yay. Supabase should make a note or something on the Login with Google instructions; in my opinion 😇 .

Regardless, thanks @charislam for pointing me to the right direction 💪🏼 .

[libkakashi]

I'm having the same issue with google and twitter signin. No error logs, no issues in the authentication flow, but nothing happens after redirect. The session object is always empty.

Also, interestingly, it only happens on vercel. I deployed the same commit and same .env on digitalocean and it works just fine. Probably something to do with serverless in my case. Still figuring it out

[Nelhoa]

I'm having the same issue with google and twitter signin. No error logs, no issues in the authentication flow, but nothing happens after redirect. The session object is always empty.

Also, interestingly, it only happens on vercel. I deployed the same commit and same .env on digitalocean and it works just fine. Probably something to do with serverless in my case. Still figuring it out

I’m facing the same issue as you but with cloudflare. In my local env it works perfectly fine (linked to my remote db). Have you found any solution yet ?

[Nelhoa]

I'm having the same issue with google and twitter signin. No error logs, no issues in the authentication flow, but nothing happens after redirect. The session object is always empty.

Also, interestingly, it only happens on vercel. I deployed the same commit and same .env on digitalocean and it works just fine. Probably something to do with serverless in my case. Still figuring it out

Finally found a solution !
I was not redirecting to the OAuth callback endpoint on my server trought the supabase.auth.signinWithOAuth()
Witch surprisingly works in my local env, but not in production env… (giving no error, nowhere…)
If you didn’t, configure an OAuth callback endpoint like explained on the Documentation page of the SSR OAuth PKCE Flow

[burhanusman]

Had similar issue. Fixed it by changing redirectTo: ${origin}/auth/callback to redirectTo: ${process.env.NEXT_PUBLIC_BASE_URL}/auth/callback . For some reason ${origin} was not working on Vercel.
Need to define NEXT_PUBLIC_BASE_URL in .env files

[jt6677]

This bug is so unbelievable .

const { data: authListener } = supabaseClient.auth.onAuthStateChange((event, session) => { console.log('first', event, session) return () => authListener.subscription.unsubscribe() }, []

Event after redirect from google is never changed to SIGNED_IN and session is just null.

"pnpm": { "overrides": { "@supabase/gotrue-js": "2.43.1" } },
worked for me. I will never upgrade supabase-js ever again. I also test it with a fresh Auth-help repo. It has this same bug.

[jt6677]

I came from "@supabase/supabase-js": "2.39.8", this should not be closed.

[Razikus]

its still an issue

[kafle1]

same here

[jt6677]

This strange bug made me refactor my entire app to Nextjs. It seems supabase only focuses on implementation in Nextjs. Everything in theory should work in regular React but in reality, it just does not work. After switching to Nextjs, I never experienced this problem again. supabaseClient.auth.onAuthStateChange((event, session) => { console.log('first', event, session) return () => authListener.subscription.unsubscribe() }, [] The event is always properly set as "SIGNED_IN". This WAS NOT the case in my old React app. I have not changed any setting in GoogleSignIn.

At some point, you just have to bite the bullet and go with Supabase's decision. (NextJs).

[Razikus]

This bug is because supabase supports mainly hash router
Not history router

[milanpoliak]

The latest version still only works in Firefox. On Chrome it gets stuck and never fires the SIGNED_IN event.

[ElectricCodeGuy]

I think i actually found the bug after some hours digging though it...
So my Domains is connected to Vercel where i both have lovguiden.ai and also www.lovguiden.ai
I have set it up as recommended by Vercel to redirect to www.lovguiden.ai
In supabase at the Redirect URLs i just had https://lovguiden.ai/api/auth/callback
So when I tried to use Social Auth with Google it would correctly create the account in Supabase Auth using SSR, but it would always redirect me to the root page withe code attached to the URL.

The reason is that when Supabase Auth redirects to https://lovguiden.ai/api/auth/callback, since I specified this, Vercel domain control then in return redirects me to https://www.lovguiden.ai/ but without the "api/auth/callback" so I would always end up on the root page...

I changed my Redirect urls on supabase to https://www.lovguiden.ai/ and now it works as expected using:

import { createClient } from '@/lib/client/client';

export async function signInWithGoogle() {
  const supabase = createClient();

  await supabase.auth.signInWithOAuth({
    provider: 'google',
    options: {
      redirectTo: `${location.origin}/api/auth/confirm`
    }
  });
}

and the /api/auth/callback

import { cookies } from 'next/headers';
import { NextResponse } from 'next/server';
import { type CookieOptions, createServerClient } from '@supabase/ssr';

export async function GET(request: Request) {
  const { searchParams, origin } = new URL(request.url);
  const code = searchParams.get('code');
  // if "next" is in param, use it as the redirect URL
  const next = searchParams.get('next') ?? '/';

  if (code) {
    const cookieStore = cookies();
    const supabase = createServerClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
      {
        cookies: {
          get(name: string) {
            return cookieStore.get(name)?.value;
          },
          set(name: string, value: string, options: CookieOptions) {
            cookieStore.set({ name, value, ...options });
          },
          remove(name: string, options: CookieOptions) {
            cookieStore.delete({ name, ...options });
          }
        }
      }
    );
    const { error } = await supabase.auth.exchangeCodeForSession(code);
    if (!error) {
      return NextResponse.redirect(`${origin}${next}`);
    }
  }

  // return the user to an error page with instructions
  return NextResponse.redirect(`${origin}/redirect/auth-code-error`);
}

This was awful to figure out..............

[jdtzmn]

I was facing similar issues. In case anyone else has this issue, double-check that when you're trying to use the PKCE flow you create a Supabase client with @supabase/ssr. I was creating the client with supabase/supbase-js which meant when I called signInWithOAuth() it returned with an access_token as a URL hash instead of a query with the raw code.

[tomery11]

I was facing similar issues. In case anyone else has this issue, double-check that when you're trying to use the PKCE flow you create a Supabase client with @supabase/ssr. I was creating the client with supabase/supbase-js which meant when I called signInWithOAuth() it returned with an access_token as a URL hash instead of a query with the raw code.

did you use react? or next?

[QuocThuanTruong]

Still got this issue, it's so annoying