Configure Google OAuth with React native app.

[mgazanayi]

Hi,
Do you have any documentation on how to get Google and Facebook auth working with a React Native project?
Thanks

[awalias]

hey @mgazanayi

what issues are you facing with setting this up?

note that you can use the regular signIn with redirect method like:

const { user, session, error } = await supabase.auth.signIn({
  provider: 'google'
}, {
  redirectTo: 'https://example.com/welcome' // this can also be a mobile deep link
})

you can add URLs (including mobile deep links) to the allow list in the dashboard in Auth > Settings > Additional Allowed URLs:

[firstpersoncode]

Actually, it's not that simple. Let's say you want to redirect the user to a specific screen in your React Native app after clicking a link in an email. The React Native deep linking mechanism ignores the hash '#' added by Supabase in the user's email redirect link. As a result, the app won't open using deep linking unless the redirect link points to the initial screen of your React Native app. If it does, everything works fine.

[rodbs]

I have the same question. How do you implement authentitication with Google or Facebook in a React Native app?
When I log in I get this an object with this URL
"url": "https://xxxxx.supabase.co/auth/v1/authorize?provider=google"

Are we supposed to render this page in React Native to keep with the process?

And what about this library? It seems to be the most popular to do oAuth in React Native.
https://github.com/FormidableLabs/react-native-app-auth

[saadHeisentech]

I have this same question, what do we do after this?

[rodbs]

I'd appreciate it if anyone could elaborate a bit more on authentication in RN (with expo) using OAuth providers.

The only offical doc I've seen it this:
https://supabase.com/docs/reference/javascript/auth-signin#sign-in-using-a-refresh-token-eg-in-react-native

// An example using Expo's `AuthSession`
const redirectUri = AuthSession.makeRedirectUri({ useProxy: false });
const provider = 'google';

AuthSession.startAsync({
  authUrl: `https://MYSUPABASEAPP.supabase.co/auth/v1/authorize?provider=${provider}&redirect_to=${redirectUri}`,
  returnUrl: redirectUri,
}).then(async (response: any) => {
  if (!response) return;
  const { user, session, error } = await supabase.auth.signIn({
    refreshToken: response.params?.refresh_token,
  });
});

The problem with this example is that doesn't work on react-native-web using NextJS. It tries to open an start page under http://localhost:3000?start?.... that it supposed to be an Expo proxy ....

On the other hand, on Expo there's an example for Google OAuth:
https://docs.expo.dev/guides/authentication/#google

import * as React from 'react';
import * as WebBrowser from 'expo-web-browser';
import * as Google from 'expo-auth-session/providers/google';
import { Button } from 'react-native';

WebBrowser.maybeCompleteAuthSession();

export default function App() {
  const [request, response, promptAsync] = Google.useAuthRequest({
    expoClientId: 'GOOGLE_GUID.apps.googleusercontent.com',
    iosClientId: 'GOOGLE_GUID.apps.googleusercontent.com',
    androidClientId: 'GOOGLE_GUID.apps.googleusercontent.com',
    webClientId: 'GOOGLE_GUID.apps.googleusercontent.com',
  });

  React.useEffect(() => {
    if (response?.type === 'success') {
      const { authentication } = response;
      }
  }, [response]);

  return (
    <Button
      disabled={!request}
      title="Login"
      onPress={() => {
        promptAsync();
        }}
    />
  );
}

Problem is that you cannot specify supabase authenticate server

Finally I've found this issue regarding id_token workflow where it explain the id_token grant flow
supabase/auth#189

My question is how to link all this together (RN/RNW + Expo auth + supabase). What is the correct workflow? Expo auth methods authenticate against Google API and returns an id_token. How is it supposed to used it against supabase?

@kangmingtay I'd appreciate any inputs! thx

[Mykyta-Chernenko]

I have the same setup and encounter the same problem and cannot make it work together

[sebasbeleno]

Hey there, same use here. Any updates?

[Je4stine]

Anybody?

[Mykyta-Chernenko]

here is the google login component I ended up with

import { Button, Text } from '@rneui/themed';
import { startAsync } from 'expo-auth-session';
import React from 'react';
import { Platform, View } from 'react-native';
import GoogleIcon from '@app/icons/google';
import { supabase } from '@app/api/initSupabase';
import * as Linking from 'expo-linking';
import { Provider } from '@supabase/supabase-js';
import { i18n } from '@app/localization/i18n';
import { theme } from '@app/theme';
export const GoogleOAuth = () => {
  const onPress = async () => {
    const returnUrl = Linking.createURL('');
    const signInParms = {
      provider: 'google' as Provider,
      options: {
        redirectTo: returnUrl,
      },
    };
    if (Platform.OS == 'web') {
      const { error } = await supabase.auth.signInWithOAuth(signInParms);
      if (error) {
        alert('Error happened: ' + error.message);
      }
    } else {
      // fixes a bug in supabase
      const oldWindow = window;
      window = undefined as any;
      const { data } = await supabase.auth.signInWithOAuth(signInParms);
      const authUrl = data.url;
      const response = await startAsync({ authUrl, returnUrl });
      if (response.type == 'success') {
        await Linking.openURL(response.url);
      } else if (response.type == 'error') {
        alert('Error happened: ' + response.error?.message || response.error?.cause);
      } else {
        alert('Something unexpected happened ' + JSON.stringify(response));
      }
      window = oldWindow;
    }
  };
  return (
    <>
      <Text
        style={{
          alignSelf: 'center',
          color: theme.lightColors.grey3,
          marginVertical: 15,
        }}
      >
        {i18n.t('oauth.pretext')}
      </Text>

      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Button type="outline" onPress={() => void onPress()}>
          <GoogleIcon height="20" width="20" />

          <Text style={{ marginLeft: 5 }}>{i18n.t('oauth.button.google')}</Text>
        </Button>
      </View>
    </>
  );
};

