signInWIthOAuth not working on client side

[BjoernRave]

I want to implement "login with google".

I am self hosting gotrue / supabase/auth as a docker container. In my config I have:

GOTRUE_URI_ALLOW_LIST="http://localhost:3004,scoutello://,http://localhost:3000,localhost,http://localhost"
GOTRUE_EXTERNAL_GOOGLE_ENABLED=true
GOTRUE_EXTERNAL_GOOGLE_REDIRECT_URI=http://localhost:3000

On the frontend I init my auth like this:

import { AuthClient, type GoTrueClient } from "@supabase/auth-js"
import Cookie from "js-cookie"

export const SESSION_KEY = "scoutello-auth"

let client: GoTrueClient = null

type AuthOptions = {
  pkce?: boolean
  headers: Record<string, string>
}

export const getAuth = (options?: AuthOptions) => {
  if (!client) {
    client = new AuthClient({
      headers: options?.headers,
      url: process.env.NEXT_PUBLIC_GOTRUE_URL,
      storage: {
        getItem: (key) => Cookie.get(key),
        setItem: (key, data) =>
          Cookie.set(key, data, {
            expires: 365,
            sameSite: "strict",
            secure: process.env.NODE_ENV === "production",
          }) as any,
        removeItem: (key) => Cookie.remove(key),
      },
      storageKey: SESSION_KEY,
      autoRefreshToken: true,
      persistSession: true,
      detectSessionInUrl: true,
      debug: true,
      flowType: options?.pkce ? "pkce" : "implicit",
    }) as any
  }

  return client
}

Then I have a button, which I can click and it executes this code:

 const auth = getAuth()

            const res = await auth.signInWithOAuth({
              provider: provider as any,
            })

then I get redirected to google, I can login and get sent back to http://localhost:3000 , but now the url looks like:

http://localhost:3000/?state=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3Mjc5OTkxMjgsInNpdGVfdXJsIjoiaHR0cDovL2xvY2FsaG9zdDozMDAwIiwiaWQiOiIwMDAwMDAwMC0wMDAwLTAwMDAtMDAwMC0wMDAwMDAwMDAwMDAiLCJmdW5jdGlvbl9ob29rcyI6bnVsbCwicHJvdmlkZXIiOiJnb29nbGUiLCJyZWZlcnJlciI6Imh0dHA6Ly9sb2NhbGhvc3Q6MzAwMC8iLCJmbG93X3N0YXRlX2lkIjoiIn0.5Koagy_axqgzv9uaw90s4UoxIvgtkIcSF4QQijlWbpU&code=4%2F0AVG7fiSQEj9oYSAvAS_glBlJTkw26E1MKZXf4Rw06ssuzsTTZK5KR4D07rqjC2ToZ9GWKw&scope=email+profile+openid+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email&authuser=0&prompt=consent

This is the decoded state JWT:

{
  "exp": 1727999128,
  "site_url": "http://localhost:3000",
  "id": "00000000-0000-0000-0000-000000000000",
  "function_hooks": null,
  "provider": "google",
  "referrer": "http://localhost:3000/",
  "flow_state_id": ""
}

At this point I still dont have a valid session on the client, nor does calling getSession() bring any results.

There is the parameter: detectSessionInUrl which could mean that now when I init the client for the first time that it should look at the url and complete the auth but that is not the case.

I also tried

  useAsync(async() => {
    const res = await auth.exchangeCodeForSession(query.code as string)

    console.log(res, "res")
  }, [query])

on the page i get redirected to but then I just get:

AuthApiError: invalid request: both auth code and code verifier should be non-empty

I am a little bit clueless how to finish the auth process. It should be possible to do this without a server, right?

[j4w8n]

@BjoernRave did you get this resolved? I don't know much about self-hosting, but I'm thinking this GOTRUE_EXTERNAL_GOOGLE_REDIRECT_URI=http://localhost:3000 needs to be a location to your docker container, not your app's location.

[BjoernRave]

okay, i will try to recheck that, but i already tried so much and am a little clueless. tbh currently looking at: https://www.better-auth.com/ and whats happening over there. Would still be happy to get gotrue running