Authentication providers overview in Firebase - Mini Project: Build & Apply

Authentication Providers Overview with Firebase

📖 Scenario: You are building a simple web app that allows users to sign in using different authentication methods. You want to set up Firebase Authentication to support Email/Password and Google sign-in providers.

🎯 Goal: Set up Firebase Authentication with Email/Password and Google sign-in providers enabled in the configuration.

📋 What You'll Learn

Create a Firebase configuration object with the given apiKey and projectId

Add a variable to specify the authentication providers to enable

Initialize Firebase Authentication with the specified providers

Export the authentication instance for use in the app

💡 Why This Matters

🌍 Real World

Many web and mobile apps use Firebase Authentication to let users sign in easily with popular providers like Email and Google.

💼 Career

Understanding how to configure and initialize authentication providers is essential for cloud developers working on user management and security.

1

Create Firebase configuration object

Create a constant called firebaseConfig with these exact properties and values: apiKey: 'AIzaSyExampleKey12345', authDomain: 'your-app.firebaseapp.com', projectId: 'your-app'.

Firebase

# Your code here

Need a hint?

Use a JavaScript object with the exact keys and values given.

2

Specify enabled authentication providers

Create a constant called enabledProviders and set it to an array containing the strings 'email' and 'google'.

Firebase

const firebaseConfig = {
  apiKey: 'AIzaSyExampleKey12345',
  authDomain: 'your-app.firebaseapp.com',
  projectId: 'your-app'
};

// Your code here

Need a hint?

Use an array with the exact strings 'email' and 'google'.

3

Initialize Firebase Authentication with providers

Import initializeApp from 'firebase/app' and getAuth, EmailAuthProvider, and GoogleAuthProvider from 'firebase/auth'. Then initialize Firebase app with firebaseConfig and create a constant auth by calling getAuth(app). Also create a constant providers as an object with keys email and google mapped to new instances of EmailAuthProvider() and GoogleAuthProvider() respectively.

Firebase

const firebaseConfig = {
  apiKey: 'AIzaSyExampleKey12345',
  authDomain: 'your-app.firebaseapp.com',
  projectId: 'your-app'
};

const enabledProviders = ['email', 'google'];

// Your code here

Need a hint?

Remember to import the required functions and classes from Firebase packages.

4

Export the authentication instance

Add a line to export the constant auth as the default export.

Firebase

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

const firebaseConfig = {
  apiKey: 'AIzaSyExampleKey12345',
  authDomain: 'your-app.firebaseapp.com',
  projectId: 'your-app'
};

const enabledProviders = ['email', 'google'];

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const providers = {
  email: new EmailAuthProvider(),
  google: new GoogleAuthProvider()
};

// Your code here

Need a hint?

Use export default auth; to export the authentication instance.