CSS

Registro de usuario con Firebase y React trucos CSS

La capacidad de identificar a los usuarios es vital para mantener la seguridad de todas las aplicaciones. Igualmente importante es el código que se escribe para administrar las identidades de los usuarios, especialmente cuando se trata de evitar el acceso no autorizado a los datos almacenados por una aplicación. Escribir el código de autenticación sin marco o las bibliotecas disponibles puede llevar mucho tiempo para hacerlo correctamente, sin mencionar el soporte continuo para este código personalizado.

Aquí es donde base de fuego viene al rescate. Sus métodos intuitivos y listos para usar hacen que la configuración de un sitio de administración de identidad de usuario efectivo se realice en muy poco tiempo. Este tutorial nos ayudará a hacer esto: implementar el registro, verificación y autenticación de usuarios.

SDK para Firebase v9 presenta una nueva superficie de API modular, lo que lleva a un cambio en varios de sus servicios, uno de los cuales es Firebase Authentication. Este tutorial es relevante para los cambios en v9.

Para seguir este tutorial, debe estar familiarizado con React, React hooks y Firebase versión 8. También debe tener una cuenta de Google y Node instalada en su máquina.

Contenido

Configuración de base de fuego

Antes de que podamos comenzar a usar Firebase para nuestros requisitos de registro y autenticación, primero debemos configurar nuestro proyecto de Firebase y el método de autenticación que usamos.

Para agregar un proyecto, asegúrese de haber iniciado sesión en su cuenta de Google, luego vaya a consola base de fuego y haga clic Agregar un proyectoA partir de ahí, asigne un nombre al proyecto (yo uso «Firebase-user-reg-auth») y deberíamos estar listos para continuar.

Es posible que se le solicite habilitar Google Analytics en cualquier momento. No es necesario para este tutorial, así que siéntete libre de omitir este paso.

Firebase tiene diferentes métodos de autenticación tanto para dispositivos móviles como para la web, pero antes de que podamos usar cualquiera de ellos, primero debemos habilitarlo en la página de autenticación de Firebase. En el menú de la barra lateral, haga clic en Autenticación luego, en la página siguiente, haga clic en Primeros pasos.

Usaremos la autenticación de correo electrónico/contraseña, haga clic en él y se nos pedirá una pantalla para activarlo, que es exactamente lo que queremos hacer.

Clonación y configuración del repositorio inicial

Ya he creado una plantilla simple que podemos usar para este tutorial para que podamos centrarnos específicamente en cómo implementar las funciones. Entonces, lo que debemos hacer ahora es clonar el repositorio de GitHub.

Inicie su terminal. Esto es lo que podemos comenzar desde la línea de comando:

git clone -b starter https://github.com/Tammibriggs/Firebase_user_auth.git

cd Firebase_user_auth

npm install

También incluí Firebase versión 9 en la dependencia de package.json Archivo. Entonces, a medida que comienzas npm install comando, se instalará Firebase v9, junto con todas las demás dependencias.

Una vez que hayamos terminado, comencemos la aplicación con npm start!!

Integra Firebase en nuestra aplicación React

Para integrar Firebase, primero debemos obtener el objeto de configuración web y luego usarlo para inicializar Firebase en nuestra aplicación React. Vaya a la página del proyecto Firebase y veremos un conjunto de opciones como iconos como este:

Haga clic en la web (</>) para configurar nuestro proyecto de red Firebase y veremos una página como esta:

Ingresar firebase-usuario-autorización como el nombre de la aplicación web. Luego haga clic Registrar una aplicación un botón que nos lleva al siguiente paso, donde el nuestro firebaseConfig se proporciona el objeto.

Copie la configuración en el portapapeles, ya que la necesitaremos más adelante para inicializar Firebase. Luego haga clic Continuar a la consola botón para completar el proceso.

Ahora vamos a inicializar Firebase y Firebase Authentication para que podamos comenzar a usarlos en nuestra aplicación. src directorio de nuestra aplicación React, cree un firebase.js archivo y agregue la siguiente importación:

// src/firebase.js
import { initializeApp } from 'firebase/app'
import {getAuth} from 'firebase/auth'

