Firebase proporciona servicios de autenticación que le permiten registrar e iniciar sesión fácilmente. Puede usar correo electrónico, contraseñas, números de teléfono y proveedores de identidad como Google y Facebook.
En este tutorial, aprenderá cómo puede usar Firebase Authentication en React para autenticar a los usuarios mediante un correo electrónico y una contraseña. Almacenará los datos de usuario recopilados en Firestore, una base de datos en la nube NoSQL también de Firebase.
Tenga en cuenta que este tutorial usa Firebase v9 y React Router v6.
Crear una aplicación de base de fuego
Para conectar su aplicación a base de fuego, registre su aplicación con Firebase para obtener un objeto de configuración. Esto es lo que usará para inicializar Firebase en su aplicación React.
Para crear una aplicación Firebase, siga los siguientes pasos.
- Dirígete a la consola base de fuego y haga clic Crea un proyecto.
- Asigne un nombre a su proyecto y haga clic en crear para iniciar el proceso.
- Clickea en el Web icono (
- Asigne a su aplicación un nombre de su elección y haga clic en Registrar aplicación. No necesita habilitar Firebase Hosting.
- Copie el objeto de configuración en Agregar el SDK de Firebase.
Crear una aplicación de reacción
Utilizar crear-reaccionar-app para montar una aplicación React.
npx crear-reaccionar-aplicación reaccionar-auth-firebase
Navegue hasta la carpeta e inicie la aplicación.
cd reaccionar-autorización-firebase
npm inicio de ejecución
Autenticar usuarios con funciones de Firebase
Antes de usar Firebase, instálalo.
npm i base de fuego
Crear un nuevo archivo, base de fuego.js, e inicializa Firebase.
importar { initializeApp } desde "firebase/app";
const firebaseConfig = {
Clave API: ,
dominio de autenticación: ,
Projecto ID: ,
cubo de almacenamiento: ,
Id del remitente de mensajería: ,
ID de aplicación:
};
// Inicializar base de fuego
aplicación const = initializeApp (firebaseConfig);
Use el objeto de configuración que copió cuando registró la aplicación.
A continuación, importe los módulos de Firebase que utilizará.
importar {
obtener autenticación,
crear usuario con correo electrónico y contraseña,
iniciar sesión con correo electrónico y contraseña,
desconectar,
} de "firebase/auth";
importar { getFirestore, addDoc, colección } de "firebase/firestore";
const db = getFirestore();
const auth = getAuth();Para autenticar usuarios, debe crear tres funciones: registrarse, iniciar sesión y cerrar sesión.
los inscribirse función pasa el correo electrónico y la contraseña a crear usuario con correo electrónico y contraseña para registrar un nuevo usuario. crear usuario con correo electrónico y contraseña devuelve los datos de usuario que utilizará para crear un nuevo registro de usuario en la base de datos.
const signUp = asíncrono (correo electrónico, contraseña) => {
tratar {
const userCredential = await createUserWithEmailAndPassword(
autenticación,
Email,
clave
);
const usuario = credencialusuario.usuario;
esperar addDoc (colección (db, "usuarios"), {
uid: usuario.uid,
correo electrónico: usuario.correo electrónico,
});
volver verdadero
} atrapar (error) {
devolver {error: error.mensaje}
}
};
Tenga en cuenta que no está verificando si el correo electrónico ya está en uso antes del registro porque Firebase lo maneja por usted.
A continuación, en el registrarse función pasar el correo electrónico y la contraseña al iniciar sesión con correo electrónico y contraseña función para iniciar sesión como usuario registrado.
const iniciar sesión = asíncrono (correo electrónico, contraseña) => {
tratar {
const userCredential = esperar iniciar sesión con correo electrónico y contraseña (
autenticación,
Email,
clave
);
const usuario = credencialusuario.usuario;
volver verdadero
} atrapar (error) {
devolver {error: error.mensaje}
}
};
Las funciones signUp y signOut devuelven verdadero si se realiza correctamente y un mensaje de error si se produce un error.
La función signOut es bastante sencilla. llama al desconectar() función de Firebase.
const cerrar sesión = asíncrono() => {
tratar {
espera de cierre de sesión (autorización)
volver verdadero
} atrapar (error) {
falso retorno
}
};
Crear formularios de reacción
Los formularios de inicio de sesión y registro recopilarán el correo electrónico y la contraseña del usuario.
Crear un nuevo componente Registro.js y agrega lo siguiente.
importar { useState } de "reaccionar";
importar {Enlace} desde "react-router-dom";
importar { signUp } desde "./firebase";
const Registro = () => {
const [email, setEmail] = useState("");
const [contraseña, establecer Contraseña] = useState("");
const [error, establecer error] = useState("");
const handleSubmit = asíncrono (e) => {
e.preventDefault();
if (contraseña !== contraseña2) {
seterror("Las contraseñas no coinciden");
} demás {
establecerCorreo("");
configurar la clave("");
const res = esperar registro (correo electrónico, contraseña);
if (res.error) seterror (res.error)
}
};
regreso (
<>
Inscribirse
{¿error? {error}: nulo}
¿ya registrado? Acceso
);
};
exportar registro predeterminado;
Aquí está creando un formulario de registro y haciendo un seguimiento del estado de uso del correo electrónico y la contraseña. Una vez que envíe el formulario, el enEnviar evento desencadena la manejarEnviar() función que llama a la inscribirse() función de base de fuego.js. Si la función devuelve un error, actualice el estado del error y muestre el mensaje de error.
Para el formulario de inicio de sesión, cree Inicio de sesión.js y agrega lo siguiente.
importar { useState } de "reaccionar";
importar { iniciar sesión } desde "./firebase";
const Iniciar sesión = () => {
const [email, setEmail] = useState("");
const [contraseña, establecer Contraseña] = useState("");
const [error, establecer error] = useState("");
const handleSubmit = asíncrono (e) => {
e.preventDefault();
establecerCorreo("");
configurar la clave("");
const res = esperar inicio de sesión (correo electrónico, contraseña);
if (res.error) seterror (res.error);
};
regreso (
<>
{¿error? {error}: nulo}
);
};
exportar inicio de sesión predeterminado;
El formulario de inicio de sesión es bastante similar a la página de registro, excepto que el envío llama al registrarse() función.
Por último, cree la página Perfil. Esta es la página a la que la aplicación redirigirá a los usuarios después de una autenticación exitosa.
Crear Perfil.js y agrega lo siguiente.
importar { signOut } desde "./firebase";
const Perfil = () => {
const handleLogout = asíncrono () => {
esperar cerrar sesión();
};
regreso (
<>
Perfil
);
};
exportar perfil predeterminado;
En este componente, tiene el encabezado Perfil y el botón de cierre de sesión. los al hacer clic controlador en el botón activa el manejarCerrar sesión función que cierra la sesión del usuario.
Crear rutas de autenticación
Para mostrar las páginas que creó en el navegador, configure react-router-dom.
Instalar en pc reaccionar-enrutador-dom:
npm i reaccionar-enrutador-dom
En índice.js, configurar reaccionar-enrutador-dom:
importar React desde "react";
importar ReactDOM desde "react-dom";
importar {BrowserRouter, Routes, Route} desde "react-router-dom";
importar la aplicación desde "./App";
importar inicio de sesión desde "./Iniciar sesión";
importar perfil desde "./Perfil";
ReactDOM.render(
} />
} />
} />
documento.getElementById("raíz")
);
Hasta este punto, la aplicación puede dar de alta a un usuario, darle de alta y cerrar sesión. Entonces, ¿cómo saber si un usuario ha iniciado sesión o no?
En la siguiente sección de este tutorial, verá cómo puede usar el contexto de React para realizar un seguimiento del estado de autenticación de un usuario en toda la aplicación.
Administrar la autenticación con la API React Context
React Context es una herramienta de administración de estado que simplifica el intercambio de datos entre aplicaciones. Es una mejor alternativa a la perforación de apoyo, donde los datos pasan por el árbol de padre a hijo hasta que llegan al componente que los necesita.
Crear contexto de autenticación
En el origen carpeta, agregar AuthContext.js archivar y crear y exportar AuthContext.
importar { createContext } de "reaccionar";
const AuthContext = createContext();
exportar AuthContext predeterminado;
A continuación, cree el proveedor en AuthProvider.js. Permitirá que los componentes utilicen AuthContext.
import { getAuth, onAuthStateChanged } desde "firebase/auth";
import { useState, useEffect } desde 'reaccionar';
importar AuthContext desde './AuthContext'
const auth = getAuth()
export const AuthProvider = ({ niños }) => {
const [usuario, establecerUsuario] = useState (nulo);
usarEfecto(() => {
onAuthStateChanged (autorización, (usuario) => {
establecerUsuario (usuario)
})
}, []);
regreso ({niños}
);
};
Aquí, está obteniendo el valor del usuario utilizando el onAuthStateChanged() método de Firebase. Este método devuelve un objeto de usuario si autentica al usuario y nulo si no puede. Al usar el gancho useEffect(), el valor del usuario se actualiza cada vez que cambia el estado de autenticación.
En índice.js, envuelve las rutas con Proveedor de autenticación para garantizar que todos los componentes accedan al usuario en el contexto:
importar {AuthProvider} desde "./AuthProvider";
ReactDOM.render(
} />
} />
} />
,
documento.getElementById("raíz")
);
Crear rutas protegidas
Para proteger rutas sensibles, verifique el estado de autenticación de un usuario que intenta navegar a una página protegida como la página de perfil.
Modificar Perfil.js para redirigir a un usuario si no está autenticado.
importar { useContext } de "reaccionar";
importar AuthContext desde "./AuthContext";
import { useNavigate, Navigate } desde "react-router-dom";
importar { signOut } desde "./firebase";
const Perfil = () => {
const {usuario} = useContext (AuthContext);
const navegar = useNavegar();
const handleLogout = asíncrono () => {
esperar cerrar sesión();
};
si (!usuario) {
regreso ;
}
regreso (
<>
Perfil
);
};
exportar perfil predeterminado;La aplicación hace condicionalmente la página de perfil redirigiendo al usuario a la página de inicio de sesión si no está autenticado.
Ir más allá con la autenticación de Firebase
En este tutorial, utilizó Firebase para autenticar a los usuarios mediante su correo electrónico y contraseña. También creó registros de usuario en Firestore. Firebase proporciona funciones para trabajar con proveedores de autenticación como Google, Facebook y Twitter.
10 mejores prácticas de React que debe seguir en 2022
Leer siguiente
Temas relacionados
- Programación
- Reaccionar
- Programación
- JavaScript
Sobre el Autor
Mary Gathoni es una desarrolladora de software apasionada por crear contenido técnico que no solo sea informativo sino también atractivo. Cuando no está codificando o escribiendo, le gusta salir con amigos y estar al aire libre.
Suscríbete a nuestro boletín
¡Únase a nuestro boletín para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse
