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

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

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

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

Hint

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

Practice

1. What is the main purpose of using email/password login in Firebase?

easy

A. To allow users to create accounts and sign in securely

B. To store user data in a database

C. To send emails to users automatically

D. To host a website on Firebase

Solution

1. Step 1: Understand the feature purpose

   Email/password login lets users create accounts and sign in using their email and a password.

2. Step 2: Identify the correct use case

   This method is mainly for user authentication, not for storing data or sending emails.

3. Final Answer:

   To allow users to create accounts and sign in securely -> Option A

4. Quick Check:

   Email/password login = user sign-in [OK]

Hint: Email/password login is for user sign-in only [OK]

Common Mistakes:

• Confusing login with data storage
• Thinking it sends emails automatically
• Assuming it hosts websites

2. Which Firebase method is used to create a new user with email and password?

easy

A. firebase.auth().createUserWithEmailAndPassword(email, password)

B. firebase.auth().sendPasswordResetEmail(email)

C. firebase.auth().signInWithEmailAndPassword(email, password)

D. firebase.auth().signOut()

Solution

1. Step 1: Identify method for new user creation

   The method to create a new user is createUserWithEmailAndPassword.

2. Step 2: Differentiate from other methods

   signInWithEmailAndPassword is for login, sendPasswordResetEmail is for resetting password, signOut logs out the user.

3. Final Answer:

   firebase.auth().createUserWithEmailAndPassword(email, password) -> Option A

4. Quick Check:

   Create user method = createUserWithEmailAndPassword [OK]

Hint: Create user uses 'createUserWithEmailAndPassword' [OK]

Common Mistakes:

• Using signInWithEmailAndPassword to create users
• Confusing reset email with user creation
• Calling signOut instead of createUser

3. What will happen if you run this code snippet?

firebase.auth().signInWithEmailAndPassword('[e-mail]', 'wrongpass')
  .catch(error => console.log(error.code));

medium

A. Logs 'auth/user-not-found' error code

B. Logs 'auth/network-request-failed' error code

C. Logs 'auth/invalid-email' error code

D. Logs 'auth/wrong-password' error code

Solution

1. Step 1: Understand signInWithEmailAndPassword behavior

   This method tries to sign in with given email and password.

2. Step 2: Analyze error for wrong password

   If the email exists but password is wrong, Firebase returns 'auth/wrong-password'.

3. Final Answer:

   Logs 'auth/wrong-password' error code -> Option D

4. Quick Check:

   Wrong password error = 'auth/wrong-password' [OK]

Hint: Wrong password triggers 'auth/wrong-password' error [OK]

Common Mistakes:

• Assuming user-not-found error instead
• Confusing invalid email format error
• Thinking network error will occur

4. Identify the error in this Firebase email/password login code:

firebase.auth().signInWithEmailAndPassword(email, password)
  .then(userCredential => {
    console.log('User signed in:', userCredential.user);
  })
  .catch(error => {
    console.log('Error:', error.message);
  });

Assume email and password are not defined.

medium

A. Missing import of firebase module

B. Variables email and password are undefined

C. Incorrect method name used

D. No catch block for errors

Solution

1. Step 1: Check variable definitions

   The code uses email and password variables but they are not defined anywhere.

2. Step 2: Confirm method and error handling

   The method signInWithEmailAndPassword is correct and there is a catch block for errors.

3. Final Answer:

   Variables email and password are undefined -> Option B

4. Quick Check:

   Undefined variables cause runtime error [OK]

Hint: Always define email and password before use [OK]

Common Mistakes:

• Ignoring variable definitions
• Thinking method name is wrong
• Missing error handling block

5. You want to ensure users create strong passwords during Firebase email/password signup. Which approach is best?

hard

A. Use Firebase's built-in password strength validation only

B. Send password to server for manual strength checking after signup

C. Check password strength on client side before calling createUserWithEmailAndPassword

D. Allow any password and rely on Firebase error messages

Solution

1. Step 1: Understand Firebase password validation

   Firebase requires minimum 6 characters but does not enforce strong passwords by default.

2. Step 2: Implement client-side password strength check

   Checking password strength on client side before signup improves security and user experience.

3. Final Answer:

   Check password strength on client side before calling createUserWithEmailAndPassword -> Option C

4. Quick Check:

   Client-side validation = better password strength [OK]

Hint: Validate password strength before signup call [OK]

Common Mistakes:

• Relying only on Firebase's minimal checks
• Ignoring password strength until after signup
• Sending passwords to server for manual checks