@@ -0,0 +1,37 @@ 
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+pnpm-lock.yaml
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

@@ -0,0 +1,40 @@ 
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/pages/api-reference/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn-pages-router) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/pages/building-your-application/deploying) for more details.

@@ -0,0 +1,32 @@ 
+import React from "react";
+import Link from "next/link";
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+const Layout: React.FC<LayoutProps> = ({ children }) => {
+  return (
+    <div>
+      <nav className="bg-gray-800 text-white p-4">
+        <ul className="flex space-x-4">
+          <li>
+            <Link href="/">Home</Link>
+          </li>
+          <li>
+            <Link href="/register">Register</Link>
+          </li>
+          <li>
+            <Link href="/login">Login</Link>
+          </li>
+          <li>
+            <Link href="/protected">Protected</Link>
+          </li>
+        </ul>
+      </nav>
+      <main className="p-4">{children}</main>
+    </div>
+  );
+};
+
+export default Layout;

@@ -0,0 +1,64 @@ 
+import React, { createContext, useState, useEffect, useCallback } from "react";
+
+interface User {
+  id: string;
+  name: string;
+  displayName: string;
+}
+
+interface AuthContextType {
+  isAuthenticated: boolean;
+  user: User | null;
+  loading: boolean;
+  refreshAuth: () => void;
+}
+
+export const AuthContext = createContext<AuthContextType>({
+  isAuthenticated: false,
+  user: null,
+  loading: true,
+  refreshAuth: () => {},
+});
+
+export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const checkAuth = useCallback(async () => {
+    setLoading(true);
+    try {
+      const resp = await fetch("http://localhost:8080/me", {
+        credentials: "include",
+      });
+      if (resp.ok) {
+        const userData = await resp.json();
+        setIsAuthenticated(true);
+        setUser(userData);
+      } else {
+        setIsAuthenticated(false);
+        setUser(null);
+      }
+    } catch (err) {
+      console.error(err);
+      setIsAuthenticated(false);
+      setUser(null);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    checkAuth();
+  }, [checkAuth]);
+
+  return (
+    <AuthContext.Provider
+      value={{ isAuthenticated, user, loading, refreshAuth: checkAuth }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};

@@ -0,0 +1,8 @@ 
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  reactStrictMode: true,
+};
+
+export default nextConfig;

@@ -0,0 +1,27 @@ 
+{
+  "name": "web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "base64url": "^3.0.1",
+    "next": "15.0.3",
+    "react": "19.0.0-rc-66855b96-20241106",
+    "react-dom": "19.0.0-rc-66855b96-20241106"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.3",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

@@ -0,0 +1,14 @@ 
+import "@/styles/globals.css";
+import type { AppProps } from "next/app";
+import Layout from "@/components/Layout";
+import { AuthProvider } from "@/contexts/AuthContext";
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <AuthProvider>
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
+    </AuthProvider>
+  );
+}

@@ -0,0 +1,13 @@ 
+import { Html, Head, Main, NextScript } from "next/document";
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body className="antialiased">
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

@@ -0,0 +1,13 @@ 
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+
+type Data = {
+  name: string;
+};
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>,
+) {
+  res.status(200).json({ name: "John Doe" });
+}

@@ -0,0 +1,12 @@ 
+import React from "react";
+
+const HomePage: React.FC = () => {
+  return (
+    <div className="text-center">
+      <h1 className="text-2xl font-bold">Welcome to the Home Page</h1>
+      <p className="mt-4">Use the navigation bar to register or login.</p>
+    </div>
+  );
+};
+
+export default HomePage;

