@memberjunction/ng-bootstrap

MemberJunction Angular Bootstrap — encapsulates all Angular authentication and initialization logic into a single reusable module. Reduces an entire MJExplorer application module to approximately 15 lines of code.

Installation

npm install @memberjunction/ng-bootstrap

Overview

In MemberJunction 3.0+, Angular applications become minimal configuration files that delegate authentication, GraphQL setup, metadata loading, and user validation to this bootstrap package. The MJBootstrapModule configures all necessary providers via forRoot(), while MJBootstrapComponent serves as the root component handling the full application lifecycle from login through to the authenticated shell.

flowchart TD
    subgraph Bootstrap["MJBootstrapModule.forRoot(env)"]
        A["MJEnvironmentConfig"]
        A --> B["Auth Provider (MSAL / Auth0)"]
        A --> C["GraphQL Client + WebSocket"]
        A --> D["MJ_ENVIRONMENT Token"]
    end
    subgraph Lifecycle["MJBootstrapComponent"]
        E["Login Screen"] --> F["Authentication"]
        F --> G["Token Management"]
        G --> H["Metadata Loading"]
        H --> I["User Validation"]
        I --> J["Startup Validation"]
        J --> K["Authenticated Shell"]
    end
    subgraph States["Application States"]
        L["Not Authenticated"]
        M["Authenticated"]
        N["Error State"]
        O["Validation Banner"]
    end

    Bootstrap --> Lifecycle
    Lifecycle --> States

    style Bootstrap fill:#2d6a9f,stroke:#1a4971,color:#fff
    style Lifecycle fill:#7c5295,stroke:#563a6b,color:#fff
    style States fill:#2d8659,stroke:#1a5c3a,color:#fff

Usage

Minimal Application Module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MJBootstrapModule, MJBootstrapComponent } from '@memberjunction/ng-bootstrap';
import { MJExplorerModule } from '@memberjunction/ng-explorer-core';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MJBootstrapModule.forRoot(environment),
    MJExplorerModule
  ],
  bootstrap: [MJBootstrapComponent]
})
export class AppModule {}

Environment Configuration

import { MJEnvironmentConfig } from '@memberjunction/ng-bootstrap';

export const environment: MJEnvironmentConfig = {
  production: false,
  GRAPHQL_URI: 'http://localhost:4000/graphql',
  GRAPHQL_WS_URI: 'ws://localhost:4000/graphql',
  AUTH_TYPE: 'msal',
  MJ_CORE_SCHEMA_NAME: '__mj',

  // MSAL configuration
  CLIENT_ID: 'your-client-id',
  TENANT_ID: 'your-tenant-id'

  // OR Auth0 configuration
  // AUTH0_DOMAIN: 'yourapp.us.auth0.com',
  // AUTH0_CLIENTID: 'your-auth0-client-id'
};

What It Handles

Concern	Description
Authentication	MSAL or Auth0 login/logout with token management
GraphQL setup	Client configuration with WebSocket subscriptions
Token refresh	Automatic token refresh before expiration
Metadata loading	MemberJunction entity metadata and definitions
User validation	Access and permission checks
Startup validation	System health checks on initialization
Error handling	Appropriate error messages for auth failures
Navigation	Initial routing after successful login

API Reference

MJBootstrapModule.forRoot(environment)

Configures the bootstrap module with environment settings.

Parameters:

• environment: MJEnvironmentConfig — Application configuration

Returns: ModuleWithProviders<MJBootstrapModule>

MJEnvironmentConfig

interface MJEnvironmentConfig {
  production: boolean;
  GRAPHQL_URI: string;
  GRAPHQL_WS_URI: string;
  AUTH_TYPE: 'msal' | 'auth0';
  MJ_CORE_SCHEMA_NAME: string;

  // MSAL-specific
  CLIENT_ID?: string;
  TENANT_ID?: string;

  // Auth0-specific
  AUTH0_DOMAIN?: string;
  AUTH0_CLIENTID?: string;
}

Injection Tokens

• MJ_ENVIRONMENT — Provides the MJEnvironmentConfig throughout the application

MJStartupValidationService

An optional interface for implementing custom startup validation:

interface MJStartupValidationService {
  Validate(): Promise<ValidationResult>;
}

Migration from MJ 2.x

MemberJunction 2.x required ~350 lines of custom code in app.component.ts and app.module.ts for authentication and initialization. With 3.0+, this entire surface area is encapsulated in the bootstrap package:

Before (2.x)	After (3.0+)
~245 lines in app.component.ts	Removed entirely
~107 lines in app.module.ts	~15 lines
Custom auth logic	MJBootstrapModule.forRoot(env)
Manual GraphQL setup	Automatic
Custom error handling	Built-in

Dependencies

• @memberjunction/core — Core framework
• @memberjunction/graphql-dataprovider — GraphQL client
• @memberjunction/ng-auth-services — Authentication services
• @memberjunction/ng-explorer-core — Explorer shell
• @memberjunction/ng-shared — Shared utilities