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.