Firebase google signin authentication and popup is not working in React project

Question

Actually I'm don't know a firebase just follow a react course and my instructor uses the same code but it's not working from my side... I have enabled google sign in the firebase project app. Here is code where I import firebase, config app and use PopUp method

import firebase from "firebase/app";

import "firebase/auth";
import "firebase/firestore";

const config = {
  apiKey: "AIzaSyAl-E7TezE_hUH9QLXVegrG9w3X72tlBSs",
  authDomain: "crwn-db-65f80.firebaseapp.com",
  databaseURL: "https://crwn-db-65f80.firebaseio.com",
  projectId: "crwn-db-65f80",
  storageBucket: "crwn-db-65f80.appspot.com",
  messagingSenderId: "92304636614",
  appId: "1:92304636614:web:7cf30df27d77b20714f5c7",
  measurementId: "G-TN40FHGKV0"
};

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.signInWithGoogle(provider);

export default firebase;

And here is a piece of code from another file:

import {signInWithGoogle} from './firebase.utils';
<form onSubmit={this.handleSubmit}>
<button onClick={signInWithGoogle}>SignIn With Google </button>
</form>

Answer 1

If I have not mistaken then this is from the Complete React Developer in 2020 (w/ Redux, Hooks, GraphQL) course in Udemy.

I was stuck here as well then I realized that I didn't unpack the custom props in the CustomButton component. Do this, let me know if it helps:

const CustomButton = ({ children, ...props }) => {

Answer 2

It's showing blank if you're using Google Chrome or Microsoft Edge browsers. Try using different browsers(like Firefox). This worked for me.

Hope this helps!

Answer 3

await GoogleSignin.revokeAccess();

await GoogleSignin.signOut();