Email/password login in Firebase - Mini Project: Build & Apply

Email/password login

📖 Scenario: You are building a simple web app that allows users to log in using their email and password. This is a common way to secure apps and keep user data safe.

🎯 Goal: Create a Firebase email/password login setup that lets users sign in with their email and password.

📋 What You'll Learn

Initialize Firebase app with configuration

Create a function to sign in users with email and password

Handle errors during sign-in

Export the sign-in function for use in the app

💡 Why This Matters

🌍 Real World

Email/password login is a common way to authenticate users in web and mobile apps, protecting user data and personalizing experiences.

💼 Career

Understanding Firebase authentication is valuable for developers building secure apps quickly without managing backend servers.

1

Initialize Firebase app

Write code to import initializeApp from firebase/app and create a Firebase app using the exact config object named firebaseConfig with these values: apiKey: 'AIzaSyD-ExampleKey12345', authDomain: 'your-app.firebaseapp.com', projectId: 'your-app', storageBucket: 'your-app.appspot.com', messagingSenderId: '1234567890', appId: '1:1234567890:web:abcdef123456'. Store the app in a variable called app.

Firebase

# Your code here

Need a hint?

Use initializeApp from Firebase to start your app with the given config.

2

Import Firebase Auth and create auth instance

Add code to import getAuth from firebase/auth and create an auth instance by calling getAuth(app). Store it in a variable called auth.

Firebase

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: 'AIzaSyD-ExampleKey12345',
  authDomain: 'your-app.firebaseapp.com',
  projectId: 'your-app',
  storageBucket: 'your-app.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:abcdef123456'
};

const app = initializeApp(firebaseConfig);

# Your code here

Need a hint?

Use getAuth with your Firebase app to get the authentication service.

3

Create sign-in function with email and password

Write an async function called signInWithEmailPassword that takes two parameters: email and password. Inside, use signInWithEmailAndPassword(auth, email, password) to sign in the user. Use try and catch to handle errors. Return the user credential on success and return the error message on failure.

Firebase

import { initializeApp } from 'firebase/app';
import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';

const firebaseConfig = {
  apiKey: 'AIzaSyD-ExampleKey12345',
  authDomain: 'your-app.firebaseapp.com',
  projectId: 'your-app',
  storageBucket: 'your-app.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:abcdef123456'
};

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

# Your code here

Need a hint?

Use signInWithEmailAndPassword inside a try/catch block to handle login.

4

Export the sign-in function

Add code to export the signInWithEmailPassword function as a named export.

Firebase

import { initializeApp } from 'firebase/app';
import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';

const firebaseConfig = {
  apiKey: 'AIzaSyD-ExampleKey12345',
  authDomain: 'your-app.firebaseapp.com',
  projectId: 'your-app',
  storageBucket: 'your-app.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:abcdef123456'
};

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

async function signInWithEmailPassword(email, password) {
  try {
    const userCredential = await signInWithEmailAndPassword(auth, email, password);
    return userCredential;
  } catch (error) {
    return error.message;
  }
}

# Your code here

Need a hint?

Use export { signInWithEmailPassword } to make the function available outside this file.