Integrate Google OAuth with Angular 7

app.component.ts

import { Component, OnInit, Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { HttpHeaders, HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

import { environment } from './../environments/environment';

const clientId = environment.clientId;
const scope = 'https://www.googleapis.com/auth/youtube.readonly';
const callbackUrl = 'http://localhost:3000/callback';

@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`
})
export class AppComponent {
}

@Component({
  selector: 'app-login-button',
  template: `<a href="{{ authUrl }}">Click</a>`
})
export class LoginButtonComponent {
  authUrl = 'https://accounts.google.com/o/oauth2/v2/auth' +
    `?scope=${encodeURIComponent(scope)}` +
    `&client_id=${clientId}` +
    '&response_type=token' +
    `&redirect_uri=${encodeURIComponent(callbackUrl)}`;
}

@Component({
  selector: 'app-callback',
  template: `<h1>Callback</h1>`
})
export class CallbackComponent implements OnInit {
  constructor(
    private router: Router) {}

  ngOnInit() {
    const res = this.router.url
      .substring('/callback#'.length)
      .split('&')
      .map(str => str.split('='))
      .map(tokens => ({[tokens[0]]: tokens[1]}))
      .reduce(Object.assign, {});

    sessionStorage.setItem('accessToken', res.access_token);

    this.router.navigate(['/video']);
  }
}

@Injectable({
  providedIn: 'root'
})
export class VideoService {
  constructor(private http: HttpClient) {}

  getPlaylists(): Observable<PlaylistListResponse> {
    const accessToken = sessionStorage.getItem('accessToken');
    const url = 'https://www.googleapis.com/youtube/v3/playlists?part=snippet&mine=true';
    return this.http.get<PlaylistListResponse>(url, {
      headers: new HttpHeaders({ Authorization: `Bearer ${accessToken}` })
    });
  }
}

@Component({
  selector: 'app-video',
  template: `
    <h1>Video playlists</h1>
    <ul>
      <li *ngFor="let playlist of playlists | async">{{ playlist.snippet.title }}</li>
    </ul>
  `
})
export class VideoComponent implements OnInit {

  constructor(private videoService: VideoService) {}

  playlists: Observable<Playlist[]>;

  ngOnInit() {
    this.playlists = this.videoService.getPlaylists()
      .pipe(map(response => response.items));
  }
}

class PlaylistListResponse {
  items: Playlist[];
}

export class Playlist {
  snippet: PlaylistSnippet;
}

export class PlaylistSnippet {
  title: string;
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent, LoginButtonComponent, CallbackComponent, VideoComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

const appRoutes: Routes = [
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  {
    path: 'login',
    component: LoginButtonComponent
  },
  {
    path: 'callback',
    component: CallbackComponent
  },
  {
    path: 'video',
    component: VideoComponent
  }
];

@NgModule({
  declarations: [
    AppComponent,
    LoginButtonComponent,
    CallbackComponent,
    VideoComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot(
      appRoutes
    ),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

environment.ts

export const environment = {
  production: false,
  clientId: 'YOUR_CLIENT_ID'
};