Angular Django REST Auth Interface

Common errors

• Error: Uncaught (in promise): Error: StaticInjectorError[AuthService]: StaticInjectorError[AuthService]: NullInjectorError: No provider for AuthService!

  cause The AuthModule was not properly imported or initialized, specifically `forRoot()` was not called.
  fix Ensure `AuthModule.forRoot()` is included in the `imports` array of your root Angular module (e.g., `AppModule`).

• Module not found: Error: Can't resolve '@angular/common/http'

  cause This package was developed for Angular 5.x, which uses `HttpClientModule` (from `@angular/common/http`) for HTTP requests. Later Angular versions might have subtle changes or require different setup, or you might be missing this specific import.
  fix Ensure `@angular/common/http` is imported as `HttpClientModule` in your `AppModule` and listed in its `imports` array, alongside `BrowserModule`.

• ERROR in node_modules/tdn-auth/tdn-auth.d.ts(XX,XX): error TS2307: Cannot find module '@angular/core' or its corresponding type declarations.

  cause Incompatibility with newer TypeScript versions or mismatched Angular peer dependencies.
  fix This package is not compatible with modern Angular versions (6+) or their corresponding TypeScript versions. Revert to Angular 5.x and a compatible TypeScript version (e.g., TypeScript 2.5-2.7) or migrate to a different authentication library.

Warnings

• breaking This package is effectively abandoned and built for Angular 5.x. It will not work with Angular 6+ due to breaking changes in the Angular framework, particularly in RxJS and the Angular CLI's build process, without significant manual intervention and polyfills.
  Fix: For new projects or existing projects on Angular 6+, consider migrating to a actively maintained Angular authentication library or a custom solution. If locked into Angular 5.x, ensure all peer dependencies exactly match the versions specified.
• gotcha The README contains a conflicting import path for `AuthModule` (`angular-auth/auth.module`) versus `AuthConfig` (`tdn-auth/auth.config`). Based on the package name `tdn-auth`, the correct import for `AuthModule` is likely directly from 'tdn-auth'.
  Fix: Always use `import { AuthModule } from 'tdn-auth';` and `import { AuthConfig } from 'tdn-auth/auth.config';`. Test thoroughly if an alternative path is attempted.
• breaking The package has not been updated in approximately 7 years, meaning it likely contains security vulnerabilities due to unpatched dependencies or outdated authentication practices. Using it in production is highly risky.
  Fix: Audit all transitive dependencies for known CVEs. Strongly consider implementing a modern, actively maintained authentication solution. Do not use this package for new deployments.
• gotcha Initialization of `AuthModule` requires `AuthModule.forRoot()` to provide configuration. Simply importing `AuthModule` without calling `forRoot()` will result in missing providers and runtime errors.
  Fix: Ensure `AuthModule.forRoot()` is called within your `imports` array in the root `AppModule`, passing `CustomAuthConfig` if needed.

Install

• npm install tdn-auth npm
• yarn add tdn-auth yarn
• pnpm add tdn-auth pnpm

Imports

• AuthModule
  wrong:

  import { AuthModule } from 'angular-auth/auth.module';

  correct:

  import { AuthModule } from 'tdn-auth';

  The README contains a discrepancy; assume 'tdn-auth' is the correct package name. Always use `AuthModule.forRoot()` to initialize.
• AuthConfig
  wrong:

  import { AuthConfig } from 'tdn-auth';

  correct:

  import { AuthConfig } from 'tdn-auth/auth.config';

  This is a deep import for configuration customization. Do not try to import directly from 'tdn-auth'.
• CustomAuthConfig
  wrong:

  const CustomAuthConfig = require('tdn-auth/auth.config').AuthConfig; // Incorrect for Angular/TypeScript

  correct:

  import { Injectable } from '@angular/core';
  import { AuthConfig } from 'tdn-auth/auth.config';
  
  @Injectable()
  export class CustomAuthConfig extends AuthConfig {
      constructor() {
          super();
          // Customize properties like base_url
          this.base_url = 'https://your.api.com/auth/';
      }
  }

  Custom configuration requires extending `AuthConfig` and applying the `@Injectable()` decorator. This is a class, not a direct export.

Quickstart

This quickstart demonstrates how to import and initialize the `AuthModule` in an Angular application, including how to provide a custom configuration by extending `AuthConfig` to set the base URL for the Django REST Auth API.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AuthModule } from 'tdn-auth';
import { Injectable } from '@angular/core';
import { AuthConfig } from 'tdn-auth/auth.config';

// Assuming you have an Angular environment file for configuration
const environment = {
  production: false,
  api_base_url: 'https://your-django-rest-auth-api.com/' // Replace with your Django REST Auth API base URL
};

@Injectable()
export class CustomAuthConfig extends AuthConfig {
    constructor() {
        super();
        this.base_url = environment.api_base_url;
        // Further customization, e.g., token names, endpoints
        // this.login_url = 'auth/jwt/create/';
        // this.token_name = 'access_token';
    }
}

@NgModule({
  imports: [
    BrowserModule,
    // ... other Angular modules like HttpClientModule for API calls
    AuthModule.forRoot(CustomAuthConfig) // Use AuthModule with your custom configuration
  ],
  providers: [],
  bootstrap: []
})
export class AppModule { }