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.
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')
);
import { useAuth0 } from '@auth0/auth0-react';
const Login = () => {
const { loginWithRedirect, isAuthenticated } = useAuth0();
return (isAuthenticated || (
<button onClick={() => loginWithRedirect()}> Log In</button>
))
}
export default Login
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
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.
