SDK

Angular SDK

Name: Authon
Author: Authon

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

AuthonService

app.component.ts

import { Component, Inject, OnInit } from "@angular/core";
import { AuthonService } from "@authon/angular";

@Component({
  selector: "app-root",
  standalone: true,
  template: `
    <div *ngIf="user">
      <h1>Welcome, {{ user.displayName }}!</h1>
      <button (click)="signOut()">Sign out</button>
    </div>
  `,
})
export class AppComponent implements OnInit {
  user = this.authon.user;

  constructor(@Inject("AuthonService") private authon: AuthonService) {}

  ngOnInit() {
    this.authon.onStateChange(() => {
      this.user = this.authon.user;
    });
  }

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

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

ルートガード

app.routes.ts

import { inject } from "@angular/core";
import { Routes } from "@angular/router";
import { authGuard, AuthonService } from "@authon/angular";

export const routes: Routes = [
  { path: "", component: HomeComponent },
  {
    path: "dashboard",
    component: DashboardComponent,
    canActivate: [
      () => {
        const authon = inject(AuthonService);
        return authGuard(authon, "/sign-in");
      },
    ],
  },
  {
    path: "admin",
    component: AdminComponent,
    canActivate: [
      () => {
        const authon = inject(AuthonService);
        return authGuard(authon, "/sign-in");
      },
    ],
  },
];