Ahora pegue la configuración que copiamos antes después de la importación y agregue las siguientes líneas de código para inicializar Firebase y Firebase Authentication.

// src/firebase.js
const app = initializeApp(firebaseConfig)
const auth = getAuth(app)

export {auth}

Nuestro firebase.js ahora el archivo debería verse así:

// src.firebase.js
import { initializeApp } from "firebase/app"
import { getAuth } from "firebase/auth"

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "AUTH_DOMAIN",
  projectId: "PROJECT_ID",
  storageBucket: "STORAGE_BUCKET",
  messagingSenderId: "MESSAGING_SENDER_ID",
  appId: "APP_ID"
}

// Initialize Firebase and Firebase Authentication
const app = initializeApp(firebaseConfig)
const auth = getAuth(app)
export {auth}

Luego veremos cómo usar las funciones listas para usar proporcionadas por Firebase para agregar funciones de registro, verificación de correo electrónico e inicio de sesión a la plantilla que clonamos.

Creación de funcionalidad para el registro de usuarios

En la versión 9 de Firebase, podemos crear una funcionalidad para el registro de usuarios con createUserWithEmailAndPassword Esta función acepta tres argumentos:

  • copia certificada / servicio
  • Correo electrónico
  • contraseña

Los servicios siempre se pasan como primeros argumentos en la versión 9. En nuestro caso, este es el servicio de autenticación.

Para crear esta funcionalidad, trabajaremos con Register.js presentar en src directorio de nuestra plantilla clonada. Lo que hice en este archivo fue crear tres campos de formulario: correo electrónico, contraseña y confirmación de contraseña, y la entrada está controlada por el estado. Ahora, vamos a ello pedir prestado a los negocios.

Comencemos agregando una función que verifique la contraseña y confirme las contraseñas ingresadas, verificando que no estén vacías y sean iguales: Agregue las siguientes líneas de código después de los estados en Register componente:

// src/Register.js
// ...

const validatePassword = () => {
  let isValid = true
  if (password !== '' && confirmPassword !== ''){
    if (password !== confirmPassword) {
      isValid = false
      setError('Passwords does not match')
    }
  }
  return isValid
}

// ...

En la función anterior devolvemos un isValid una variable que puede devolver ambos cierto o falso basado en la validez de la contraseña. Usaremos el valor de esta variable más adelante para crear una condición en la que la función de Firebase responsable de registrar usuarios solo se llamará si isValid es cierto.

Para crear la funcionalidad de registro, comencemos por hacer las importaciones necesarias en Register.js Archivo:

// src/Register.js
import {auth} from './firebase'
import {createUserWithEmailAndPassword} from 'firebase/auth'

Ahora agregue las siguientes líneas de código después validatePassword función de contraseña:

// src/Register.js
// ...

const register = e => {
  e.preventDefault()
  setError('')
  if(validatePassword()) {
    // Create a new user with email and password using firebase
      createUserWithEmailAndPassword(auth, email, password)
      .then((res) => {
          console.log(res.user)
        })
      .catch(err => setError(err.message))
  }
  setEmail('')
  setPassword('')
  setConfirmPassword('')
}

// ...

En la función anterior establecemos una condición para llamar createUserWithEmailAndPassword funcionan solo cuando el valor es devuelto por validatePassword es cierto.

Para empezar, llamemos register función cuando se envía el formulario. Podemos hacer esto agregando onSubmit evento al formulario. Cambia la etiqueta de inicio a registration_form para verse así:

// src/Register.js
<form onSubmit={register} name="registration_form">

Con esto ya podemos registrar un nuevo usuario en nuestro sitio. Para probar esto, vaya a http://localhost:3000/register en el navegador, complete el formulario, luego haga clic en me estoy registrando botón.

Se muestra un formulario de registro de usuario con los campos para ingresar correo electrónico, contraseña y confirmación de contraseña.  Un botón gris con la etiqueta

Después de hacer clic me estoy registrando botón, si abrimos la consola del navegador, veremos detalles sobre el usuario recién registrado.

Administre el estado del usuario con la API React Context

