cp-auth-module v0.0.3

Getting started with CP Auth Module

This guide explains how to set up your Angular project to begin using CP Auth Module. It includes information on prerequisites, installing and configuring CP Auth Module.

Angular Resources

If you are new to Angular or getting started with a new Angular application, see Angular's full Getting Started Guide and Setting up your environment.

For existing applications, follow the steps below to begin using CP Auth Module.

1. Install CP Auth Module

To install CP Auth Module type following command in your project's terminal:

npm install cp-auth-module

This will add project dependencies to package.json.

2. Install Angular Material

Use the Angular CLI's installation schematic to set up your Angular Material project by running the following command:

ng add @angular/material

The ng add command will install Angular Material, the Component Dev Kit (CDK), Angular Animations and ask you the following questions to determine which features to include:

1. Choose a prebuilt theme name, or "custom" for a custom theme:

   You can choose from prebuilt material design themes or set up an extensible custom theme.

2. Set up global Angular Material typography styles:

   Whether to apply the global typography styles to your application.

3. Set up browser animations for Angular Material:

   Importing the BrowserAnimationsModule into your application enables Angular's animation system. Declining this will disable most of Angular Material's animations.

The ng add command will additionally perform the following actions:

• Add project dependencies to package.json
• Add the Roboto font to your index.html
• Add the Material Design icon font to your index.html
• Add a few global CSS styles to:
• Remove margins from body
• Set height: 100% on html and body
• Set Roboto as the default application font

You're done! Angular Material is now configured to be used in your application.

3. Update angular.json

Add this lines of code in the projects.<current-project>.build.options:

"preserveSymlinks": true

To the assets array:

{
  "glob": "**/*",
  "input": "./node_modules/cp-auth-module/assets",
  "output": "/assets/"
}

To the styles array:

"./node_modules/cp-auth-module/src/lib/main.scss"

4. Create a config object

To configure the behavior of your authentication module you need to create a config object which must be with Config interface.

import { Config } from 'cp-auth-module';

export const <your-config-object>: Config = { ... };

You can choose which pages you want in your application, set them route paths and titles, choose the default input fields and the third party login services (if you have any).

5. Configure app.module.ts

In your app.module.ts:

• import AngularMaterialModule and CpAuthModule from 'cp-auth-module'
• import <your-config-object> from 'path-to-your-config-object'
• in NgModule imports array add AngularMaterialModule and CpAuthModule.forRoot(<your-config-object>)

imports: [
  AngularMaterialModule,
  CpAuthModule.forRoot(config),
  ...
],

This will configure the CP Auth Module depends on your config object.

Start using the CP Auth Module components

To start using the CP Auth Module components:

• add them to your RouterModule routes with the same paths as in your config object:

import {
  ResetPasswordComponent,
  SignInComponent,
  SignUpComponent
} from 'cp-auth-module';

const routes: Routes = [
  { path: 'sign-in', component: SignInComponent },
  { path: 'sign-up', component: SignUpComponent },
  { path: 'reset', component: ResetPasswordComponent },
  ...
];

• in app.component.ts you need to subscribe to the authEvent observable to listen for any events:

constructor(private authModuleService: AuthModuleService) { }

ngOnInit(): void {
  this.authModuleService.authEvent.subscribe( ... );
}

• and in most cases don't forget to add <router-outlet></router-outlet> where needed.

Test your application

Run your local dev server:

ng serve

Then point your browser to http://localhost:4200

You should see the Material slider component on the page.

In addition to the installation schematic, Angular Material comes with several other schematics (like nav, table, address-form, etc.) that can be used to easily generate pre-built components in your application.