[Mykyta-Chernenko]

and I also have an AuthProvider that I wrap my app in that finalizes the sign-in/sign-up, or

import React, { createContext, useEffect, useState } from 'react';
import { supabase } from '@app/api/initSupabase';
import { Session } from '@supabase/supabase-js';
import { Linking } from 'react-native';

type ContextProps = {
  user: null | boolean;
  session: Session | null;
};

const AuthContext = createContext<Partial<ContextProps>>({});

interface Props {
  children: React.ReactNode;
}

const AuthProvider = (props: Props) => {
  // user null = loading
  const [user, setUser] = useState<null | boolean>(null);
  const [session, setSession] = useState<Session | null>(null);
  useEffect(() => {
    const handleDeepLinking = async (url: string | null): Promise<void> => {
      if (!url) return;
      const correctUrl = url.includes('#') ? url.replace('#', '?') : url;
      const urlObject = new URL(correctUrl);
      const accessToken = urlObject.searchParams.get('access_token');
      const refreshToken = urlObject.searchParams.get('refresh_token');
      if (!refreshToken || !refreshToken) return;
      // bug-fix, Buffer is used in the underlying lib, but is not imported
      global.Buffer = require('buffer').Buffer;
      await supabase.auth.setSession({ access_token: accessToken, refresh_token: refreshToken });
    };
    const listener = (event: { url: string }) => {
      void handleDeepLinking(event.url);
    };
    const subscription = Linking.addEventListener('url', listener);
    void Linking.getInitialURL().then((url) => handleDeepLinking(url));
    return () => {
      subscription.remove();
    };
  }, []);
  useEffect(() => {
    const getInitialSession = async () => {
      const {
        data: { session: initialSession },
      } = await supabase.auth.getSession();
      setSession(initialSession);
      setUser(initialSession ? true : false);
    };
    void getInitialSession();

    const {
      data: { subscription: authListener },
    } = supabase.auth.onAuthStateChange((event, session) => {
      console.log(`Supabase auth event: ${event}`);
      setSession(session);
      setUser(!!session);
    });
    return () => {
      authListener.unsubscribe();
    };
  }, []);

  return (
    <AuthContext.Provider
      value={{
        user,
        session,
      }}
    >
      {props.children}
    </AuthContext.Provider>
  );
};

export { AuthContext, AuthProvider };

[ogmzh]

I was set on using supabase as my prototyping - mvp phase backend, but after seeing how difficult it is to set up SSO with existing providers, i'm having second thoughts..

Firebase handles this with 0 fuss, was hoping supabase had a somewhat similar experience

[mgazanayi]

To be honest, I was also super excited, but it's just scam, all this time and a very important feature is not taken care of. with fire base you'll paye but you'll be peaceful, I gave up long time ago.

[chris-hinds]

Was hoping to use sup abase auth etc for a new react native project that requires sign-in with apple and google however this looks massively overcomplicated. I had a previous setup using Auth0 which worked seamlessly!

[mrtnrs]

I just wasted 2 crucial days on this 😭 goddamn

[lewisd1996]

I just wasted 2 crucial days on this 😭 goddamn

I still have google auth working and I also added Apple auth today. What are you struggling with?

[lewisd1996]

I have SSO setup in my react native app.

I've setup my supabase like so:

// supabase/index.ts

import {createClient} from '@supabase/supabase-js';
import AsyncStorage from '@react-native-async-storage/async-storage';

const supabaseUrl = ...
const supabaseKey = ...

export const supabase = createClient(supabaseUrl, supabaseKey, {
  auth: {
    detectSessionInUrl: false,
    storage: AsyncStorage,
  },
});

And then I have a wrapper that listens to auth changes:

