¿Cómo autenticar con google usando firebase en React?

El siguiente enfoque cubre cómo autenticarse con Google usando firebase en react. Hemos utilizado el módulo firebase para lograrlo.

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una React myapp usando el siguiente comando:

npx create-react-app myapp

Paso 2: después de crear la carpeta de su proyecto, es decir, myapp , acceda a ella con el siguiente comando:

cd myapp

Estructura del proyecto: La estructura de nuestro proyecto se verá así.

Paso 3: después de crear la aplicación ReactJS, instale el módulo Firebase con el siguiente comando:

npm install firebase@8.3.1 --save

Paso 4: Vaya a su panel de Firebase y cree un nuevo proyecto y copie sus credenciales.

const firebaseConfig = {
      apiKey: "your api key",
      authDomain: "your credentials",
      projectId: "your credentials",
      storageBucket: "your credentials",
      messagingSenderId: "your credentials",
      appId: "your credentials"
};

Paso 5: Inicialice Firebase en su proyecto creando el archivo Firebase.js con el siguiente código.

import firebase from 'firebase';
  
const firebaseConfig = {
    // Your credentials
};
  
firebase.initializeApp(firebaseConfig);
var auth = firebase.auth();
var provider = new firebase.auth.GoogleAuthProvider(); 
export {auth , provider};

Paso 6: Vaya a su panel de Firebase y habilite el método de inicio de sesión de Google como se muestra a continuación. 

Paso 7: ahora instale el paquete npm, es decir , react-firebase-hooks usando el siguiente comando.

npm i react-firebase-hooks

Este paquete nos ayuda a escuchar el estado actual del usuario.

Paso 8: cree dos archivos, es decir, login.js y main.js con el siguiente código.

import React from 'react';
import {auth , provider}  from './firebase.js';
  
const Login = () => {
  
    // Sign in with google
    const signin = () => {
        auth.signInWithPopup(provider).catch(alert);
    }
      
    return (
        <div>
            <center>
                <button style={{"marginTop" : "200px"}} 
                onClick={signin}>Sign In with Google</button>
            </center>
        </div>
    );
}
  
export default Login;

import React from 'react';
import {auth} from './firebase';
  
const Mainpage = () => {
  
    // Signout function
    const logout = () => {
        auth.signOut();
    }
      
    return (
        <div>
            Welcome
               
            {
                auth.currentUser.email
            }
            <button style={{"marginLeft" : "20px"}} 
            onClick={logout}>
                Logout
            </button>
        </div>
    );
}
  
export default Mainpage;

Paso 8: Finalmente, importe todos los archivos requeridos en el archivo App.js como se muestra a continuación.

Aplicación.js

import React from 'react';
import {auth} from './firebase';
import {useAuthState} from 'react-firebase-hooks/auth';
import Login from './login';
import Mainpage from './main';
  
function App() {
  const [user] = useAuthState(auth);
  return (
    user ? <Mainpage/> : <Login/>
  );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida: