¿Cómo autenticar firebase con GitHub en ReactJS?

El siguiente enfoque cubre cómo autenticar firebase con GitHub 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 aplicación React usando el siguiente comando:

npx create-react-app gfgapp

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

cd gfgapp

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.GithubAuthProvider();
export {auth , provider};

Paso 6: registre su aplicación como una aplicación de desarrollador en GitHub y obtenga el ID de cliente de OAuth 2.0 y el secreto de cliente de su aplicación .

Para la URL de devolución de llamada de autorización , vaya a su sección de autenticación y haga clic en el método de inicio de sesión de Github. Después de eso, copie la URL de devolución de llamada.

Paso 7: Ahora habilite el método de inicio de sesión de Github ingresando su ID de cliente y Secreto de cliente. 

Paso 8: 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 9: cree dos archivos, es decir, login.js y main.js con el siguiente código.

import {auth , provider} from './firebase';
const Login = ()=>{
  
    // SignIn with GitHub
    const submit = ()=>{
        auth.signInWithPopup(provider).catch(alert);
    }
    return (
        <div>
            <center>
            <button onClick={submit}>
                SignIn with Github
            </button>
            </center>
        </div>
    )
}
export default Login;

import {auth} from './firebase';
const Main = ()=>{
    const logout = ()=>{
        auth.signOut();
    }
    return(
        <div>
            Welcome 
                 
            {
                auth.currentUser.email
            }
                 
            <button onClick={logout}>
                Logout
            </button>  
        </div>
    )
}
export default Main;

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

import './App.css';
import Login from './login';
import {auth} from './firebase';
import Main from './main';
import {useAuthState} from 'react-firebase-hooks/auth';
function App() {
  const [user] = useAuthState(auth);
  return (
    user ? <Main/> : <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: