trimble-id

Add Trimble Identity Authentication (Angular)

Use this rule when the user asks to add authentication, TID, Trimble Identity, login, or sign-in functionality to their Angular app.

Overview

This adds OAuth 2.0 / OpenID Connect authentication via Trimble Identity using the core @trimble-oss/trimble-id SDK wrapped in Angular-native services, guards, and interceptors. All app routes are protected behind authentication, with automatic redirect to the TID login page for unauthenticated users.

Step 1: Install the SDK

npm install @trimble-oss/trimble-id

Step 2: Add Environment Variables

Update src/environments/environment.development.ts:

export const environment = {
  production: false,
  devPanel: true,
  tid: {
    configurationEndpoint: 'https://stage.id.trimblecloud.com/.well-known/openid-configuration',
    clientId: 'your-client-id-here',
    redirectUrl: 'http://localhost:4200/callback',
    logoutRedirectUrl: 'http://localhost:4200/logout-callback',
    scopes: ['your-app-scope'],
  },
};

Update src/environments/environment.ts:

export const environment = {
  production: true,
  devPanel: false,
  tid: {
    configurationEndpoint: 'https://id.trimble.com/.well-known/openid-configuration',
    clientId: 'your-client-id-here',
    redirectUrl: 'https://your-domain.com/callback',
    logoutRedirectUrl: 'https://your-domain.com/logout-callback',
    scopes: ['your-app-scope'],
  },
};

Step 3: Create the Auth Service

Create src/app/services/auth.service.ts:

import { Injectable, signal, computed } from '@angular/core';
import { TIDClient } from '@trimble-oss/trimble-id';
import { environment } from '../../environments/environment';

export interface TIDUser {
  id?: string;
  name?: string;
  given_name?: string;
  family_name?: string;
  picture?: string;
  email?: string;
  email_verified?: boolean;
  account_id?: string;
}

@Injectable({ providedIn: 'root' })
export class AuthService {
  private readonly client = new TIDClient({
    config: {
      configurationEndpoint: environment.tid.configurationEndpoint,
      clientId: environment.tid.clientId,
      redirectUrl: environment.tid.redirectUrl,
      logoutRedirectUrl: environment.tid.logoutRedirectUrl,
      scopes: environment.tid.scopes,
    },
  });

  private readonly _user = signal<TIDUser | undefined>(undefined);
  private readonly _isLoading = signal(true);
  private readonly _error = signal<Error | undefined>(undefined);

  readonly user = this._user.asReadonly();
  readonly isLoading = this._isLoading.asReadonly();
  readonly error = this._error.asReadonly();
  readonly isAuthenticated = computed(() => this._user() != null);

  async initialize(): Promise<void> {
    try {
      if (this.hasAuthParams()) {
        const { authState } = await this.client.handleCallback();
        const user = await this.client.getUser();
        this._user.set(user as TIDUser | undefined);
        const returnTo = (authState as { returnTo?: string })?.returnTo || '/';
        window.location.replace(returnTo);
      } else {
        await this.client.loadUserSession();
        const user = await this.client.getUser();
        this._user.set(user as TIDUser | undefined);
      }
    } catch (error) {
      this._error.set(error instanceof Error ? error : new Error(String(error)));
    } finally {
      this._isLoading.set(false);
    }
  }

  async loginWithRedirect(): Promise<void> {
    await this.client.loginWithRedirect();
  }

  async logout(): Promise<void> {
    await this.client.logout();
  }

  async getAccessTokenSilently(): Promise<string> {
    const token = await this.client.getAccessTokenSilently();
    const user = await this.client.getUser();
    this._user.set(user as TIDUser | undefined);
    return token;
  }

  private hasAuthParams(): boolean {
    const params = new URLSearchParams(window.location.search);
    const currentUrl = window.location.origin + window.location.pathname;
    const redirectUrl = environment.tid.redirectUrl.split('?')[0];
    return currentUrl === redirectUrl && params.has('code') && params.has('state');
  }
}