Web - Firebase Google Sign in and Sign out

.gitignore

@@ -2,3 +2,4 @@ template/yarn.lock
 template/ios/Podfile.lock
 node_modules/
 yarn.lock
+.idea

template/package.json

@@ -37,6 +37,7 @@
     "i18n-js": "^3.8.0",
     "libphonenumber-js": "^1.9.43",
     "react": "^17.0.2",
+    "react-device-detect": "^2.1.2",
     "react-dom": "^17.0.2",
     "react-native": "^0.66.3",
     "react-native-country-picker-modal": "^2.0.0",

template/src/app/auth-providers/Google.tsx

@@ -1,6 +1,6 @@
-import auth from '@react-native-firebase/auth';
+import auth, {googleWebSignIn} from '@react-native-firebase/auth';
 import {useContext, useEffect, useState} from 'react';
-import {Alert} from 'react-native';
+import {Alert, Platform} from 'react-native';
 import {FirebaseError} from '@firebase/util';
 import {
   GoogleSignin,
@@ -23,64 +23,69 @@ function Google(): JSX.Element | null {
   async function handleGoogle() {
     if (!loading) {
       setLoading(true);
+      if (Platform.OS === 'web') {
+        await googleWebSignIn();
+      } else {
+        try {
+          await GoogleSignin.hasPlayServices();
 
-      try {
-        await GoogleSignin.hasPlayServices();
-
-        if (variant === 'UNLINK' && user) {
-          await user.unlink(PROVIDER_ID);
-          await user.reload();
-        } else {
-          await GoogleSignin.signIn();
-          const {accessToken, idToken} = await GoogleSignin.getTokens();
-          const credential = auth.GoogleAuthProvider.credential(
-            idToken,
-            accessToken,
-          );
-
-          if (variant === 'LINK' && user) {
-            await user.linkWithCredential(credential);
+          if (variant === 'UNLINK' && user) {
+            await user.unlink(PROVIDER_ID);
             await user.reload();
-          } else if (variant === 'SIGN_IN') {
-            await auth().signInWithCredential(credential);
-          }
-        }
-      } catch (e) {
-        setLoading(false);
-        const error = e as FirebaseError;
-        switch (error.code) {
-          case statusCodes.SIGN_IN_CANCELLED:
-          case '-1':
-            return Alert.alert('Google Auth Canceled');
-          case statusCodes.IN_PROGRESS:
-            return Alert.alert('Google Auth Already In Progress');
-          case statusCodes.PLAY_SERVICES_NOT_AVAILABLE:
-            return Alert.alert('Google Auth Requires Play Services');
-          default:
-            switch (error.message) {
-              case 'DEVELOPER_ERROR':
-                console.info(
-                  'Developer error during Google Auth, check: ' +
-                    'https://github.com/react-native-community/react-native-google-signin/blob/f21dd95a090f4f529748473e20515d6fc66db6bb/example/README.md#developer_error-or-code-10-on-android',
-                );
-                return Alert.alert(
-                  'Google Auth Error',
-                  'Google Auth has not been configured correctly for this app by the developer. More info is available in the console output.',
-                );
-              default:
-                return Alert.alert('Google Auth Error', error.message);
+          } else {
+            await GoogleSignin.signIn();
+            const {accessToken, idToken} = await GoogleSignin.getTokens();
+            const credential = auth.GoogleAuthProvider.credential(
+              idToken,
+              accessToken,
+            );
+
+            if (variant === 'LINK' && user) {
+              await user.linkWithCredential(credential);
+              await user.reload();
+            } else if (variant === 'SIGN_IN') {
+              await auth().signInWithCredential(credential);
             }
+          }
+        } catch (e) {
+          setLoading(false);
+          const error = e as FirebaseError;
+          switch (error.code) {
+            case statusCodes.SIGN_IN_CANCELLED:
+            case '-1':
+              return Alert.alert('Google Auth Canceled');
+            case statusCodes.IN_PROGRESS:
+              return Alert.alert('Google Auth Already In Progress');
+            case statusCodes.PLAY_SERVICES_NOT_AVAILABLE:
+              return Alert.alert('Google Auth Requires Play Services');
+            default:
+              switch (error.message) {
+                case 'DEVELOPER_ERROR':
+                  console.info(
+                    'Developer error during Google Auth, check: ' +
+                      'https://github.com/react-native-community/react-native-google-signin/blob/f21dd95a090f4f529748473e20515d6fc66db6bb/example/README.md#developer_error-or-code-10-on-android',
+                  );
+                  return Alert.alert(
+                    'Google Auth Error',
+                    'Google Auth has not been configured correctly for this app by the developer. More info is available in the console output.',
+                  );
+                default:
+                  return Alert.alert('Google Auth Error', error.message);
+              }
+          }
         }
       }
     }
   }
 
   useEffect(() => {
-    GoogleSignin.configure({
-      scopes: ['profile', 'email'],
-      // TODO: Get your web client id from firebase console --> Project Settings --> Auth --> Google Sign-in
-      webClientId: require('../../config.json').webClientId,
-    });
+    if (Platform.OS !== 'web') {
+      GoogleSignin.configure({
+        scopes: ['profile', 'email'],
+        // TODO: Get your web client id from firebase console --> Project Settings --> Auth --> Google Sign-in
+        webClientId: require('../../config.json').webClientId,
+      });
+    }
   }, []);
 
   if (isOnlyProvider) {

template/src/app/signed-in/Settings.tsx

@@ -1,6 +1,6 @@
-import auth from '@react-native-firebase/auth';
+import auth, {googleWebSignOut} from '@react-native-firebase/auth';
 import {useEffect, useState} from 'react';
-import {Alert, ScrollView, StyleSheet, View} from 'react-native';
+import {Alert, Platform, ScrollView, StyleSheet, View} from 'react-native';
 import {GoogleSignin} from '@react-native-google-signin/google-signin';
 import {
   Banner,
@@ -60,8 +60,13 @@ function EditProfile(): JSX.Element | null {
 
   async function signOut() {
     setSigningOut(true);
-    await GoogleSignin.signOut();
     await auth().signOut();
+
+    if (Platform.OS === 'web') {
+      await googleWebSignOut();
+    } else {
+      await GoogleSignin.signOut();
+    }
   }
 
   async function handleDisplayName() {

template/src/app/signed-out/SignIn.tsx

@@ -51,7 +51,7 @@ function SignIn() {
         />
 
         {Platform.OS !== 'web' && <Facebook />}
-        {Platform.OS !== 'web' && <Google />}
+        <Google />
         {Platform.OS !== 'web' && <Apple />}
         <ProviderButton
           type="phone"

template/src/app/types/@react-native-firebased.d.ts

@@ -0,0 +1,6 @@
+import {UserCredential} from 'firebase/auth';
+
+declare module '@react-native-firebase/auth' {
+  export const googleWebSignIn: () => Promise<UserCredential>;
+  export const googleWebSignOut: () => Promise<void>;
+}

template/src/shims/firebase-auth-web.ts

@@ -1,8 +1,32 @@
 import firebase from 'firebase/compat/app';
 import 'firebase/compat/auth';
+import {isMobile} from 'react-device-detect';
+
+import {
+  GoogleAuthProvider,
+  signInWithPopup,
+  signInWithRedirect,
+  signOut,
+} from 'firebase/auth';
 
 import initializeApp from './firebase-init';
 initializeApp();
 
 const auth = firebase.auth;
+
+const provider = new GoogleAuthProvider();
+provider.setCustomParameters({prompt: 'select_account'});
+
+const googleWebSignInWithPopup = async () =>
+  await signInWithPopup(auth(), provider);
+const googleWebSignInWithRedirect = async () =>
+  await signInWithRedirect(auth(), provider);
+
+export const googleWebSignIn = async () =>
+  isMobile
+    ? await googleWebSignInWithRedirect()
+    : await googleWebSignInWithPopup();
+
+export const googleWebSignOut = async () => await signOut(auth());
+
 export default auth;