Google Sign-In Error in Chrome Extension: Invalid Request (Error 400: redirect_uri_mismatch)

btahir commented 3 weeks ago

When attempting to sign in with Google in a Chrome extension using Supabase authentication, the following error occurs:

Access blocked: This app's request is invalid
You can't sign in because this app sent an invalid request. You can try again later, or contact the developer about this issue.
Error 400: redirect_uri_mismatch

Reproduction Repository

I have created a minimal repository to reproduce this issue: https://github.com/btahir/vite-supabase-chrome-extension

This repository contains a simplified Chrome extension built with Vite and Supabase, demonstrating the Google Sign-In error.

Steps to Reproduce

Clone the reproduction repository: git clone https://github.com/btahir/vite-supabase-chrome-extension
Follow the setup instructions in the repository's README
Load the extension in Chrome
Attempt to sign in using Google authentication
Observe the error message described above

Expected Behavior

The sign-in process should complete successfully, allowing the Chrome extension to authenticate with Supabase using Google Sign-In.

Actual Behavior

The sign-in process fails with an invalid request error, specifically a redirect_uri_mismatch.

Are there specific steps or configurations needed for Google Sign-In in a Chrome extension when using Supabase?
Does Supabase have any documentation or examples specifically for Chrome extension integration?
Are there known limitations or extra steps required for OAuth flows in Chrome extensions that might be affecting the Supabase integration?
How should the redirect URI be configured in the Google Cloud Console for a Chrome extension?

Specific Error Details

The full error message includes the following details:

Error 400: redirect_uri_mismatch
Request details: flowName=GeneralOAuthFlow

Any assistance in resolving this Chrome extension-specific authentication issue would be greatly appreciated. Thank you!

flabian78 commented 2 weeks ago

I have the same issue...

anngbaum commented 2 weeks ago

I found this comment had instructions that ultimately fixed this for me – the key points being to find the manifest key from the developer console, as well as adding a Web endpoint with the redirect URL included in the credentials. copying from SO:

I used a Client ID for Web application rather than for Chrome extension and added https://.chromiumapp.org (without trailing slash) to the list of Authorized redirect URIs

To make this work locally, I added the manifest key to my extension - Google seems to check the extension ID at runtime as part of launchWebAuthFlow

I replaced const params = new URLSearchParams(url.hash) with const params = new URLSearchParams(url.hash.replace('#', '')). The reason is url.hash looks like #id_token=&..., so the search param key looks like %23id_token and params.get('id_token') returns undefined.

however, now that it's working, I'm running into the exact same challenges described here that basically cause the login to fail whenever you click outside of the extension. might be worth starting with the strategy he outlines instead (that's what I'm hoping to implement next).

btahir commented 2 weeks ago

I found this comment had instructions that ultimately fixed this for me – the key points being to find the manifest key from the developer console, as well as adding a Web endpoint with the redirect URL included in the credentials. copying from SO:

I used a Client ID for Web application rather than for Chrome extension and added https://.chromiumapp.org (without trailing slash) to the list of Authorized redirect URIs To make this work locally, I added the manifest key to my extension - Google seems to check the extension ID at runtime as part of launchWebAuthFlow I replaced const params = new URLSearchParams(url.hash) with const params = new URLSearchParams(url.hash.replace('#', '')). The reason is url.hash looks like #id_token=&..., so the search param key looks like %23id_token and params.get('id_token') returns undefined.

however, now that it's working, I'm running into the exact same challenges described here that basically cause the login to fail whenever you click outside of the extension. might be worth starting with the strategy he outlines instead (that's what I'm hoping to implement next).

I saw this but the manifest key would only be available if you publish the extension? What about just locally loading it?

Oh and just noticed you put together that article. Thanks! Very few good resources about this out there.

manishMandal02 commented 2 weeks ago

@btahir You can get the Extension Id without publishing it. Follow the process here

btahir commented 2 weeks ago

here

This process assumes you publish to the chrome dashboard which is not what i want to do when initially developing locally. But I still tried generating a Manifest key locally to satisfy this requirement and it still did not work.

I don't think this is it, we should be using a Chrome Extension Client Id and not a Web application as the Stack Overflow answer suggests. The key and redirect also should not matter.

These are the instructions on the official Supabase docs: https://supabase.com/docs/guides/auth/social-login/auth-google?queryGroups=platform&platform=chrome-extensions

They should be complete and actually work.

supabase / supabase