Over the years, authentication has been a topic that can elicit groans from even the most experienced programmers. The web has migrated from messy Perl scripts to social media logins, OAuth, and Single Sign-On.

If you’re creating a React Native app, it’s hard to imagine a better solution than Firebase Authentication, barring some business-specific concerns. Firebase allows you to manage users via email and password, phone number, social media logins, and even your in-house identity provider. It takes care of the headache-inducing parts – transferring secrets around and protecting data from unauthorized access.

Firebase Authentication is a powerful tool that enables you to quickly and easily add authentication to your React Native application. In this post, we’ll walk through the steps to set up Firebase Authentication in a React Native app.

Prerequisites

Before we get started, make sure you have the following:

• A React Native app
• A Firebase project (or at least a google account to create one)
• Node.js and npm installed on your computer

Step 1: Create a Firebase Project

To use Firebase Authentication in your React Native app, you first need to create a Firebase project. If you don’t have one already, follow these steps to create a new project:

• Go to the Firebase Console.
• Click on “Add Project”.
• Give your project a name and select your desired billing plan. (Select the free/pay as you go if this is a practice project)
• Click on “Create Project”.

Once your project is created, you’ll be redirected to the project dashboard.

Step 2: Set up Firebase Authentication

The next step is to set up Firebase Authentication for your project. To do this, we’re going to stay in the Project Console and follow these steps:

• Click on “Authentication” in the left-hand menu.
• Click on the “Set up sign-in method” button.
• Enable the sign-in method you want to use (e.g. email/password, Google, Facebook, etc.).
• Follow the prompts to complete the setup process.
• Once you’ve set up Firebase Authentication, you’ll need to install the Firebase SDK in your React Native app.

Step 3: Install the Firebase SDK

To use Firebase Authentication in your React Native app, you need to install the Firebase SDK. To do this, follow these steps:

1. Open a terminal window and navigate to your project directory.

2. Run the following command to install the Firebase SDK:

npm install --save firebase

3. Import Firebase into your React Native app by adding the following code at the top of your App.js file:

import firebase from 'firebase/app';
import 'firebase/auth';

Initialize Firebase by adding the following code to your App.js file:

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

You can find your Firebase project’s configuration values in the Firebase Console. Go to Project settings and find your app listed under “Your apps”

Step 4: Implement Firebase Authentication in your React Native app

Now that you’ve set up Firebase Authentication and installed the Firebase SDK in your React Native app, you can start implementing Firebase Authentication.

Here’s an example of how to implement email/password authentication:

import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';
import firebase from 'firebase/app';
import 'firebase/auth';

const App = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');

const handleSignIn = () => {
firebase.auth().signInWithEmailAndPassword(email, password)
.then(() => console.log('User signed in'))
.catch(error => console.log(error));
};

const handleSignUp = () => {
firebase.auth().createUserWithEmailAndPassword(email, password)
.then(() => console.log('User created'))
.catch(error => console.log(error));
};

 return (
    <View>
      <TextInput
        placeholder="Email"
        onChangeText={(text) => setEmail(text)}
        value={email}
      />
      <TextInput
        placeholder="Password"
        onChangeText={(text) => setPassword(text)}
        value={password}
        secureTextEntry
      />
      <Button title="Sign In" onPress={handleSignIn} />
      <Button title="Sign Up" onPress={handleSignUp} />
    </View>
  );
};

export default App;

In this example, we’re using the useState hook to manage the email and password state. When the user clicks the “Sign In” button, we call the signInWithEmailAndPassword method to authenticate the user. If the authentication is successful, we log a message to the console. If there’s an error, we log the error to the console.

Similarly, when the user clicks the “Sign Up” button, we call the createUserWithEmailAndPassword method to create a new user account. If the account creation is successful, we log a message to the console. If there’s an error, we log the error to the console.

You can find similar code samples and examples in the Firebase Authentication Documentation and in the Firebase Quickstart Samples

I hope this blog post has shown you the steps to set up Firebase Authentication in a React Native app. We’ve covered how to create a Firebase project, set up Firebase Authentication, install the Firebase SDK, and implement Firebase Authentication in your React Native app. With Firebase Authentication, you can quickly and easily add authentication to your app, making it more secure and user-friendly.