Authress Angular

This package provides an Angular module for easy setup and registration of the Authress LoginClient. It simplifies the integration of Authress authentication into Angular applications.

For details about the Authress Login SDK, see https://authress.io.

Install

npm install @mikepattyn/authress-angular

Setup in AppModule

Import the AuthressModule in your root AppModule using the forRoot() method:

import { NgModule } from '@angular/core';
import { AuthressModule } from '@mikepattyn/authress-angular';
import { Settings } from '@authress/login';

@NgModule({
  declarations: [AppComponent],
  imports: [
    // Other imports
    AuthressModule.forRoot({
      authressApiUrl: environment.authressLoginUrl,
      applicationId: environment.authressAppId,
    }),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Configuration

The forRoot() method accepts a Settings object with the following properties:

• authressApiUrl: The URL of your Authress instance
• applicationId: Your Authress application ID

Dependency Injection

The module provides the LoginClient in two ways:

1. Custom Injection Token: Use LOGIN_CLIENT for explicit dependency injection
2. Direct Class Injection: Use LoginClient directly for backward compatibility

Using the Custom Injection Token

import { Component, Inject } from '@angular/core';
import { LoginClient, LOGIN_CLIENT } from '@mikepattyn/authress-angular';

@Component({
  selector: 'app-auth',
  template: '<button (click)="login()">Login</button>'
})
export class AuthComponent {
  constructor(@Inject(LOGIN_CLIENT) private loginClient: LoginClient) {}

  async login() {
    await this.loginClient.authenticate();
  }
}

Using Direct Class Injection

import { Component } from '@angular/core';
import { LoginClient } from '@mikepattyn/authress-angular';

@Component({
  selector: 'app-auth',
  template: '<button (click)="login()">Login</button>'
})
export class AuthComponent {
  constructor(private loginClient: LoginClient) {}

  async login() {
    await this.loginClient.authenticate();
  }
}

Available Exports

The package exports all types and classes from @authress/login as well as the AuthressModule:

// Module
export { AuthressModule } from '@mikepattyn/authress-angular';

// LoginClient and related types
export { LoginClient, Settings, UserIdentity } from '@mikepattyn/authress-angular';

// Custom injection token
export { LOGIN_CLIENT } from '@mikepattyn/authress-angular';