SDK

Angular SDK

@authon/angular — Authon認証のためのAngularモジュール、ガード、サービス。スタンドアロンコンポーネントを持つAngular 17+に対応。

インストール

bash

npm install @authon/angular

モジュール設定

app.config.ts

import { ApplicationConfig } from "@angular/core";
import { provideAuthon } from "@authon/angular";

export const appConfig: ApplicationConfig = {
  providers: [
    provideAuthon({
      publishableKey: "pk_live_your_key",
      afterSignInUrl: "/dashboard",
      afterSignOutUrl: "/",
    }),
  ],
};

AuthonService

app.component.ts

import { Component, inject } from "@angular/core";
import { AuthonService } from "@authon/angular";
import { AsyncPipe } from "@angular/common";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [AsyncPipe],
  template: `
    <div *ngIf="user$ | async as user">
      <h1>Welcome, {{ user.displayName }}!</h1>
      <button (click)="signOut()">Sign out</button>
    </div>
  `,
})
export class AppComponent {
  private authon = inject(AuthonService);
  user$ = this.authon.user$;

  openSignIn() {
    this.authon.openSignIn();
  }

  signOut() {
    this.authon.signOut();
  }
}

ルートガード

app.routes.ts

import { Routes } from "@angular/router";
import { authonGuard } from "@authon/angular";

export const routes: Routes = [
  { path: "", component: HomeComponent },
  {
    path: "dashboard",
    component: DashboardComponent,
    canActivate: [authonGuard],
  },
  {
    path: "admin",
    component: AdminComponent,
    canActivate: [authonGuard],
    data: { authonCondition: (user: any) => user.role === "admin" },
  },
];