How to implement GoogleSignIn in Expo React Native app using firebase

Question

I've found a bunch of different documentation to implement GoogleSignIn.

React native with Google SignIn doc (to be used without firebase I think)

Firebase Auth doc (showing several api docs for every platform)

React Native doc (Using firebase, this one seems more relevant to me)

All of this is very confusing, I've done and undone things several times. I'm finally running with the last one:
using "@react-native-firebase/auth" package seems the good way to implement it.

Here is the process:

First : Show the google sign in button and get a first idToken from GoogleSignIn lib

import {
  GoogleSignin,
  GoogleSigninButton,
} from '@react-native-google-signin/google-signin';
import { auth } from '@react-native-firebase/auth';

GoogleSignin.configure({
  webClientId: 'web-client-id-from-firebase-after-having-enabled-authentication',
});

const onGoogleButtonClick = async () => {
       await GoogleSignin.hasPlayServices({ showPlayServicesUpdateDialog: true });
       // Get the users ID token
       const { idToken } = await GoogleSignin.signIn();    
...

Then the google idToken is used to get credential and sign into firebase :

// Create a Google credential with the token
const googleCredential = auth().GoogleAuthProvider.credential(idToken);

// Sign-in the user with the credential
return auth().signInWithCredential(googleCredential);

This signIn call should trigger onAuthStateChanged, with signIn user information and possibility to retreive a firebase idToken.

  useEffect(() => {
    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber; // unsubscribe on unmount
  }, []);

  const onAuthStateChanged = async (user) => {
    let token = await user.getIdToken();
    //then send token to be validated on server side and start user session
  ... }

I didn't try this last point yet because I cannot import the "auth" object properly. The doc says:

import { auth } from '@react-native-firebase/auth';

auth().signInWithCredential ...

trigger this error:

TypeError: 0, _auth.auth is not a function (it is undefined)

I've tried different ways to import it, reading this post without success.

Thank you for any help.

Guian · Accepted Answer · 2024-06-05 11:30:31Z

I've found the solution while writing the question:

Be carefull when importing auth from firebase : It is

import auth from '@react-native-firebase/auth';

And NOT

import { auth } from '@react-native-firebase/auth';

Then use auth reference like this :

// Create a Google credential with the token
const googleCredential = auth.GoogleAuthProvider.credential(idToken);

// Sign-in the user with the credential
return auth().signInWithCredential(googleCredential);

(mind the auth. or auth(). usage)

I feel silly after having written this long question but hopefully this will help some of you in the future.

ALSO: After having fix the import issue, I've run into native code linking problems. Be sure to follow firebase installation from the beginning from React native doc. => see the Expo section with "Configure React Native Firebase modules"

Then I had to "prebuild" my android app again and uninstall/reinstall my development build on my device. (not that native module won't work with ExpoGo, we can only use a development build.)

Collectives™ on Stack Overflow

How to implement GoogleSignIn in Expo React Native app using firebase

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related