27
Using Firebase in React Native App
react-native v0.64, @react-native-firebase v12.1, @react-native-google-signin/google-signin v6.0
Recently, i got a chance to build a mobile application which uses firebase as it's backend. I used firebase for google authentication and storing data in firestore. In this article, i will mainly focus on adding auth flow in Android app using react-native.
I assume that we have already bootstrapped react native app using react-native-cli and configured everything needed to run a react native application. Please follow react native docs for set up.
By default, react native cli creates application with android package
Please follow this wonderful article written by @karanpratapsingh .
Your app should run without any issue after making these changes.
com.<project-name>
. This package name could be pretty common and can give error when adding SHA1 key in firebase. So it would be good to rename package name to something unique by adding a namespace in between i.e. com.<company-name>.<project-name>
Please follow this wonderful article written by @karanpratapsingh .
Your app should run without any issue after making these changes.
We need to install two library to get Google sign in working:
If you google about the firebase google auth with react-native, almost all results will be using @react-native-firebase library for integrating firebase in react-native app. But this library is not official library from firebase. Firebase provides SDKs for web, android and IOS. So Ideally, we should be using web SDK in our react-native app and it will work without any problem. But there are few factor because of which @react-native-firebase is preferred.
@react-native-google-signin/google-signin for Google Auth
react-native-google-sign is a library which is in maintenance mode but seems pretty stable for implementing google auth with @react-native-firebase library. Since @react-native-firebase library uses native SDKs so we would need google sign native SDKs functionality exposed for react native application. That is why we have to use @react-native-google-signin library(that's my assumption). firebase web SDK gives methods for google auth via redirection or opening a pop-up but those methods wont be good for native application. @react-native-google-signin library opens a native pop-up for google authentication.
Based on project name, firebase gives a unique project identifier, generally appending numeric sequence at the end of name. If you are going to host your project on firebase (in case of web application) then this unique project identifier will become part of your application url. You can change the identifier as per your choice but it has to be unique.
After adding above information in firebase project. Next step is to download
google-services.json
file and put it in android/app location. This file contains information about clientId etc.. Native firebase SDK uses this file to make authenticated request to firebase service./android/build.gradle
and add
dependencies {
// ... other dependencies
classpath 'com.google.gms:google-services:4.3.8'
// Add me --- /\
}
/android/app/build.gradle
and add
apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // <- Add this line
Before using any method from google-signin library, first we need to configure it by passing webClientId to configure method
import { GoogleSignin } from '@react-native-google-signin/google-signin';
GoogleSignin.configure({
webClientId: '',
});
webClientId can be found in google-services.json file at
client/oauth_client/client_id
nodeimport auth from '@react-native-firebase/auth';
import { GoogleSignin } from '@react-native-google-signin/google-signin';
async function onGoogleButtonPress() {
// Get the users ID token
const { idToken } = await GoogleSignin.signIn();
// Create a Google credential with the token
const googleCredential = auth.GoogleAuthProvider.credential(idToken);
// Sign-in the user with the credential
return auth().signInWithCredential(googleCredential);
}
In above code google-signin library will open the google sign pop up and on successful login returns an object containing idToken. This idToken is used to login to firebase project.
We can divide the complete auth flow in two parts:
We can divide the complete auth flow in two parts:
On successful login to firebase application, authStateChange event will be triggered and our listener will get current user's info.
That's how we can configure react-native application with firebase and implement google sign in flow.
27