---
title: "@vonvon-kit/angular"
description: "Fournisseur standalone Angular 17+, service RxJS, guards de routefonctionnels et composants standalone construits sur @vonvon-kit/core."
locale: "fr"
---

> Documentation Index
> Fetch the relevant documentation index at: https://vonvon.id/fr/sdks/llms.txt
> Use this file to discover all available pages before exploring further.

# @vonvon-kit/angular

## Statut

Statut du registre : UNPUBLISHED. Installez ce SDK uniquement depuis un checkout du code source du dépôt ; n'utilisez pas de registre de paquets externe.

Le statut du package est **Package actuel**. Le fournisseur standaloneAngular 17+, le service RxJS, les guards fonctionnels et les composantsstandalone sont implémentés. Un aller-retour réel avec un IdP sur uneinfrastructure de production est en attente de vérification manuelle.

## Configuration du fournisseur

Appelez `provideVonvon` dans `app.config.ts`. Cela enregistre letoken d'injection `VONVON_CLIENT` et câble un `APP_INITIALIZER` quiappelle `client.load()` au démarrage. Aucun NgModule requis.

```ts
// app.config.ts
import { ApplicationConfig } from '@angular/core'
import { provideVonvon } from '@vonvon-kit/angular'

export const appConfig: ApplicationConfig = {
  providers: [
// Core auth endpoints must be served on this application's exact origin.
provideVonvon({ mode: 'same-origin' }),
  ],
}
```

## VonvonAuthService

```ts
import { Component, inject } from '@angular/core'
import { AsyncPipe } from '@angular/common'
import { VonvonAuthService } from '@vonvon-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(VonvonAuthService)
}
```

## Pont de signaux Angular

Utilisez `toSignal()` depuis `@angular/core/rxjs-interop` pourconvertir des observables en signaux pour les lectures de templates.

```ts
import { toSignal } from '@angular/core/rxjs-interop'
import { inject } from '@angular/core'
import { VonvonAuthService } from '@vonvon-kit/angular'

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

## Guards de route

```ts
import { Routes } from '@angular/router'
import { authGuard, hasOrganizationGuard, hasPermissionGuard } from '@vonvon-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),
  },
]
```

## Composants standalone

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

## API exportée

| Exporter | Type | Objectif |
| --- | --- | --- |
| `provideVonvon` | function | Enregistre le singleton VONVON\_CLIENT et APP\_INITIALIZER ; accepteProvideVonvonOptions |
| `VONVON_CLIENT` | InjectionToken | L'instance brute de VonvonClient ; préférez VonvonAuthService pour la plupartdes cas d'usage |
| `VonvonAuthService` | service | Observables RxJS : state$, isLoaded$, isSignedIn$, user$, session$,organization$ ; plus getToken, signOut, setActiveOrganization,setActiveSession |
| `authGuard` | Fabrique CanActivateFn | Redirige vers /sign-in quand l'utilisateur n'est pas connecté |
| `hasOrganizationGuard` | Fabrique CanActivateFn | Redirige quand aucun contexte d'organisation actif n'est présent |
| `hasPermissionGuard` | Fabrique CanActivateFn | Redirige quand l'utilisateur ne dispose pas de la permission spécifiée |
| `SignInButton` | composant standalone | Sélecteur vonvon-sign-in-button ; entrées signInUrl, redirectUrl, ariaLabel |
| `SignOutButton` | composant standalone | Sélecteur vonvon-sign-out-button ; entrées sessionId, redirectUrl, ariaLabel; affiche aria-busy pendant la déconnexion |

Source: https://vonvon.id/fr/sdks/angular/index.mdx