Add a live demo (#19)

* fix typo * add a live demo * add change set
toyamarinyon · Jun 30, 2022 · d788375 · d788375
1 parent a79308e
commit d788375
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 16 deletions.
diff --git a/.changeset/late-mangos-tickle.md b/.changeset/late-mangos-tickle.md
@@ -0,0 +1,6 @@
+---
+"webcrypt-session-example": patch
+"webcrypt-session": patch
+---
+
+Add a live demo
diff --git a/examples/cloudflare/src/index.ts b/examples/cloudflare/src/index.ts
@@ -26,6 +26,35 @@ const sessionScheme = z.object({
 const signInParamScheme = z.object({
   username: z.string(),
 });
+
+const welComePage = `<!DOCTYPE html>
+<body>
+  <h1>Hello WebCrypt-Session</h1>
+  <p>Please sign in first with <a href="/signIn">sign-in</a>.</p>
+</body>
+</html>`;
+
+const welComeUserPage = `<!DOCTYPE html>
+<body>
+  <h1>Hello WebCrypt-Session</h1>
+  <p>Welcome, <%= username %>!</p>
+  <p>You can sign out with clicking following button.</p>
+  <form action="/signOut" method="POST">
+  <button type="submit">Sign Out</button>
+  </form>
+</body>
+</html>`;
+
+const signInPage = `<!DOCTYPE html>
+<body>
+  <h1>Sign-In to WebCrypt-Session</h1>
+  <form action="signIn" method="POST">
+    <label>Username: <input type="text" name="username" required /></label>
+    <button type="submit">Sign in</button>
+  </form>
+</body>
+</html>`;
+
 export default {
   async fetch(
     request: Request,
@@ -40,40 +69,65 @@ export default {
       }
     );
     const url = new URL(request.url);
+    const baseUrl = `${url.protocol}//${url.host}`;
     if (url.pathname === "/signIn") {
-      if (request.method !== "POST") {
+      if (request.method === "GET") {
+        return new Response(signInPage, {
+          headers: {
+            "content-type": "text/html;charset=UTF-8",
+          },
+        });
+      } else if (request.method !== "POST") {
         return new Response(null, { status: 405 });
       }
       try {
-        const signInParam = signInParamScheme.parse(await request.json());
+        const formData = await request.formData();
+        const formObject = Object.fromEntries(formData.entries());
+        const signInParam = signInParamScheme.parse(formObject);
         await webCryptSession.save({
           username: signInParam.username,
         });
         const session = webCryptSession.toHeaderValue();
         if (session == null) {
           throw new Error();
         }
-        return new Response(`Hello ${signInParam.username}`, {
+        return new Response(null, {
+          status: 303,
           headers: {
+            location: baseUrl,
             "Set-Cookie": session,
           },
         });
-      } catch {
+      } catch (_) {
         return new Response(null, {
           status: 400,
         });
       }
+    } else if (url.pathname === "/signOut") {
+      return new Response(null, {
+        status: 303,
+        headers: {
+          location: baseUrl,
+          "Set-Cookie": "session=delete; expires=Thu, 01 Jan 1970 00:00:00 GMT",
+        },
+      });
     }
     const session = webCryptSession.username;
     if (session == null) {
-      return new Response(
-        "Please sign in first with http://localhost:8787/signIn"
-      );
+      return new Response(welComePage, {
+        headers: {
+          "content-type": "text/html;charset=UTF-8",
+        },
+      });
     }
-    return new Response(`Hello ${webCryptSession.username}`, {
-      headers: {
-        "Set-Cookie": session,
-      },
-    });
+    return new Response(
+      welComeUserPage.replace("<%= username %>", webCryptSession.username),
+      {
+        headers: {
+          "Set-Cookie": webCryptSession.toHeaderValue() ?? "",
+          "content-type": "text/html;charset=UTF-8",
+        },
+      }
+    );
   },
 };
diff --git a/examples/cloudflare/wrangler.toml b/examples/cloudflare/wrangler.toml
@@ -1,4 +1,4 @@
-name = "cloudflare"
+name = "webcrypt-session"
 main = "src/index.ts"
 compatibility_date = "2022-06-14"
 tsconfig = "./tsconfig.json"
diff --git a/packages/webcrypt-session/README.md b/packages/webcrypt-session/README.md
@@ -1,5 +1,7 @@
 # WebCrypt Session
 
+demo: https://webcrypt-session.sat0shi.workers.dev/
+
 _🛠 Stateless session utility using signed and encrypted cookies to store data. Works with WebCrypt API on Cloudflare Workers._
 
 ```ts
@@ -16,10 +18,13 @@ export default {
       request,
       {
         password: "IF4B#t69!WlX$uS22blaxDvzJJ%$vEh%",
-        cookie: "session",
       }
     );
-    return webCryptSession.response(`Hello ${webCryptSession.session.username}`)
+    return new Response(`Hello ${webCryptSession.username}`, {
+      headers: {
+        "Set-Cookie": webCryptSession.toHeaderValue(),
+      },
+    });
   },
 };
 ```

diff --git a/packages/webcrypt-session/src/adapters/trpc/index.ts b/packages/webcrypt-session/src/adapters/trpc/index.ts
@@ -38,7 +38,7 @@ export async function getWebCryptSession<T extends z.AnyZodObject>(
 
   // Block calls to WebCryptSession's internal functions
   // allowing access only to the scheme.
-  return (webCryptSession as unknown) as Exclude<
+  return (webCryptSession as unknown) as Omit<
     WebCryptSession<T>,
     "toHeaderValue"
   >;