> ## Content Index
> Fetch the complete content index at: https://blog.fabrixly.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# How to Integrate Fabrixly-IDS with Angular and Node.js
- URL: https://blog.fabrixly.com/how-to-integrate-with-angular-nodejs/
- Published: 2026-07-07T14:10:40.000Z
- Updated: 2026-07-07T14:10:40.000Z
- Author: Fabrixly
- Tags: Documentation

This guide explains how to secure an **Angular** frontend application and a **Node.js / Express** backend using Fabrixly-IDS OIDC authentication.

---

## 🏗️ Architecture Overview

1. **Frontend (Angular)**: Uses the industry-standard `angular-oauth2-oidc` package to trigger PKCE redirects and store tokens in sessionStorage.
2. **Identity Server (Fabrixly-IDS)**: Standard OIDC authentication portal.
3. **Backend (Node.js)**: Validates incoming tokens using JSON Web Key Sets (JWKS).

---

## Part A: Frontend Setup (Angular)

### 1\. Install Dependencies

```bash
npm install angular-oauth2-oidc --save

```

### 2\. Configure Angular OAuth Module

Configure the authentication provider in your `src/app/auth.config.ts` configuration file:

```typescript
import { AuthConfig } from 'angular-oauth2-oidc';

export const authCodeFlowConfig: AuthConfig = {
  issuer: 'https://ids.fabrixly.com/oidc',
  redirectUri: window.location.origin + '/index.html',
  clientId: 'your-angular-client-id', // Registered in Admin Console
  responseType: 'code',
  scope: 'openid profile email offline_access',
  showDebugInformation: true, // Set to false in production
  useSilentRefresh: true,
};

```

Import and configure the module in `src/app/app.config.ts`:

```typescript
import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { OAuthModule } from 'angular-oauth2-oidc';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    importProvidersFrom(
      HttpClientModule,
      OAuthModule.forRoot({
        resourceServer: {
          allowedUrls: ['http://localhost:3000/api'], // Automatically attaches access token
          sendAccessToken: true
        }
      })
    )
  ]
};

```

### 3\. Implement Auth Logic in Component

Create `src/app/app.component.ts`:

```typescript
import { Component } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';
import { authCodeFlowConfig } from './auth.config';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  template: `
    <div style="padding: 40px;">
      <h1>Angular + Fabrixly-IDS 🛡️</h1>
      
      <div *ngIf="!isAuthenticated()">
        <button (click)="login()">Sign In with Fabrixly</button>
      </div>

      <div *ngIf="isAuthenticated()">
        <p>Welcome, {{ getGivenName() }}!</p>
        <button (click)="logout()">Log Out</button>
        <hr />
        <button (click)="callBackend()">Call Protected API</button>
        <p *ngIf="backendResponse">Response: <strong>{{ backendResponse }}</strong></p>
      </div>
    </div>
  `
})
export class AppComponent {
  backendResponse = '';

  constructor(private oauthService: OAuthService, private http: HttpClient) {
    this.oauthService.configure(authCodeFlowConfig);
    this.oauthService.loadDiscoveryDocumentAndTryLogin();
  }

  login() {
    this.oauthService.initLoginFlow();
  }

  logout() {
    this.oauthService.logOut();
  }

  isAuthenticated(): boolean {
    return this.oauthService.hasValidAccessToken();
  }

  getGivenName(): string {
    const claims: any = this.oauthService.getIdentityClaims();
    return claims ? claims.name : 'User';
  }

  callBackend() {
    this.http.get<any>('http://localhost:3000/api/protected').subscribe({
      next: (res) => this.backendResponse = res.message,
      error: (err) => this.backendResponse = 'Failed to load protected resource'
    });
  }
}

```

---

## Part B: Backend Setup (Node.js + Express)

The backend authenticates incoming REST requests by parsing and checking the cryptographic signatures of JWT tokens issued by Fabrixly-IDS.

### 1\. Install Dependencies

```bash
npm install express cors jsonwebtoken jwks-rsa

```

### 2\. Implement JWT Validation Middleware

Create `server.js`:

```javascript
const express = require('express');
const cors = require('cors');
const jwt = require('jsonwebtoken');
const jwksClient = require('jwks-rsa');

const app = express();
app.use(cors());
app.use(express.json());

const IDS_ISSUER = "https://ids.fabrixly.com/oidc";

const client = jwksClient({
  jwksUri: `${IDS_ISSUER}/jwks`,
  cache: true,
  rateLimit: true
});

function getKey(header, callback) {
  client.getSigningKey(header.kid, (err, key) => {
    if (err) return callback(err);
    const signingKey = key.getPublicKey();
    callback(null, signingKey);
  });
}

const requireAuth = (req, res, next) => {
  const authHeader = req.headers.authorization;
  if (!authHeader || !authHeader.startsWith("Bearer ")) {
    return res.status(401).json({ error: "Missing authorization token" });
  }

  const token = authHeader.split(" ")[1];

  jwt.verify(token, getKey, {
    issuer: IDS_ISSUER,
    algorithms: ["RS256"]
  }, (err, decoded) => {
    if (err) {
      return res.status(403).json({ error: "Token validation failed: " + err.message });
    }
    req.user = decoded;
    next();
  });
};

app.get("/api/protected", requireAuth, (req, res) => {
  res.json({
    message: `Greetings from Node.js! Your user ID is ${req.user.sub}.`
  });
});

app.listen(3000, () => console.log("Backend running on http://localhost:3000"));

```

---

## Part C: Registering the Client in Admin Console

1. Open your **Fabrixly-IDS Admin Console** \-> navigate to **Clients**.
2. Click **Create Client**:
  - **Client Name**: `Angular SPA`
  - **Grant Types**: `authorization_code`, `refresh_token`
  - **Response Types**: `code`
  - **Redirect URIs**: `http://localhost:4200/index.html` (Angular local dev environment)
  - **Token Endpoint Auth Method**: `none` (required for SPA clients)
3. Save the changes. You are ready to run and test!