@@ -0,0 +1,126 @@ 
+import React, { useState, useContext } from "react";
+import { bufferToBase64url, base64urlToBuffer } from "../utils/webauthn";
+import { AuthContext } from "../contexts/AuthContext";
+
+const LoginPage: React.FC = () => {
+  const [username, setUsername] = useState("");
+  const [message, setMessage] = useState("");
+  const { refreshAuth } = useContext(AuthContext);
+
+  const handleLogin = async () => {
+    setMessage("Starting login...");
+
+    try {
+      // Step 1: Begin Login
+      const beginResp = await fetch("http://localhost:8080/login/begin", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ username }),
+        credentials: "include",
+      });
+
+      if (!beginResp.ok) {
+        const error = await beginResp.text();
+        throw new Error(error);
+      }
+
+      const response = await beginResp.json();
+      const publicKeyOptions = response.publicKey.publicKey;
+      const userID = response.userID;
+
+      // Convert options to proper format
+      publicKeyOptions.challenge = base64urlToBuffer(
+        publicKeyOptions.challenge,
+      );
+      if (publicKeyOptions.allowCredentials) {
+        publicKeyOptions.allowCredentials =
+          publicKeyOptions.allowCredentials.map(
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (cred: any) => ({
+              id: base64urlToBuffer(cred.id),
+              type: cred.type,
+            }),
+          );
+      }
+
+      // Add explicit authenticator selection options
+      publicKeyOptions.authenticatorSelection = {
+        requireResidentKey: false,
+        userVerification: "preferred",
+      };
+
+      // Step 2: Get Assertion with timeout
+      const assertion = (await navigator.credentials.get({
+        publicKey: publicKeyOptions,
+        signal: AbortSignal.timeout(60000),
+      })) as PublicKeyCredential;
+
+      // Step 3: Prepare Data to Send to Server
+      const assertionData = {
+        id: assertion.id,
+        rawId: bufferToBase64url(assertion.rawId),
+        type: assertion.type,
+        response: {
+          clientDataJSON: bufferToBase64url(assertion.response.clientDataJSON),
+          authenticatorData: bufferToBase64url(
+            (assertion.response as AuthenticatorAssertionResponse)
+              .authenticatorData,
+          ),
+          signature: bufferToBase64url(
+            (assertion.response as AuthenticatorAssertionResponse).signature,
+          ),
+          userHandle: bufferToBase64url(
+            (assertion.response as AuthenticatorAssertionResponse).userHandle!,
+          ),
+        },
+      };
+
+      // Step 4: Finish Login
+      const finishResp = await fetch(
+        `http://localhost:8080/login/finish?userID=${encodeURIComponent(userID)}`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(assertionData),
+          credentials: "include",
+        },
+      );
+
+      if (!finishResp.ok) {
+        const error = await finishResp.text();
+        console.error("Detailed error:", error);
+      }
+
+      setMessage("Login successful!");
+      refreshAuth();
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (error: any) {
+      console.error("Detailed error:", error);
+      setMessage("Login failed: " + error.message);
+    }
+  };
+
+  return (
+    <div className="max-w-md mx-auto">
+      <h1 className="text-2xl font-bold mb-4">Login</h1>
+      <div className="mb-4">
+        <label className="block">Username:</label>
+        <input
+          className="w-full border p-2"
+          type="text"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+        />
+      </div>
+      <button
+        className="bg-blue-500 text-white px-4 py-2"
+        onClick={handleLogin}
+      >
+        Login
+      </button>
+      {message && <p className="mt-4">{message}</p>}
+    </div>
+  );
+};
+
+export default LoginPage;

