Google OAuth not working locally

[rohanmayya]

Bug report

• [y] I confirm this is a bug with Supabase, not with my own application.
• [y] I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

I'm testing Google OAuth with my NextJS app router project with the latest libraries (supabase-js and supabase/ssr). Everything works perfectly when I setup everything correctly according to the guide on a remote Supabase environment (I've done this before several times).

However, this is the first time I'm trying to set this up locally for convenience, but I'm having issues. After adding this to my config.toml:

[auth.external.google]
enabled = true
client_id = "env(SUPABASE_AUTH_GOOGLE_CLIENT_ID)"
secret = "env(SUPABASE_AUTH_GOOGLE_SECRET)"
redirect_uri = "http://localhost:54321/auth/v1/callback"

I start getting haphazard behaviour. The redirect doesn't work, it does not take me to the logged in page of my app. (Note that this works perfectly in staging/prod). If it helps to know, when I sign in with google on localhost:3000, it takes me to 127.0.0.1:3000?code=xyz (where code is the code I get from signing in) but doesn't go further than that.

Also to note, I'm using OAuth with PKCE flow. So there's a route handler that intercepts the flow, gets a session in exchange for code (and also does some DB manipulation) and then redirects back to home.

To Reproduce

Follow the guide on setting up Google Oauth with Supabase and NextJS, and also testing Supabase locally.

Expected behavior

