cidaas-angular-sdk

Table of Contents

• Overview
• Prerequisites
• Installation
• Configuration
• Usage
  • Authentication
  • Checking if user is authenticated Information
  • Guard routes with authenticated user
  • Getting User Information
  • Logout
• API Reference

Overview

The cidaas-angular-sdk is a comprehensive software development kit that facilitates seamless integration of cidaas authentication and authorization services into your Angular applications. It provides a set of tools and interfaces to implement secure user authentication, manage tokens, and access user information with ease.

Prerequisites

Before you begin, ensure you have met the following requirements:

• Node.js (version 16.x or higher)
• Angular CLI (version 16.x or higher)
• A cidaas account and a registered application

Installation

To install the cidaas-angular-sdk, run the following command in your project directory:

npm install cidaas-angular-sdk

Configuration

Import the WebAuthModule in your app.module.ts:

import { WebAuthModule } from 'cidaas-angular-sdk';

@NgModule({
  imports: [
    // ... other imports
    WebAuthModule.forRoot({
      client_id: 'YOUR_CLIENT_ID',
      redirect_uri: 'YOUR_REDIRECT_URI',
      authority: 'YOUR_CIDAAS_BASE_URL',
      skipRedirectCheck: false,
      post_logout_redirect_uri: 'YOUR_POST_LOGOUT_REDIRECT_URI'
    }),
  ],
  // ... rest of your NgModule configuration
})
export class AppModule { }

Replace YOUR_CLIENT_ID, YOUR_REDIRECT_URI, YOUR_CIDAAS_BASE_URL and YOUR_POST_LOGOUT_REDIRECT_URI with your actual cidaas configuration.

Usage

Authentication

To authenticate a user:

import { WebAuthService } from 'cidaas-angular-sdk';

class ProfileComponent {
  constructor(
    public authService: WebAuthService
  ) {


  }

  login() {
    this.authService.loginWithBrowser() // Login with browser
  }
}

Checking if user is authenticated Information

After successful authentication:

this.authService.isAuthenticated$.subscribe(
  authenticated => {
    console.log('Authenticated:', authenticated); //boolean
  },
  error => {
    console.error('Error fetching user info:', error);
  }
);

Guard routes with authenticated user

Allow routes to be accessed by only authenticated users.

import { authGuardFn } from 'cidaas-angular-sdk';

const routes: Routes = [
  {
    path: '<route>',
    component: 'COMPONENT',
    canActivate: [authGuardFn] // import authGuardFn
  },
  {
    path: 'profile-lazy',
    loadChildren: () => import('LAZY_MODULE_PATH')
      .then(m => 'm.MODULE_NAME'),
    canActivate: [authGuardFn] // import authGuardFn
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Replace <route>, COMPONENT with route, component of your choice. If you need to extend the guard logic and compose it with other guard implementations

Getting User Information

After successful authentication:

this.authService.user$.subscribe(
  userInfo => {
    console.log('User Info:', userInfo);
  },
  error => {
    console.error('Error fetching user info:', error);
  }
);

Logout

To log out the user:

this.authService.logout();

API Reference

WebAuthService

The main service for interacting with cidaas authentication.

Methods:

• loginWithBrowser(signInOptions?: SignInRedirectArgs): Observable<void>: Initiates the login process
• loginCallback(paramsToRemove?: string[]): Observable<User | null>: Handle logout callback, pass on options to remove the url arguments. Returns Observable<User | null>
• popupSignIn(options?: SignInPopupArgs): Observable<User>: Initiates the login process with popup
• popupSignInCallback(url?: string): Observable<User> : Handle popupSignInCallback and returns Observable
• logout(): Observable<void>: Initiates the logout process
• getUserInfo(): Observable<User>: Retrieves the authenticated user's information as observable
• getToken(): Observable<string | null>: Returns the current access token as observable
• logout(options?: SignoutRedirectArgs, useDirect: boolean = false): Observable<void>: Logout the authenticated user