React Native Firebase Google Sign In

Transcribed by Alvaro Peña.

Welcome back!

In this video, you will learn how to authenticate users with Google and Firebase using React Native Expo.

Prerequisities

You don't need to know much about React Native or Firebase to follow along, but it would be nice if you are familiar with React Native and Hooks.

Also, for this project we are going to be using the React Navigation for Beginners project we created on the previous video.

Dependencies

Please install the following dependencies. We are going to need them for this project.

npx expo install firebase
npx expo install expo-auth-session expo-crypto expo-web-browser
npx expo install expo-application
npx expo install @react-native-async-storage/async-storage

Expo Dev Client

To test the application on a real scenario we need to make a build for the app. This will allow us to run it like it was running in production environment.

npx expo install expo-dev-client

Configure Metro

Run the following command to generate the metro.config.js file:

npx expo customize metro.config.js

Then, update the file with the following configuration:

const { getDefaultConfig } = require("@expo/metro-config");
 
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.assetExts.push("cjs");
 
module.exports = defaultConfig;

Configure Expo Application Services (EAS)

For this project, we will utilize Expo Application Services (EAS). EAS is a cloud-based service offered by Expo. It allows us to build the app in the cloud, enabling us to test it and subsequently publish it on both the App Store and Play Store.

npm install -g eas-cli
eas login
eas whoami
eas build:configure

Firebase

To ensure proper integration of Firebase with our application, it is essential to have a Firebase account. If you do not already have an account, please create one.

After you created your project on Firebase you need to connect it to your React Native App.

To proceed, let's create a new file named firebaseConfig.js within your root directory. Inside this file, paste your Firebase credentials for the project.

If you intend to share the project or upload it to GitHub, consider using environmental variables for securely storing and sharing the Firebase credentials.

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
 
const firebaseConfig = {
  apiKey: "Your stuff here",
  authDomain: "Your stuff here",
  projectId: "Your stuff here",
  storageBucket: "Your stuff here",
  messagingSenderId: "Your stuff here",
  appId: "Your stuff here",
};
 
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

Prebuild

We need to create the bundle ID and package identifier. Let's run in the terminal:

npx expo prebuild

Copy your bundle ID and package identifier. This will also create the iOS and Android folders. Please copy the bundle identifier and paste it into the Google Cloud account that this application is going to be the one that needs this service.

That's all the configuration needed! Let's begin to start implementing all the logic of the application.

Links

Go back to Projects