Redirects should happen properly, without it taking me back to home while being in a signed out state (That's currently happening right now).

System information

• OS: macOS
• Browser: Chrome
• Version of supabase:
  "@supabase/ssr": "^0.0.10",
  "@supabase/supabase-js": "^2.38.5",
• Version of Node.js: 18.17.0

[saltcod]

cc @silentworks who knows this stuff inside out. But I think you redirect_uri should be blank there. That should be in your Google app settings. Also, are you sure your env vars are working? Have you tried pasting them into here directly? (you don't want to commit that file then, but useful for testing)

[GaelTikeng]

Hi guys, I'm trying to use Google OAuth with Supabase to signup in my application. After the consent screen I'm redirected back to a page of my application but without the user credentials in the localStorage. These are screenshots

[natealcedo]

Getting a similar issue here. This is a non starter for developing locally with supabase /:

[natealcedo]

I'm getting this issue

And this is my config.toml

# A string used to distinguish different Supabase projects on the same host. Defaults to the
# working directory name when running `supabase init`.
project_id = "realtime"

[api]
enabled = true
# Port to use for the API URL.
port = 54321
# Schemas to expose in your API. Tables, views and stored procedures in this schema will get API
# endpoints. public and storage are always included.
schemas = ["public", "storage", "graphql_public"]
# Extra schemas to add to the search_path of every request. public is always included.
extra_search_path = ["public", "extensions"]
# The maximum number of rows returns from a view, table, or stored procedure. Limits payload size
# for accidental or malicious requests.
max_rows = 1000

[db]
# Port to use for the local database URL.
port = 54322
# Port used by db diff command to initialize the shadow database.
shadow_port = 54320
# The database major version to use. This has to be the same as your remote database's. Run `SHOW
# server_version;` on the remote database to check.
major_version = 15

[db.pooler]
enabled = false
# Port to use for the local connection pooler.
port = 54329
# Specifies when a server connection can be reused by other clients.
# Configure one of the supported pooler modes: `transaction`, `session`.
pool_mode = "transaction"
# How many server connections to allow per user/database pair.
default_pool_size = 20
# Maximum number of client connections allowed.
max_client_conn = 100

[realtime]
enabled = true
# Bind realtime via either IPv4 or IPv6. (default: IPv6)
# ip_version = "IPv6"
# The maximum length in bytes of HTTP request headers. (default: 4096)
# max_header_length = 4096

[studio]
enabled = true
# Port to use for Supabase Studio.
port = 54323
# External URL of the API server that frontend connects to.
api_url = "http://127.0.0.1"

# Email testing server. Emails sent with the local dev setup are not actually sent - rather, they
# are monitored, and you can view the emails that would have been sent from the web interface.
[inbucket]
enabled = true
# Port to use for the email testing server web interface.
port = 54324
# Uncomment to expose additional ports for testing user applications that send emails.
# smtp_port = 54325
# pop3_port = 54326

[storage]
enabled = true
# The maximum file size allowed (e.g. "5MB", "500KB").
file_size_limit = "50MiB"

[auth]
enabled = true
# The base URL of your website. Used as an allow-list for redirects and for constructing URLs used
# in emails.
site_url = "http://127.0.0.1:3000"
# A list of *exact* URLs that auth providers are permitted to redirect to post authentication.
additional_redirect_urls = ["https://127.0.0.1:3000"]
# How long tokens are valid for, in seconds. Defaults to 3600 (1 hour), maximum 604,800 (1 week).
jwt_expiry = 3600
# If disabled, the refresh token will never expire.
enable_refresh_token_rotation = true
# Allows refresh tokens to be reused after expiry, up to the specified interval in seconds.
# Requires enable_refresh_token_rotation = true.
refresh_token_reuse_interval = 10
# Allow/disallow new user signups to your project.
enable_signup = true
# Allow/disallow testing manual linking of accounts
enable_manual_linking = false

[auth.email]
# Allow/disallow new user signups via email to your project.
enable_signup = false
# If enabled, a user will be required to confirm any email change on both the old, and new email
# addresses. If disabled, only the new email is required to confirm.
double_confirm_changes = true
# If enabled, users need to confirm their email address before signing in.
enable_confirmations = false

# Uncomment to customize email template
# [auth.email.template.invite]
# subject = "You have been invited"
# content_path = "./supabase/templates/invite.html"

[auth.sms]
# Allow/disallow new user signups via SMS to your project.
enable_signup = true
# If enabled, users need to confirm their phone number before signing in.
enable_confirmations = false
# Template for sending OTP to users
template = "Your code is {{ .Code }} ."

# Use pre-defined map of phone number to OTP for testing.
[auth.sms.test_otp]
# 4152127777 = "123456"

# This hook runs before a token is issued and allows you to add additional claims based on the authentication method used.
[auth.hook.custom_access_token]
# enabled = true
# uri = "pg-functions://<database>/<schema>/<hook_name>"


# Configure one of the supported SMS providers: `twilio`, `twilio_verify`, `messagebird`, `textlocal`, `vonage`.
[auth.sms.twilio]
enabled = false
account_sid = ""
message_service_sid = ""
# DO NOT commit your Twilio auth token to git. Use environment variable substitution instead:
auth_token = "env(SUPABASE_AUTH_SMS_TWILIO_AUTH_TOKEN)"

# Use an external OAuth provider. The full list of providers are: `apple`, `azure`, `bitbucket`,
# `discord`, `facebook`, `github`, `gitlab`, `google`, `keycloak`, `linkedin_oidc`, `notion`, `twitch`,
# `twitter`, `slack`, `spotify`, `workos`, `zoom`.
[auth.external.google]
enabled = true
client_id = "<redacted>"
# DO NOT commit your OAuth provider secret to git. Use environment variable substitution instead:
secret = "env(SUPABASE_AUTH_EXTERNAL_GOOGLE_SECRET)"
# Overrides the default auth redirectUrl.
redirect_uri = ""
# Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
# or any other third-party OIDC providers.
url = ""

[analytics]
enabled = false
port = 54327
vector_port = 54328
# Configure one of the supported backends: `postgres`, `bigquery`.
backend = "postgres"

# Experimental features may be deprecated any time
[experimental]
# Configures Postgres storage engine to use OrioleDB (S3)
orioledb_version = ""
# Configures S3 bucket URL, eg. <bucket_name>.s3-<region>.amazonaws.com
s3_host = "env(S3_HOST)"
# Configures S3 bucket region, eg. us-east-1
s3_region = "env(S3_REGION)"
# Configures AWS_ACCESS_KEY_ID for S3 bucket
s3_access_key = "env(S3_ACCESS_KEY)"
# Configures AWS_SECRET_ACCESS_KEY for S3 bucket
s3_secret_key = "env(S3_SECRET_KEY)"

[natealcedo]

After a login I get redirected to

[natealcedo]

And the main issue I get on the console is

[sp88011]

I ran into a similar issue and fixed it by making sure that after the OAuth flow has finished, I'm redirected to my callback URL which is I exchange the code you see in your URL for a session.

login.tsx

    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: "google",
      options: {
        redirectTo: "http://localhost:3000/callback", //after the google redirect, we need to redirect to this route
        queryParams: {
          access_type: "offline",
          prompt: "consent",
        },
      },
    });

