Integrating Login with Firebase in React Native

Login

Integrating email and password login with Firebase in a React Native app for both Android and iOS is a common authentication scenario. Here are the steps to set up email and password authentication using Firebase in your React Native application:

Step 1: Set Up a Firebase Project

1. Go to the Firebase Console.
2. Click “Add Project” and follow the setup wizard to create a new Firebase project.
3. Once your project is created, select it from the Firebase Console.

Step 2: Register Your App with Firebase

1. In your Firebase project, click on “Project settings” (the gear icon).
2. Scroll down to the “Your apps” section and click “Add app” (the “</>” icon).
3. Choose your platform (iOS or Android) and follow the setup instructions. For Android, you’ll need to provide your app’s package name, and for iOS, you’ll need to provide your bundle ID.

Step 3: Configure the OAuth Consent Screen

1. In the Firebase Console, go to “Authentication” and select the “Sign-in method” tab.
2. Enable the “Email/Password” sign-in provider.
3. Configure the OAuth consent screen by providing the required information about your app.

Step 4: Install Required Packages

You’ll need to install Firebase and React Native Firebase packages in your React Native project:

npm install @react-native-firebase/app @react-native-firebase/auth

Step 5: Initialize Firebase

In your app’s entry file (usually App.tsx), initialize Firebase with your Firebase config. You can find this configuration in your Firebase project settings.

import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';
import { App } from './App';
import { Firebase } from '@react-native-firebase/app';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID',
};

Firebase.initializeApp(firebaseConfig);

AppRegistry.registerComponent(appName, () => App);

Step 6: Implement Email and Password Authentication

In your React Native app, implement email and password authentication using Firebase. Here’s a basic example of a login screen:

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

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

  const handleLogin = async () => {
    try {
      const userCredential = await auth().signInWithEmailAndPassword(email, password);
      const user = userCredential.user;
      console.log('Logged in user:', user);
    } catch (error) {
      console.error('Login error:', error);
    }
  };

  return (
    <View>
      <TextInput
        placeholder="Email"
        value={email}
        onChangeText={(text) => setEmail(text)}
      />
      <TextInput
        placeholder="Password"
        secureTextEntry
        value={password}
        onChangeText={(text) => setPassword(text)}
      />
      <Button title="Login" onPress={handleLogin} />
    </View>
  );
};

export default EmailPasswordLoginScreen;

Step 7: Test on Android and iOS

• For Android, you need to configure your Android app by adding a google-services.json file to your project. Follow Firebase's instructions for Android setup.
• For iOS, configure your app by adding a GoogleService-Info.plist file to your project. Follow Firebase's instructions for iOS setup.

Once you have completed these steps, you should have email and password authentication integrated with Firebase in your React Native app for both Android and iOS. Users can log in using their email and password, and their authentication information will be managed by Firebase.

Thank you for reading this article! Don’t forget to clap only if you think I deserve it👏 and buy me a coffee.

If you have any queries related to ReactNative, I’m always happy to help you. You can reach me on LinkedIn and Gmail.

Happy Learning🚀 Happy Coding💻.