Mayo-firebase-auth NPM

The context of using this package is:

You have a react-native app
You need to do google authentication
You need to cache the connected user to avoid requesting login every time
You need to save in a firestore db the last connection date.

Basically, you just have to import the library, wrap your app and navigate to the SignIn screen provided by the library.

And then, after login, an event 'signedIn' is emitted, that you can catch to describe what should be done on successfull login.

Here I am showing you all the things to do :

## Install

  # use yarn, it is faster and safer
  yarn add mayo-firebase-auth @react-native-google-signin/google-signin
  npx pod-install

Firebase configuration

Connect to firebase, create a project and an iOS application.
Export GoogleService-Info.plist and import it in your app/ios folder

Update Info.plist to add these parameters:

Add CLIENT_ID:

	<key>GIDClientID</key>
	<string>XXXXXXXXXXXX.apps.googleusercontent.com</string>

Add REVERSED_CLIENT_ID:

  <key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleTypeRole</key>
			<string>Editor</string>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>com.googleusercontent.apps.XXXXXXXXXXXXXXXXX</string>
			</array>
		</dict>
	</array>

Create a firebaseConfig.json file:

The parameters value are picked from GoogleService-Info.plist and app in the firebase console.

const conf = {
  apiKey: 'XXXX',
  authDomain: 'XXXXXX.firebaseapp.com',
  projectId: 'XXXXXX',
  storageBucket: 'XXXXXX.appspot.com',
  messagingSenderId: 'XXXXXX',
  appId: '1:XXXXXX',
  databaseURL: '',
  measurementId: 'XXXXXX',
};

export {conf};

Usage:

HomeScreen.tsx :

  import { useLogout, UserContext, UserContextType } from 'mayo-firebase-auth';
  const HomeScreen = () => {
    const { authEvents } = useContext(UserContext) as UserContextType;
    const navigation = useNavigation<NavigationProp<RootStackParamList, 'SignIn'>>();

    const { performLogout } = useLogout();
    useEffect(() => {
      const onSignedOut = async () => {
        navigation.navigate('SignIn');
      };
      
      authEvents.on('signedOut', onSignedOut);
      return () => authEvents.off('signedOut', onSignedOut);
    }, []);
  }

InitialScreen.tsx :

  import { UserContext, UserContextType } from 'mayo-firebase-auth';
  const InitialScreen = () => {
    const { user, setUser, authEvents, userContextLoading } = useContext(UserContext) as UserContextType;
    const navigation = useNavigation<NavigationProp<RootStackParamList>>();

    useEffect(() => {
        if(!userContextLoading) navigation.navigate(user ? 'Home':'SignIn');
    }, [user]);

    useEffect(() => {
      const onSignedIn = async (googleCredentials) => {
        if(!googleCredentials) throw Error('InitialScreen - Trying to firebase signIn without googleCredentials !');
        const newUser = await signInFirebase(googleCredentials);
        if(!newUser) throw Error('InitialScreen - Firebase sign do not return any user !');
        setUser(newUser);
      };
      authEvents.on('signedIn', onSignedIn);

      return () => {
        authEvents.off('signedIn', onSignedIn);
      };
    }, []);

    return null;
  };

AppNavigator.tsx:

  import { SignInScreen, UserProvider } from 'mayo-firebase-auth';

  export const MainApp: React.FC = () => {
    // For android WebClientId is mandatory. Also don't forget to add the SHA key in firebase console
    const webClientId = "XXXXXXXX.apps.googleusercontent.com";

    return (

      <NavigationContainer>
        <UserProvider>
            <Stack.Navigator>
              <Stack.Screen name="Login" component={InitialScreen}/>
              <Stack.Screen name="SignIn" component={SignInScreen} 
                initialParams={{ webClientId }}
              />
              <Stack.Screen name="Home" component={HomeScreen} />
            </Stack.Navigator>
        </UserProvider>
      </NavigationContainer>
      );
    }