Access Google IAP protected API from Angular

Question

My application has 2 modules

• Spring boot back-end API
• Angular front-end (SPA application)

Both were deployed in Google app engine (GAE).

I used Google IAP for authentication. After enabling the IAP is there any way to generate the IAP JWT token for the different users within the organization to authenticate the APIs from the web client.

I tried token generating mechanism using the Service account. But for my scenario, I just want to authenticate and authorize users not service account. I found this reference to enable the web resource access for users, but it is using cookie based authorization. And it is not the recommended way for the application such as angular.

Answer 1

If you're using IAP to protect your backend api, it means your users have a Google Account or an account managed in Cloud Identity.

In your Angular front-end app, you can retrieve JWT token of your user, with Google Sign-In for Websites.

To easily integrate Google Sign-in with Angular, I recommend you to use ng-gapi from Ruben.

Main lines of the workflow :

• Angular uses ng-gapi with Google Sign-in behind the scene
• Users are authenticated with their Google Account
• You're able to retrieve GoogleUser idToken which is a JWT token.
• Each HttpRequest could be executed with Authorization: Bearer JWT
• IAP will accept request.

To better understand how to use ng-gapi, check this stackblitz Demo made by creator of lib.

I also suggest you theses resources :

• My answer on Stackoverflow about Angular stateless authentication workflow. Just skip the Spring Boot JWT part if you're using IAP.

• Google Sign-In for Websites official docs.

Note that you need to use the OAuth 2.0 Client ID configured by Identity-Aware Proxy for your app, and add the correct Authorized JavaScript origins.