Why social login improves conversion in Firebase - See It in Action

Why social login improves conversion

📖 Scenario: You are building a simple web app that allows users to sign in quickly using social login options. This helps users avoid creating new passwords and speeds up the login process.

🎯 Goal: Create a Firebase Authentication setup that enables Google social login to improve user sign-in conversion rates.

📋 What You'll Learn

Create a Firebase project configuration object

Add a variable to hold the Google Auth provider

Implement a function to sign in users with Google

Complete the Firebase initialization with authentication setup

💡 Why This Matters

🌍 Real World

Social login lets users sign in quickly without creating new passwords, reducing friction and increasing conversion rates.

💼 Career

Understanding social login setup is essential for cloud developers and engineers working on user authentication and improving user experience.

1

Create Firebase configuration object

Create a constant called firebaseConfig with these exact properties and values: apiKey: 'AIzaSyA-ExampleKey12345', authDomain: 'your-app.firebaseapp.com', projectId: 'your-app', storageBucket: 'your-app.appspot.com', messagingSenderId: '1234567890', appId: '1:1234567890:web:abcdef123456'.

Firebase

// Your code here

Need a hint?

Use const firebaseConfig = { ... } with the exact keys and values.

2

Add Google Auth provider variable

Create a constant called googleProvider and set it to a new instance of firebase.auth.GoogleAuthProvider().

Firebase

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

// Your code here

Need a hint?

Use new firebase.auth.GoogleAuthProvider() to create the provider.

3

Implement Google sign-in function

Write a function called signInWithGoogle that calls firebase.auth().signInWithPopup(googleProvider).

Firebase

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

const googleProvider = new firebase.auth.GoogleAuthProvider();

// Your code here

Need a hint?

Define a function that returns the call to signInWithPopup with googleProvider.

4

Initialize Firebase app and auth

Add the line firebase.initializeApp(firebaseConfig); before the googleProvider declaration to initialize Firebase.

Firebase

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

// Your code here

const googleProvider = new firebase.auth.GoogleAuthProvider();

function signInWithGoogle() {
  return firebase.auth().signInWithPopup(googleProvider);
}

Need a hint?

Call firebase.initializeApp(firebaseConfig); before creating the provider.