react-native-firebase/docs/auth/quick-start.md

title, description

title	description
Authentication Quick Start	Getting started with Authentication in React Native Firebase

Auth Quick Start

Installation

Install this module with Yarn:

yarn add @react-native-firebase/auth

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 Analytics 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 realtime 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 initilizing state whilst Firebase connects
  const [initilizing, setInitilizing] = useState(true);
  const [user, setUser] = useState();

  // Handle user state changes
  function onAuthStateChanged(user) {
    setUser(user);
    if (initilizing) setInitilizing(false);
  }

  useEffect(() => {
    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber; // unsubscribe on unmount
  }, []);

  if (initilizing) 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 Facebook, Google, Twitter and Github, along with phone/SMS authentication.

Our guides provide more in-depth explanations on provides and how to integrate them into your application.

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 in one 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);
  }
}