Authentication URL

Overview

The OAuth authentication flow using URL mode involves several steps to ensure the user is authenticated securely. Below is a detailed description of the flow, along with code examples.

Usage

Step 1: Load Configuration

First, load the OAuth configuration in your Angular application. The configuration includes the OAuth provider details, such as the authorization URL, token URL, client ID, and client secret.

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 ngOnInit(): void {
    this.oauthService.loadConfiguration();
  }
}

Step 2: Initiate Login Flow

Initiate the login flow by generating a PKCE challenge, storing the code verifier, and redirecting the user to the authorization endpoint.

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 login(): void {
    this.oauthService.initLoginFlow(false); // Open the login process in a new tab.
  }
}

Step 3: Get Token

After the redirection, the authorization code will be included in the URL parameters. Extract the code and request the token.

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 ngOnInit(): void {
    this.oauthService.loadConfiguration();
    this.oauthService.initLoginFlow(false);
  }

  public getToken(): void {
    // Define actions to be performed before and after token retrieval
    const beforeTokenGet = () => console.log('Before getting token');
    const afterTokenGet = () => console.log('After getting token');
    
    this.oauthService.getToken({ beforeTokenGet, afterTokenGet });
  }
}   

Step 4: Store Tokens

Store the tokens in the local storage or session storage for future use.

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 ngOnInit(): void {
    this.oauthService.loadConfiguration();
    this.oauthService.initLoginFlow(false);
  }

  public getToken(): void {
    const beforeTokenGet = () => console.log('Before getting token');
    const afterTokenGet = () => console.log('After getting token');
    
    this.oauthService.getToken({ beforeTokenGet, afterTokenGet });
  }

  public storeTokens(): void {
    this.oauthService.storeTokens();
  }
}

Step 5: Get User Information

After storing the tokens, you can retrieve the user information using the access token.

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 ngOnInit(): void {
    this.oauthService.loadConfiguration();
    this.oauthService.initLoginFlow(false);
  }

  public getToken(): void {
    const beforeTokenGet = () => console.log('Before getting token');
    const afterTokenGet = () => console.log('After getting token');
    
    this.oauthService.getToken({ beforeTokenGet, afterTokenGet });
  }

  public storeTokens(): void {
    this.oauthService.storeTokens();
  }

  public getUserInfo(): void {
    this.oauthService.getUserInfo().subscribe((user) => {
      console.log(user);
    });
  }
}

Step 6: Logout

To log out the user, call the logout method.

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 ngOnInit(): void {
    this.oauthService.loadConfiguration();
    this.oauthService.initLoginFlow(false);
  }

  public getToken(): void {
    const beforeTokenGet = () => console.log('Before getting token');
    const afterTokenGet = () => console.log('After getting token');
    
    this.oauthService.getToken({ beforeTokenGet, afterTokenGet });
  }

  public storeTokens(): void {
    this.oauthService.storeTokens();
  }

  public getUserInfo(): void {
    this.oauthService.getUserInfo().subscribe((user) => {
      console.log(user);
    });
  }

  public logout(): void {
    this.oauthService.logout({ popup: false, redirectUrl: 'https://yourapp.com/logout' });
  }
}

Note

Ensure that the redirect URL is configured in the OAuth provider settings to redirect the user after the logout process.

Conclusion

This guide provides a step-by-step process to authenticate users using the OAuth URL mode. The process involves loading the configuration, initiating the login flow, retrieving the token, storing the tokens, and logging out the user. You can also retrieve user information using the access token.