Merge pull request #12 from SkynetLabs/karol/sky-30-redirect-auth-error-to-login-page

Christopher Schinnerl · web-flow · commit e6886997cd16 · 2022-06-20T15:41:58.000+02:00
Custom error page for 401 Unauthorized that redirect to login screen
diff --git a/nginx/conf.d/include/location-hns b/nginx/conf.d/include/location-hns
@@ -13,11 +13,15 @@ rewrite_by_lua_block {
     -- 10.10.10.50 points to handshake-api service (alias not available when using resty-http)
     local hnsres_res, hnsres_err = httpc:request_uri("http://10.10.10.50:3100/hnsres/" .. ngx.var.hns_domain)
 
-    -- print error and exit with 500 or exit with response if status is not 200
+    -- exit with 500 or exit with response if status is not 200
     if hnsres_err or (hnsres_res and hnsres_res.status ~= ngx.HTTP_OK) then
         ngx.status = (hnsres_err and ngx.HTTP_INTERNAL_SERVER_ERROR) or hnsres_res.status
-        ngx.header["content-type"] = "text/plain"
-        ngx.say(hnsres_err or hnsres_res.body)
+        -- do not send response on unauthorized error (status code 401)
+        -- otherwise we will not be able to display custom error page
+        if ngx.status != ngx.HTTP_UNAUTHORIZED then
+            ngx.header["content-type"] = "text/plain"
+            ngx.say(hnsres_err or hnsres_res.body)
+        end
         return ngx.exit(ngx.status)
     end
 
@@ -46,11 +50,15 @@ rewrite_by_lua_block {
             headers = { ["User-Agent"] = "Sia-Agent" }
         })
 
-        -- print error and exit with 500 or exit with response if status is not 200
+        -- exit with 500 or exit with response if status is not 200
         if registry_err or (registry_res and registry_res.status ~= ngx.HTTP_OK) then
             ngx.status = (registry_err and ngx.HTTP_INTERNAL_SERVER_ERROR) or registry_res.status
-            ngx.header["content-type"] = "text/plain"
-            ngx.say(registry_err or registry_res.body)
+            -- do not send response on unauthorized error (status code 401)
+            -- otherwise we will not be able to display custom error page
+            if ngx.status != ngx.HTTP_UNAUTHORIZED then
+                ngx.header["content-type"] = "text/plain"
+                ngx.say(registry_err or registry_res.body)
+            end
             return ngx.exit(ngx.status)
         end
 
diff --git a/nginx/conf.d/include/location-skylink b/nginx/conf.d/include/location-skylink
@@ -36,6 +36,7 @@ proxy_read_timeout 600;
 proxy_set_header User-Agent: Sia-Agent;
 
 proxy_pass http://sia:9980/skynet/skylink/$skylink$path$is_args$args;
