Sanji Auth UI

1.4.0 · abandoned · verified Wed Apr 22

Sanji Auth UI is a core component of the Sanji UI framework, specifically designed for seamless integration within AngularJS 1.x applications. It provides robust authentication and authorization services, leveraging JSON Web Tokens (JWT) for secure user identification and session management. The package includes an `auth` service for handling login requests and a `session` service for storing and retrieving authenticated user data. Its current stable version is `1.4.0`, released in September 2018, indicating an infrequent and likely discontinued release cadence. A key differentiator is its tight coupling with the AngularJS 1.x ecosystem (specifically versions 1.5.0 to 1.6.x), making it unsuitable for modern Angular or other contemporary frontend frameworks. It also relies on specific versions of `angular-http-auth`, `angular-storage`, and `sanji-rest-ui` as peer dependencies.

Common errors

```
Module 'webapp' is not available! You either misspelled the module name or forgot to load it. If this error occurs while loading a route, ensure that you have configured the route correctly.
```
cause The 'sanji.auth' module was not correctly registered or included as a dependency in your main AngularJS application module.

fix Ensure `'sanji.auth'` is explicitly listed in your `angular.module()` dependencies: `angular.module('yourApp', ['sanji.auth'])`.
```
Error: [$injector:unpr] Unknown provider: authProvider <- auth
```
cause The `auth` service was requested via dependency injection, but the `sanji.auth` module was either not loaded or its services were not correctly initialized.

fix Verify that the `sanji-auth-ui` script is loaded *before* your AngularJS application code in your HTML, and that `sanji.auth` is correctly added as a dependency to your AngularJS application module.
```
Uncaught TypeError: angular.module is not a function
```
cause The AngularJS library (`angular.js`) itself is not loaded or is loaded incorrectly, before any dependent modules or application code.

fix Ensure `angular.js` (or `angular.min.js`) is loaded as the very first script in your HTML `<head>` or `<body>` before `sanji-auth-ui` or any other AngularJS-related scripts.

Warnings

breaking This package is specifically built for AngularJS 1.x (versions 1.5.0 to 1.6.x) and is incompatible with newer versions of Angular (Angular 2+) or other frontend frameworks. Attempting to use it outside its intended environment will lead to runtime errors.
Fix: For modern applications, use a dedicated authentication solution designed for your current frontend framework (e.g., Auth0, Firebase Auth, or a custom JWT implementation for Angular/React/Vue).
gotcha The project appears to be abandoned, with its last release (v1.4.0) in September 2018. This means no further bug fixes, security updates, or feature enhancements are expected, making it a potential security risk for production applications.
Fix: Strongly consider migrating to an actively maintained authentication library to ensure ongoing security, compatibility, and support.
gotcha The package relies heavily on several specific peer dependencies (angular, angular-http-auth, angular-storage, sanji-rest-ui). Mismatched versions of these dependencies can lead to runtime errors or unexpected behavior due to API changes or incompatibilities.
Fix: Ensure all peer dependencies are installed and match the specified version ranges. If using newer npm/yarn versions, you might need to use `--legacy-peer-deps` for installation, but proceed with caution as this can mask underlying compatibility issues.

Install

npm install sanji-auth-ui npm
yarn add sanji-auth-ui yarn
pnpm add sanji-auth-ui pnpm

Imports

'sanji.auth'
wrong:
```
import { sanjiAuth } from 'sanji-auth-ui'
```
correct:
```
angular.module('myApp', ['sanji.auth'])
```
This is an AngularJS 1.x module name, included via dependency injection in your Angular app's module definition. It is not an ES module export.
auth
wrong:
```
import { auth } from 'sanji-auth-ui'
```
correct:
```
class MyController { constructor($http, auth, session) { /* ... */ } }
```
The `auth` service is an AngularJS injectable service. It should be injected into controllers, services, or directives using Angular's dependency injection system, not imported as a standard JavaScript module.
session
wrong:
```
import { session } from 'sanji-auth-ui'
```
correct:
```
class MyController { constructor($http, auth, session) { /* ... */ } }
```
The `session` service is also an AngularJS injectable service, similar to the `auth` service. It is made available via Angular's dependency injection after the `sanji.auth` module is loaded.

Quickstart

This quickstart demonstrates how to include the `sanji.auth` AngularJS module, inject the `auth` and `session` services into a controller, perform a user login with credential handling, and configure the `authProvider` and `sessionProvider`.

angular.module('webapp', ['sanji.auth'])
  .controller('AppController', ['$http', 'auth', 'session', function($http, auth, session) {
    this.credentials = { username: '', password: '' };
    this.login = (credentials) => {
      // Authenticate a user
      auth.login('/auth/local', credentials)
      .then((data) => {
        // Return token data
        return $http.get('/users/me');
      })
      .then((res) => {
        // Return authenticated user data and save in session service
        session.setUserData(res.data);
        console.log('User logged in:', session.getUserData());
      })
      .catch((error) => {
        console.error('Login failed:', error);
      });
    };
  }]);

// Example of configuring authProvider
angular.module('webapp').config(['authProvider', function(authProvider) {
  authProvider.configure({
    roles: {
      admin: 'admin',
      guest: 'guest'
    }
  });
}]);

// Example of configuring sessionProvider
angular.module('webapp').config(['sessionProvider', function(sessionProvider) {
  sessionProvider.configure({
    tokenHeader: 'Authorization',
    tokenKey: 'jwt_token'
  });
}]);

view raw JSON →