How to host internal static websites protected by single-sign on (Oauth2, OpenID, or SAML) for free

In this brief tutorial I will show you how to create a log-in protected static website using the Google Cloud Platform. We'll use App Engine to host the static (or dynamic if you want) website and we will add a log-in shield using Google's Identity-Aware Proxy. At Staffbase we use the G Suite so I'll set IAP up to only allow access to the website to people from our GSuite domain.

Prerequisites

The eventual website will cause no costs as long as you don't have huge amounts of traffic. Nevertheless, even to create just a free account, Google requires you to provide a credit card number. They do this avoid fraud and misuse. So that's something to keep in mind - you need a credit card to begin.

You also need to install the Google Cloud SDK since you need the gcloud CLI tool which comes with it.

Lastly, you need a GCP project, so create one if you haven't already.

Setting up App Engine

The only thing you need to turn your code into an app is adding an app.yml file. You can reuse my app.yml without having to make any modifications.

My app.yml

runtime: python38

handlers:
  # resolves example.com/blog/ to example.com/blog/index.html
  - url: /(.+)/
    static_files: static/\1/index.html
    upload: static/(.+)/index.html

  # resolves example.com to example.com/index.html
  - url: /
    static_files: static/index.html
    upload: static/index.html

  # resolves example.com/blog to example.com/blog/index.html
  - url: /([^\.]+)([^/])
    static_files: static/\1\2/index.html
    upload: static/(.+)

  - url: /(.+)
    static_files: static/\1
    upload: static/(.+)

Credits for the above YAML: https://github.com/mattgartner/appengine-static-sites. This configuration assumes that you have all your static files in a directory called static.

Don't worry about the fact that Python is configured as the runtime. Specifying a runtime is required and while all runtimes are capable of serving static files there is no dedicated runtime for static sites.

You don't need to understand the handler definitions. They might look complicated but in essence all they do is making sure that urls like domain.com/url/path and domain.com/url/path/ get translated to domain.com/url/path/index.html.

There is also a guide from Google on this. Once you have an app.yml file you only need to run gcloud app deploy --project=<project-id>

Configuring Identity-Aware Proxy

Besides Google Accounts, you can use a wide range of additional identity providers, such as OAuth, SAML, and OIDC.

Configuring IAP is very easy. I had no problems following the official guide. There is this role called IAP-secured Web App User that you have to assign to anyone you want to be able to see the pages. I assigned this role to the entire staffbase.com G Suite domain but theoretically you can also assign it to individual Google accounts.