How to Connect Firebase to Your App for User Authentication

Why Firebase Authentication Is the Best Starting Point

Building user authentication from scratch is one of the hardest and riskiest things you can do as an app developer. Password hashing, session management, security vulnerabilities, email verification — there are a hundred things that can go wrong. Firebase Authentication handles all of this for you, and it’s free for most projects.

In this beginner-friendly guide, you’ll learn how to connect Firebase to your app and set up user authentication step by step. By the end, your users will be able to sign up, log in, and manage their accounts securely.

What Is Firebase Authentication?

Firebase is a platform by Google that provides backend services for apps. Firebase Authentication specifically handles:

Email and password sign-up/login
Social login (Google, Facebook, Apple, Twitter, GitHub)
Phone number authentication via SMS
Anonymous authentication for guest users
Multi-factor authentication for added security

It works with web apps, iOS, Android, Flutter, and more. The free tier supports unlimited authentication users, making it perfect for projects of any size.

Step 1: Create a Firebase Project

Go to the Firebase Console at console.firebase.google.com.
Click “Create a project” (or “Add project”).
Enter a project name (for example, “my-awesome-app”).
Choose whether to enable Google Analytics (recommended but optional).
Click “Create project” and wait a moment for it to set up.

You now have a Firebase project. Think of it as a container for all the backend services your app will use.

Step 2: Enable Authentication

In the Firebase Console, click on your project.
In the left sidebar, click “Authentication” (under the “Build” section).
Click “Get Started.”
You’ll see a list of Sign-in providers. Enable the ones you want:
- Click on “Email/Password” and toggle it on. This is the most common method.
- Click on “Google” and toggle it on for Google sign-in. Enter your support email.
- Enable any other providers you need (Facebook, Apple, etc.).
Click “Save” for each provider you enable.

Step 3: Add Firebase to Your Web App

Now connect Firebase to your actual app. We’ll use a web app as the example:

In the Firebase Console, click the gear icon next to “Project Overview” and select “Project Settings.”
Scroll down to “Your apps” and click the web icon (</>).
Enter an app nickname and click “Register app.”
Firebase will show you a configuration snippet. It looks something like this:

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-project.firebaseapp.com",
  projectId: "your-project-id",
  storageBucket: "your-project.appspot.com",
  messagingSenderId: "123456789",
  appId: "your-app-id"
};

Copy this configuration. You’ll need it in the next step.

Step 4: Install Firebase in Your Project

Open your project’s terminal and install the Firebase SDK:

npm install firebase

Create a new file called firebase.js (or firebase-config.js) in your project’s source folder and add:

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

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

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

This initializes Firebase and makes the authentication service available throughout your app.

Step 5: Build the Sign-Up Function

Create a function that registers new users with email and password:

import { createUserWithEmailAndPassword } from "firebase/auth";
import { auth } from "./firebase";

async function signUp(email, password) {
  try {
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    const user = userCredential.user;
    console.log("User signed up:", user.email);
    return user;
  } catch (error) {
    console.error("Sign-up error:", error.message);
    throw error;
  }
}

Call this function when a user submits your registration form. Firebase handles password hashing and user creation automatically.

Step 6: Build the Login Function

Similarly, create a login function for returning users:

import { signInWithEmailAndPassword } from "firebase/auth";
import { auth } from "./firebase";

async function logIn(email, password) {
  try {
    const userCredential = await signInWithEmailAndPassword(auth, email, password);
    const user = userCredential.user;
    console.log("User logged in:", user.email);
    return user;
  } catch (error) {
    console.error("Login error:", error.message);
    throw error;
  }
}

Step 7: Add Google Sign-In (Optional but Recommended)

Many users prefer signing in with their Google account. Here’s how to add it:

import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";
import { auth } from "./firebase";

const googleProvider = new GoogleAuthProvider();

async function signInWithGoogle() {
  try {
    const result = await signInWithPopup(auth, googleProvider);
    const user = result.user;
    console.log("Google sign-in:", user.displayName);
    return user;
  } catch (error) {
    console.error("Google sign-in error:", error.message);
    throw error;
  }
}

When called, this opens a Google sign-in popup. The user selects their Google account and is authenticated instantly.

Step 8: Track Authentication State

You need to know whether a user is currently logged in. Firebase provides a listener for this:

import { onAuthStateChanged } from "firebase/auth";
import { auth } from "./firebase";

onAuthStateChanged(auth, (user) => {
  if (user) {
    console.log("User is logged in:", user.email);
    // Show the main app
  } else {
    console.log("User is logged out");
    // Show the login screen
  }
});

This listener fires every time the authentication state changes, including when the app first loads. Use it to decide whether to show the login page or the main app content.

Step 9: Add Logout Functionality

Don’t forget to let users sign out:

import { signOut } from "firebase/auth";
import { auth } from "./firebase";

async function logOut() {
  await signOut(auth);
  console.log("User signed out");
}

Step 10: Secure Your Firebase Project

Before launching, review these security essentials:

Set up authorized domains: In Firebase Console, go to Authentication > Settings > Authorized domains. Only allow your actual domain.
Enable email verification: Send a verification email after sign-up so you know users have valid email addresses.
Set Firestore security rules: If you’re using Firebase’s database, make sure your security rules require authentication.
Use environment variables: Don’t hardcode your Firebase config in public repositories. Use environment variables instead.

Start Building with Firebase Today

Firebase Authentication gives you a professional, secure authentication system in under an hour. You get email/password login, social sign-ins, and account management without building any of the complex security infrastructure yourself. Start with the email/password method, test it thoroughly, and then add social login options to make signing in even easier for your users. With Firebase handling authentication, you can focus on building the features that make your app unique.