Authentication Pop up

Follow the steps below to configure the OAuth2 authentication in your application using the pop-up mode.

Configuration

First of all, you will need to configure your angular.json to serve silent-refresh.html file. This file is responsible for handling the OAuth2 authentication in the pop-up mode.

tip

You can create your own silent-refresh.html file to fit your needs.

Just follow the patterns of the default file provided by the library and follow the same steps to configure it in your project.

angular.json

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/@celerofinancas/ui-oauth/src/",
                "output": "/"
              },
              // ...
            ]
          }
        }
      }
    }
  }
}

This configuration will copy the silent-refresh.html file to root of your project. To you can access this file at http://localhost:4200/silent-refresh.html.

OAuth2 Configuration

In your oauth configuration, you will need to provide redirectUri with path to silent-refresh.html file.

Also, you can customize the pop-up window size and position by providing the popupConfiguration object.

configs.ts

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

export const config: OAuthConfiguration = {
  // ...
  redirectUri: `${window.location.origin}/silent-refresh.html`,
  popupConfiguration: { width: 500, height: 600 },
};

Usage

Now, you can use the OAuthService to authenticate your users using the pop-up mode.

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 {
    // Provide `true` to open the pop-up window.
    this.oauthService.initLoginFlow(true);
  }
}

Events

You can listen to the events emitted by the OAuthService to handle the authentication process.

app.component.ts

import { OAuthService, OAuthEvents } from '@celerofinancas/ui-oauth';
import { Subject, BehaviorSubject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  private destroyController$ = new Subject<void>();
  public loading$ = new BehaviorSubject<boolean>(true);

  constructor(private oauthService: OAuthService) {}

  public ngOnInit(): void {
    this.oauthService.event$
      .pipe(
        filter((event) =>
          [
            OAuthEvents.AUTHENTICATION_FAILED,
            OAuthEvents.POP_UP_CLOSED_BY_USER
          ].includes(event),
        ),
        takeUntil(this.destroyController$),
      )
      .subscribe(() => this.loading$.next(false));
  }

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

Token handling

Once your using the pop-up mode, you will need to listen to the TokenEvents.TOKEN_RECEIVED event to handle the token.

app.component.ts

import { TokenHandlerService, TokenEvents } from '@celerofinancas/ui-oauth';
import { Subject, BehaviorSubject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';
import { Component, OnInit } from '@angular/core';

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

  public ngOnInit(): void {
    this.token.eventsSubject$
      .pipe(
        filter(({ event }) => event === TokenEvents.TOKEN_RECEIVED),
        takeUntil(this.destroyController$),
      )
      .subscribe((token) => {
        // Your token handling logic here
      });
  }
}

Conclusion

That's it! Now you have configured the OAuth2 authentication in your application using the pop-up mode.