La API de contexto es una forma de compartir datos con componentes en cada nivel del árbol de componentes de React sin tener que pasarlos como accesorios. Debido a que el usuario puede ser requerido por otro componente en el árbol, el uso de la API de contexto es excelente para administrar el estado del usuario.

Antes de comenzar a usar la API de contexto, hay algunas cosas que debemos configurar:

  • Crear un objeto de contexto usando createContext() método
  • Pasar los componentes con los que queremos compartir el estado de usuario, como hijos de Contexto Proveedor
  • Pase el valor al que queremos que el componente secundario/consumidor tenga acceso como accesorios Context.Provider

Hagámoslo src directorio, crea un archivo AuthContext.js archivo y agréguele las siguientes líneas de código:

// src/AuthContext.js
import React, {useContext} from 'react'

const AuthContext = React.createContext()

export function AuthProvider({children, value}) {
  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  )
}

export function useAuthValue(){
  return useContext(AuthContext)
}

En el código anterior, creamos un contexto llamado AuthContext además, hemos creado otras dos características que nos permitirán usar fácilmente la API de contexto, que es AuthProvider y useAuthValue.

EN AuthProvider la función nos permite compartir el valor del estado del usuario con todos los hijos de AuthContext.Provider mientras useAuthValue nos permite un fácil acceso al valor transmitido AuthContext.Provider.

Ahora a proporcionar a los niños y apreciar sus accesorios. AuthProvidermodificar App.js archivo para que se vea así:

// src/App.js
// ...
import {useState} from 'react'
import {AuthProvider} from './AuthContext'

function App() {
  const [currentUser, setCurrentUser] = useState(null)

  return (
    <Router>
      <AuthProvider value={{currentUser}}>
        <Switch>
         ...
        </Switch>
      </AuthProvider>
    </Router>
  );
}

export default App;

Aquí vamos AuthProvider alrededor de los componentes representados por AppPor lo tanto, currentUser valor dado a AuthProvider estará disponible para su uso por todos los componentes de nuestra aplicación, excepto App componente.

¡Eso es todo lo que hay que hacer para configurar la API de contexto! Para usarlo, necesitamos importar useAuthValue función y llamarlo en uno de los componentes secundarios de AuthProvidertal como Login.El código se ve así:

import { useAuthValue } from "./AuthContext"

function childOfAuthProvider(){
  const {currentUser} = useAuthValue()
  console.log(currentUser)

  return ...
}

Ahora, currentUser siempre lo será null porque no fijamos su valor a nada. Para establecer su valor, primero debemos obtener el usuario actual de Firebase, lo que se puede hacer usando una instancia de autenticación que se inicializa en nuestro firebase.js Archivo (auth.currentUser), o onAuthStateChanged una función que en realidad es la forma recomendada de obtener el usuario actual. De esta manera, nos aseguramos de que el objeto Auth no esté en un estado intermedio, como la inicialización, cuando obtenemos el usuario actual.

EN App.js archivo, agregue un useEffect importar junto con useState y también agregue la siguiente importación:

// src/App.js
import {useState, useEffect} from 'react'
import {auth} from './firebase'
import {onAuthStateChanged} from 'firebase/auth'

Ahora agregue la siguiente línea de código después currentUser estado en el componente de la aplicación:

// src/App.js
// ...

useEffect(() => {
  onAuthStateChanged(auth, (user) => {
    setCurrentUser(user)
   })
}, [])

// ...

En el código anterior, obtenemos el usuario actual y lo configuramos en el estado cuando se procesa el componente. Ahora que registramos un usuario, currentUser el estado se establecerá con un objeto que contiene información del usuario.

Enviar un correo electrónico de confirmación a un usuario registrado

Una vez que un usuario se registra, queremos que confirme su dirección de correo electrónico antes de acceder a la página de inicio de nuestro sitio. Nosotros podemos usar sendEmailVerification función para esto. Toma solo un argumento que es el asunto del usuario actualmente registrado. Cuando se llama, Firebase envía un correo electrónico a la dirección de correo electrónico del usuario registrado con un enlace donde el usuario puede confirmar su correo electrónico.

concentrémonos en Register.js archivar y cambiar Link y createUserWithEmailAndPassword importar para que se vea así:

