Auth0 simplifica el proceso de establecer la identidad del usuario en su aplicación web. Proporciona funciones de autenticación y autorización seguras y personalizables a través de su API. Úselo y no tendrá que preocuparse por crear su propio sistema de autenticación desde cero.
La integración con Auth0 facilita la inclusión de autenticación confiable en su aplicación React y garantiza un acceso seguro a su aplicación.
Los siguientes pasos explican lo que es necesario para integrar Auth0 en una aplicación React.
¿Qué es Auth0?
Auth0 es un servicio web que proporciona una API segura para manejar autenticación y autorización del usuario en tus aplicaciones.
Proporciona un sistema de autenticación personalizable que puede integrar fácilmente en su aplicación React. Una vez que conecta Auth0 a su aplicación, se encarga del resto de la carga de trabajo de autenticación.
¿Cómo funciona Auth0?
Auth0 proporciona una función de inicio de sesión universal que implementa el flujo de autenticación. Cada vez que un usuario desea iniciar sesión, la API lo redirige a una página de inicio de sesión de Auth0, se autentica y luego se envían datos útiles de autenticación a su aplicación.
Puede personalizar el flujo de trabajo de autenticación para su aplicación definiendo diferentes métodos de inicio de sesión. El inicio de sesión universal proporciona un nombre de usuario y una contraseña como autenticación principal, pero puede también agregue otras opciones como inicio de sesión social, a través de un proveedor como Google, y multifactor autenticación.
La ventaja de usar este tipo de autenticación es que no necesita estar familiarizado con la identidad. protocolos como OAuth 2.0 u OpenID Connect, que se usan comúnmente para crear una autenticación segura sistemas
Crear un nuevo proyecto en Auth0 Developer Console
Para comenzar, primero deberá registrarse en un Autor0 cuenta. Después de registrarse, navegue a su tablero y haga clic en Crear aplicación para configurar los ajustes del proyecto de autenticación.
Auth0 proporciona diferentes configuraciones de autenticación según el tipo de aplicación que esté creando. Para este tutorial, complete el nombre de su aplicación, seleccione Aplicaciones web de una sola página, luego haga clic en Ahorrar.
A continuación, seleccione Reaccionar de la lista de tecnologías compatibles con Auth0.
Configurar las URI de la Aplicación
Después de crear su aplicación y configurar los ajustes requeridos, en el tablero de su aplicación, haga clic en el Ajustes pestaña para configurar las propiedades de URI requeridas.
Establezca las siguientes propiedades:
- URL de devolución de llamada permitidas. La URL a la que llamará el servidor Auth0 después de que un usuario se autentique.
- URL de cierre de sesión permitidas. La URL a la que Auth0 redirigirá al usuario cuando cierre la sesión.
- Orígenes web permitidos. La URL permitida de la que puede provenir una solicitud de autorización.
Para el desarrollo local, puede utilizar http://localhost: 3000 URL. Sin embargo, una vez que envíe su código a producción, deberá proporcionar las URL de su dominio.
Una vez que haya terminado de completar las URL, continúe y haga clic en Guardar cambios en la parte inferior de la página de configuración.
Establezca sus proveedores de inicio de sesión social preferidos
En el panel de menú izquierdo del panel de aplicaciones de Auth0, haga clic en Autenticación, luego seleccione Sociales. A continuación, haga clic en el Crear conexión en la página de configuración de conexiones sociales.
Finalmente, seleccione y agregue su proveedor de inicio de sesión social preferido.
Configure Auth0 en su aplicación React
Integre el servicio de autenticación Auth0 en su aplicación React creando los componentes de inicio de sesión y éxito.
1. Cree una aplicación React y configure un archivo ENV
Crear una aplicación Reaccionar, luego abra la carpeta del proyecto en su editor de código. A continuación, en el directorio raíz de la carpeta de su proyecto, cree un archivo ENV para contener sus variables de entorno: su nombre de dominio e ID de cliente. Inicie sesión en su cuenta Auth0, en el tablero de la aplicación, copie el nombre de dominio y la identificación del cliente y guárdelos en su archivo ENV de la siguiente manera:
REACT_APP_AUTH0_DOMAIN= su nombre de dominio
REACT_APP_AUTH0_CLIENT_ID= su ID de cliente2. Instale los paquetes necesarios
Ejecute este comando en su terminal para instalar las dependencias requeridas:
npm instalar @auth0/auth0-react3. Envuelva el componente de su aplicación con el proveedor Auth0
El proveedor de Auth0 usa React Context. Esto le permite acceder a todas sus propiedades desde el componente de la aplicación. El proveedor Auth0 toma tres parámetros: el dominio del cliente, la ID del cliente y el URI de redireccionamiento.
Abra el archivo index.js, elimine el código React de la plantilla y agregue el código a continuación:
importar Reaccionar de'reaccionar';
importar ReactDOM de'reaccionar-dom/cliente';
importar aplicación de'./Aplicación';
importar{Proveedor de autenticación} de'@auth0/auth0-react';constante root = ReactDOM.createRoot(documento.getElementById('raíz'));
root.render(
dominio = {proceso.env. REACT_APP_AUTH0_DOMAIN}
clientId = {proceso.env. REACT_APP_AUTH0_CLIENT_ID}
redirigirUri = {ventana.ubicación.origen}
>
</Auth0Provider>, documento.getElementById('raíz')
);
4. Crear un componente de página de inicio de sesión
Cree una nueva carpeta en el directorio /src de su aplicación React y asígnele el nombre de páginas. Dentro de esta carpeta, cree dos archivos: Login.js y Success.js.
Abra el archivo login.js y agregue el código a continuación. El componente de la página de inicio de sesión mostrará un botón de inicio de sesión.
importar Reaccionar de'reaccionar'
importar { usarAuth0 } de'@auth0/auth0-react';constante Iniciar sesión = () => {
constante { loginWithRedirect, isAuthenticated } = useAuth0();devolver (está autenticado || (
exportarpor defecto Acceso
De forma predeterminada, Auth0 proporciona un correo electrónico y una contraseña como método de autenticación. Además, según los proveedores de inicio de sesión social que haya seleccionado, Auth0 también mostrará la opción de inicio de sesión del proveedor.
5. Crear un componente de página de éxito
Este componente presentará dos características principales: un perfil de usuario autenticado y un botón de cierre de sesión.
En el archivo Success.js, agregue el siguiente código:
importar Reaccionar de'reaccionar'
importar { usarAuth0 } de'@auth0/auth0-react'constante Éxito = () => {
constante { usuario, cerrar sesión, está autenticado } = useAuth0();devolver (está autenticado && (
Perfil de usuario</h1>
{usuario.nombre}</h2>
{usuario.email}</p>
exportarpor defecto Éxito
Una vez que inicia sesión y Auth0 lo autentica, Auth0 lo redirige a su aplicación y envía datos de carga útil a su aplicación que contienen los detalles del usuario. Puede usar estos datos dentro de su aplicación para crear perfiles de usuario personalizados y administrar sesiones de usuario. La propiedad Usuario del enlace UseAuth le permite acceder a datos de usuario específicos.
El enlace UseAuth0 también proporciona una propiedad llamada isAuthenticated, que le permite representar los componentes de forma condicional. Si un usuario está autenticado, el código mostrará los detalles de su perfil y mostrará un componente de botón de cierre de sesión.
Por el contrario, si no lo están, renderizará el componente del botón de inicio de sesión. Esto significa que no necesita especificar las rutas en función del estado de autenticación de un usuario, ya que esta propiedad gestiona automáticamente este proceso. Auth0 define la lógica de inicio y cierre de sesión, lo que facilita la implementación de la funcionalidad de autenticación.
¿Vale la pena probar el servicio de autenticación Auth0?
Auth0 proporciona soluciones listas para usar que manejan los requisitos de autenticación de su aplicación. Además, el servicio Auth0 ofrece soporte para plataformas de desarrollo nativas, móviles y web, lo que le permite integrar fácilmente el sistema de autenticación con una pila de tecnología de su preferencia.