Autenticación anónima en firebase usando ReactJS

El siguiente enfoque cubre cómo autenticarse de forma anónima usando firebase en react. Este tipo de autenticación se usa para crear y usar cuentas anónimas temporales para autenticarse con Firebase. 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();
export default auth;

Paso 6: Vaya a su panel de Firebase y habilite el método de inicio de sesión anónimo 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 from './firebase.js';
  
const Login = () => {
  
    // Sign in Anonymously
    const signin = () => {
        auth.signInAnonymously().catch(alert);
    }
      
    return (
        <div>
            <center>
                <button style={{"marginTop" : "200px"}}
                onClick={signin}>Sign In Anonymously</button>
            </center>
        </div>
    );
}
  
export default Login;

import React from 'react';
import auth from './firebase';
  
const Main = () => {
  
    // Signout function
    const logout = () => {
        auth.signOut();
    }
      
    return (
        <div style={{"marginTop" : "200px"}}>
            <center>
            Anonymous Login Success
            <button style={{"marginLeft" : "20px"}}
            onClick={logout}>
                Logout
            </button>
            </center>
        </div>
    );
}
  
export default Main;

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

import React from 'react';
import auth from './firebase';
import {useAuthState} from 'react-firebase-hooks/auth';
import Login from './login';
import Main from './main';
  
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: