@holmby/auth NPM

Holmby Auth

Prerequisite. You also need to bootstrap StoreModule and EffectsModule.

This module communicates with an authentication server using a REST-api on url /rest/holmby/Login.php.

This module is based on the @ngrx/store architecture, so you need to bootstrap StoreModule and EffectsModule in your app.module.ts.

Installation
Usage
Documentation
License

Installation

npm install -save @holmby/auth

Usage

Include the module in your app. You also need to bootstrap StoreModule and EffectsModule.

  import { AuthModule, AuthConfig } from '@holmby/auth';

  import { StoreModule } from '@ngrx/store';
  import { StoreRouterConnectingModule } from '@ngrx/router-store';
  import { StoreDevtoolsModule } from '@ngrx/store-devtools';
  import { EffectsModule } from "@ngrx/effects";

  import { environment } from '../environments/environment';

  const authConfig: AuthConfig = {
    url: {
      login: '/rest/holmby/v1/login.php',
    }
  }

  @NgModule({
    imports: [
      AuthModule.forRoot(),

      StoreModule.forRoot({}),
      StoreRouterConnectingModule.forRoot( { stateKey: 'router' } ),
      environment.production ? [] : StoreDevtoolsModule.instrument(),
      EffectsModule.forRoot([]),
    ]

In your GUI, add the menu so the user can login:

      <holmby-auth-menu></holmby-auth-menu>

The store contains two properties: user and authenticationEnabled.

user - information about the loged in user
authenticationEnabled - true iff any http request is augmented with a http-auth-header. Wait for this before making any server request that needs authentication.

import { User, userSelector, authenticationEnabledSelector } from '@holmby/auth';
export class MyComponent implements OnInit {
  user$: Observable<User>;
  authEnabled$: Observable<boolean>;

  constructor(private store: Store<AppState>) { }

  ngOnInit() {
    this.user$ = this.store.pipe(select(userSelector));
    this.authEnabled$ = this.store.pipe(select(authenticationEnabledSelector));
  }
}

In your template.

  <h2>AuthModule.user</h2>
  {{ user$ | async | json}}

  <h2>AuthModule.authEnabled</h2>
  {{ authEnabled$ | async | json}}

export interface User {
  user: string;
  name: string;
  email: string;
  jwt: string;
  privileges: string[];
}

When the user is logged in, the jwt is injected in all http request headers (using angulars http inject mechanism).

Backend

  {"user":"pera","password":"hemligt"}

The reply should be:

  {
    "user":"pera",
    "name":"Per Andersson",
    "email":"Per@holmby.se",
    "jwt":"eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpc3MiOiJmbHlnc3BvcnQuZXUiLCJzdWIiOiJwZXJhIiwiZXhwIjoxNTM4NTIyODA5fQ.hJrG62y4f804Jshawd0UkFNRlJMB67KCiFwMvAdmu3wJgapNFWAOgfVTXWWvgkRX3HQ_bfMkHRDNOBN7ti-_K1C8VGbB3jZqYMgswRLP_oGoW4VFY_Fo6HqIKxLepufdA7kf6Tw98edk0cCZ4DtLgMnqX09djZhxZp23MLquXj4"
  }

{
    "message": "Ok\u00e4nd anv\u00e4ndare eller felaktigt l\u00f6senord.",
    "exception": [
        {
            "type": "Slim\\Exception\\HttpNotFoundException",
            "code": 404,
            "message": "Ok\u00e4nd anv\u00e4ndare eller felaktigt l\u00f6senord.",
            "file": "/Users/cs-pan/workspaces/shf/www/api/src/Services/ShfLogin.php",
            "line": 44
        }
    ]
}