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.