Cómo integrar el servicio de autenticación Auth0 con una aplicación React
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 gestionar la autenticación y autorización de usuarios en sus 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 los datos de carga útil de autenticación exitosa 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 también puede agregar otras opciones, como el inicio de sesión social, a través de un proveedor como Google, y la autenticación de múltiples factores.
La ventaja de usar este tipo de autenticación es que no necesita estar familiarizado con protocolos de identidad como OAuth 2.0 u OpenID Connect, que se usan comúnmente para crear sistemas de autenticación seguros.
Crear un nuevo proyecto en Auth0 Developer Console
Para comenzar, primero deberá registrarse para obtener una cuenta Auth0 . 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, ingrese el nombre de su aplicación, seleccione Aplicaciones web de una sola página , luego haga clic en Guardar .
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 la pestaña Configuración 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.
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 la aplicación de Auth0, haga clic en Autenticación y luego seleccione Redes sociales . A continuación, haga clic en el botón 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
Cree una aplicación React, 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= your domain name
REACT_APP_AUTH0_CLIENT_ID= your client ID
2. Instale los paquetes necesarios
Ejecute este comando en su terminal para instalar las dependencias requeridas:
npm install @auth0/auth0-react
3. 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:
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import{Auth0Provider} from '@auth0/auth0-react';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Auth0Provider
domain = {process.env.REACT_APP_AUTH0_DOMAIN}
clientId = {process.env.REACT_APP_AUTH0_CLIENT_ID}
redirectUri = {window.location.origin}
>
<App />
</Auth0Provider>, document.getElementById('root')
);
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.
import React from 'react'
import { useAuth0 } from '@auth0/auth0-react';
const Login = () => {
const { loginWithRedirect, isAuthenticated } = useAuth0();
return (isAuthenticated || (
<button onClick={() => loginWithRedirect()}> Log In</button>
))
}
export default Login
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:
import React from 'react'
import { useAuth0 } from '@auth0/auth0-react'
const Success = () => {
const { user, logout, isAuthenticated } = useAuth0();
return (isAuthenticated && (
<div>
<h1>User Profile</h1>
<img src={user.picture} alt={user.name} />
<h2>{user.name}</h2>
<p>{user.email}</p>
<button onClick={() => logout()}> Log Out</button>
</div>
))
}
export default Success
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 administra 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.
Deja una respuesta