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

Introduction:

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

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:

Authenticate Using Google with JavaScript | Firebase Documentation

You can let your users authenticate with Firebase using their Google Accounts. You can either use the Firebase SDK to carry out the Google sign-in flow, or carry out the sign-in flow manually using the Sign In With Google library and passing the resulting ID token to Firebase.

https://firebase.google.com/docs/auth/web/google-signin

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

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('apple.com');
      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

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

Introduction:

Authentication using Google account

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

Authentication using Apple account

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