// src/Register.js
import {useHistory, Link} from 'react-router-dom'
import {createUserWithEmailAndPassword, sendEmailVerification} from 'firebase/auth'

En el código anterior también importamos useHistory gancho. Esto nos ayudará a acceder y manipular el historial del navegador, lo que en resumen significa que podemos usarlo para cambiar de página en nuestra aplicación. Pero antes de que podamos usarlo, debemos llamarlo, así que agreguemos la siguiente línea de código error condición:

// src/Register.js
// ...
const history = useHistory()

// ...

Ahora modifica .then método de createUserWithEmailAndPassword función para verse así:

// src/Register.js
// ...
.then(() => {
  sendEmailVerification(auth.currentUser)
  .then(() => {
    history.push('/verify-email')
  }).catch((err) => alert(err.message))
})
// ...

Lo que sucede aquí es que cuando un usuario registra una dirección de correo electrónico válida, se le enviará un correo electrónico de confirmación y luego se lo llevará a Confirmar correo electrónico página.

Hay algunas cosas que debemos hacer en esta página:

  • Mostrar el correo electrónico del usuario después de la parte que dice «Correo electrónico de confirmación enviado a:»
  • Hazlo Vuelva a enviar el correo electrónico trabajar con botones
  • Crear funcionalidad para deshabilitar Vuelva a enviar el correo electrónico botón durante 60 segundos después de hacer clic en él
  • Lleve al usuario a su página de perfil después de que se confirme el correo electrónico

Comenzaremos mostrando el correo electrónico del usuario registrado. Esto requiere el uso de AuthContext creamos antes VerifyEmail.js archivo, agregue la siguiente importación:

// src/VerifyEmail.js
import {useAuthValue} from './AuthContext'

Luego agregue el siguiente código antes return declaración en VerifyEmail componente:

// src/VerifyEmail.js
const {currentUser} = useAuthValue()

Ahora, para mostrar el correo electrónico, agregue el siguiente código después <br/> etiqueta en return declaración.

// src/VerifyEmail.js
// ...
<span>{currentUser?.email}</span>
// ...

En el código anterior, usamos un enlace de cadena opcional para recibir el correo electrónico del usuario, por lo que cuando el correo electrónico es cero, nuestro código no arrojará errores.

Ahora que refrescamos Confirmar correo electrónico página, necesitamos ver el correo electrónico del usuario registrado.

Pasemos a lo siguiente que hace. Vuelva a enviar el correo electrónico el botón funciona. Primero, hagamos las importaciones necesarias. Agregue las siguientes importaciones a VerifyEmail.js Archivo:

// src/VerifyEmail.js
import {useState} from 'react'
import {auth} from './firebase'
import {sendEmailVerification} from 'firebase/auth'

Ahora agreguemos un estado que se encargará de deshabilitar y activar Vuelva a enviar el correo electrónico en función de si se envió o no el correo electrónico de confirmación. Este código va después de eso currentUser en VerifyEmail componente:

// src/VerifyEmail.js
const [buttonDisabled, setButtonDisabled] = useState(false)

Para la función que maneja el reenvío del correo electrónico de confirmación y la desactivación/activación del botón, necesitamos esto después buttonDisabled condición:

// src/VerifyEmail.js
// ...

const resendEmailVerification = () => {
  setButtonDisabled(true)
  sendEmailVerification(auth.currentUser)
  .then(() => {
    setButtonDisabled(false)
  }).catch((err) => {
    alert(err.message)
    setButtonDisabled(false)
  })
}

// ...

luego en return declaración, cambio Vuelva a enviar el correo electrónico botón como este:

// ...
<button 
  onClick={resendEmailVerification}
  disabled={buttonDisabled}
  >Resend Email</button>
// ...

Ahora, si vamos a la página de confirmación del correo electrónico y hacemos clic en el botón, se nos enviará otro correo electrónico. Pero hay un problema con la forma en que creamos esta funcionalidad, porque si intentamos hacer clic en el botón nuevamente en menos de un minuto, Firebase nos muestra un error de que enviamos demasiadas solicitudes. Esto se debe a que Firebase tiene un minuto antes de poder enviar otro correo electrónico a la misma dirección. Esto es lo puro que debemos abordar.

