AngularJS HTTP Auth Interceptor

Common errors

• Error: [$injector:modulerr] Failed to instantiate module http-auth-interceptor due to: Error: [$injector:nomod] Module 'http-auth-interceptor' is not available!

  cause The `http-auth-interceptor` module script was not loaded or `angular.module()` was called before the module was defined.
  fix Ensure the `angular-http-auth.js` (or `.min.js`) script is included in your HTML *after* `angular.js` and *before* your main application script. Verify the module name is correctly spelled in `angular.module('myApp', ['http-auth-interceptor'])`.

• ReferenceError: authService is not defined

  cause The `authService` was attempted to be used without being properly injected into an Angular component (controller, service, etc.).
  fix Ensure `authService` is listed as a dependency in the function signature where it's being used, e.g., `app.controller('MyCtrl', function($scope, authService) { ... })`.

• HTTP 401 responses are not triggering login dialogs / are not being intercepted.

  cause The module might not be correctly integrated into the AngularJS application, or a request has `ignoreAuthModule: true` set.
  fix Verify that `http-auth-interceptor` is included in your main Angular module's dependencies: `angular.module('myApp', ['http-auth-interceptor'])`. Also, check the `$http` config for the specific request to ensure `ignoreAuthModule: true` is not inadvertently present.

Warnings

• breaking This package is designed for AngularJS 1.x, which reached End-of-Life (EOL) on December 31, 2021. Using it in new projects or maintaining it in existing projects carries significant security and maintenance risks due to the EOL status of its core dependency.
  Fix: Migrate to a modern framework (e.g., Angular 2+, React, Vue) and use a contemporary authentication solution. If migration is not feasible, understand and mitigate the risks associated with using EOL software.
• gotcha CommonJS loading (e.g., `require('angular-http-auth')`) was added in v1.5.0 but primarily ensures the Angular module is registered. Services like `authService` are still exposed via Angular's dependency injection and cannot be directly imported as ES Modules or CommonJS exports.
  Fix: Ensure you are using v1.5.0 or later for CommonJS support. Always inject `authService` using Angular's DI, e.g., `function($scope, authService) { ... }`, rather than attempting direct import.
• gotcha To bypass the 401/403 interceptor for specific `$http` requests (e.g., a login API call that itself returns 401 for invalid credentials), you must add `ignoreAuthModule: true` to the request's config object.
  Fix: When making an HTTP request that should not trigger the authentication interceptor, add `{ ignoreAuthModule: true }` as the config object, e.g., `$http.post('/login', credentials, { ignoreAuthModule: true })`.
• gotcha The `event:auth-forbidden` message (for HTTP 403 responses) was introduced in v1.2.2. Prior versions only handled HTTP 401 responses. Code relying on 403 handling will fail silently on older versions.
  Fix: Ensure `angular-http-auth` is at least version 1.2.2 if your application needs to specifically handle 403 responses. Upgrade to the latest available version (1.5.0) for full functionality.

Install

• npm install angular-http-auth npm
• yarn add angular-http-auth yarn
• pnpm add angular-http-auth pnpm

Imports

• http-auth-interceptor
  wrong:

  import { httpAuthInterceptor } from 'angular-http-auth'

  correct:

  angular.module('myApp', ['http-auth-interceptor'])

  This is the name of the AngularJS module to be included in your application's dependencies, not a direct JavaScript import.
• authService
  wrong:

  import { authService } from 'angular-http-auth'

  correct:

  function MyController($scope, authService) { /* ... */ }

  The `authService` is provided via AngularJS's dependency injection system, not as a direct ES Module or CommonJS export for consumer-side import. It should be injected into controllers, services, or directives.
• angular-http-auth
  wrong:

  import 'angular-http-auth';

  correct:

  require('angular-http-auth');

  For CommonJS environments (supported since v1.5.0), the package can be loaded via `require`. This makes the Angular module available but doesn't export any symbols directly to the requiring file. Direct ESM imports are not supported.

Quickstart

This quickstart demonstrates setting up a basic Express backend that requires authentication and an AngularJS application that utilizes `angular-http-auth` to intercept 401 responses, trigger a simulated login process, and re-attempt the failed request.

const express = require('express');
const app = express();
const port = 3000;

app.get('/api/protected-data', (req, res) => {
  const token = req.headers.authorization;
  if (!token || token !== 'Bearer my-valid-token') {
    return res.status(401).send('Unauthorized');
  }
  res.json({ message: 'This is protected data!' });
});

app.listen(port, () => console.log(`Backend listening on port ${port}`));


// --- In your AngularJS app (e.g., app.js) ---

// Make sure to include angular.js before angular-http-auth.js
// E.g., <script src="node_modules/angular/angular.js"></script>
//       <script src="node_modules/angular-http-auth/dist/angular-http-auth.js"></script>

angular.module('myApp', ['http-auth-interceptor'])
  .config(function($httpProvider) {
    // $httpProvider.interceptors.push('authInterceptor'); // Not needed, http-auth-interceptor registers itself
  })
  .run(function($rootScope, $log, authService, $http) {
    $rootScope.username = '';
    $rootScope.password = '';
    $rootScope.isAuthenticated = false;

    $rootScope.$on('event:auth-loginRequired', function() {
      $log.warn('Authentication required! Showing login dialog...');
      // In a real app, you'd show a modal or redirect to a login page
      $rootScope.showLoginDialog = true;
    });

    $rootScope.$on('event:auth-loginConfirmed', function(event, data) {
      $log.info('Login confirmed!', data);
      $rootScope.isAuthenticated = true;
      $rootScope.showLoginDialog = false;
    });

    $rootScope.$on('event:auth-loginCancelled', function(event, data) {
      $log.info('Login cancelled!', data);
      $rootScope.isAuthenticated = false;
      $rootScope.showLoginDialog = false;
    });

    $rootScope.login = function() {
      // Simulate login request
      $log.info(`Attempting login for ${$rootScope.username}`);
      if ($rootScope.username === 'user' && $rootScope.password === 'pass') {
        // Assuming a successful login would return a token or confirm success
        // In a real app, this would be an actual $http call to your auth endpoint
        $log.info('Simulated login successful. Confirming authService...');
        authService.loginConfirmed({ token: 'my-valid-token', user: $rootScope.username });
      } else {
        $log.error('Invalid credentials.');
        authService.loginCancelled(); // Clear buffered requests
      }
    };

    $rootScope.logout = function() {
      $log.info('Logging out...');
      authService.loginCancelled();
      $rootScope.username = '';
      $rootScope.password = '';
    };

    // Example protected API call
    $rootScope.fetchProtectedData = function() {
      $http.get('/api/protected-data', {
        headers: { 'Authorization': `Bearer ${$rootScope.isAuthenticated ? 'my-valid-token' : ''}` }
      })
      .then(function(response) {
        $log.info('Protected data:', response.data);
      })
      .catch(function(error) {
        if (error.status === 401) {
          $log.error('Failed to fetch protected data: Unauthorized. Interceptor should handle this.');
        } else {
          $log.error('Error fetching protected data:', error);
        }
      });
    };

    // Call it initially to demonstrate behavior
    $rootScope.fetchProtectedData();
  });