Website · Quickstart · Docs · Set up with your AI assistant

The Bridge for Angular

@nebulr-group/bridge-angular adds sign-in, workspaces and roles, feature flags, Stripe subscriptions and plan limits to an Angular 19 app, with providers, route helpers and one stylesheet.

The Bridge is a hosted backend for SaaS apps. It gives you sign-in (passwords, magic links, passkeys, social login and SSO), multi-tenant workspaces with roles, Stripe subscriptions with plan limits, and feature flags, all managed from one dashboard. Your AI coding assistant can set it up for you through the Bridge MCP server.

Let your AI assistant set it up. Connect the Bridge MCP server to Claude, Cursor, Copilot or Gemini CLI and ask it to add Bridge to your app. Not using MCP? Run npx @nebulr-group/bridge-cli guide add-login in your project: it detects your framework from package.json and prints the steps for your assistant to follow. npx @nebulr-group/bridge-cli doctor checks the result.

Install

npm i @nebulr-group/bridge-angular

The whole integration

See the demo app for end-to-end wiring, and How Bridge works for the rules on one page.

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { provideRouter } from '@angular/router';
import { bridgeInterceptor, provideBridge } from '@nebulr-group/bridge-angular';
import { environment } from '../environments/environment';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(withInterceptors([bridgeInterceptor])), // your API calls carry the token; a plan-limit 402 opens the upgrade dialog
    provideBridge({ appId: environment.bridgeAppId, loginRoute: '/auth/login' }),
  ],
};

app.routes.ts

import { Routes } from '@angular/router';
import { bridgeAuthGuard, bridgeAuthRoutes, bridgeBillingRoutes } from '@nebulr-group/bridge-angular';

export const routes: Routes = [
  ...bridgeAuthRoutes(),               // login, signup, OAuth callback, set password, magic link, passkey setup, workspaces
  {
    path: '',
    canActivateChild: [bridgeAuthGuard()],
    children: [
      ...bridgeBillingRoutes(),        // /subscription, the paywall /subscription/plan, checkout returns
      { path: '', component: HomeComponent },
    ],
  },
];

styles.css

@import '@nebulr-group/bridge-angular/styles.css';

Configuration is code (Angular has no env-var convention): each option resolves as explicit option > default, an empty string is unset, a missing appId throws naming it, and hostedUrl follows apiBaseUrl on Bridge's domains.

Plan limits, lowest level first: level 0 needs nothing (the upgrade dialog opens on a 402 from your backend); level 1 is <bridge-quota-gate metric="…"> / [bridgeQuotaGate] and <bridge-feature-flag key="…" [upgrade]="true">; level 2 is injectQuota(metric) / injectEntitlements().

Working on this repository

The library lives in bridge-angular/, a demo app in demo/ and the guides in learning/.

Build

npm run build

Artifacts are emitted to dist/ via ng-packagr.

Release (branch-protected main)

# 1) Create release branch
git checkout -b release/v0.1.0
git push -u origin release/v0.1.0

# 2) Open a PR: release/v0.1.0 -> main, approve and merge

# 3) After merge to main, tag and push
git checkout main && git pull
git tag v0.1.0
git push origin v0.1.0

# 4) Monitor GitHub Actions "Publish to npm"

Learn more

• Quickstart
• Authentication
• Sign-in inside your app
• Feature flags
• Branding
• Live updates
• Subscriptions and plan limits

Other Bridge packages

Package	For
@nebulr-group/bridge-svelte	SvelteKit
@nebulr-group/bridge-react	React
@nebulr-group/bridge-nextjs	Next.js
@nebulr-group/bridge-nestjs	NestJS
@nebulr-group/bridge-express	Express
@nebulr-group/bridge-cli	CLI for people and AI agents
@nebulr-group/bridge-auth-core	Any JavaScript app (core)

License

MIT © Nebulr. Built by The Bridge.