---
title: "@xid-kit/angular"
description: "@xid-kit/core 기반의 Angular 17+ 독립형 provider, RxJS 서비스, 함수형 라우트 가드, 독립형 컴포넌트."
locale: "ko"
---

> Documentation Index
> Fetch the locale documentation index at: https://xid.dev/ko/llms.txt
> Use this file to discover all available pages before exploring further.

# @xid-kit/angular

## 상태

패키지 상태: **현재 패키지**. Angular 17+ 독립형 provider, RxJS 서비스, 함수형 가드, 독립형 컴포넌트가 구현되었습니다. 프로덕션 인프라에서의 실제 IdP 왕복 테스트는 아직 수동 검증 대기 중입니다.

## 공급자 설정

`app.config.ts`에서 `provideXid`를 호출하세요. `XID_CLIENT` 주입 토큰을 등록하고 부트스트랩 시 `client.load()`를 호출하는 `APP_INITIALIZER`를 연결합니다. NgModule이 필요하지 않습니다.

```ts
// 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

```ts
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 signals 브리지

템플릿 읽기를 위해 옵저버블을 신호로 변환하려면 `@angular/core/rxjs-interop`의 `toSignal()`을 사용하세요.

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

## 라우트 가드

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

## 독립형 컴포넌트

```html
<!-- 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 옵저버블: 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를 표시합니다 |

Source: https://xid.dev/ko/sdks/angular/index.mdx