Todo lo que tenemos que hacer es mantener el botón deshabilitado durante 60 segundos (o más) después de enviar un correo electrónico de confirmación. Podemos mejorar un poco la experiencia del usuario mostrando un temporizador de cuenta regresiva en Vuelva a enviar el correo electrónico para notificar al usuario que el botón está desactivado temporalmente.

EN VerifyEmail.js archivo, agregue un useEffect importar:

import {useState, useEffect} from 'react'

Luego agregue lo siguiente después buttonDisabled condición:

// src/VerifyEmail.js
const [time, setTime] = useState(60)
const [timeActive, setTimeActive] = useState(false)

En el código anterior creamos un time una condición que se utilizará para la cuenta regresiva de 60 segundos, y una timeActive una condición que se usará para controlar cuándo comienza la cuenta regresiva.

Agregue las siguientes líneas de código después de los estados que acabamos de crear:

// src/VerifyEmail.js
// ...

useEffect(() => {
  let interval = null
  if(timeActive && time !== 0 ){
    interval = setInterval(() => {
      setTime((time) => time - 1)
    }, 1000)
  }else if(time === 0){
    setTimeActive(false)
    setTime(60)
    clearInterval(interval)
  }
  return () => clearInterval(interval);
}, [timeActive, time])

// ...

En el código anterior creamos un useEffect gancho que funciona solo cuando timeActive o time cambios en la condición. En este gancho reducimos el valor anterior de time decir uno cada segundo usando setInterval entonces detenemos la reducción de time un estado cuando su valor es cero.

Como useEffect el gancho depende de timeActive y time estado, uno de estos estados debe cambiar antes de que comience el temporizador time el estado no es una opción, ya que la cuenta regresiva solo debe comenzar cuando se envía un correo electrónico de confirmación. Así que tenemos que cambiar en su lugar timeActive condición.

EN resendEmailVerification función, cambio .then método de sendEmailVerification para verse así:

// src/VerifyEmail.js
// ...
.then(() => {
  setButtonDisabled(false)
  setTimeActive(true)
})
// ...

Ahora que se ha enviado un correo electrónico, timeActive el estado cambiará a cierto y comenzará la cuenta regresiva. En el código anterior, debemos cambiar la forma en que desactivamos el botón, porque cuando la cuenta regresiva está activa, queremos que el botón esté desactivado.

Haremos esto pronto, pero ahora, hagamos que el temporizador de cuenta regresiva sea visible para el usuario. Cambio Vuelva a enviar el correo electrónico botón para que se vea así:

// src/VerifyEmail.js
<button 
  onClick={resendEmailVerification}
  disabled={buttonDisabled}
>Resend Email {timeActive && time}</button>

Para mantener el botón deshabilitado mientras la cuenta regresiva está activa, cambiémoslo disabled Atributo del botón para que se vea así:

disabled={timeActive}

Esto desactivará el botón por un minuto cuando se envíe un correo electrónico de confirmación. Ahora podemos continuar y eliminar buttonDisabled estado de nuestro código.

Aunque esta característica funciona, todavía hay un problema con la forma en que la implementamos: cuando un usuario inicia sesión y es llevado a Confirmar correo electrónico página, cuando aún no han recibido un correo electrónico, pueden intentar hacer clic Vuelva a enviar el correo electrónico botón y si lo hacen en menos de un minuto, Firebase se volverá a equivocar porque hemos hecho demasiadas solicitudes.

Para arreglar esto, tenemos que hacerlo. Vuelva a enviar el correo electrónico el botón se desactiva durante 60 segundos después se envía un correo electrónico al usuario recién registrado. Eso significa que necesitamos una manera de cambiar timeActive condición dentro Register componente. También podemos usar la API de contexto para esto. Nos permitirá manipular y acceder globalmente timeActive condición.

Hagamos algunas modificaciones a nuestro código para que todo funcione correctamente. VerifyEmail componente, corte timeActive acondicionarlo y colocarlo en App componente después currentUser condición.

