Skip to Content

SDK de React (@auris/react)

@auris/react v0.1.0

@auris/react proporciona bindings de React para Auris IAM. Envuelve @auris/js con un proveedor de contexto, hooks para acceder al estado de autenticación, comprobaciones de permisos, consultas FGA y contexto de organización — además de componentes UI preconstruidos para patrones comunes.

Instalación

npm install @auris/react @auris/js

Ambos paquetes son necesarios. @auris/react depende de @auris/js como peer dependency.

AurisProvider

Envuelve la raíz de tu aplicación (o el subárbol que necesita autenticación) con AurisProvider. Inicializa AurisClient, restaura cualquier sesión existente desde el almacenamiento y proporciona el contexto de Auris a todos los componentes hijos.

import { AurisProvider } from '@auris/react'
 
function App() {
  return (
    <AurisProvider
      domain="auth.tudominio.com"
      clientId="app_xxxxx"
      redirectUri="http://localhost:3000/callback"
      tenant="mi-tenant"
      storage="localStorage"
      autoRefresh={true}
    >
      <TuApp />
    </AurisProvider>
  )
}

En una aplicación Next.js, importa AurisProvider desde @auris/nextjs en lugar de @auris/react. El paquete Next.js re-exporta todos los componentes y hooks de React.

Hooks

useAuris()

El hook principal. Devuelve el contexto de autenticación completo: usuario actual, estado de carga, métodos de autenticación e información de errores.

import { useAuris } from '@auris/react'
 
function Dashboard() {
  const { user, isLoading, isAuthenticated, loginWithRedirect, logout } = useAuris()
 
  if (isLoading) return <div>Cargando...</div>
  if (!isAuthenticated) return <button onClick={() => loginWithRedirect()}>Iniciar sesión</button>
 
  return <div>Bienvenido, {user?.name}!</div>
}

useUser()

Acceso directo a la información del usuario. Devuelve null si no hay sesión.

const user = useUser()
// { id, email, name, roles, picture, ... }

usePermissions()

Comprueba permisos RBAC para el usuario actual.

const { hasPermission, isLoading } = usePermissions()
 
const canEdit = await hasPermission('documents:write')

useFga()

Comprueba relaciones de autorización de grano fino.

const { check } = useFga()
 
const { allowed } = await check({
  user: `user:${user.id}`,
  relation: 'editor',
  object: `document:${docId}`,
})

useOrganization()

Accede al contexto de la organización actual del usuario.

const { organization, members, switchOrganization } = useOrganization()

Componentes

AuthGuard

Envuelve el contenido que requiere autenticación. Redirige a inicio de sesión si el usuario no está autenticado.

import { AuthGuard } from '@auris/react'
 
function ProtectedPage() {
  return (
    <AuthGuard redirectTo="/login">
      <Dashboard />
    </AuthGuard>
  )
}

PermissionGate

Renderiza hijos condicionalmente basándose en permisos RBAC.

import { PermissionGate } from '@auris/react'
 
function AdminPanel() {
  return (
    <PermissionGate permission="admin:access" fallback={<div>Acceso denegado</div>}>
      <AdminContent />
    </PermissionGate>
  )
}

FgaGate

Renderiza hijos condicionalmente basándose en relaciones FGA.

import { FgaGate } from '@auris/react'
 
function DocumentEditor({ docId }: { docId: string }) {
  return (
    <FgaGate
      user={`user:${userId}`}
      relation="editor"
      object={`document:${docId}`}
      fallback={<ReadOnlyView />}
    >
      <EditableView />
    </FgaGate>
  )
}

Gestión de callbacks

Gestiona la redirección de vuelta desde la página de login de Auris:

// pages/callback.tsx o app/auth/callback/page.tsx
'use client'
import { useEffect } from 'react'
import { useAuris } from '@auris/react'
import { useRouter } from 'next/navigation'
 
export default function CallbackPage() {
  const { handleRedirectCallback } = useAuris()
  const router = useRouter()
 
  useEffect(() => {
    handleRedirectCallback().then(({ appState }) => {
      router.replace(appState?.returnTo ?? '/dashboard')
    })
  }, [])
 
  return <div>Completando el inicio de sesión...</div>
}
Arquitectura