@@ -0,0 +1,29 @@ 
+import React, { useContext } from "react";
+import { AuthContext } from "../contexts/AuthContext";
+
+const ProtectedPage: React.FC = () => {
+  const { isAuthenticated, user, loading } = useContext(AuthContext);
+
+  if (loading) {
+    return <p>Loading...</p>;
+  }
+
+  if (!isAuthenticated || !user) {
+    return (
+      <div>
+        <h1 className="text-2xl font-bold mb-4">Access Denied</h1>
+        <p>You are not logged in.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-4">Protected Page</h1>
+      <p>Welcome, {user.displayName}!</p>
+      <p>Your user ID is: {user.id}</p>
+    </div>
+  );
+};
+
+export default ProtectedPage;

@@ -0,0 +1,131 @@ 
+import React, { useState } from "react";
+import { bufferToBase64url, base64urlToBuffer } from "../utils/webauthn";
+
+const RegisterPage: React.FC = () => {
+  const [username, setUsername] = useState("");
+  const [displayName, setDisplayName] = useState("");
+  const [message, setMessage] = useState("");
+
+  const handleRegister = async () => {
+    setMessage("Starting registration...");
+
+    try {
+      // Step 1: Begin Registration
+      const beginResp = await fetch("http://localhost:8080/register/begin", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ username, displayName }),
+        credentials: "include",
+      });
+
+      if (!beginResp.ok) {
+        const errorText = await beginResp.text();
+        try {
+          const errorJson = JSON.parse(errorText);
+          throw new Error(errorJson.message || errorText);
+        } catch {
+          throw new Error(errorText);
+        }
+      }
+
+      const response = await beginResp.json();
+      const publicKeyOptions = response.publicKey.publicKey;
+      const userID = response.userID;
+
+      // Convert options to proper format
+      publicKeyOptions.user.id = base64urlToBuffer(publicKeyOptions.user.id);
+      publicKeyOptions.challenge = base64urlToBuffer(
+        publicKeyOptions.challenge,
+      );
+      publicKeyOptions.excludeCredentials = (
+        publicKeyOptions.excludeCredentials || []
+      )
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        .map((cred: any) => ({
+          id: base64urlToBuffer(cred.id),
+          type: cred.type,
+        }));
+
+      // Step 2: Create Credential
+      const credential = (await navigator.credentials.create({
+        publicKey: publicKeyOptions,
+      })) as PublicKeyCredential;
+
+      // Step 3: Prepare Data to Send to Server
+      const credentialData = {
+        id: credential.id,
+        rawId: bufferToBase64url(credential.rawId),
+        type: credential.type,
+        response: {
+          clientDataJSON: bufferToBase64url(credential.response.clientDataJSON),
+          attestationObject: bufferToBase64url(
+            (credential.response as AuthenticatorAttestationResponse)
+              .attestationObject,
+          ),
+        },
+      };
+
+      // Step 4: Finish Registration
+      const finishResp = await fetch(
+        `http://localhost:8080/register/finish?userID=${encodeURIComponent(userID)}`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(credentialData),
+          credentials: "include",
+        },
+      );
+
+      if (!finishResp.ok) {
+        const errorText = await finishResp.text();
+        try {
+          const errorJson = JSON.parse(errorText);
+          throw new Error(errorJson.message || errorText);
+        } catch {
+          throw new Error(errorText);
+        }
+      }
+
+      setMessage("Registration successful!");
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (error: any) {
+      console.error(error);
+      setMessage("Registration failed: " + error.message);
+    }
+  };
+
+  return (
+    <div className="max-w-md mx-auto">
+      <h1 className="text-2xl font-bold mb-4">Register</h1>
+      <div className="mb-4">
+        <label className="block">Username:</label>
+        <input
+          className="w-full border p-2"
+          type="text"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+        />
+      </div>
+      <div className="mb-4">
+        <label className="block">Display Name:</label>
+        <input
+          className="w-full border p-2"
+          type="text"
+          value={displayName}
+          onChange={(e) => setDisplayName(e.target.value)}
+        />
+      </div>
+      <button
+        className="bg-blue-500 text-white px-4 py-2"
+        onClick={handleRegister}
+      >
+        Register
+      </button>
+      {message && <p className="mt-4">{message}</p>}
+    </div>
+  );
+};
+
+export default RegisterPage;

@@ -0,0 +1,8 @@ 
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

@@ -0,0 +1,1 @@ 
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

@@ -0,0 +1,1 @@ 
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

@@ -0,0 +1,1 @@ 
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

@@ -0,0 +1,1 @@ 
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

@@ -0,0 +1,1 @@ 
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

@@ -0,0 +1,9 @@ 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+    color: var(--foreground);
+    background: var(--background);
+    font-family: Arial, Helvetica, sans-serif;
+}

@@ -0,0 +1,18 @@ 
+import type { Config } from "tailwindcss";
+
+export default {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;

@@ -0,0 +1,22 @@ 
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

@@ -0,0 +1,20 @@ 
+export function bufferToBase64url(buffer: ArrayBuffer): string {
+  const bytes = new Uint8Array(buffer);
+  let binary = "";
+  bytes.forEach((b) => (binary += String.fromCharCode(b)));
+  return btoa(binary)
+    .replace(/\+/g, "-")
+    .replace(/\//g, "_")
+    .replace(/=+$/, "");
+}
+
+export function base64urlToBuffer(baseurl64: string): ArrayBuffer {
+  const padding = "=".repeat((4 - (baseurl64.length % 4)) % 4);
+  const base64 = (baseurl64 + padding).replace(/\-/g, "+").replace(/_/g, "/");
+  const rawData = atob(base64);
+  const outputArray = new Uint8Array(rawData.length);
+  for (let i = 0; i < rawData.length; ++i) {
+    outputArray[i] = rawData.charCodeAt(i);
+  }
+  return outputArray.buffer;
+}