OAuth Service

Overview

The OAuthService is a service that handles OAuth 2.0 and OpenID Connect authentication flows. It provides methods to initiate login, handle token storage, refresh tokens, and logout users. This service is essential for managing user authentication and authorization in an Angular application.

Why Use OAuthService

• Simplifies Authentication: Manages the OAuth 2.0 and OpenID Connect flows, reducing the complexity of implementing authentication.
• Token Management: Handles storing, refreshing, and clearing tokens securely.
• Automatic Token Refresh: Automatically refreshes tokens before they expire, ensuring a seamless user experience.
• Customizable: Allows configuration overrides and custom storage mechanisms.

Methods

The OAuthService provides the following methods:

initLoginFlow

The initLoginFlow method initiates the login flow by generating a PKCE challenge, storing the code verifier, and redirecting the user to the authorization endpoint. It can optionally open the login process in a popup window.

Parameters

Parameters	Type	Description
popup	boolean	Whether to open the login process in a popup window. Default is false.

Usage

app.component.ts

import { OAuthService } from './oauth.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private oauthService: OAuthService) {}

  public ngOnInit(): void {
    this.oauthService.initLoginFlow(true);
  }
}

loadConfiguration

The loadConfiguration method load and sets the configuration from OAuth 2.0 and OpenID Connect providers.

Parameters

The loadConfiguration method does not require any parameters.

Usage

app.component.ts

import { OAuthService } from './oauth.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private oauthService: OAuthService) {}

  public ngOnInit(): void {
    this.oauthService.loadConfiguration(true);
  }
}

setupAutomaticRefresh

The setupAutomaticRefresh method is responsible for configuring the automatic refresh of the authentication token. It uses the TokenHandlerService to handle the token refresh logic.

Parameters

The setupAutomaticRefresh method does not require any parameters.

Usage

app.component.ts

import { OAuthService } from './oauth.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private oauthService: OAuthService) {}

  public ngOnInit(): void {
    this.oauthService.setupAutomaticRefresh();
  }
}

refreshToken

The refreshToken method is responsible for refreshing the token manually.

Parameters

The refreshToken method does not require any parameters.

Usage

app.component.ts

import { OAuthService } from '@celerofinancas/ui-oauth';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private oauthService: OAuthService) {}

  public refreshToken(): void {
    this.oauthService.refreshToken().subscribe((token) => {
      // Handle the new token
    });
  }
}

logout

The logout method logs out the user by clearing tokens and redirecting to the end session endpoint. It can optionally open the logout process in a popup window.

Parameters

Parameters	Type	Description
options	LogoutOptions	An optional object containing the logout options.

Usage

app.component.ts

import { OAuthService } from '@celerofinancas/ui-oauth';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private oauthService: OAuthService) {}
  
  public options = {
    popup: true, // Open the logout process in a popup window
    redirectUrl: 'https://example.com'
  };

  public logout(): void {
    this.oauthService.logout(options).subscribe(() => {
      // Handle the logout
    });
  }
}

getToken

The getToken method retrieves an OAuth token using an authorization code from the URL query parameters. It also allows for custom actions before and after the token retrieval process.

Parameters

Parameters	Type	Description
params	{ beforeTokenGet?: () => void; afterTokenGet?: () => void }	An optional object containing the getToken options.

Usage

app.component.ts

import { OAuthService } from '@celerofinancas/ui-oauth';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private oauthService: OAuthService) {}

  public params = {
    beforeTokenGet: () => {
      // Custom actions before getting the token
    },
    afterTokenGet: () => {
      // Custom actions after getting the token
    }
  };
  
  public getToken(): void {
    this.oauthService.getToken(params).subscribe((token) => {
      // Handle the token
    });
  }
}