auth0/auth0-react

¿Qué hace auth0-react?

Úsalo al agregar autenticación a aplicaciones React (inicio de sesión, cierre de sesión, sesiones de usuario, rutas protegidas) - integra el SDK @auth0/auth0-react para SPAs con Vite o Create React App.

Requisitos previos

• Una cuenta de Auth0 y un tenant configurado.
• Una aplicación de tipo "Single Page Application" registrada en Auth0.
• Node.js 18+ y npm/yarn/pnpm.

Instalación

npm install @auth0/auth0-react

Configuración

1. Proveedor de Auth0

Envuelve tu aplicación con Auth0Provider y pasa las opciones necesarias:

import React from 'react';
import { Auth0Provider } from '@auth0/auth0-react';

function App() {
  return (
    <Auth0Provider
      domain="YOUR_DOMAIN"
      clientId="YOUR_CLIENT_ID"
      authorizationParams={{
        redirect_uri: window.location.origin
      }}
    >
      <MyApp />
    </Auth0Provider>
  );
}

2. Inicio de sesión y cierre de sesión

import { useAuth0 } from '@auth0/auth0-react';

function LoginButton() {
  const { loginWithRedirect, logout, isAuthenticated } = useAuth0();

  return isAuthenticated ? (
    <button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}>
      Cerrar sesión
    </button>
  ) : (
    <button onClick={() => loginWithRedirect()}>
      Iniciar sesión
    </button>
  );
}

3. Rutas protegidas

Crea un componente para proteger rutas:

import { withAuthenticationRequired } from '@auth0/auth0-react';

const ProtectedRoute = ({ component }) => {
  const Component = withAuthenticationRequired(component, {
    onRedirecting: () => <div>Redirigiendo...</div>,
  });
  return <Component />;
};

4. Obtener el token de acceso

import { useAuth0 } from '@auth0/auth0-react';

function ApiCall() {
  const { getAccessTokenSilently } = useAuth0();

  const callApi = async () => {
    const token = await getAccessTokenSilently();
    const response = await fetch('https://api.example.com/data', {
      headers: {
        Authorization: `Bearer ${token}`
      }
    });
    // ...
  };

  return <button onClick={callApi}>Llamar API</button>;
}

Notas importantes

• Asegúrate de que las URLs de redirección en Auth0 coincidan con la configuración de tu aplicación.
• Para Vite, usa import.meta.env en lugar de process.env para variables de entorno.
• Para Create React App, usa REACT_APP_ como prefijo para variables de entorno.

Referencias

• Documentación de Auth0 React SDK
• Repositorio @auth0/auth0-react