Angular OIDC OAuth2 client with Google Identity Platform

This article shows how an Angular client could implement a login for a SPA application using Google Identity Platform OpenID. The Angular application uses the npm package angular-auth-oidc-client to implement the OpenID Connect Implicit Flow to connect with the google identity platform.



2017-07-09 Updated to version 1.1.4, new configuration

Setting up Google Identity Platform

The Google Identity Platform provides good documentation on how to set up its OpenID Connect implementation.

You need to login into google using a gmail account.

Now open the OpenID Connect google documentation page

Open the credentials page provided as a link.

Create new credentials for your application, select OAuth Client ID in the drop down:

Select a web application and configure the parameters to match your client application URLs.

Implementing the Angular OpenID Connect client

The client application is implemtented using ASP.NET Core and Angular.

The npm package angular-auth-oidc-client is used to connect to the OpenID server. The package can be added to the package.json file in the dependencies.

"dependencies": {
    "angular-auth-oidc-client": "1.1.4"

Now the AuthModule, OidcSecurityService, AuthConfiguration can be imported. The AuthModule.forRoot() is used and added to the root module imports, the OidcSecurityService is added to the providers and the AuthConfiguration is the configuration class which is used to set up the OpenID Connect Implicit Flow.

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { Configuration } from './app.constants';
import { routing } from './app.routes';
import { HttpModule, JsonpModule } from '@angular/http';
import { ForbiddenComponent } from './forbidden/forbidden.component';
import { HomeComponent } from './home/home.component';
import { UnauthorizedComponent } from './unauthorized/unauthorized.component';

import { AuthModule, OidcSecurityService, OpenIDImplicitFlowConfiguration } from 'angular-auth-oidc-client';

    imports: [
    declarations: [
    providers: [
    bootstrap:    [AppComponent],

The AuthConfiguration class is used to configure the module.

This is the URL where the STS server is located. We use in this example.

This is the redirect_url which was configured on the google client ID on the server.

The client_id must match the Client ID for Web application which was configured on the google server.

This must be ‘id_token token’ or ‘id_token’. If you want to use the user service, or access data using using APIs, you must use the ‘id_token token’ configuration. This is the OpenID Connect Implicit Flow. The possible values are defined in the well known configuration URL from the OpenID Connect server.

Scope which are used by the client. The openid must be defined: ‘openid email profile’

Url after a server logout if using the end session API. This is not supported by google OpenID.

Checks the session using OpenID session management. Not supported by google OpenID

Renews the client tokens, once the token_id expires.

Angular route after a successful login.

HTTP 403

HTTP 401

Logs all module warnings to the console.

Logs all module debug messages to the console.

export class AppModule {
    constructor(public oidcSecurityService: OidcSecurityService) {

        let openIDImplicitFlowConfiguration = new OpenIDImplicitFlowConfiguration();
        openIDImplicitFlowConfiguration.stsServer = '';
        openIDImplicitFlowConfiguration.redirect_url = 'https://localhost:44386';
        openIDImplicitFlowConfiguration.client_id = '';
        openIDImplicitFlowConfiguration.response_type = 'id_token token';
        openIDImplicitFlowConfiguration.scope = 'openid email profile';
        openIDImplicitFlowConfiguration.post_logout_redirect_uri = 'https://localhost:44386/Unauthorized';
        openIDImplicitFlowConfiguration.startup_route = '/home';
        openIDImplicitFlowConfiguration.forbidden_route = '/Forbidden';
        openIDImplicitFlowConfiguration.unauthorized_route = '/Unauthorized';
        openIDImplicitFlowConfiguration.log_console_warning_active = true;
        openIDImplicitFlowConfiguration.log_console_debug_active = true;
        openIDImplicitFlowConfiguration.max_id_token_iat_offset_allowed_in_seconds = 10;
        openIDImplicitFlowConfiguration.override_well_known_configuration = true;
        openIDImplicitFlowConfiguration.override_well_known_configuration_url = 'https://localhost:44386/wellknownconfiguration.json';

        // this.oidcSecurityService.setStorage(localStorage);

Google OpenID does not support the .well-known/openid-configuration API as defined by OpenID. Google blocks this when using it due to a CORS security restriction, so it can not be used from a browser application. As a workaround, the well known configuration can be configured locally when using angular-auth-oidc-client. The goole OpenID configuration can be downloaded using the following URL:

The json file can then be downloaded and saved locally on your server and this can then be configured in the authConfiguration class using the override_well_known_configuration_url property.

this.authConfiguration.override_well_known_configuration = true;
this.authConfiguration.override_well_known_configuration_url = 'https://localhost:44386/wellknownconfiguration.json';

The following json is the actual configuration for the google well known configuration. What’s really interesting is that the end session endpoint is not supported, which is strange I think.
It’s also interesting to see that the response_types_supported supports a type which is not supported “token id_token”, this should be “id_token token”.


  "issuer": "",
  "authorization_endpoint": "",
  "token_endpoint": "",
  "userinfo_endpoint": "",
  "revocation_endpoint": "",
  "jwks_uri": "",
  "response_types_supported": [
    "code token",
    "code id_token",
    "token id_token",
    "code token id_token",
  "subject_types_supported": [
  "id_token_signing_alg_values_supported": [
  "scopes_supported": [
  "token_endpoint_auth_methods_supported": [
  "claims_supported": [
  "code_challenge_methods_supported": [

The AppComponent implements the authorize and the authorizedCallback functions from the OidcSecurityService provider.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Configuration } from './app.constants';
import { OidcSecurityService } from 'angular-auth-oidc-client';
import { ForbiddenComponent } from './forbidden/forbidden.component';
import { HomeComponent } from './home/home.component';
import { UnauthorizedComponent } from './unauthorized/unauthorized.component';

import './app.component.css';

    selector: 'my-app',
    templateUrl: 'app.component.html'

export class AppComponent implements OnInit {

    constructor(public securityService: OidcSecurityService) {

    ngOnInit() {
        if (window.location.hash) {

    login() {
        console.log('start login');

    refreshSession() {
        console.log('start refreshSession');

    logout() {
        console.log('start logoff');

Running the application

Start the application using IIS Express in Visual Studio 2017. This starts with https://localhost:44386 which is configured in the launch settings file. If you use a differnt URL, you need to change this in the client application and also the servers client credentials configuration.

Login then with your gmail.

And you are redirected back to the SPA.



  1. Damien, I noticed that you say Google block the downloading of the configuration of the OIDC configuration from the .well-known/openid-configuration endpoint, and therefore the downloading of it, and saving of it to a local file.

    For providers that does support this, will your library automatically download the configuration from the .well-known/openid-configuration endpoint – ie. we do not have to download it and save it locally first?

    1. Hi Jerrie, at present, I do this manually and add it to the using project. It is not part of the npm lib. The lib allows you to configure the src if required.

      Google blocks it for a browser application; CORS. You can download it from a desktop application or direct in the browser.
      Greetings Damien

  2. […] Angular OIDC OAuth2 client with Google Identity Platform  […]

  3. Hi Damien, I noticed that your example says version 0.0.8, and I am getting 1.1.4. Could that be the reason that all configuration items in module constructor are throwing an error “Cannot assign to ” because it is a constant or a read-only property.”.
    Of course, it could be something else as well… Should I contact package author 😉

    1. Hi Felix, sorry yes I will update the blog. Version 1.1.4 is configured differently now. check the github repo with this blog, it has been updated already.

      1. yes, thank you, I noticed (after I posted). Looking through repo explanation, it goes to a generic Identity Provider (like, I suppose, IdentityServer 4) – not specifically, Google. Nothing wrong – but more complicated for a first attempt 🙂

      2. FWIW, as soon as I inject OidcSecurityService the module code from repo gives me “Unhandled Promise rejection: No provider for AuthConfiguration! ; Zone: ; Task: Promise.then ; Value: Error: No provider for AuthConfiguration!”, although there are no references in AuthConfiguration in *my*code…

  4. Hi Felix

    I checked the example and it works. Have you configured the app.module correctly:

    Greetings Damien

    1. Looks like the problem was that I imported AuthModule, rather than AuthModule.forRoot(). And I see that you updated the post 🙂 🙂
      Thank you!

      1. cool, great that it’s working for you 🙂

  5. […] Angular OIDC OAuth2 client with Google Identity Platform … – This article shows how an Angular client could implement a login for a SPA application using Google Identity Platform OpenID. The Angular application uses the npm … […]

  6. Do you have an example for Azure AD??

      1. Using the example attached, i receive the error:

        AADSTS50001: Resource identifier is not provided.

        I set de Resource property, but it is not added to the request url, when I add manually”&resource=myresource” to the url request, it works perfectly. But it seems that is not added by the library.

  7. Enrique Ramirez · · Reply

    Hi Damien, great library and great sample code.

    I’ve got the sample code working (using 3.0.3 version) but after authenticating the user the access token and id token are still present in the url (i.e. anyone can copy and paste that url and get in). Is that supposed to be the normal behavior? Am I doing something wrong?


  8. from 7/11/2017 stopped working example. Began to issue error 400. “That’s an error. Error: redirect_uri_mismatch”.
    It’s a pity, but I do not have enough skill to understand why. Tried to substitute their registration data, still an error.

  9. I’m sorry, it’s already working. Half a day did not work. Today launched with its registration data, and everything turned out.

    1. Wendy · · Reply

      I only modified with client_id which I obtained on google developers page. But I always meet the error 400. “That’s an error. Error: redirect_uri_mismatch”, and still unsolved. Need some help.

      1. Hi Wendy

        You have to configure you google application to match the configuration sent in the Angular app. The redirect uri from the Angular app does not match what is configured in the google Application configuration. Update the google account application to accpet the redirect and it will work.

        Greetings Damien

  10. BiLKiNiS · · Reply

    Hi Damien,
    I have a problem with all your angular project example, when loading the project in visual studio 2017 and launching the debug, I always stumble on a blank page with “This is server routing, not angular2 routing”
    I think something somewhere is missing but i don’t know what
    I have an angular application that is using the template available with the .net core 2.0 and it’s working fine

  11. Wendy · · Reply

    Hi, Damien
    I have update the google account application and still have the 400 error. So I have some question about redirect url. Can redirect uri be direct visited locally?Does the configuration of uri have special requirements? The redirect uri of my google application is same with you when I configure.

    1. cool thanks

  12. Wendy · · Reply

    Hi, Damien
    I have solved the bug. Thank you for job and share!

Leave a Reply to damienbod Cancel reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: