SDK

Cuatro capas. Adopta las que necesites.

El cliente headless, las guardas de React, la interfaz opcional y los temas son paquetes separados. Ninguno exige WebGL; la interfaz es un regalo, no una dependencia.

Código completoPaquete interno del repositorio; aún no publicado en npm.

Descubrir
Autorizar
Probar
Verificar
Consentir
Emitir
Sesión
Revocar

Cliente TypeScript sin interfaz ni React: login, callback, logout, restore, roles y permisos contra el emisor.
Código completo
useAuth, useSession, usePermissions… y guardas como RequireAuth, PermissionGate o MFARequiredGate.
Código completo
Interfaz opcional con Liquid Glass, interacción magnética contenida, EN/ES y escenas por método. Sin WebGL.
Código completo
Siete presets, claro, oscuro y sistema, y variables CSS --auth4us-* que el producto puede sobrescribir.
Código completo

Cada capa, en su código.

@auth4us/core

Headless. Sin React, sin librerías de animación.

Código completoPaquete interno del repositorio; aún no publicado en npm.

const client = createAuth4US({ issuer, clientId, redirectUri, scopes });
await client.login({ method: "passkey" });
await client.handleCallback(location.href);
client.getAccessToken(); // solo en memoria

loginhandleCallbacklogoutrestoregetUserhasRolehasPermission

@auth4us/react

Proveedor, hooks y guardas. No importa el paquete visual.

Código completoPaquete interno del repositorio; aún no publicado en npm.

<Auth4USProvider config={config}>
  <MFARequiredGate fallback={<PedirSegundoFactor />}>
    <Panel />
  </MFARequiredGate>
</Auth4USProvider>

useAuthuseUseruseSessionuseRolesusePermissionsRequireAuthRequireAnonymousPermissionGateRoleGate

@auth4us/ui-react

Componentes opcionales: el éxito exige confirmed del protocolo.

Código completoPaquete interno del repositorio; aún no publicado en npm.

<AuthExperience
  method="passkey"
  phase={visual}
  confirmed={status === "authenticated"}
/>

AuthShellAuthMethodListAuthStatusAuthUserMenuSessionExpiredMFARequiredCodeField

@auth4us/themes

Presets como datos; variables --auth4us-* sobrescribibles.

Código completo

const theme = resolveTheme("auth4us", {
  components: { authButton: { radius: 18, blur: 20 } },
});
themeVars(theme); // --auth4us-accent, --auth4us-glass-blur…

auth4usmeridiancrm4usdoc4usrecruit4ussignature4usbpm4us

create-auth4us

Arranca la integración sin escribir secretos.

Código completoAsistente interactivo interno; genera código React.

src/auth/auth4us.ts
src/auth/AuthProvider.tsx
src/auth/AuthCallback.tsx
src/auth/RequireAuth.tsx
.env.example   # sin CLIENT_SECRET

ProductoFrameworkEmisorClient IDRedirect URIPresetMétodos

1 de 5

Hooks y guardas de React.

Las guardas consultan al emisor. La aplicación pregunta; AUTH4US decide.

Hooks

useAuthuseUseruseSessionuseRolesusePermissionsuseClaimsuseProfileuseAuthMethoduseAuthStatususeMFA

Guardas

RequireAuthRequireAnonymousPermissionGateRoleGateClaimGateProfileCompleteGateMFARequiredGateSessionGuardAuthCallback

AuthCallback no celebra antes de tiempo

Lee la URL actual, intercambia el código con PKCE y muestra un estado accesible. No dibuja una marca de éxito antes de que /connect/token acepte el código.

La continuación es relativa

Completar el perfil ocurre en AUTH4US. La continuación es de un solo uso y relativa: las URLs absolutas o protocol-relative se rechazan.

El tema no remonta la sesión

Cambiar entre claro y oscuro es asunto del tema; no reinicia el proveedor de autenticación.

Veámoslo con tus aplicaciones.

Una demostración con datos sintéticos: tus flujos, tus métodos de entrada y tu modelo de tenants.

Solicitar demo Explorar AUTH4US

Producto

Plataforma

Empresa

Desarrolladores

Cuatro capas. Adopta las que necesites.

Cada capa, en su código.

@auth4us/core

@auth4us/react

@auth4us/ui-react

@auth4us/themes

create-auth4us

Hooks y guardas de React.

Hooks

Guardas

AuthCallback no celebra antes de tiempo

La continuación es relativa

El tema no remonta la sesión

Siete presets, una misma interfaz.

Veámoslo con tus aplicaciones.