Estaba trabajando en un proyecto de reacción en el que quería implementar el inicio de sesión de Google, así que usé firebase y escribí el siguiente código:
import {initializeApp} from "firebase/app"; import "firebase/auth"; import { getAuth } from "firebase/auth"; const firebaseConfig = { apiKey: "****", authDomain: "***", projectId: "***", storageBucket: "***", messagingSenderId: "***", appId: "***", measurementId: "***" }; const app = initializeApp(firebaseConfig); export const auth = getAuth(app); export default app;Creación de contexto para que la función sea accesible en toda la aplicación:
import React from 'react'; import FirebaseContext from './FirebaseContext'; import { auth } from '../Firebase/firebase'; import { signInWithRedirect,GoogleAuthProvider,createUserWithEmailAndPassword } from "firebase/auth"; const FirebaseState = (props)=>{ const reactSignup = (email,password)=>{ return createUserWithEmailAndPassword(auth,email,password); } const googleSignin = ()=>{ const provider = new GoogleAuthProvider(); return signInWithRedirect(auth,provider); } return( <FirebaseContext.Provider value={{reactSignup,googleSignin}}>{props.children}</FirebaseContext.Provider> ) } export default FirebaseState;Llamar a la función en el clic del botón deseado
const {googleSignin} = useContext(FirebaseContext); const handleGoogleSignin = async()=>{ try{ console.log("Sign in attempted"); await googleSignin(); history.push("/main"); }catch(err){ console.log(err); } }Ahora, el problema es que cada vez que ejecuto una aplicación usando npm run start y se hace clic en el botón, no se redirige para iniciar sesión, pero cuando la aplicación se detiene, puede redirigir, pero como mi aplicación ya no se está ejecutando, eso no tiene sentido. usar.
¿Intentas cambiar signInWithRedirect a signInWithPopup ?
Asi que
import React from 'react'; import FirebaseContext from './FirebaseContext'; import { auth } from '../Firebase/firebase'; import { signInWithPopup,GoogleAuthProvider,createUserWithEmailAndPassword } from "firebase/auth"; const FirebaseState = (props)=>{ const reactSignup = (email,password)=>{ return createUserWithEmailAndPassword(auth,email,password); } const googleSignin = ()=>{ const provider = new GoogleAuthProvider(); return signInWithPopup(auth,provider); } return( <FirebaseContext.Provider value={{reactSignup,googleSignin}}>{props.children}</FirebaseContext.Provider> ) } export default FirebaseState;Idea alternativa
Desconecte signInWithRedirect de Context y use la función directamente en la función de su componente de esta manera:
import { auth, provider } from '../../config'; import { signInWithPopup } from '@firebase/auth'; import { Button } from '@chakra-ui/button'; export default function Signup() { const loginWithGoogle = () => { signInWithPopup(auth, provider); }; return ( <div> <Button onClick={loginWithGoogle}>Signin With Google</Button> </div> ); }Idea alternativa 2
Go to Firebase Panel > Authentication > Sign-in MethodVerifique su dominio, si su dominio está en la lista, elimínelo y agréguelo nuevamente. De lo contrario, agregue su dominio.