An extendable common authentication module for any Angular application. Leverage pre-built, tested code that can be easily extended to provide your own authentication layer on-top of a stack that satisfies most business use-cases.

Import the NgxAuthModule in your root AppModule. You can optionally extend the BaseAuthService to handle your own authentication endpoints (recommended).

imports: [
    NgxAuthModule.forRoot([
        {
            provide: BaseAuthService,
            useClass: MyCustomAuthService
        }
    ])
]

import { Auth } from '@teammaestro/ngx-auth';

The Login action accepts a payload matching the required request body for your authentication login endpoint. In this example we pass an example username and password into the action.

this.store$.dispatch(new Auth.Login({
    username: 'foo',
    password: 'bar'
}));

This information is forwarded to your login API endpoint.

The LoginSuccess action is emitted when the AuthService.login() method successfully returns back a 200 status code. By default we expect the response body to contain the authenticated user object.

The authUser property will be assigned to state based on the response body.

To extend this interaction, create an effect:

i.e.:

import { Effect, Actions } from '@ngrx/effects';
import { Auth } from '@teammaestro/ngx-auth';

@Effect()
class ExampleEffect {

    onLoginSuccess$ = this.actions$
        .ofType(Auth.LOGIN_SUCCESS)
        .map(() => {
            // extendable code
        });

    constructor(private actions$: Actions) {}
}

The LoginFailed action is emitted when the AuthService.login() method returns back an invalid response code (i.e. 400 Bad Request). The middleware will assign any response body to the loginErrors property of state. To access this data, subscribe to getLoginErrors.

To extend this interaction, create an effect:

i.e.:

import { Effect, Actions } from '@ngrx/effects';
import { Auth } from '@teammaestro/ngx-auth';

@Effect()
class ExampleEffect {

    onLoginFailed$ = this.actions$
        .ofType(Auth.LOGIN_FAILED)
        .map(() => {
            // extendable code
        });

    constructor(private actions$: Actions) {}
}

The Logout action will clear all data currently stored on the coreAuth state container. This gives your application piece of mind that all user data is destroyed.

this.store$.dispatch(new Auth.Logout);

The Register action will pass the payload to a pre-defined endpoint to handle the registration workflow. By default the payload is expect the request body for the registration endpoint.

this.store$.dispatch(new Auth.Register({
    firstName: 'John',
    lastName: 'Smith',
    password: 'foobar',
    email: '[email protected]'
}));

The RegisterSuccess action is emitted when the AuthService.register() function successfully returns back a valid status code (i.e. 200). Optionally the response body from the API can be assigned as the authUser.

To extend this interaction, create an effect:

i.e.:

import { Effect, Actions } from '@ngrx/effects';
import { Auth } from '@teammaestro/ngx-auth';

@Effect()
class ExampleEffect {

    onRegisterSuccess$ = this.actions$
        .ofType(Auth.REGISTER_SUCCESS)
        .map(action => {
            // extendable code
        });

    constructor(private actions$: Actions) {}
}

You may also reassign data in your own auth reducer, based on the action dispatching.

reducer(state = initialState, action: Auth.Actions): State {
    case Auth.REGISTER_SUCCESS:
        return Object.assign({}, state, {
            // extendable code
        });
    default: {
        return state;
    }
}

The RegisterFailed action is emitted when the AuthService.register() function responds with an invalid status code (i.e. 400 Bad Request). Any errors from the response body will be assigned to registrationErrors. You can access this data by subscribing to getRegistrationErrors.

To extend this interaction, create an effect:

i.e.:

import { Effect, Actions } from '@ngrx/effects';
import { Auth } from '@teammaestro/ngx-auth';

@Effect()
class ExampleEffect {

    onRegisterFailed$ = this.actions$
        .ofType(Auth.REGISTER_FAILED)
        .map(action => {
            // extendable code
        });

    constructor(private actions$: Actions) {}
}

To do documentation

To do documentation

To do documentation

To do documentation

To do documentation

To do documentation

To do documentation

• Plumbing to update authenticated user object
• Extendable model for accessing/leveraging access & refresh tokens for OAuth2 authentication environments.
• Example sample application

Sean Perkins