// src/App.js
function App() {
  // ...
  const [timeActive, setTimeActive] = useState(false)

  // ...

Entonces pon timeActive y setTimeActive dentro del objeto de AuthProvider apoyo de valor Debe tener un aspecto como este:

// src/App.js
// ...
<AuthProvider value={{currentUser, timeActive, setTimeActive}}>
// ...

Ahora tenemos acceso timeActive y setTimeActive dentro de los hijos de AuthProviderPara corregir el error en nuestro código, vaya a VerifyEmail.js archivar y destruir ambos timeActive y setTimeActive desde useAuthProvider:

// src/VerifyEmail.js
const {timeActive, setTimeActive} = useAuthValue()

Ahora a cambiar timeActive estado, después de que se haya enviado el correo electrónico de confirmación al usuario registrado, agregue la siguiente importación a Register.js Archivo:

// src/Register.js
import {useAuthValue} from './AuthContext'

Luego desestructurando setTimeActive desde useAuthValue con este fragmento entre otros países en Register componente:

// src/Register.js
const {setTimeActive} = useAuthValue()

Finalmente, c. register función, conjunto timeActive condición con .then el método de sendEmailVerification:

// src/Register.js
// ...
.then(() => {
  setTimeActive(true)
  history.push('/verify-email')
})
// ...

Esto permitirá al usuario enviar un correo electrónico de confirmación sin recibir ningún error de Firebase.

Lo último que debe ajustar en términos de verificación de usuario es llevar al usuario a su página de perfil después de confirmar su correo electrónico. Para ello, utilizaremos reload función en currentUser Nos permite recargar el objeto de usuario proveniente de Firebase, así sabremos cuando algo ha cambiado.

Primero, hagamos las importaciones necesarias VerifyEmail.js archivo, agreguemos esto:

// src/VerifyEmail.js
import {useHistory} from 'react-router-dom'

importamos useHistory para que podamos usarlo para navegar al usuario a la página de la cuenta. Luego agregue la siguiente línea de código después de los estados:

// src/VerifyEmail.js
const history = useHistory()

Finalmente, agregue las siguientes líneas de código después de eso history variable:

// src/VerifyEmail.js
// ...

useEffect(() => {
  const interval = setInterval(() => {
    currentUser?.reload()
    .then(() => {
      if(currentUser?.emailVerified){
        clearInterval(interval)
        history.push("https://css-tricks.com/")
      }
    })
    .catch((err) => {
      alert(err.message)
    })
  }, 1000)
}, [history, currentUser])

// ...

En el código anterior ejecutamos reload opera cada segundo hasta que se confirma el correo electrónico del usuario, y si es así, llevamos al usuario a su página de perfil.

Para probar esto, verifiquemos nuestro correo electrónico siguiendo las instrucciones del correo electrónico enviado por Firebase. Si todo va bien, seremos llevados automáticamente a la página de nuestra cuenta.

Actualmente, la página de la cuenta tampoco muestra los datos del usuario. Darse de baja la conexión no funciona. Esta es tu próxima tarea.

Trabajar en la página de perfil

Comencemos mostrando Correo electrónico y Correo electrónico confirmado valores Para ello utilizaremos currentUser condición en AuthContextLo que tenemos que hacer es importar useAuthValuedesestructurando currentUser de él y luego mostrar Correo electrónico y Correo electrónico confirmado valor del objeto de usuario.

Esto es lo que es Profile.js El archivo debería verse así:

// src/Profile.js
import './profile.css'
import {useAuthValue} from './AuthContext'

function Profile() {
  const {currentUser} = useAuthValue()

  return (
    <div className="center">
      <div className="profile">
        <h1>Profile</h1>
        <p><strong>Email: </strong>{currentUser?.email}</p>
        <p>
          <strong>Email verified: </strong>
          {`${currentUser?.emailVerified}`}
        </p>
        <span>Sign Out</span>
      </div>
    </div>
  )
}

export default Profile

Con este, Correo electrónico y Correo electrónico confirmado el valor ahora debe mostrarse en nuestra página de perfil.

Para recibir darse de baja la funcionalidad funciona, usaremos signOut Solo se necesita un argumento para ser auth entonces c Profile.js.vamos a agregar estas importaciones.

// src/Profile.js
import { signOut } from 'firebase/auth' 
import { auth } from './firebase'

Ahora, c return declaración, cambio <span> que contiene «Salir», por lo que llama signOut función de clic:

// src/Profile.js
// ...
<span onClick={() => signOut(auth)}>Sign Out</span>
// ...

Crear una ruta privada para el componente Perfil

Actualmente, incluso con una dirección de correo electrónico no verificada, un usuario puede acceder a la página de perfil. No queremos eso. Los usuarios no verificados deben ser redirigidos a la página de inicio de sesión cuando intenten acceder a la cuenta. Aquí vienen las rutas privadas.

EN src directorio, vamos a crear uno nuevo PrivateRoute.js y agréguele el siguiente código:

// src/PrivateRoute.js
import {Route, Redirect} from 'react-router-dom'
import {useAuthValue} from './AuthContext'

export default function PrivateRoute({component:Component, ...rest}) {
  const {currentUser} = useAuthValue()

  return (
    <Route
      {...rest}
      render={props => {
        return currentUser?.emailVerified ? <Component {...props} /> : <Redirect to='/login' />
    }}>
    </Route>
  )
}

Esta PrivateRoute es casi similar a usar RouteLa diferencia es que usamos un render prop para redirigir al usuario a la página de perfil si su correo electrónico no está confirmado.

Queremos que la página de perfil sea privada, así que importa bien PrivateRoute:

// src/App.js
import PrivateRoute from './PrivateRoute'

Entonces podemos reemplazar Route s PrivateRoute en Profile componente Profile ahora la ruta debería verse así:

// src/App.js
<PrivateRoute exact path="https://css-tricks.com/" component={Profile} />

¡Bien hecho! Hemos hecho que la página de la cuenta esté disponible solo para usuarios con correos electrónicos verificados.

Crear funcionalidad de inicio de sesión

Porque solo los usuarios con correos electrónicos verificados pueden acceder a la página de su cuenta cuando inician sesión con signInWithEmailAndPassword característica, también debemos verificar si su correo electrónico está verificado y, si no lo está, el usuario debe ser redirigido a Confirmar correo electrónico página donde también debería comenzar la cuenta regresiva de sesenta segundos.

Esta es la importación que necesitamos agregar a Login.js Archivo:

import {signInWithEmailAndPassword, sendEmailVerification} from 'firebase/auth'
import {auth} from './firebase'
import {useHistory} from 'react-router-dom'
import {useAuthValue} from './AuthContext'

Luego agregue la siguiente línea de código entre los estados en Login componente.

// src/Login.js
const {setTimeActive} = useAuthValue()
const history = useHistory()

Luego agregue la siguiente función después de history variable:

// src/Login.js
// ...

const login = e => {
  e.preventDefault()
  signInWithEmailAndPassword(auth, email, password)
  .then(() => {
    if(!auth.currentUser.emailVerified) {
      sendEmailVerification(auth.currentUser)
      .then(() => {
        setTimeActive(true)
        history.push('/verify-email')
      })
    .catch(err => alert(err.message))
  }else{
    history.push("https://css-tricks.com/")
  }
  })
  .catch(err => setError(err.message))
}

// ...

Esto inicia sesión en la cuenta del usuario y luego verifica si está verificada o no. Si se confirma, lo movemos a su página de perfil. Pero si no está confirmado, enviamos un correo electrónico de confirmación y luego lo redirigimos a Confirmar correo electrónico página.

Todo lo que tienes que hacer para que esto funcione es llamar login función cuando se envía el formulario. Entonces, cambiemos el marcador de apertura a login_form a esto:

// src/Login.js
<form onSubmit={login} name="login_form">

Y, oye, ¡hemos terminado!

Conclusión

En este tutorial, aprendimos a usar Firebase Authentication versión 9 para crear un servicio de autenticación y registro de usuarios de React completamente funcional. ¿Es súper fácil? No, hay algunas cosas que debemos hacer malabarismos. Pero, ¿es mucho más fácil que construir su propio servicio desde cero? ¡Por supuesto que sí! Y espero que lo hayas entendido leyendo esto.

Referencias

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba