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.
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. AuthProvider
modificar 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 App
Por 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 AuthProvider
tal 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 AuthProvider
Para 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 AuthContext
Lo que tenemos que hacer es importar useAuthValue
desestructurando 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 Route
La 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.
Deja una respuesta