Skip to main content

Firebase

Google Firebase

You can easily integrate Firebase into your React Native app. If you are not familiar with it - Firebase is a platform developed by Google for creating mobile and web applications (see [1]). To get started you have to sign up for Firebase and then create a project.

Integration

Do not use React Native Firebase as it is not supported by React Native and Expo. Just go with the original lib which you can install like so: npm i firebase. Then switch back to your browser and head back to the firebase console. There you have to choose the integration for Web (not Android and not iOs). Then copy an paste the firebase config into an own file, e.g. initFirebase.ts and pass it to firebase.initilizeApp like so:

import firebase from 'firebase';

firebase.initializeApp({
apiKey: '...',
authDomain: '...',
projectId: '...',
storageBucket: '...',
messagingSenderId: '...',
appId: '...',
measurementId: '...',
});

It is important that this code runs first before you utilize firebase somewhere else, otherwise you will get an error with a strange error message. I import this file in my initial screen which tries to log the user in without asking for credentials.

import React, { useContext, useEffect } from 'react';
import '../initFirebase';
import { Context as AuthContext } from '../context/AuthContext';

const ResolveAuthScreen = () => {

const { tryLocalSignin } = useContext(AuthContext);

useEffect(() => {
tryLocalSignin();
}, []);

return null;
};

export default ResolveAuthScreen;

The tryLocalLogin method checks if the user is logged in and if so navigates to the HomeScreen, otherwise to SignIn or SignUp screen:

  firebase.auth().onAuthStateChanged(user => {
if (user !== null) {
navigate('HomeScreen');
} else {
navigate('loginFlow');
}
})

For more information I recommend this React Native Firebase Tutorial.

References

  1. Wikipedia
  2. RN Firebase Tutorial