NgModule Setup

Set up @nauth-toolkit/client-angular in a traditional Angular application using NgModule.

Sample Application

A complete working example is available at github.com/noorixorg/nauth/tree/main/angular — includes both standalone and NgModule patterns paired with the NestJS backend example.

Installation

npm

npm install @nauth-toolkit/client @nauth-toolkit/client-angular

Yarn

yarn add @nauth-toolkit/client @nauth-toolkit/client-angular

pnpm

pnpm add @nauth-toolkit/client @nauth-toolkit/client-angular

Bun

bun add @nauth-toolkit/client @nauth-toolkit/client-angular

Register NAuthModule

Import NAuthModule.forRoot() in your root module:

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { NAuthModule, AuthInterceptorClass } from '@nauth-toolkit/client-angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NAuthModule.forRoot({
      baseUrl: environment.baseUrl,
      authPathPrefix: 'auth',
      tokenDelivery: 'cookies',
      csrf: {
        cookieName: 'nauth_csrf_token',
        headerName: 'x-csrf-token',
      },
      redirects: {
        loginSuccess: '/dashboard',
        signupSuccess: null,
        sessionExpired: '/auth',
        oauthError: '/auth',
        challengeBase: '/auth/challenge',
      },
    }),
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptorClass,
      multi: true,
    },
    provideHttpClient(withInterceptorsFromDi()),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Route Protection

Use the class-based AuthGuard:

src/app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from '@nauth-toolkit/client-angular';

const routes: Routes = [
  { path: 'auth', loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule) },
  {
    path: 'dashboard',
    loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule),
    canActivate: [AuthGuard],
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [AuthGuard],
})
export class AppRoutingModule {}

Custom Auth Guard

For additional logic (e.g., fetching user profile after authentication):

src/app/core/guards/auth.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { AuthService } from '@nauth-toolkit/client-angular';

@Injectable({ providedIn: 'root' })
export class AppAuthGuard implements CanActivate {
  constructor(
    private authService: AuthService,
    private router: Router,
  ) {}

  async canActivate(
    _route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot,
  ): Promise<boolean> {
    if (this.authService.isAuthenticated()) {
      return true;
    }

    this.router.navigate(['/auth'], {
      queryParams: { returnUrl: state.url },
    });
    return false;
  }
}

Dual-Mode Setup (Web + Mobile)

For apps that run on both web and Capacitor native, detect the platform at startup:

src/app/app.module.ts

import { Capacitor } from '@capacitor/core';
import { NAuthModule, AuthInterceptorClass } from '@nauth-toolkit/client-angular';
import { AuthStorage } from './core/services/auth-storage';
import { environment } from '../environments/environment';

const isMobile = Capacitor.isNativePlatform();

@NgModule({
  imports: [
    NAuthModule.forRoot({
      baseUrl: environment.baseUrl,
      authPathPrefix: 'auth',
      tokenDelivery: isMobile ? 'json' : 'cookies',
      csrf: isMobile ? undefined : {
        cookieName: 'nauth_csrf_token',
        headerName: 'x-csrf-token',
      },
      storage: isMobile ? new AuthStorage() : undefined,
      endpoints: isMobile ? {
        login: '/mobile/login',
        signup: '/mobile/signup',
        logout: '/mobile/logout',
        refresh: '/mobile/refresh',
        respondChallenge: '/mobile/challenge',
        socialRedirectStart: '/mobile/social/:provider/redirect',
      } : undefined,
      redirects: {
        loginSuccess: null,
        signupSuccess: null,
        sessionExpired: '/auth',
        oauthError: '/auth',
        challengeBase: '/auth/challenge',
      },
    }),
  ],
  // ...
})
export class AppModule {}

See Capacitor Setup for the AuthStorage implementation and full mobile configuration.

Package Exports

Export	Description
NAUTH_CLIENT_CONFIG	Injection token for configuration
NAuthModule	NgModule with forRoot()
AuthService	Main service wrapping NAuthClient
AngularHttpAdapter	HTTP client adapter
AuthInterceptorClass	Class-based HTTP interceptor
AuthGuard	Class-based route guard

Related Documentation

• AuthService API - Full service reference
• Guards - Route guard configuration
• HTTP Interceptor - Interceptor behavior
• Standalone Setup - Modern standalone approach
• Capacitor Setup - Mobile native app setup