Breaking News: Grepper is joining You.com. Read the official announcement!

firebase google sign in react

Add Answer

Shirshak Kandel answered on August 13, 2022 Popularity 9/10 Helpfulness 6/10

answer firebase google sign in react

related sign in with google firebase react

related configure firebase sign in with google in reactjs

related how to implement google signin in react firebase?

firebase google sign in react

Comment

import React from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { toast } from "react-toastify";
import googleIcon from "../assets/svg/googleIcon.svg";
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
import { doc, setDoc, getDoc, serverTimestamp } from "firebase/firestore";
import { db } from "../firebase.config";

const Oauth = () => {
   const navigate = useNavigate();
   const location = useLocation();

   const onGoogleClick = async () => {
      try {
         const auth = getAuth();
         const provider = new GoogleAuthProvider();
         const result = await signInWithPopup(auth, provider);
         const user = result.user;

         //check if user email already exits
         const docRef = doc(db, "users", user.uid);
         const docSnap = await getDoc(docRef);
         //if user doesn't exits then save in database.
         if (!docSnap.exists()) {
            await setDoc(doc(db, "users", user.uid), {
               name: user.displayName,
               email: user.email,
               timestamp: serverTimestamp(),
            });
         }
         navigate("/");
      } catch (error) {
         toast.error("Could not authorize with google");
      }
   };

   return (
      <div className="socialLogin">
         <p>Sign {location.pathname === "/sign-up" ? "up" : "in"} with </p>
         <button className="socialIconDiv" onClick={onGoogleClick}>
            <img className="socialIconImg" src={googleIcon} alt="google" />
         </button>
      </div>
   );
};

export default Oauth;

Popularity 9/10 Helpfulness 6/10 Language javascript

Source: Grepper

Tags: firebase javascript sign

Link to this answer
Share Copy Link

Contributed on Mar 13 2023

Shirshak Kandel

0 Answers Avg Quality 2/10

Closely Related Answers

sign in with google firebase react

Comment

//Import the following installing with ' npm i firebase '
import { initializeApp } from "firebase/app";
import {getAuth, GoogleAuthProvider, signInWithPopup} from 'firebase/auth';

const firebaseConfig = {   //Get It from your project of Firebase below won't work
    apiKey: "AsasddkfAfjaSdfjskafFsjaksjfKfjasOfjdsa",
    authDomain: "google-sign_inApp",
    projectId: "google-sign-in-jfaskf",
    storageBucket: "google sign in ",
    messagingSenderId: "98477433349",
    appId: "9:32984293048:web:bafhsadlkks348934"
};

const app= initializeApp(firebaseConfig);
export const auth= getAuth(app);
const provider= new GoogleAuthProvider()
export const signInWithGoogle= ()=>{  //Call this function to get the user data
    signInWithPopup(auth, provider).then((result)=>{
        console.log(result)
    }).catch((error)=>{
        console.log(error);
    })
}
export default app;

//U can import and use signInWithGoogle anywhere in the project it logs the result

Popularity 9/10 Helpfulness 7/10 Language javascript

Source: Grepper

Tags: firebase firebas

Link to this answer
Share Copy Link

Contributed on Aug 13 2022

Anant Tiwari

0 Answers Avg Quality 2/10

configure firebase sign in with google in reactjs

Comment

/src/firebase/firebase.utils.js

/* Sign in With Google */

import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import 'firebase/compat/auth';

const config = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};

firebase.initializeApp(config);

export const auth = firebase.auth();
export const firestore = firebase.firestore();

const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: 'select_account' });
export const signInWithGoogle = () => auth.signInWithPopup(provider);

export default firebase;

Popularity 7/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: configure firebase f

Link to this answer
Share Copy Link

Contributed on Feb 08 2023

Strange Squirrel

0 Answers Avg Quality 2/10

how to implement google signin in react firebase?

Comment

import { GoogleAuthProvider, signInWithPopup, getAuth } from "firebase/auth";
    let google_provider = new GoogleAuthProvider();
    let auth = getAuth();
    signInWithPopup(auth, google_provider).then((res) => {
      console.log('google signIn response', res);
    }).catch((err) => {
      console.log('google signIn error', err);
    });

Popularity 8/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: google-signin go

Link to this answer
Share Copy Link

Contributed on Jan 09 2023

Vikas Chauhan

0 Answers Avg Quality 2/10

firebase google sign in react

Contents

More Related Answers

firebase google sign in react

Closely Related Answers

sign in with google firebase react

configure firebase sign in with google in reactjs

how to implement google signin in react firebase?

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.