Firebase Auth in React Native: Google, Apple, and Email Sign-In All at Once

Last month, I was 2 a.m. into a client project in Abu Dhabi—a fresh e-commerce app with a hard deadline. The backend was done, but implementing multiple sign-in methods became a nightmare. The client wanted Google, Apple, and email sign-in ready, and the existing tutorials felt like they were missing key steps. If you've been in this situation, this post will walk you through the setup with real code and honest pitfalls I encountered.

Firebase Setup and Dependencies

First, start with the basics. I created a new React Native project using Expo SDK 54, which aligns with the client's stack and simplifies the Apple Auth integration later. Firebase’s official SDK (v9.23) is the go-to for React Native, but Apple Sign-In with.Firebase requires @react-native-firebase/apple-auth and expo-apple-authentication if you're using Expo.

npm install firebase @react-native-firebase/auth @react-native-firebase/apple-auth
# or with Expo
expo install expo-apple-authentication

A heads-up: Firebase’s documentation is clear about enabling providers in the Firebase Console, but Apple’s setup feels like a scavenger hunt. Apple’s OAuth redirect URI must match your Firebase Project settings exactly—including trailing slashes and URI schemes. I spent 90 minutes debugging an infinite redirect loop because the URI path had an extra /auth I didn’t need.

Configuring Firebase Authentication

In the Firebase Console, enable:

1. Email/Password: Obvious, but check “Allow password recovery” for users who can’t remember their old email.
2. Google: Download the JSON config for Android; iOS uses the GoogleService-Info.plist file.
3. Apple: Generate a private key in Apple Developer Portal and input the key ID, team ID, and primary email in Firebase.

One frustrating detail: Apple requires a return email address in their OAuth screen. If you skip this field, Apple errors won’t be descriptive. The client was confused until I stumbled into this fix.

UI/UX Considerations for UAE Clients

GCC clients often want polished UX that reflects regional trends. For a recent project in Jeddah, the client insisted on:

• •Displaying Arabic labels for “Sign in with Google” when the phone’s language is Arabic (use i18n-js or device’s locale).
• •Local color accents—skip the generic blue or white; the limo booking app I built used gold for buttons (yes, gold).
• •A unified screen with all 3 providers in columns, not a cluttered vertical stack.

Implementing Sign-In Methods

Let’s cut to the code. For email sign-in, the basic Firebase flows work:

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

const handleEmailSignin = async (email: string, password: string) => {
  try {
    await auth().signInWithEmailAndPassword(email, password);
  } catch (error) {
    console.error(error.code, error.message);
  }
};

For Google and Apple, use signInWithCredential with provider-specific code. Here’s what Google looks like using @react-native-google-signin/google-signin:

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

GoogleSignin.configure({
  webClientId: 'YOUR_WEB_CLIENT_ID',
});

const handleGoogleSignIn = async () => {
  await GoogleSignin.hasPlayServices();
  const { idToken } = await GoogleSignin.signIn();
  const credential = auth.GoogleAuthProvider.credential(idToken);
  await auth().signInWithCredential(credential);
};

Apple Auth was the most fragile. On Android, it’s handled through Firebase’s web popup, but iOS needs expo-apple-authentication:

import * as AppleAuthentication from 'expo-apple-authentication';

const handleAppleSignIn = async () => {
  try {
    const credential = await AppleAuthentication.signInAsync({
      requestedScopes: [
        AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
        AppleAuthentication.AppleAuthenticationScope.EMAIL,
      ],
    });
    
    const { identityToken } = credential;
    const provider = auth.AppleAuthProvider.credential(identityToken!);
    await auth().signInWithCredential(provider);
  } catch (error) {
    console.error(error);
  }
};

I messed up the requestedScopes once and got cryptic errors on iOS. Apple requires those two scopes to work reliably.

Real Error Handling

Firebase returns different error codes depending on the source. For email sign-in, auth/wrong-password is straightforward, but Google and Apple can throw auth/invalid-credential if tokens are misconfigured.

During testing, I hit a 400 error for Apple Sign-In because the Firebase project’s Apple team ID was outdated. Fixed it by re-downloading the JSON config from Firebase.

Another gotcha: if a user changes their Apple email to a different Apple ID, Firebase links it as a new account. The client panicked until I confirmed this is an Apple-side limitation.

Testing Across Devices

In the UAE, clients expect rock-solid performance on both iPhone and Android—even if their primary audience is iOS (like at a mall-focused app for Dubai). I tested on:

• •A Xiaomi Redmi Note 12 (Android 13) for email flow.
• •iPhone 14 (iOS 16) for Apple Sign-In.
• •The iOS Simulator only works for part of it, but actual devices are necessary for Apple Auth.

A hiccup: Expo’s signInWithCredential was failing on Android for Apple Sign-In. The fix was adding firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL) to force session persistence.

Deployment and Post-Go-Live Issues

The client launched the app with all three providers working, but they added a last-minute requirement: localized Arabic error messages. The Firebase error codes were mapped to a JSON file with translated messages.

For example:

{
  "invalid-email": "البريد الإلكتروني غير صالح"
}

For another project, Greeny Corner, we ran into similar localization needs for plant care reminders in Arabic and English. Firebase Auth’s flexibility here saved time.

Final Notes

Implementing Firebase Auth with multiple providers isn’t rocket science, but the devil’s in the tiny details—like Apple’s redirect URI quirks or Apple Developer Console’s 403 errors because you forgot to enable Sign-In for your app ID.

If you’re working on apps for UAE or GCC clients, expect polish—both visually and functionally. If Google or Apple auth isn’t working, check logs religiously. And always test on actual hardware.

If this post saves you time (or a sleepless night), say hello on sarahprofile.com/contact. I’m working on a Firebase + TypeScript cheatsheet for React Native—you might want it.