Stuff.tsx

import React, { useState } from "react";
import { auth } from "../firebase";
import {
  signInWithPopup,
  GoogleAuthProvider,
  AuthProvider,
  getAuth
} from "firebase/auth";
import { useAuthState } from "react-firebase-hooks/auth";

interface UserInfo {
  displayName: string | null;
  email: string | null;
  phoneNumber: string | null;
  photoURL: string | null;
  providerId: string;
  uid: string;
}

export const Login = () => {
  const [user, setUser] = useAuthState(auth);
  const googleAuth = new GoogleAuthProvider();
  const auth1 = getAuth();

  // console.log(user?.email)

  const login = async (authType: AuthProvider) => {
    try {
      if (!user) {
        const result = await signInWithPopup(auth, authType);
        console.log(result);
      }
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <>
      <div className="flex flex-col">
        <button
          type="button"
          onClick={() => login(googleAuth)}
          className="text-white m-2 bg-[#6f6f70] hover:bg-[#6f6f70]/90 focus:ring-4 focus:outline-none focus:ring-[#4285F4]/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-[#4285F4]/55 mr-2 mb-2"
        >
          Sign in / Log in with Google
        </button>
      </div>
    </>
  );
};