¿Cómo autenticar el número de teléfono usando firebase en ReactJS?

El siguiente enfoque cubre cómo autenticarse con un número de teléfono 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 un archivo firebase.js con el siguiente código.

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

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

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

Reaccionar-firebase-ganchos:

https://www.npmjs.com/package/react-firebase-ganchos

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, { useState } from 'react';
import { firebase, auth } from './firebase';
  
const Login = () => {
    // Inputs
    const [mynumber, setnumber] = useState("");
    const [otp, setotp] = useState('');
    const [show, setshow] = useState(false);
    const [final, setfinal] = useState('');
  
    // Sent OTP
    const signin = () => {
  
        if (mynumber === "" || mynumber.length < 10) return;
  
        let verify = new firebase.auth.RecaptchaVerifier('recaptcha-container');
        auth.signInWithPhoneNumber(mynumber, verify).then((result) => {
            setfinal(result);
            alert("code sent")
            setshow(true);
        })
            .catch((err) => {
                alert(err);
                window.location.reload()
            });
    }
  
    // Validate OTP
    const ValidateOtp = () => {
        if (otp === null || final === null)
            return;
        final.confirm(otp).then((result) => {
            // success
        }).catch((err) => {
            alert("Wrong code");
        })
    }
  
    return (
        <div style={{ "marginTop": "200px" }}>
            <center>
                <div style={{ display: !show ? "block" : "none" }}>
                    <input value={mynumber} onChange={(e) => { 
                       setnumber(e.target.value) }}
                        placeholder="phone number" />
                    <br /><br />
                    <div id="recaptcha-container"></div>
                    <button onClick={signin}>Send OTP</button>
                </div>
                <div style={{ display: show ? "block" : "none" }}>
                    <input type="text" placeholder={"Enter your OTP"}
                        onChange={(e) => { setotp(e.target.value) }}></input>
                    <br /><br />
                    <button onClick={ValidateOtp}>Verify</button>
                </div>
            </center>
        </div>
    );
}
  
export default Login;

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

Paso 9: 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 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: