Angular SDK (@authme/angular)

npm install @authme/angular

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideAuthme } from '@authme/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAuthme({
      serverUrl: 'https://auth.example.com',
      realm: 'my-realm',
      clientId: 'my-angular-app',
      redirectUri: window.location.origin + '/callback',
      refreshStrategy: 'rotation',
    }),
  ],
};

import { Component, inject } from '@angular/core';
import { AuthService } from '@authme/angular';

@Component({
  selector: 'app-header',
  template: `
    @if (auth.isAuthenticated()) {
      <span>Welcome, {{ auth.user()?.name }}</span>
      <button (click)="auth.logout()">Logout</button>
    } @else {
      <button (click)="auth.login()">Sign In</button>
    }
  `,
})
export class HeaderComponent {
  auth = inject(AuthService);
}

import { Routes } from '@angular/router';
import { authGuard } from '@authme/angular';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [authGuard],
  },
  {
    path: 'admin',
    component: AdminComponent,
    canActivate: [authGuard],
    data: { roles: ['admin'] }, // Role-based guard
  },
];

// app.config.ts
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { authInterceptor } from '@authme/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAuthme({ /* ... */ }),
    provideHttpClient(
      withInterceptors([authInterceptor])
    ),
  ],
};

// API calls automatically include Authorization header
@Injectable()
export class ApiService {
  private http = inject(HttpClient);

  getProfile() {
    // Bearer token attached automatically
    return this.http.get('/api/profile');
  }
}

import { AuthService } from '@authme/angular';

@Component({ /* ... */ })
export class ProfileComponent {
  auth = inject(AuthService);

  get user() { return this.auth.user(); }
  get isAdmin() { return this.auth.hasRole('admin'); }
  get token() { return this.auth.accessToken(); }
}

// callback.component.ts
import { Component, OnInit, inject } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '@authme/angular';

@Component({
  selector: 'app-callback',
  template: '<p>Signing in...</p>',
})
export class CallbackComponent implements OnInit {
  private auth = inject(AuthService);
  private router = inject(Router);

  async ngOnInit() {
    await this.auth.handleCallback();
    this.router.navigate(['/dashboard']);
  }
}