Endurative

Firebase Authentication in React Native Android (Email + Google Sign-In)

Authentication is one of the crucial part of any app, while Firebase Authentication make it easier to Implement and handle the user and logins. In this documentation we gonna walk through how to implement Firebase Authentication (Email + Google Sign-In) with React Native Android App.

1. Firebase Project Setup

  1. Go to Firebase Console -> Create a new project -> Add your mobile apps Android -> Add package name (com.yourapp) -> Download google-services.json and place it in: android/app/

2. Enable authentication providers:

  1. Go to Authentication → Sign-in method.
  2. Enable Email/Password.
  3. Enable Google. (For Android, add SHA-1 and SHA-256 keys.) Checkout the Doc to know about SHA keys and how to get them.

3. Install Required Packages

# Firebase core + authentication
npm install @react-native-firebase/app @react-native-firebase/auth

# Google Sign-In
npm install @react-native-google-signin/google-signin

4. Android Configuration

android/build.gradle

buildscript {
dependencies {
classpath 'com.google.gms:google-services:4.4.0'
}
}

android/app/build.gradle

apply plugin: 'com.google.gms.google-services'

5. Initialize Google Sign-In

In your root component (App.js):

import { GoogleSignin } from '@react-native-google-signin/google-signin';
import auth from '@react-native-firebase/auth'; // Import Firebase Auth
import { useEffect } from 'react';

export default function App() {
useEffect(() => {
GoogleSignin.configure({
webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
offlineAccess: true,
});

// Subscribe to authentication state changes
const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
return subscriber; // Unsubscribe on unmount
}, []);

return null;
}

6. Authentication Functions

Email/Password

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

export const signUpWithEmail = async (email, password) => {
try {
const userCredential = await auth().createUserWithEmailAndPassword(email, password);
console.log('User account created:', userCredential.user);
} catch (error) {
console.error(error);
}
};

export const loginWithEmail = async (email, password) => {
try {
const userCredential = await auth().signInWithEmailAndPassword(email, password);
console.log('User signed in:', userCredential.user);
} catch (error) {
console.error(error);
}
};

Google Sign-In

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

export const signInWithGoogle = async () => {
try {
await GoogleSignin.hasPlayServices();
const { idToken } = await GoogleSignin.signIn();
const googleCredential = auth.GoogleAuthProvider.credential(idToken);
return auth().signInWithCredential(googleCredential);
} catch (error) {
console.error(error);
}
};

7. Listen for Authentication State

import { useEffect, useState } from 'react';
import { Text } from 'react-native';
import auth from '@react-native-firebase/auth';

export default function App() {
const [user, setUser] = useState(null);

useEffect(() => {
const unsubscribe = auth().onAuthStateChanged((usr) => {
setUser(usr);
});
return unsubscribe;
}, []);

return (
<>
{user ? <Text>Welcome {user.email}</Text> : <Text>Please Login</Text>}
</>
);
}

8. Logout

export const logout = async () => {
try {
await auth().signOut();
} catch (error) {
console.error(error);
}
};
You’re ready to build secure, Firebase-powered user authentication into your app. Comment down if any issue occurs.