Firebase Authentication Kit: Looking for a pre-built React Native app for authentication? The Firebase Authentication Kit integrates with Facebook, Google & Phone SMS providers using React Native Firebase!

edit  Edit page
message  Send Feedback

Auth Quick Start

Installation

This module depends on the @react-native-firebase/app module. To get started and install app, visit the project's quick start guide.

Install this module with Yarn:

yarn add @react-native-firebase/auth
# Using iOS
cd ios/ && pod install
info

Integrating manually and not via React Native auto-linking? Check the setup instructions for Android & iOS.

Module usage

The Authentication package provides a JavaScript API which mimics the Firebase Web SDK.

Import the Authentication package into your project:

import auth from '@react-native-firebase/auth';

The package also provides access to the firebase instance:

import { firebase } from '@react-native-firebase/auth';

Subscribe to auth state changes

Whenever a user performs an actions with your application, such as sign-in or signs-out, it is possible to subscribe to the events in real time using the onAuthStateChanged method.

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import auth from '@react-native-firebase/auth';
function App() {
// Set an initializing state whilst Firebase connects
const [initializing, setInitializing] = useState(true);
const [user, setUser] = useState();
// Handle user state changes
function onAuthStateChanged(user) {
setUser(user);
if (initializing) setInitializing(false);
}
useEffect(() => {
const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
return subscriber; // unsubscribe on unmount
}, []);
if (initializing) return null;
if (!user) {
return (
<View>
<Text>Login</Text>
</View>
);
}
return (
<View>
<Text>Welcome {user.email}</Text>
</View>
);
}

Persisting the users auth state

On web based applications, the Firebase Web SDK takes advantage of features such as cookies and localstorage to persist the users authenticated state across sessions. The native Firebase SDKs also provide this functionality using device native SDKs, ensuring that a users previous authentication state between app sessions is persisted.

The user is able to clear their state by deleting the apps data/cache from the device settings.

Auth providers

React Native Firebase provides access to the majority of authentication providers available, including social providers including Apple, Facebook, Google, Twitter and Github, along with phone/SMS authentication.

For Apple Authentication please see our @invertase/react-native-apple-authentication library which integrates well with Firebase and provides Firebase + Apple Auth examples.

Anonymous Sign In

Some applications don't require authentication, which make it tricky to identify what users are doing throughout your app. If connecting with external APIs, it is also useful to add an extra layer of security by ensuring the users request is from the app. This can be achieved with the signInAnonymously method, which creates a new anonymous user which is persisted, allowing you to integrate with other services such as Analytics by providing a user ID.

import auth from '@react-native-firebase/auth';
async function bootstrap() {
try {
await auth().signInAnonymously();
} catch (e) {
switch (e.code) {
case 'auth/operation-not-allowed':
console.log('Enable anonymous in your firebase console.');
break;
default:
console.error(e);
break;
}
}
}

Email/Password Sign In

Email/password sign in is a common method for user sign in on applications. This requires the user to provide an email address and secure password. Users can both register and sign in using a method called createUserWithEmailAndPassword, or sign in to an existing account with signInWithEmailAndPassword.

Users must first register using the createUserWithEmailAndPassword method and then sign in with the signInWithEmailAndPassword method.

import auth from '@react-native-firebase/auth';
async function register(email, password) {
try {
await auth().createUserWithEmailAndPassword(email, password);
} catch (e) {
console.error(e.message);
}
}

React Native Market

Looking for pre-built React Native apps to kick start your next project? Check out the React Native Market by Invertase.

Your purchases help support our open-source projects such as React Native Firebase. All items are currently 50% off to celebrate the release of React Native Firebase version 6.
shopping_cartVisit React Native Market