@xid-kit/angular

Angular 17+ スタンドアロンプロバイダー、RxJS サービス、関数型ルートガード、@xid-kit/core 上のスタンドアロンコンポーネントをサポート。

状態

パッケージステータス：現行パッケージ。Angular 17+ スタンドアロンプロバイダー、RxJS サービス、関数型ガード、スタンドアロンコンポーネントが実装済みです。本番インフラでの実際の IdP ラウンドトリップはまだ手動検証待ちです。

プロバイダーの設定

app.config.ts で provideXid を呼び出します。XID_CLIENT インジェクショントークンを登録し、ブートストラップ時に client.load() を呼び出す APP_INITIALIZER を組み込みます。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)
}

Angular シグナルブリッジ

テンプレート読み込み用に Observable をシグナルに変換するには、@angular/core/rxjs-interop の toSignal() を使用してください。

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 })
}

ルートガード

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),
  },
]

スタンドアロンコンポーネント

<!-- 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

エクスポート	種別	目的
`provideXid`	function	XID_CLIENT シングルトンと APP_INITIALIZER を登録します。ProvideXidOptions を受け入れます
`XID_CLIENT`	InjectionToken	生の XidClient インスタンス。ほとんどのユースケースでは XidAuthService を優先してください
`XidAuthService`	サービス	RxJS Observable：state$、isLoaded$、isSignedIn$、user$、session$、organization$、および getToken、signOut、setActiveOrganization、setActiveSession
`authGuard`	CanActivateFn ファクトリー	ユーザーがサインインしていない場合に /sign-in へリダイレクトします
`hasOrganizationGuard`	CanActivateFn ファクトリー	アクティブな組織コンテキストが存在しない場合にリダイレクトします
`hasPermissionGuard`	CanActivateFn ファクトリー	ユーザーが指定された権限を持っていない場合にリダイレクトします
`SignInButton`	スタンドアロンコンポーネント	セレクター xid-sign-in-button。入力：signInUrl、redirectUrl、ariaLabel
`SignOutButton`	スタンドアロンコンポーネント	セレクター xid-sign-out-button。入力：sessionId、redirectUrl、ariaLabel。サインアウト中は aria-busy を表示します