Static-web-apps: Restrict Access to Authenticated Users

[akzaidi]

What I'm trying to do

I have a static web app that consists solely of a collection of static html which I am generating using the bookdown package.

I'd like to restrict usage to only those users that I've invited using the Role management blade in the static app's portal page.

I have the following routes.json configuration:

{
    "routes": [
        {
            "route": "/",
            "serve": "/index.html",
            "allowedRoles": [
                "authenticated"
            ]
        },
        {
            "route": "/login",
            "serve": "/.auth/login/github"
        }
    ],
    "platformErrorOverrides": [
        {
            "errorType": "NotFound",
            "serve": "/custom-404.html"
        },
        {
            "errorType": "Unauthenticated",
            "statusCode": "301",
            "serve": "/login"
        }
    ]
}

This seems to work but it 1. allows anyone with a github account to login, not just those that have been invited through the Role management invitations 2. Allows user to bypass login byt directly hitting one of the sub-pages, i.e., <domain-name>/index.html

Questions

1. How do I ensure only users logged through github and invited through Role Management in the Portal are able to access the site and all the sub-pages?
   
   
   
   • if I use a wildcard for the first route I get an error, i.e.:
     
     json "routes": [ { "route": "/*", "serve": "/index.html", "allowedRoles": [ "authenticated" ]
     
     _error: Encountered an issue while validating routes.json: A route is covered up by a wildcard route and would not be evaluated. Route: /login, Wildcard: /. Please either delete or move the unreachable route._
   
   
2. How can I add multiple login values for /login, i.e. I'd like something along the lines of
   json "serve": ["/.auth/login/github", "/.auth/login/aad"]
3. Can I add an entire roster of users from a github team or a whole directory of AAD users as invited users, or is the quota of 25 at the user-level?

Sorry for the uninformed questions! I'm quite illiterate with static sites and auth in general 😟

[mkarmark]

Hi @akzaidi,

First of all, thank you for trying out Azure Static Web Apps!

1. Three things here: you can ensure that all users are logged in only through GitHub by blocking other authorization providers as shown in the docs https://docs.microsoft.com/en-us/azure/static-web-apps/authentication-authorization#block-an-authorization-provider:

{
  "route": "/.auth/login/twitter",
  "statusCode": "404"
}

Further, "authenticated" is the role that a user has when they just log in. If you want to restrict a path to the users you invite, include the role the invitation link is made with in the "allowedRoles section".
Lastly, the error you experienced about one route being covered up is because of the ordering. Move the /login rule above the /* (wildcard) rule and that error should disappear.

1. Each rule can only have one serve path. So "serve": ["/.auth/login/github", "/.auth/login/aad"] won't be possible, but perhaps what you are looking for is the blocking providers option, which I have linked and detailed with 1.

2. The quota of 25 is at level of the static web app.

[akzaidi]

Thank you @mkarmark for the super helpful and speedy reply!

After re-ordering the routes it looks like I'm good to go! I ended up defining a routes schema that looks like the following, and looks like it's working!

{
    "routes": [
        {
            "route": "/login",
            "serve": "/.auth/login/github"
        },
        {
            "route": "/login/aad",
            "serve": "/.auth/login/aad"
        },
        {
            "route": "/.auth/login/twitter",
            "statusCode": "401"
        },
        {
            "route": "/.auth/login/facebook",
            "statusCode": "401"
        },
        {
            "route": "/.auth/login/google",
            "statusCode": "401"
        },
        {
            "route": "/*",
            "serve": "/index.html",
            "allowedRoles": [
                "reader",
                "contributor"
            ]
        }
    ]
}

Any recommendations on how to make static web apps available to more than 25 invited users? Our goal is to make the webpages available for our entire team, which has around 120 people. I could potentially create multiple static apps but then will have to set up some synchronization mechanism and manage the URL list. Any chance the quota will be increased in the future after preview?

[mkarmark]

We appreciate the feedback! We are using restricted quotas during preview to try and gauge customer need. These quotas may change during preview based on the needs we see, so thanks for your feedback!

[akzaidi]

Thanks for the reply! I'll reach out again if I can't find a workaround for the quota.
Really happy with the service so far!

[drckriebel]

When will static web app be available for production usage ?

[anthonychu]

@drckriebel Working hard to add requested features and get the service to general availability. No ETA yet but should be in the first half of 2021.