const LinkingContext = ({children}: {children: ReactNode}) => {
  const navigation =
    useNavigation<NativeStackNavigationProp<BaseStackParamList>>();
  const setActionRequired = useAuthStore(state => state.setActionRequired);
  const setCurrentUser = useAuthStore(state => state.setCurrentUser);

  useEffect(() => {
    Linking.addEventListener('url', event => {
      let urlString = event.url;
      if (event.url.includes('authRedirectHandler#')) {
        urlString = event.url.replace(
          'authRedirectHandler#',
          'authRedirectHandler?',
        );
      }
      const url = new URL(urlString);

      const refreshToken = url.searchParams.get('refresh_token');
      const accessToken = url.searchParams.get('access_token');

      const type = url.searchParams.get('type');

      if (type === AUTH_REDIRECT_TYPES.INVITE) {
        console.log('the user verified their email!');
      }
      if (type === AUTH_REDIRECT_TYPES.RECOVERY) {
        console.log('the user needs to reset their password...');
        setActionRequired(AUTH_ACTION_TYPES.RECOVER_PASSWORD);
        navigation.navigate('ResetPassword');
      }
      if (accessToken && refreshToken) {
        supabase.auth
          .setSession({
            refresh_token: refreshToken,
            access_token: accessToken,
          })
          .then(res => {
            console.log({res});
            setCurrentUser(res.data.user);
          })
          .catch(err => console.log({err}));
      }
    });
    return () => {
      Linking.removeAllListeners('url');
    };
  }, [setCurrentUser, setActionRequired, navigation]);

  return <>{children}</>;
};

And the fix for the original problem of this issue is fixed by doing the following in your index.js file:

import 'react-native-url-polyfill/auto';
import {AppRegistry} from 'react-native';
import {name as appName} from './app.json';
import {encode, decode} from 'base-64';
import App from './App';

if (!global.btoa) {
  global.btoa = encode;
}
if (!global.atob) {
  global.atob = decode;
}

AppRegistry.registerComponent(appName, () => App);

However this may be fixed now? not sure.

And finally, the actual SSO takes place in a button component:

import Button from 'components/Button';
import React from 'react';
import {Linking} from 'react-native';

import GoogleIcon from '../svg/GoogleIcon';

const SUPABASE_URL = ...
const googleAuthUrl = `${SUPABASE_URL}/auth/v1/authorize?provider=google&redirect_to=myapp://auth`;

const LoginWithGoogleButton = ({
  className = '',
  text = 'Login with Google',
}: {
  className?: string;
  text?: string;
}) => {
  return (
    <Button
      className={className}
      variant="primary"
      startIcon={
        <GoogleIcon width={20} height={20} className="mr-2 text-white" />
      }
      text={text}
      onPress={() => {
        Linking.openURL(googleAuthUrl);
      }}
    />
  );
};

export default LoginWithGoogleButton;

This works great for me atm. You obviously have to complete the usual google auth setup and have deep linking setup within your app, then you're all good. (Also remember to add your app link to your supabase project's auth callback url list)

[chris-hinds]

@mgazanayi thanks for this, where is your LinkingContext wrapper used?

I've followed this, and so far am as far as having the user account created in supbabse, redirecting back to the app then that is it. The app doesnt pickup the url redirect. I think it might be because I have a global user context which I adding your LinkContext logic too and this wraps the entire app so doesnt have access to the Navigation object which is in the Navigation container

[chris-hinds]

Actually, I have this working now.

[Waba-tron]

Do you have a copy of the repo Chris. Kinda hard to piece everything together

[jjPlusPlus]

Actually, I have this working now.

@chris-hinds I know it's been a few months, but do you recall how you fixed your issue. I am in the same boat now.

[chris-hinds]

I think my main issue was not setting up the call-back URL correctly in the actual info.plist (I am only building for IOS right now) file.

This is what enabled my App to start opening when the auth session returned with the callback URL.

	<array>
		<dict>
			<key>CFBundleTypeRole</key>
			<string>None</string>
			<key>CFBundleURLName</key>
			<string>auth</string>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
			</array>
		</dict>
	</array>

[Julianus01]

After not finding any answers for a while, I've finally been able to solve my problem of trying to login with facebook provider, cause my onAuthStateChanges didn't trigger at all after authentication.

So for anybody trying to figure out how to login with facebook together with Supabase and Expo, this code should be working, at least in dev mode for me right now, we'll see in production.

  import { makeRedirectUri, startAsync } from 'expo-auth-session'
  import { supabase } from '...your_supabase_client'

  async function signInWithFacebook() {
    // TODO: Investigate how we can bypass exp permission check screen
    const returnUrl = makeRedirectUri({
      path: '/', // This were missing if you use react-navigation linking
      useProxy: false,
    })

    const oauthResponse = await supabase.auth.signInWithOAuth({
      provider: 'facebook',
      options: {
        redirectTo: returnUrl,
      },
    })

    if (oauthResponse.data.url) {
      const response: any = await startAsync({
        authUrl: oauthResponse.data.url,
        returnUrl: returnUrl,
      })

      supabase.auth.setSession({
        refresh_token: response.params?.refresh_token,
        access_token: response.params?.access_token,
      })
    }
  }

[thorwebdev]

Official documentation here:

1. Native Apple / Google sign in: https://supabase.com/docs/guides/auth/native-mobile-login
2. OAuth / Magic link & deep linking: https://supabase.com/docs/guides/auth/native-mobile-deep-linking

[firstpersoncode]

but can we do that without using expo?