Setting up Supabase Google OAuth with Capacitor (android)

Capacitor
1

Can somehow help implementing this? I’ve been trying everything but can’t get it to work…

→ I think I have to set flowType to pkce?

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
	auth: {
		flowType: 'pkce',
	},

→ I enabled cookies; do I have anything else to facilitate this?

    "CapacitorCookies": {
      "enabled": true
    }

→ I set up Google Cloud console + Supabase correctly. When running:

  const signInWithProvider = async (provider) => {
    const redirectTo = 'com.myapp.myapp://auth';
    const { error } = await supabase.auth.signInWithOAuth({
      provider,
      options: { redirectTo },
    });
    if (error) console.error(error);
  };

→ I’m getting back a response containing access_token, code, id_token (with user data); etc.

I’ve tried setSession and However I’m unable to turn this into a session:

const { data, error } = supabase.auth.setSession({ access_token: varA, refresh_token: varB });

I’ve also tried exchangeCodeForSession but I always run into errors.

await supabase.auth.exchangeCodeForSession(code)

It’s unclear to me how I can use the response from Google to start a session; supposedly the session should be created by the supabase client but I can’t make it work.

Could someone please walk me through the correct implementation of this?

2
4

If you take the time to search the docs, it shows the answer you seek. and yes this has nothing to do with capacitor or ionic.

5

@Henk007 Did you ever get this working? Any tips? Struggling as well

7

Appreciate the response!

9

Would love a little write up when you have time. Still would be super beneficial to me. Never got it working.

Thanks!

11

:clap: I’ll give it a shot in the next few days. Thanks so much!

12

It worked! You don’t even know how many hours I sunk into this. Think the key for me was mainly using the App.addListener as I believe I had most of the other intricacies in place.

Regardless thank you very much for all the detail.

15

@Henk007 Can you please share your solution? I’m also trying to make it work, but no success at this point :disappointed:
Thank you!

16

can you share the solution please :pray:

17

Solution

  useEffect(() => {
    const listener = App.addListener('appUrlOpen', async (data) => {
      const url = new URL(data.url)
      const params = new URLSearchParams(url.hash.substring(1)) // remove the leading '#'

      await supa.auth.setSession({
        access_token: params.get('access_token') || '',
        refresh_token: params.get('refresh_token') || '',
      })
    })
    return () => {
      listener.remove()
    }
  }, [])
2 Likes
18

thank you @sjohns21 this worked for me!

19

Somewhat old topic/question but I wanted to give a reasonably newer answer for anyone that’s struggling in 2025.

Today there’s a way to use Universal Links (Deep Links) which is more secure than the custom app domains, but for the most part other solutions in this post still apply.

  1. You do not need to use the PKCE option, actually don’t since this does not use a server
  2. CapacitorCookies does not need to be enabled
  3. The solution by @sjohns21 is correct, and I’ve actually noticed that we don’t get a refresh_token back from Supabase but it’s required in the setSession.

I’ve created a (long) tutorial going through the whole process of a blank Ionic web app all the way through creating a custom website for the Universal Link, linking it with Apple and creating the Capacitor app. The full work is here: Capacitor Google Authentication | Chris Weed

The tl;dr version:

  1. Create a vanilla Ionic web app
  2. Use the standard tutorial on Supabase to add a Google Auth button (the web login should work)
  3. Create a custom webpage with a custom domain name with the apple-app-site-association file
  4. Wrap your app in Capacitor using their instructions
  5. In Xcode link the app to your domain, give the app Web Association privilages
  6. Lastly make sure the redirect url is of your custom domain and website so that it launches the native app.

Gotchas:

  1. Some browsers don’t launch native apps (Brave and Orion are two as of this writing)
  2. You need to use the “consent” auth flow (see the gif below) otherwise the redirect will not open the native app.

There may be ways to improve this flow even more (in-app browser maybe?) but for now this is a pretty easy setup for anyone that’s trying to create an authenticated Capacitor app using Supabase and Google.

app-last

2 Likes