broadcast-channel-token-sharing

broadcast-channel-token-sharing.ts

import { Inject, Injectable } from "@angular/core";
import { WINDOW } from "@ng-web-apis/common";

export const ACCESS_TOKEN_KEY = "accesToken";
export const REFRESH_TOKEN_KEY = "refreshToken";

@Injectable({ providedIn: "root" })
export class TokenStorageService {
  constructor(@Inject(WINDOW) private windowRef: Window) {}

  clear() {
    this.windowRef.sessionStorage.clear();
  }

  saveAccessToken(token: string): void {
    this.windowRef.sessionStorage.removeItem(ACCESS_TOKEN_KEY);
    this.windowRef.sessionStorage.setItem(ACCESS_TOKEN_KEY, token);
  }

  saveRefreshToken(token: string): void {
    this.windowRef.sessionStorage.removeItem(REFRESH_TOKEN_KEY);
    this.windowRef.sessionStorage.setItem(REFRESH_TOKEN_KEY, token);
  }

  getAccessToken(): string | null {
    return this.windowRef.sessionStorage.getItem(ACCESS_TOKEN_KEY);
  }

  getRefreshToken(): string | null {
    return this.windowRef.sessionStorage.getItem(REFRESH_TOKEN_KEY);
  }
}


///  APP COMPONENT   ///

import { Component } from "@angular/core";
import { TokenStorageService } from "@core/auth/services/token-storage.service";

const TOKEN_SHARING_CHANNEL = "token-sharing";
const REQUESTING_TOKEN = "requesting-token";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  bc = new BroadcastChannel(TOKEN_SHARING_CHANNEL);

  constructor(private tokenStorageService: TokenStorageService) {
    this.addBroadcastChannelListener();
    this.bc.postMessage(REQUESTING_TOKEN);
  }

  private addBroadcastChannelListener() {
    this.bc.addEventListener("message", (event) => {
      if (event.data === REQUESTING_TOKEN) {
        new BroadcastChannel(TOKEN_SHARING_CHANNEL).postMessage({
          accessToken: this.tokenStorageService.getAccessToken(),
          refreshToken: this.tokenStorageService.getRefreshToken(),
        });
      } else {
        const { accessToken, refreshToken } = event.data;
        accessToken && this.tokenStorageService.saveAccessToken(accessToken);
        refreshToken && this.tokenStorageService.saveRefreshToken(refreshToken);
      }
    });
  }
}