+proxy_intercept_errors on;
 
 log_by_lua_block {
     local skynet_account = require("skynet.account")
diff --git a/nginx/conf.d/server/server.api b/nginx/conf.d/server/server.api
@@ -23,6 +23,12 @@ rewrite ^/stats /skynet/stats permanent;
 rewrite ^/skynet/blacklist /skynet/blocklist permanent;
 rewrite ^/docs(?:/(.*))?$ https://sdk.skynetlabs.com/$1 permanent;
 
+error_page 401 /401.html;
+location = /401.html {
+    root /etc/nginx/conf.d/pages;
+    internal;
+}
+
 location / {
     include /etc/nginx/conf.d/include/cors;
 
diff --git a/nginx/conf.d/server/server.dnslink b/nginx/conf.d/server/server.dnslink
@@ -24,8 +24,12 @@ location / {
                     ngx.var.path = match_skylink[2] or "/"
                 else
                     ngx.status = (err and ngx.HTTP_INTERNAL_SERVER_ERROR) or res.status
-                    ngx.header["content-type"] = "text/plain"
-                    ngx.say(err or res.body)
+                    -- do not send response on unauthorized error (status code 401)
+                    -- otherwise we will not be able to display custom error page
+                    if ngx.status != ngx.HTTP_UNAUTHORIZED then
+                        ngx.header["content-type"] = "text/plain"
+                        ngx.say(err or res.body)
+                    end
                     ngx.exit(ngx.status)
                 end
             else
diff --git a/nginx/libs/skynet/account.lua b/nginx/libs/skynet/account.lua
@@ -43,11 +43,8 @@ function _M.get_auth_headers()
 end
 
 -- handle request exit when access to portal should be restricted to authenticated users only
-function _M.exit_access_unauthorized(message)
-    ngx.status = ngx.HTTP_UNAUTHORIZED
-    ngx.header["content-type"] = "text/plain"
-    ngx.say(message or "Portal operator restricted access to authenticated users only")
-    return ngx.exit(ngx.status)
+function _M.exit_access_unauthorized()
+    return ngx.exit(ngx.HTTP_UNAUTHORIZED)
 end
 
 -- handle request exit when access to portal should be restricted to subscription users only
diff --git a/nginx/libs/skynet/account.spec.lua b/nginx/libs/skynet/account.spec.lua
@@ -0,0 +1,18 @@
+local skynet_account = require('skynet.account')
+
+describe("exit_access_unauthorized", function()
+    before_each(function()
+        stub(ngx, "exit")
+    end)
+
+    after_each(function()
+        mock.revert(ngx)
+    end)
+
+    it("should call ngx.exit with status code 401", function()
+        skynet_account.exit_access_unauthorized()
+
+        -- expect exit called with ngx.HTTP_UNAUTHORIZED code 401
+        assert.stub(ngx.exit).was_called_with(401)
+    end)
+end)
diff --git a/nginx/templates/pages/401.html.template b/nginx/templates/pages/401.html.template
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html class="h-full">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- meta tags generated with https://metatags.io/ -->
+    <title>401: Unauthorized</title>
+    <meta name="title" content="401: Unauthorized" />
+    <meta
+      name="description"
+      content="You must be authenticated to access this content"
+    />
+    <!-- svg favicon encoded with https://yoksel.github.io/url-encoder/ -->
+    <link
+      rel="icon"
+      href="data:image/svg+xml, %3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='%2300C65E' %3E%3Ctitle%3ESkynet%3C/title%3E%3Cpath d='m-.0004 6.4602 21.3893 11.297c.561.2935.6633 1.0532.1999 1.4846h-.011a10.0399 10.0399 0 0 1-2.2335 1.5307c-6.912 3.4734-14.9917-1.838-14.5438-9.5605l2.8601 1.9752c.856 4.508 5.6187 7.1094 9.8742 5.3932zm8.6477 3.1509 14.3661 5.6785a.8704.8704 0 0 1 .5197 1.0466v.0182c-.1537.5377-.7668.7938-1.2575.5252zm5.2896-7.4375c2.7093-.2325 6.0946.7869 8.1116 3.3871 1.699 2.1951 2.0497 4.8772 1.9298 7.6465v-.007c-.0478.5874-.6494.9616-1.1975.745l-9.7652-3.8596 9.0656 2.4313a7.296 7.296 0 0 0-1.0677-4.5631c-2.9683-4.7678-9.9847-4.5344-12.6297.4201a7.5048 7.5048 0 0 0-.398.8831L5.5546 7.9614c.069-.1017.1417-.198.2144-.2962.1163-.2416.2417-.487.3798-.7268 1.6118-2.7911 4.3102-4.4338 7.1558-4.6973.2108-.0182.4215-.049.6323-.0672z' /%3E%3C/svg%3E"
+      type="image/svg+xml"
+    />
+    <!-- https://fonts.google.com/specimen/Sora -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Sora:wght@400;800&display=swap"
+      rel="stylesheet"
+    />
+    <!-- https://tailwindcss.com/docs/installation/play-cdn -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        theme: { extend: { fontFamily: { sans: ["Sora", "sans-serif"] } } },
+      };
+    </script>
+  </head>
+  <body class="h-full">
+    <div
+      class="bg-white min-h-full px-4 py-16 sm:px-6 sm:py-24 md:grid md:place-items-center lg:px-8"
+    >
+      <div class="max-w-max mx-auto">
+        <main class="sm:flex">
+          <svg
+            role="img"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+            height="88"
+            fill="#00C65E"
+          >
+            <title>Skynet</title>
+            <path
+              d="m-.0004 6.4602 21.3893 11.297c.561.2935.6633 1.0532.1999 1.4846h-.011a10.0399 10.0399 0 0 1-2.2335 1.5307c-6.912 3.4734-14.9917-1.838-14.5438-9.5605l2.8601 1.9752c.856 4.508 5.6187 7.1094 9.8742 5.3932zm8.6477 3.1509 14.3661 5.6785a.8704.8704 0 0 1 .5197 1.0466v.0182c-.1537.5377-.7668.7938-1.2575.5252zm5.2896-7.4375c2.7093-.2325 6.0946.7869 8.1116 3.3871 1.699 2.1951 2.0497 4.8772 1.9298 7.6465v-.007c-.0478.5874-.6494.9616-1.1975.745l-9.7652-3.8596 9.0656 2.4313a7.296 7.296 0 0 0-1.0677-4.5631c-2.9683-4.7678-9.9847-4.5344-12.6297.4201a7.5048 7.5048 0 0 0-.398.8831L5.5546 7.9614c.069-.1017.1417-.198.2144-.2962.1163-.2416.2417-.487.3798-.7268 1.6118-2.7911 4.3102-4.4338 7.1558-4.6973.2108-.0182.4215-.049.6323-.0672z"
+            />
+          </svg>
+          <div class="sm:ml-6">
+            <div class="sm:border-l sm:border-gray-200 sm:pl-6">
+              <h1
+                class="text-xl font-extrabold text-gray-900 tracking-tight sm:text-2xl"
+              >
+                You must be authenticated to access this content
+              </h1>
+              <p class="mt-1 text-base text-gray-500">
+                You're being redirected to the Log In page of this Skynet Portal
+              </p>
+              <p class="mt-2 text-sm text-gray-300">HTTP 401: Unauthorized</p>
+            </div>
+            <div
+              class="mt-10 flex space-x-3 sm:border-l sm:border-transparent sm:pl-6"
+            >
+              <p class="mt-1 text-sm text-gray-500">
+                If you're not redirected automatically,
+                <a
+                  href="https://account.${PORTAL_DOMAIN}/auth/login"
+                  class="text-[#00C65E]"
+                  >click here</a
+                >.
+              </p>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+    <script>
+      // prevent auto redirect if not on portal domain to allow local development
+      if (window.location.hostname.endsWith("${PORTAL_DOMAIN}")) {
+        setTimeout(function redirect() {
+          const encodedReturnTo = encodeURIComponent(window.location.href);
+          window.location.href = `https://account.${PORTAL_DOMAIN}/auth/login?return_to=${encodedReturnTo}`;
+        }, 5000); // redirect after 5 seconds
+      }
+    </script>
+  </body>
+</html>
