APC Authentication using NGXS

This library's purpose is to make authentication of Angular 2+ applications fast an easy with a prebuilt, library that directly integrates with APC's authentication API. This Library is intended to be used with Angular Applications that arer set up using the NGXS library for App State Managment.

Peer dependencies

This project requires the following packages besides the default Angular packages.

• jwt-decode - For decoding Json Web Tokens.
• @ngxs/store - NGXS State Managment Library
• @ngxs/storage-plugin - For managing Session Storage within the application.

Installation

You can add the package to your Angular application by either

npm install --save @apchh/apc-auth-ngxs

or

yarn add @apchh/apc-auth-ngxs

Update your app.module.ts

Update your app.module.ts file by integrating the code below into your pre-existing code.

const appConf: IConfig = {
    applicationId: 'apc applicationId'
};

@ngModule({
    imports: [
        APCAuthNGXSModule.forRoot(appConf)      
    ],
    providers: [AuthService]
});

The purpose of the IConfig typechecked variable is to specify to the Authentication library, an ApplicationId, and in the future, more application information that the Auth API will need to determine where the login requests are coming from, and properly authenticate the requests.

Implementing Authentication Guards

You can use the Auth Guard within the APC-Auth-RXJS library to protect your routes by simply adding the AuthGuard to the canActivate route field. Then add a route to login using the SignInComponent provided by the library.

import { AuthGuard, SignInComponent } from 'apc-auth-rxjs';

const routes: Routes = [
    {
        path: '',
        component: HomeComponent,
        canActivate: [AuthGuard]
    }, {
        path: 'login',
        component: SignInComponent
    }
]

Dev Tools

During development, I would recommend you install the @ngxs/devtools-plugin and add it to your app.module.ts file. This plugin along with the Redux Dev Tools Plugin for your specific browser, will let you access a Redux tool in the Dev Tools section of your browser. With this plugin, your app will communicate with the browser's Dev Tools and display usefull Redux state managment information.

TODOs

• Implement JWT Token Interceptors to verify active session
• Implenent JWT Token Interceptor to append token to any and all requests
• Questioning whether or not to make Registration and change user information components or leave that to developers.