config.toml

secret = "env(GOOGLE_CLIENT_SECRET)"
# Overrides the default auth redirectUrl.
redirect_uri = "http://localhost:54321/auth/v1/callback"

[dhutaryan]

I use Flutter and have the issue with google sign in as well. I have the following issue.

flutter: ClientException with SocketException: Connection refused (OS Error: Connection refused, errno = 61), address = 127.0.0.1, port = 55038, uri=http://127.0.0.1:54321/auth/v1/token?grant_type=id_token

[auth.external.google]
enabled = true
client_id = "env(GOOGLE_CLIENT_ID)"
secret = "env(GOOGLE_CLIENT_SECRET)"
redirect_uri = "http://localhost:54321/auth/v1/callback"

[siftestate]

Same issue as the people above. Erratic behaviour on oauth with google locally but works perfectly on prod.

[ryanleecode]

no matter what i do, i keep getting "AuthApiError: invalid flow state, no valid flow state found" locally.

[latifs]

Hey guys? Anybody got that figured out?

[betotorodev]

Facing the same error. Has anyone solved this already?

[silentworks]

@latifs I will try and get a video done by next week.

[betotorodev]

Thanks 🙏🏼 @silentworks

[LiamAshdown]

Yes. I have everything like this guide but the redirect keep sent me to this path: http://127.0.0.1:3000/?code=6edb... and not to my project.

I also get the same issue.

[betotorodev]

@silentworks sorry men, but could you share us the video so we can try to solve this problem 😅

[latifs]

@silentworks, Did you have a chance to get around making that video?
Thanks

[AmanVarshney01]

same issue

[GrossiBP]

I put in Google's redirect URI this "http://127.0.0.1:54321/auth/v1/callback" and it accpeted. When you get the error click on "learn more" and it will point to to redirect mismatch URI. It helped me.

[pr22nik23]

Seems to be working in prod correctly but I managed to solve it for localhost also. You just need to add redirectTo option to your request. Just redirect to your own back-end which handles to code switch correctly.

   async function Login() {
        const { data, error } = await supabase.auth.signInWithOAuth({
            provider: 'google',
            options: {
                redirectTo: "http://localhost:3000/auth/callback",
                queryParams: {
                    access_type: 'offline',
                    prompt: 'consent',
                },
            },
        })
    }

[kstephensen]

I finally figured it out after months of struggling! The bug comes from how redirect URLs are set up with wildcards in the Supabase Authentication / URL Configuration settings.

My project is set up similarly to OP in that after signing in, the provided redirectTo value is ${base url}/auth/callback. My Redirect URLs in the Supabase Authentication Redirect URL Configurations were set up like http://localhost:3000/*, with only one *.

HOWEVER - if you look at the docs, the single * is only used to match non-separator characters, which are '.' and '/'. So the redirectURL ${base url}/auth/callback is actually invalid as a redirect because it has non-separator characters. With only one *, I could only redirect to something like ${base url}/auth.

To fix: change the redirect URLs to http://localhost:3000/** with two * instead of just one to match any sequence of characters.

[llanas]

I had the problem that my app was running on http://localhost:3000 but redirection was made to http://127.0.0.1:3000 and the app was not available there.
I replace every 127.0.01 in my configuration and add redirect url and authorized url to localhost in console.google but still the same error.

It finally worked out when I set skip_nonce_check to false.
Hope it helps!

[sbhatm1213]

Facing this error still AuthSessionMissingError: Auth session missing! at http://localhost:3000/static/js/bundle.js:79331:20

Steps followed -
(1) Add Client ID and Secret on Supabase Google Auth Provider - Done
(2) Add Javascript origin - Done - http://localhost:3000/
(3) Add Redirect URI - Done - http://localhost:3000/auth/v1/callback and https://my-domain.supabase.co/auth/v1/callback
(4) Add code for onAuthStateChange - Done
(5) Try using const { data: { session } } = await supabase.auth.getSession() - Done - Doesn't work
(6) Try using const { data: { user } } = await supabase.auth.getUser() - Done - Doesn't work
(7) Try with different gotrue-js version - Done - "@supabase/supabase-js": {
"@supabase/gotrue-js": "2.43.1"
}
(8) Try on Firefox - Done - This works fine , so on Chrome is the problem

Same issue even with Azure

Although login happens, cannot get the session/user