feat: nginx example (#8)

dirathea · Oct 22, 2024 · 989d5f5 · 989d5f5
1 parent 4c2a986
commit 989d5f5
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 21 deletions.
diff --git a/examples/nginx/docker-compose.yaml b/examples/nginx/docker-compose.yaml
@@ -0,0 +1,32 @@
+services:
+  auth:
+    build:
+      context: ../../.
+      dockerfile: Dockerfile
+    image: ghcr.io/dirathea/pasolo:v0.2.0
+    env_file:
+      - .env
+    environment:
+      STORE_DATADIR: /secret
+    ports:
+      - 8080
+    volumes:
+      - secret:/secret
+
+  app:
+    depends_on:
+      - auth
+      - target
+    image: nginx:stable
+    ports:
+      - 80
+    volumes:
+      - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro
+
+  target:
+    image: jmalloc/echo-server
+    expose:
+      - 8080
+
+volumes:
+  secret:
diff --git a/examples/nginx/nginx.conf b/examples/nginx/nginx.conf
@@ -0,0 +1,17 @@
+server {
+  listen 80;
+  server_name app.nginx.orb.local;
+
+  location /pasolo/validate {
+    internal;
+    proxy_set_header Cookie $http_cookie;
+    proxy_pass http://auth:8080/validate;
+  }
+
+  location / {
+    auth_request /pasolo/validate;
+    error_page 401 =403 https://auth.nginx.orb.local/login?rd=https://$host$request_uri;
+
+    proxy_pass http://target:8080/;
+  }
+}
diff --git a/frontend/app/routes/login.tsx b/frontend/app/routes/login.tsx
@@ -1,13 +1,14 @@
 import { startAuthentication } from "@simplewebauthn/browser";
 import { useNavigate } from "@remix-run/react";
+import { useState } from "react";
 
 export default function Login() {
   const navigate = useNavigate();
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const urlParams = new URLSearchParams(window.location.search);
+  const redirectUrl = urlParams.get("rd") || "/";
 
   async function login() {
-    const urlParams = new URLSearchParams(window.location.search);
-    const redirectUrl = urlParams.get("rd") || "/";
-
     const register = await fetch("/auth/login", {
       method: "GET",
     });
@@ -17,7 +18,11 @@ export default function Login() {
 
       // POST the response to the endpoint that calls
       // @simplewebauthn/server -> verifyRegistrationResponse()
-      const verificationResp = await fetch("/auth/login", {
+      const queryParams = new URLSearchParams({
+        rd: redirectUrl,
+      });
+      const verificationUrl = `/auth/login?${queryParams.toString()}`;
+      const verificationResp = await fetch(verificationUrl, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -27,9 +32,9 @@ export default function Login() {
 
       if (!verificationResp.ok) {
         throw new Error("Failed to verify login");
-      } else {
-        window.location.replace(redirectUrl);
       }
+
+      setIsLoggedIn(verificationResp.ok);
     } catch (error) {
       console.error(error);
       navigate("/register?rd=" + redirectUrl);
@@ -39,21 +44,30 @@ export default function Login() {
   return (
     <div className="flex items-center justify-center min-h-screen bg-inherit">
       <div className="p-8 rounded shadow-md w-full max-w-md flex justify-center">
-      <form
-        onSubmit={async (e) => {
-        e.preventDefault();
-        await login();
-        }}
-      >
-        <div className="flex justify-center">
-        <button
-          type="submit"
-          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
-        >
-          Login with passkey
-        </button>
-        </div>
-      </form>
+        {isLoggedIn ? (
+          <a
+            href={redirectUrl}
+            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+          >
+            Continue
+          </a>
+        ) : (
+          <form
+            onSubmit={async (e) => {
+              e.preventDefault();
+              await login();
+            }}
+          >
+            <div className="flex justify-center">
+              <button
+                type="submit"
+                className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+              >
+                Login with passkey
+              </button>
+            </div>
+          </form>
+        )}
       </div>
     </div>
   );