What is the simplest way to restrict access to a static website using social auth

Question

I have a static website composed of html/css/javascript files. The website is automatically generated and updated frequently.

Instead of authorizing access to the website with a username/password (basic auth), I would like to have users authenticate using Google Sign-in/openID Connect, and then control access via a whitelist of gmail addresses.

What is the simplest way to set this up?

Answer 1

Another way to add authentication or gated content to any static site:
1) First load a static container page (header, footer) and implement user Authentication js code using Auth0, firebase, okta etc.

2) When user successfully logs in then make an ajax api call passing that auth access_token to retrieve the sensitive content.

3) Load/append that sensitive content in the site using js.

Of Course, there has to be one server/serverless function which would listen to that ajax api call, authenticate it and sends the content back to the browser.

This is called client side authentication.

More on this: https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/

Answer 2

I ended up using oauth2_proxy which is exactly what I was looking for.

I configured to do the following:

• oauth2_proxy listens on 0.0.0.0:443
• When a user connects, the Google sign-in flow is initiated
• After sign-in, it validates the user's email address against a whitelist
• After successful validation, oauth2_proxy proxies the request to an upstream nginx server listening on 127.0.0.1:8080