How to Connect Firebase Authentication to Your Mobile App (Step-by-Step Guide)

By /

Building a mobile app and need users to sign up and log in? Firebase Authentication is one of the easiest and most cost-effective ways to add secure authentication to your app — whether you want phone number verification, Google Sign-In, or classic email/password login.

In this guide, we’ll walk you through everything you need to set up Firebase Auth from scratch. No fluff, just the steps.

Why Firebase Authentication?

Before we dive in, here’s why Firebase Auth is the go-to choice for indie developers and startups:

  • Free tier is generous — Phone auth is free for up to 10,000 verifications per month. Google Sign-In is completely free.
  • Multiple sign-in methods — Phone, Google, Apple, Facebook, email/password, and more. All from one dashboard.
  • Battle-tested security — Google handles the heavy lifting: rate limiting, fraud detection, token management.
  • Works with any stack — React Native, Expo, Flutter, Swift, Kotlin, or plain web apps.

Step 1: Create a Firebase Project

Head to console.firebase.google.com and sign in with your Google account.

  1. Click “Add project”
  2. Enter a project name (e.g., “MyApp”)
  3. Choose whether to enable Google Analytics (optional, but recommended)
  4. Click Create project and wait about 30 seconds

That’s it — your Firebase project is live.

Step 2: Register Your App

Once inside your project dashboard, you need to tell Firebase what kind of app you’re building.

  1. Click the gear icon next to “Project Overview” then Project Settings
  2. Scroll down to “Your apps”
  3. Click the icon for your platform:
    • </> for Web / React Native / Expo
    • Android icon for native Android
    • iOS icon for native iOS
  4. Give your app a nickname and click Register app
  5. Firebase will show you a config block — copy this and save it. You’ll need it in your code.

The config block looks like this:

const firebaseConfig = {
  apiKey: "AIzaSy...",
  authDomain: "yourproject.firebaseapp.com",
  projectId: "yourproject",
  storageBucket: "yourproject.appspot.com",
  messagingSenderId: "123456789",
  appId: "1:123456789:web:abc123"
};

Step 3: Enable Sign-In Methods

Now let’s turn on the authentication methods you want to support.

  1. In the left sidebar, go to Build then Authentication
  2. Click Get Started (first time only)
  3. Click the Sign-in method tab
  4. Enable the providers you want:

Phone Authentication

Click Phone, toggle Enable, then Save. That’s all it takes. Firebase handles sending SMS codes, verification, and rate limiting. Free for up to 10,000 verifications per month.

Google Sign-In

Click Google, toggle Enable, select your project support email from the dropdown, then Save. Note the Web client ID that appears — you’ll need this in your app code.

Email/Password

Click Email/Password, toggle Enable, then Save. Optionally enable “Email link” for passwordless login.

Step 4: Install the Firebase SDK

How you install depends on your framework. Here are the most common:

For Expo / React Native (JavaScript SDK)

npx expo install firebase
npx expo install expo-auth-session expo-crypto expo-web-browser

For Web Apps

npm install firebase

For Native Android/iOS (Full Firebase SDK)

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

Note: The native SDK requires a development build — it won’t work in Expo Go.

Step 5: Initialize Firebase in Your Code

Create a firebase config file in your project (e.g., firebase.js):

import { initializeApp } from 'firebase/app';
import { initializeAuth, getReactNativePersistence } from 'firebase/auth';
import AsyncStorage from '@react-native-async-storage/async-storage';

const firebaseConfig = {
  // Paste your config from Step 2 here
};

const app = initializeApp(firebaseConfig);

const auth = initializeAuth(app, {
  persistence: getReactNativePersistence(AsyncStorage),
});

export { app, auth };

The AsyncStorage persistence ensures your users stay logged in between app sessions.

Step 6: Implement Google Sign-In

For Expo apps using expo-auth-session:

import * as Google from 'expo-auth-session/providers/google';
import * as WebBrowser from 'expo-web-browser';
import { GoogleAuthProvider, signInWithCredential } from 'firebase/auth';
import { auth } from './firebase';

WebBrowser.maybeCompleteAuthSession();

// In your component:
const [request, response, promptAsync] = Google.useAuthRequest({
  webClientId: 'YOUR_WEB_CLIENT_ID_HERE',
});

// When response comes back:
if (response?.type === 'success') {
  const credential = GoogleAuthProvider.credential(
    response.authentication.idToken
  );
  const result = await signInWithCredential(auth, credential);
  // result.user contains the signed-in user
}

Important: You also need to set up the OAuth consent screen in Google Cloud Console. Go to console.cloud.google.com/apis/credentials/consent, select your project, choose “External”, fill in the app name and email, and save.

Step 7: Implement Phone Number Verification

Phone auth with the Firebase JS SDK in React Native requires a different approach than web. The most reliable pattern for Expo apps is to handle OTP on your own backend:

  1. User enters phone number on the app
  2. Your backend generates a 6-digit code, stores it with a 5-minute expiry
  3. Backend sends the code via SMS using a service like Twilio ($0.008/text), Vonage ($0.007/text), or AWS SNS ($0.006/text)
  4. User enters the code in the app
  5. Backend verifies the code and returns an auth token

This gives you full control over the flow and works perfectly in Expo Go without any native build requirements.

Step 8: Set Up the OAuth Consent Screen

This step trips up a lot of developers. If you skip it, Google Sign-In will return a 500 error.

  1. Go to console.cloud.google.com/apis/credentials/consent
  2. Select your Firebase project
  3. Choose External user type
  4. Fill in: App name, User support email, Developer contact email
  5. Click Save and Continue through scopes and test users
  6. Publish the app when you’re ready for anyone to sign in (not just test users)

Cost Breakdown

Here’s what Firebase Auth actually costs for a typical indie app:

Feature Cost
Google Sign-In Free (unlimited)
Email/Password Free (unlimited)
Phone Verification Free up to 10K/month, then $0.06/verification
SMS Delivery (if self-managed) $0.006-0.008 per text

For most apps starting out, you’ll pay $0/month for authentication.

Common Pitfalls to Avoid

  • Forgetting the OAuth consent screen — Google Sign-In won’t work without it. You’ll get a mysterious 500 error.
  • Using @react-native-firebase in Expo Go — It requires a custom dev build. Use the JavaScript SDK (firebase package) instead if you want Expo Go compatibility.
  • Not handling duplicate initialization — If your app hot-reloads, Firebase will throw an “already initialized” error. Wrap your init in a try/catch.
  • Skipping AsyncStorage persistence — Without it, users have to log in every time they open the app.
  • Not publishing the OAuth consent screen — In “Testing” mode, only manually added test users can sign in.

Next Steps

Once authentication is working, here’s what to build next:

  • Protected routes — Only show certain screens to logged-in users
  • User profiles — Store additional user data in your database linked to the Firebase UID
  • Token refresh — Firebase tokens expire after 1 hour. Set up automatic token refresh.
  • Apple Sign-In — Required if you publish to the iOS App Store and offer any other social login
  • Account linking — Let users who signed up with phone also link their Google account later

Firebase Authentication takes the pain out of user management so you can focus on building the features that make your app unique. The setup takes about 30 minutes, and you get enterprise-grade security for free.

Ready to start building? Head to console.firebase.google.com and create your first project today.

Related eGuides You Might Like

More Articles

Browse All 1,500+ AI Guides

Scroll to Top