Implementing Google Login with Firebase and Next.js 13: A Step-by-Step Guide

Ello~! Today, I want to share with you how to integrate Google Login functionality into your Next.js 13 project using Firebase. By the end of this guide, you'll be able to provide a seamless sign-in experience for your users with just a few lines of code.

First things first, let's take a look at the code snippet:

"use client"
import { FcGoogle } from "react-icons/fc";
import { signInWithPopup, GoogleAuthProvider } from "firebase/auth";
import { auth } from "src/app/firebase.js";
import { useRouter } from "next/navigation";

export default function Login() {
  const router = useRouter();
  
  // Sign in with Google
  const googleProvider = new GoogleAuthProvider();
  const GoogleLogin = async () => {
    try {
      const result = await signInWithPopup(auth, googleProvider);
      router.push("/");
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div className="shadow-xl mx-5 mt-32 md:mt-5 md:mb-20 p-10 text-gray-700 rounded-lg md:flex md:flex-col md:items-center">
  <h2 className="text-2xl font-sans font-medium">Join Today</h2><div className="py-4">
    <h3 className="py-4">Sign in with one of the providers</h3><buttononClick={GoogleLogin}className="text-gray-700 bg-blue-300 font-sans w-fit font-medium rounded-lg flex align-middle p-4 gap-2">
    <FcGoogle className="text-2xl" />
          Sign in with Google
        </button>
          </div>
        </div>
  );
}

Now, let's break down the important parts and guide you through the process:

We are using Next.js 13, Firebase, Tailwind and React Icons.

1. Setting Up the Environment: Make sure you have Firebase configured in your project. Import the necessary functions and hooks. Note that we're using useRouter from "next/navigation" instead of "next/Router". This is essential for Next.js 13.

2. Creating the Google Provider: Initialize the googleProvider using GoogleAuthProvider() from firebase/auth. This provider will allow users to sign in with their Google accounts.

3. Implementing the Google Login Function: In the GoogleLogin function, we use signInWithPopup from auth and pass in auth and googleProvider as arguments. This function opens a popup window where users can choose their Google account and grant access. Once the user successfully signs in, their details will be logged to the console, and we can redirect them to the desired page using router.push("/").

4. Building the Login Component: The Login component renders a user-friendly interface, including a "Sign in with Google" button. When the button is clicked, the GoogleLogin function is triggered.

5. One last thing: Since the login requires user interactions, be sure to use "use client" at the top of the page.

That's it! With this code, you've successfully implemented Google Login functionality in your Next.js 13 project using Firebase. Feel free to customize the component's appearance and add additional providers or features as needed.

This code is based on the foundation provided by developedbyed's video "Build An Awesome Full Stack React Project Tutorial." It's always great to learn from others and build upon their knowledge.

I hope this guide helps you in your development journey. Happy coding and enjoy implementing Google Login with Firebase in your Next.js 13 project!