De desconocido a confiable.

import { createAuth4US } from "@auth4us/core";

const client = createAuth4US({
  issuer: "https://auth.example.com",
  clientId: "portal-demo",
  redirectUri: "https://portal.example.com/auth/callback",
  scopes: ["openid", "profile", "email"],
});

await client.login({ method: "passkey" });
await client.handleCallback(window.location.href);

// La política la decide el emisor; el cliente solo pregunta.
client.hasPermission("users.read");

Cliente público: código de autorización + PKCE. Sin secreto de cliente en el navegador.

import { Auth4USProvider, RequireAuth, PermissionGate } from "@auth4us/react";

export function Root() {
  return (
    <Auth4USProvider config={config}>
      <RequireAuth>
        <PermissionGate permission="users.read" fallback={<SinAcceso />}>
          <Directorio />
        </PermissionGate>
      </RequireAuth>
    </Auth4USProvider>
  );
}

@auth4us/react no importa el paquete visual: usa tu propia interfaz si prefieres.

GET /connect/authorize?response_type=code
  &client_id=portal-demo
  &redirect_uri=https%3A%2F%2Fportal.example.com%2Fauth%2Fcallback
  &scope=openid%20profile%20email
  &code_challenge=<S256 del verificador>
  &code_challenge_method=S256
  &state=<aleatorio>
Host: auth.example.com

response_type solo admite code; el método plain de PKCE está deshabilitado.

# Descubre los endpoints en lugar de escribirlos a mano
curl -s https://auth.example.com/.well-known/openid-configuration

# Llaves públicas para verificar firmas ES256
curl -s https://auth.example.com/.well-known/jwks.json

Discovery y JWKS son públicos. JWKS se sirve con Cache-Control: public, max-age=300.