English | 한국어

@authon/angular

Drop-in Angular authentication with service, guard, and social buttons — Auth0 alternative

Prerequisites

Before installing the SDK, create an Authon project and get your API keys:

1. Create a project at Authon Dashboard

   • Click "Create Project" and enter your app name
   • Select the authentication methods you want (Email/Password, OAuth providers, etc.)

2. Get your API keys from Project Settings → API Keys

   • Publishable Key (pk_live_...) — use in your frontend code
   • Test Key (pk_test_...) — for development, enables Dev Teleport

3. Configure OAuth providers (optional) in Project Settings → OAuth

   • Add Google, Apple, GitHub, etc. with their respective Client ID and Secret
   • Set the redirect URL to https://api.authon.dev/v1/auth/oauth/redirect

Test vs Live keys: Use pk_test_... during development. Switch to pk_live_... before deploying to production. Test keys use a sandbox environment with no rate limits.

Install

npm install @authon/angular

Quick Start

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAuthon } from '@authon/angular';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    ...provideAuthon({
      publishableKey: 'pk_live_YOUR_PUBLISHABLE_KEY',
    }),
  ],
};

// app.component.ts
import { Component, Inject, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
import { AuthonService } from '@authon/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div *ngIf="!authon.isLoading">
      <div *ngIf="authon.isSignedIn">
        <p>Welcome, {{ authon.user?.displayName }}</p>
        <button (click)="authon.signOut()">Sign out</button>
      </div>
      <button *ngIf="!authon.isSignedIn" (click)="authon.openSignIn()">Sign in</button>
    </div>
  `,
})
export class AppComponent implements OnInit, OnDestroy {
  private unsub?: () => void;
  constructor(
    @Inject('AuthonService') public authon: AuthonService,
    private cdr: ChangeDetectorRef,
  ) {}
  ngOnInit() { this.unsub = this.authon.onStateChange(() => this.cdr.markForCheck()); }
  ngOnDestroy() { this.unsub?.(); }
}

Common Tasks

Add Google OAuth Login

async signInWithGoogle() {
  await this.authon.getClient().signInWithOAuth('google');
}

Protect a Route

// app.routes.ts
import { inject } from '@angular/core';
import { authGuard, AuthonService } from '@authon/angular';

export const routes = [
  {
    path: 'dashboard',
    loadComponent: () => import('./dashboard.component').then(m => m.DashboardComponent),
    canActivate: [() => {
      const authon = inject('AuthonService') as AuthonService;
      return authGuard(authon, '/sign-in');
    }],
  },
];

Get Current User

const user = this.authon.user;
// { id, email, displayName, avatarUrl, emailVerified, ... }

const token = this.authon.getToken();

Add Email/Password Auth

async handleSignIn(email: string, password: string) {
  await this.authon.getClient().signInWithEmail(email, password);
}

Handle Sign Out

await this.authon.signOut();

Environment Variables

| Variable | Required | Description | |----------|----------|-------------| | AUTHON_PUBLISHABLE_KEY | Yes | Project publishable key (pk_live_... or pk_test_...) | | AUTHON_API_URL | No | Optional — defaults to api.authon.dev |

API Reference

AuthonService

| Property / Method | Type | |-------------------|------| | user | AuthonUser \| null | | isSignedIn | boolean | | isLoading | boolean | | openSignIn() | Promise<void> | | openSignUp() | Promise<void> | | signOut() | Promise<void> | | getToken() | string \| null | | getClient() | Authon (full @authon/js client) | | onStateChange(cb) | () => void (unsubscribe) | | web3GetNonce(...) | Web3 nonce | | web3Verify(...) | Web3 sign-in | | passwordlessSendCode(...) | Magic link / OTP | | passkeyRegister(...) | Register passkey | | passkeyAuthenticate(...) | Auth with passkey |

Helpers

| Function | Description | |----------|-------------| | provideAuthon(config) | Angular provider factory for standalone apps | | authGuard(service, redirectTo?) | Route guard factory | | renderSocialButtons(options) | Render OAuth buttons into a DOM element |

Comparison

| Feature | Authon | Clerk | Auth.js | |---------|--------|-------|---------| | Pricing | Free | $25/mo+ | Free | | OAuth providers | 10+ | 20+ | 80+ | | Angular support | Native | Community | No | | MFA/Passkeys | Yes | Yes | Plugin | | Web3 auth | Yes | No | No |

License

MIT