Cp-auth-service4 NPM

Getting started with CP Web Auth Service in an Angular application (scroll down for React)

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

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 Web Auth Service.

1. Install CP Web Auth Service

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

npm install cp-auth-service

This will add project dependencies to package.json.

2. Update `angular.json`

Add this line in the current project build options:

"allowedCommonJsDependencies": ["cp-auth-service"],

3. Configure `app.module.ts`

In your app.module.ts:

import CpAuthService from "cp-auth-service"
in NgModule providers array add CpAuthService

4. Create an auth config object

To configure the credentials of your authentication service you need to create an auth config object which must be with AuthConfig interface.

import { AuthConfig } from "cp-auth-service";

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

You need to set an url to your auth provider, a key (a string) which be used to access the token, a client ID (a string) and a callback function that will be trigger when the user is not authorized.

5. Initialization

In your app.component.ts:

import CpAuthService from "cp-auth-service"
import <your-config-object> from "<your-config-object-path>"
in ngOnInit() function you need to create an instance of CpAuthService and initialize it with your auth config object:

const cpAuthService = new CpAuthService();
cpAuthService.init(authConfig);

This will configure the CP Web Auth Service depends on your auth config object.

6. Start using the CP Web Auth Service

To start using the CP Web Auth Service simply trigger some of it's methods:

cpAuthService.login(email, password).then( ... ).catch( ... );
cpAuthService.onUnAuthorized();
cpAuthService.isAuthenticated();

Test your application

Run your local dev server:

ng serve

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

Getting started with CP Web Auth Service in a React application

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

If you are new to React or getting started with a new React application, see React's full Getting Started Guide.

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

1. Install CP Web Auth Service and form-urlencoded

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

npm install cp-auth-service

This will add project dependencies to package.json.

2. Create an auth config object and initialize the service

To configure the credentials of your authentication service you need to create an auth config object which must be with AuthConfig interface.

Set an base url to your keycloak provider, a tokenStorageKey (a string) which will be used to access the token, a refreshTokenStorageKey (a string) which will be used to access the refresh token, a realm - name of the keycloak realm, a clientId (a string) and a callback function that will be trigger when the user is not authorized:

import { AuthConfig, CpAuthService } from "cp-auth-service";

export const authConfig: AuthConfig = {
  clientId: '',
  baseUrl: '',
  realm: '',
  tokenStorageKey: '',
  refreshTokenStorageKey: '',
  unauthorizedCallback: () => { }
}

You need to initialize the auth service with your <your-config-object> and export the service also:

export const cpAuthService = new CpAuthService();
cpAuthService.init(authConfig);

3. Start using the CP Web Auth Service

To start using the CP Web Auth Service simply trigger some of it's methods where needed:

cpAuthService.login(email, password).then( ... ).catch( ... );
cpAuthService.onUnAuthorized();
cpAuthService.isAuthenticated();

4. Use default Keyclaok login

To use the default Keycloak login page and functionalities, you should add defaultLogin to your authConfig. This will initialize keycloak instance with realm, url (auth url), and clientId and redirect to keycloak's default login page.