How to: Social Login (Google/Apple) in your Firebase, React Native (Expo) App
How to: Social Login (Google/Apple) in your Firebase, React Native (Expo) App

How to: Social Login (Google/Apple) in your Firebase, React Native (Expo) App

Jun 26, 2022
React Native


Note the versions:
Expo: 44.0
Firebase: 8.2.3
react-native: 0.64.3
expo-apple-authentication": "~4.1.0"
expo-auth-session: "~3.5.0"

Authentication using Google account

notion image
On web, we all know it’s really easy to use Google for authentication in firebase because firebase has built-in functions for it - using firebase.auth().signInWithPopup(provider) or firebase.auth().signInWithRedirect(provider)
Here’s a link to the firebase docs:
In this post, I’m going to share how you can use
firebase.auth().signInWithCredential() in React Native (with Expo) to sign-in with your google account
Step 1: Import the necessary packages
import { useAuthRequest } from 'expo-auth-session/providers/google'; import * as WebBrowser from 'expo-web-browser'; import * as AuthSession from 'expo-auth-session';
Step 2: You need idToken and accessToken.
We can get this using useIdTokenAuthRequest from expo-auth-session/providers/google
Create a redirect uri - you must the following in your app.json "currentFullName": "@your_username/app", "originalFullName": "@your_username/app",
const GoogleLogin = () => { const [request, response, promptAsync] = useAuthRequest({ iosClientId: 'YOUR_IOS_CLIENT_ID, androidClientId: 'YOUR_ANDROID_CLIENT_ID', expoClientId: 'YOUR_WEB_CLIENT_ID', });
Step 3: Handle the response in a useEffect hook
const logIn = () => { promptAsync({ useProxy: true }); }; useEffect(() => { if (response?.type === 'success') { const { idToken, accessToken } = response.authentication; const googleAuthProvider = new firebase.auth.GoogleAuthProvider(); const credential = googleAuthProvider.credential(idToken, accessToken); if (credential) { firebase .auth().signInWithCredential(credential) .then((result) => { console.log(result); return result; }) .catch((err) => { console.log(err); }); } } }, [response]);

Here’s what it looks like on my app Cloudmoon-Neko


Authentication using Apple account

notion image
This is extremely simple because of 'expo-apple-authentication'!
Step 1: Import the important packages
import * as AppleAuthentication from 'expo-apple-authentication';
import firebase from '../../utils/Firebase';
Step 2: Specify the button type and style - we’re going to be using AppleAuthenticationButton which is provided by the expo package 'expo-apple-authentication'
Step 3: Get credential after signing in and then use firebase.auth().signInWithCredential(credential);
const AppleLogin = () => { const signInWithApple = () => { const nonce = Math.random().toString(36).substring(2, 10); AppleAuthentication.signInAsync({ requestedScopes: [ AppleAuthentication.AppleAuthenticationScope.FULL_NAME, AppleAuthentication.AppleAuthenticationScope.EMAIL ] }).then((appleCredential) => { const { identityToken } = appleCredential; const provider = new firebase.auth.OAuthProvider(''); const credential = provider.credential({ idToken: identityToken, rawNonce: nonce }); return firebase.auth().signInWithCredential(credential); }); }; return ( <AppleAuthentication.AppleAuthenticationButton buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN} buttonStyle={AppleAuthentication.AppleAuthenticationButtonStyle.BLACK} cornerRadius={16} style={[ styles.button ]} onPress={signInWithApple} /> ); };
The process for both most oAuth providers, not just Apple and Google authentications are going to be similar in the sense that we would be using firebase.auth().signInWithCredential(credential) after receiving the credentials (idToken and accessToken)
I hope this was helpful! 😀
Signing off,
Sans from sansverse