Multiple platforms for OAuth Support?

[chrisdhanaraj]

Hello there!

Using Google as an example, Google OAuth wants me to create a new client for each platform I'm trying to target; i.e., I have a client for iOS, Android, and Web. In Supabase, I only see the space to add one client, versus Auth0 which allows me to create multiple different applications.

Does Supabase Auth support multiple platforms, or is it in the works?

[J0]

Hey, unfortunately, for the case of Google we only support one client per OAuth provider(e.g. web/iOS/Android) for the moment. It's something that we plan on revisiting in the near future though.

[dmassiani]

Any update about this feature?

[kangmingtay]

@chrisdhanaraj @dmassiani there is now support for multiple google client IDs - you can visit your supabase project auth settings and under the google provider, there should be an "Authorized Client IDs (for Android, One Tap, and Chrome extensions)" option

[dmassiani]

@kangmingtay You are amazing! That's an absolute good news for me! Thank you ❤️

[elyobo]

@kangmingtay how can we set this in the config.toml for local development?

[wishup-agrit]

Hey @kangmingtay , still facing the error while I added the client ID for iOS in new field. Has anyone tried using the google provider for two client IDs one of which is iOS.

[baronha]

Does anyone have any updates for Supabase CLI that can use multiple client_id at the same time for config.toml like this:

client_ids = "env(GOOGLE_IOS_CLIENT_ID),env(GOOGLE_WEB_CLIENT_ID)"

[elyobo]

You don't need to, you only need the web client ID in there even to do iOS google sign in.

[elyobo]

But also I have seen it commented elsewhere in discussions on this issue that comma separated values do work, if you do actually need them for some reason (like having multiple web IDs).

[baronha]

OH God. This actually works on iOS. I spent all day testing yesterday but it didn't work. Thank you very much

[masfworld]

I'm using React Native + Expo to develop an application for web and iOS (and potentially Android) I have the Google OAuth working in Web, but not in iOS, is it compatible with Supabase? Any example?

Thanks in advance

[elyobo]

We have an react native + expo app with Google OAuth which works across iOS and Android. It's necessary to create three OAuth client IDs, one for web, one for iOS, and one for Android. Only the web client ID needs to be set in the Supabase config for Google auth, the web and the iOS client IDs are needed in your build, and the Android one just needs to exist in your Google account. This is not documented well, as far as I can tell - it was very confusing when I set it up.

[masfworld]

Yep, it's not very well documented. I decided using GoogleSignIn library for Android and iOS and supabase API for Web. Using that library means that I cannot use Expo Go anymore, I'm using EAS now. I've decided to postpone iOS implementation because it requires the developer license right now.

This is my code. It's working for Web and Android. Happy to receive feedback

import { createContext, useContext, useEffect, useState } from 'react'
import { Session } from '@supabase/supabase-js'
import { supabase } from '../utils/supabase'
import { Platform } from 'react-native'
import { router } from 'expo-router'
import { InteractionManager } from 'react-native'
import {
  GoogleSignin,
  statusCodes,
  isErrorWithCode,
  isSuccessResponse,
} from '@react-native-google-signin/google-signin'

// Define the shape of our auth context
type AuthContextType = {
  session: Session | null        // Current session state
  loading: boolean              // Loading state for auth operations
  signInWithGoogle: () => Promise<void>  // Google sign-in function
  signOut: () => Promise<void>  // Sign-out function
}

// Create the auth context with undefined as initial value
const AuthContext = createContext<AuthContextType | undefined>(undefined)

export function AuthProvider({ children }: { children: React.ReactNode }) {
  // State for managing session and loading status
  const [session, setSession] = useState<Session | null>(null)
  const [loading, setLoading] = useState(true)
  

  useEffect(() => {
    // Flag to prevent state updates after component unmount
    let isMounted = true;

    const initSession = async () => {
       // Configure Google Sign-In for Android
      if (Platform.OS === 'android') {
        await GoogleSignin.configure({
          webClientId: process.env.EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID, // Web Client ID from Google Cloud Console
        });
      }
      try {
        // Get the initial session from Supabase
        const { data: { session }, error } = await supabase.auth.getSession()
        if (error) throw error
        
        // Update session state only if component is still mounted
        if (isMounted) {
          await InteractionManager.runAfterInteractions(() => {
            setSession(session)
            setLoading(false)
          })
        }
      } catch (error) {
        console.error('Error getting session:', error)
      }
    }

    initSession()

    // Subscribe to auth state changes
    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
      if (isMounted) {
        InteractionManager.runAfterInteractions(() => {
          setSession(session)
        })
      }
    })

    // Cleanup function
    return () => {
      isMounted = false
      subscription.unsubscribe()
    }
  }, [])

  // Handle Google Sign In
  const signInWithGoogle = async () => {
    try {
      // Web platform authentication
      if (Platform.OS === 'web') {
        const { error } = await supabase.auth.signInWithOAuth({
          provider: 'google',
          options: {
            redirectTo: process.env.URL,
          },
        })
        if (error) throw error
      } else {
        // Native platforms authentication
        try {
          // Check if Google Play Services are available (Android)
          await GoogleSignin.hasPlayServices();
          // Trigger native Google Sign In flow
          const response = await GoogleSignin.signIn();
          console.log(JSON.stringify(response, null, 2))
          if (isSuccessResponse(response)) {
            // Sign in to Supabase with the Google ID token
            const { data, error } = await supabase.auth.signInWithIdToken({
              provider: 'google',
              token: response.data.idToken!
            });
            if (error) throw error
            router.replace('/')
          } else {
            console.log('Auth cancelled by the user')
          }
        } catch (error) {
          // Handle specific Google Sign In errors
          if (isErrorWithCode(error)) {
            switch (error.code) {
              case statusCodes.IN_PROGRESS:
                console.log('Operation already in progress')
                break;
              case statusCodes.PLAY_SERVICES_NOT_AVAILABLE:
                console.log('Play services not available or outdated')
                break;
              default:
                console.log('Google Signin Error')
            }
          } else {
            console.log('Google Auth Error')
          }
        }
      }
    } catch (error) {
      console.error('Error in signInWithGoogle:', error)
    }
  }

  // Handle Sign Out
  const signOut = async () => {
    try {
      // Sign out from Supabase
      const { error } = await supabase.auth.signOut()
      if (error) throw error

      // Sign out from Google (Android only)
      if (Platform.OS === 'android') {
        await GoogleSignin.signOut()
      }
      
      // Clear session state after all interactions are complete
      await InteractionManager.runAfterInteractions(() => {
        setSession(null)
      })
    } catch (error) {
      console.error('Error in signOut:', error)
    }
  }

  // Provide auth context to children components
  return (
    <AuthContext.Provider value={{ session, loading, signInWithGoogle, signOut }}>
      {children}
    </AuthContext.Provider>
  )
}

// Custom hook to use auth context
export const useAuth = () => {
  const context = useContext(AuthContext)
  if (context === undefined) {
    throw new Error('useAuth must be used within an AuthProvider')
  }
  return context
}