by XentraNET
Quickstarts / Single Page App / Angular

Angular Quickstart

Use X-Auth as a standard Angular service. Inject it where you need it; call advice() from a click handler; ship the bearer to your backend.

SDK: @xentranet/x-auth-angular Version: 1.x · Angular 17+ Time: ~5 min
1

Install the SDK

The Angular SDK ships an injectable XAuth service plus a provideXAuth() helper for standalone-API apps.

terminal
npm install @xentranet/x-auth-angular
2

Provide XAuth at the app root

Register the SDK with your tenant id in app.config.ts alongside the rest of your providers.

src/app/app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { provideXAuth } from '@xentranet/x-auth-angular';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideXAuth({ tenantId: 'your-app' }),
  ],
};
3

Inject XAuth and call advice()

From any component, inject the service and bind a sensitive action. The SDK transparently runs OIDC step-up if your risk policy demands it.

src/app/transfer.component.ts
import { Component, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { XAuth } from '@xentranet/x-auth-angular';

@Component({
  selector: 'app-transfer',
  template: `<button (click)="transfer()">Transfer</button>`,
  standalone: true,
})
export class TransferComponent {
  private xauth = inject(XAuth);
  private http  = inject(HttpClient);

  async transfer() {
    const { decision, access_token } = await this.xauth.advice({
      action: 'transfer', amount: 2999, currency: 'USD',
    });
    if (decision !== 'ALLOW') return;

    this.http.post('/api/transfer', { amount: 2999 }, {
      headers: { Authorization: `Bearer ${access_token}` },
    }).subscribe();
  }
}
4

Verify on your backend

The bearer your Angular app sends is transaction-bound. Your API verifies it matches the requested action — or rejects with 401.

api/transfer.ts (Node example)
const { transaction_ctx } = await xauth.verify(bearer, {
  expect: { action: 'transfer', amount: req.body.amount },
});

await ledger.transfer(transaction_ctx);

Pair with a backend quickstart: Express, Go, Spring Boot, ASP.NET.

Next steps

Add an HTTP interceptor that auto-binds advice() before sensitive routes — coming in v1.1.