@xid-kit/angular

Provider standalone de Angular 17+, servicio RxJS, guards funcionales de rutas y componentes standalone sobre @xid-kit/core.

Estado

El estado del paquete es Paquete actual. El provider standalone de Angular 17+, el servicio RxJS, los guards funcionales y los componentes standalone están implementados. Una prueba de ida y vuelta real contra un IdP en infraestructura de producción está pendiente de verificación manual.

Configuración del proveedor

Llama a provideXid en app.config.ts. Registra el token de inyección XID_CLIENT y conecta un APP_INITIALIZER que llama a client.load() al arrancar. No se requiere NgModule.

// app.config.ts
import { ApplicationConfig } from '@angular/core'
import { provideXid } from '@xid-kit/angular'

export const appConfig: ApplicationConfig = {
  providers: [
    provideXid({ apiUrl: 'https://app.xid.dev' }),
  ],
}

XidAuthService

import { Component, inject } from '@angular/core'
import { AsyncPipe } from '@angular/common'
import { XidAuthService } from '@xid-kit/angular'

@Component({
  selector: 'app-header',
  standalone: true,
  imports: [AsyncPipe],
  template: `
    @if (auth.isLoaded$ | async) {
      @if (auth.isSignedIn$ | async) {
        <span>{{ (auth.user$ | async)?.primaryEmailAddress }}</span>
      } @else {
        <a routerLink="/sign-in">Sign in</a>
      }
    }
  `,
})
export class HeaderComponent {
  readonly auth = inject(XidAuthService)
}

Puente de signals de Angular

Usa toSignal() de @angular/core/rxjs-interop para convertir observables a signals para lecturas en plantillas.

import { toSignal } from '@angular/core/rxjs-interop'
import { inject } from '@angular/core'
import { XidAuthService } from '@xid-kit/angular'

@Component({ standalone: true, ... })
export class MyComponent {
  readonly #auth = inject(XidAuthService)
  readonly user = toSignal(this.#auth.user$, { initialValue: null })
}

Guards de ruta

import { Routes } from '@angular/router'
import { authGuard, hasOrganizationGuard, hasPermissionGuard } from '@xid-kit/angular'

export const routes: Routes = [
  {
    path: 'dashboard',
    canActivate: [authGuard()],
    loadComponent: () => import('./dashboard.component').then(m => m.DashboardComponent),
  },
  {
    path: 'admin',
    canActivate: [hasPermissionGuard('org:settings:write')],
    loadComponent: () => import('./admin.component').then(m => m.AdminComponent),
  },
]

Componentes standalone

<!-- template -->
<xid-sign-in-button signInUrl="/sign-in" redirectUrl="/dashboard">Log in</xid-sign-in-button>
<xid-sign-out-button redirectUrl="/home">Log out</xid-sign-out-button>

API exportada

Exportar	Tipo	Propósito
`provideXid`	function	Registra el singleton XID_CLIENT y APP_INITIALIZER; acepta ProvideXidOptions
`XID_CLIENT`	InjectionToken	La instancia sin procesar de XidClient; usa XidAuthService en la mayoría de los casos
`XidAuthService`	servicio	Observables RxJS: state$, isLoaded$, isSignedIn$, user$, session$, organization$; más getToken, signOut, setActiveOrganization, setActiveSession
`authGuard`	Fábrica de CanActivateFn	Redirige a /sign-in cuando el usuario no ha iniciado sesión
`hasOrganizationGuard`	Fábrica de CanActivateFn	Redirige cuando no hay contexto de organización activo
`hasPermissionGuard`	Fábrica de CanActivateFn	Redirige cuando el usuario carece del permiso especificado
`SignInButton`	componente standalone	Selector xid-sign-in-button; entradas signInUrl, redirectUrl, ariaLabel
`SignOutButton`	componente standalone	Selector xid-sign-out-button; entradas sessionId, redirectUrl, ariaLabel; muestra aria-busy durante el cierre de sesión