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?

score 8 · Accepted Answer · answered Jun 15 '18 at 15:53

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

score 3 · Answer 2 · answered Nov 22 '19 at 11:55

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/

Rahul Suresh · Answer 3 · 2018-06-12T05:12:55.030

0

Best way would be to use Firebase Auth! Check it out at https://firebase.google.com/docs/auth/

You could check if the user is authenticated or not in this way.

<script type="text/javascript">

        function initApp() {
          // Listening for auth state changes.
          // [START authstatelistener]
          firebase.auth().onAuthStateChanged(function (user) {
            if (user) {
              //User is signed in.
                  if (!emailVerified) {
              //Additional check for email verification
              }
            } else {
              // User is signed out.
            }
          });
          // [END authstatelistener]
        }
        window.onload = function () {
          initApp();
        };
      </script>

edited Jun 12 '18 at 05:12

answered Jun 12 '18 at 04:36

Rahul Suresh

134
1
13

Hi Rahul, I considered Firebase Auth but ran into some difficulties. I created a firebase project, enabled the Google sign-in method, created a login page, and successfully signed in with my Google account. But since you can't configure rules with Firebase Hosting (see https://stackoverflow.com/questions/48753740/authentication-for-firebase-hosting), the only remaining option is to use Firebase Storage. It doesn't seem like there's a way to serve a static website composed of multiple files and relative links with Firebase Storage. Any ideas? – el_tigro Jun 12 '18 at 04:59
See here as well: https://stackoverflow.com/questions/27212004/can-firebase-hosting-restrict-access-to-resources – el_tigro Jun 12 '18 at 05:01
Well, you could dynamically check if user is logged into firebase or not using certain firebase functions in Javascript. Depending on that you could display content or choose to hide them if they are not authenticated (You could use any front-end framework to prevent displaying the content instead of just setting display:none) – Rahul Suresh Jun 12 '18 at 05:05
@catanman Check the updated answer and see if you get what I'm trying to say. – Rahul Suresh Jun 12 '18 at 05:13
I ended up finding a simpler solution that doesn't require any code. – el_tigro Jun 15 '18 at 15:55

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

3 Answers3

Linked