How to use Firebase auth with Google login?

 

Step 1: Set Up Firebase Project

 

1. Go to the Firebase Console, and click on Add project.
2. Enter your project name and follow the instructions to create the project.
3. Once created, navigate to the Project Overview and click the settings icon (gear) next to Project Overview.
4. Select Project settings.
5. Go to the General tab and scroll down to Your apps. Click on the web icon </> to register a new web app.
6. Give your app a name and click Register app. You'll receive Firebase configuration details, which include apiKey, authDomain, etc.

 

Step 2: Install & Set Up Firebase SDK

 

Using npm:

npm install firebase

Then, configure Firebase in your app:

<pre><code class="hljs">
import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

const app = initializeApp(firebaseConfig);
</code></pre>

Replace the placeholders with your actual configuration details from Firebase.

 

Step 3: Enable Google Sign-In

 

1. In the Firebase console, go to Authentication.
2. Click on the Sign-in method tab.
3. Enable Google under the list of sign-in providers.
4. Follow any necessary setup steps, such as adding your app's domain name to the list of authorized domains.

 

Step 4: Implement Google Authentication

 

Add Firebase Authentication to your app:

<pre><code class="hljs">
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();
const auth = getAuth();

signInWithPopup(auth, provider)
  .then((result) => {
    // This gives you a Google Access Token. You can use it to access the Google API.
    const credential = GoogleAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;

    // The signed-in user info.
    const user = result.user;
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.email;
    // The AuthCredential type that was used.
    const credential = GoogleAuthProvider.credentialFromError(error);
  });
</code></pre>

This script initiates a sign-in process with Google using a pop-up. Make sure you handle both success and error scenarios.

 

Step 5: Handle Authentication State

 

Monitor authentication state to update the UI or perform other actions when a user logs in or logs out:

<pre><code class="hljs">
import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in
    console.log("User signed in: ", user);
  } else {
    // User is signed out
    console.log("No user is signed in");
  }
});
</code></pre>

This section checks if a user is logged in. If so, it logs out information about the user.

 

Step 6: Log Out Functionality

 

Offer a sign-out option:

<pre><code class="hljs">
import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
  console.log("User signed out");
}).catch((error) => {
  // An error happened.
  console.error("Sign-out error", error);
});
</code></pre>

This function logs the user out and handles any potential errors.

By following these steps, you have successfully integrated Google Authentication using Firebase into your web app.