From 8038744dc15723e573b72c89a706a45c3b255075 Mon Sep 17 00:00:00 2001
From: Vivian Phung <dev+github@vivianphung.com>
Date: Fri, 21 Jun 2024 18:52:02 -0400
Subject: [PATCH] feat: access code

---
 packages/backend/src/routes/auth.ts           | 10 ++
 .../frontend/src/pages/auth/AccessCode.tsx    | 94 +++++++++++++++++++
 .../frontend/src/pages/auth/AccessSignUp.tsx  | 20 ++++
 packages/frontend/src/pages/auth/SignUp.tsx   | 24 +++++
 .../frontend/src/pages/auth/SnowballAuth.tsx  |  9 +-
 packages/frontend/src/utils/accessCode.ts     | 28 ++++++
 6 files changed, 181 insertions(+), 4 deletions(-)
 create mode 100644 packages/frontend/src/pages/auth/AccessCode.tsx
 create mode 100644 packages/frontend/src/pages/auth/AccessSignUp.tsx
 create mode 100644 packages/frontend/src/utils/accessCode.ts

diff --git a/packages/backend/src/routes/auth.ts b/packages/backend/src/routes/auth.ts
index 2c736310..90111485 100644
--- a/packages/backend/src/routes/auth.ts
+++ b/packages/backend/src/routes/auth.ts
@@ -5,6 +5,16 @@ import { authenticateUser, createUser } from '../turnkey-backend';
 
 const router = Router();
 
+router.post('/accesscode', async (req, res) => {
+  console.log('Access Code', req.body);
+  const { accesscode } = req.body;
+  if (accesscode === '444444') {
+    return res.send({ isValid: true });
+  } else {
+    return res.sendStatus(204);
+  }
+});
+
 //
 // Turnkey
 //
diff --git a/packages/frontend/src/pages/auth/AccessCode.tsx b/packages/frontend/src/pages/auth/AccessCode.tsx
new file mode 100644
index 00000000..e35bd893
--- /dev/null
+++ b/packages/frontend/src/pages/auth/AccessCode.tsx
@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+
+import { Button } from 'components/shared/Button';
+import {
+  ArrowRightCircleFilledIcon,
+  LoaderIcon,
+} from 'components/shared/CustomIcon';
+import { WavyBorder } from 'components/shared/WavyBorder';
+import { Input } from 'components/shared/Input';
+import { verifyAccessCode } from 'utils/accessCode';
+
+type AccessMethod = 'accesscode' | 'passkey';
+
+type Err = { type: AccessMethod; message: string };
+
+type AccessCodeProps = {
+  onCorrectAccessCode: () => void;
+};
+
+export const AccessCode: React.FC<AccessCodeProps> = ({
+  onCorrectAccessCode,
+}) => {
+  const [accessCode, setAccessCode] = useState('');
+  const [error, setError] = useState<Err | null>();
+  const [accessMethod, setAccessMethod] = useState<AccessMethod | false>(false);
+
+  async function validateAccessCode() {
+    setAccessMethod('accesscode');
+    try {
+      const isValidAccessCode = await verifyAccessCode(accessCode);
+      if (isValidAccessCode) {
+        localStorage.setItem('accessCode', accessCode);
+        onCorrectAccessCode();
+      } else {
+        setError({
+          type: 'accesscode',
+          message: 'Invalid access code',
+        });
+      }
+    } catch (err: any) {
+      setError({ type: 'accesscode', message: err.message });
+    }
+  }
+
+  const loading = accessMethod;
+  const isValidAccessCodeLength = accessCode.length === 6;
+
+  return (
+    <div>
+      <div className="self-stretch p-3 xs:p-6 flex-col justify-center items-center gap-5 flex">
+        <div className="self-stretch text-center text-sky-950 text-2xl font-medium font-display leading-tight">
+          Access Code
+        </div>
+      </div>
+      <WavyBorder className="self-stretch" variant="stroke" />
+      <div className="self-stretch p-4 xs:p-6 flex-col justify-center items-center gap-8 flex">
+        <div className="self-stretch flex-col gap-8 flex">
+          <div className="flex-col justify-start items-start gap-2 inline-flex">
+            <Input
+              value={accessCode}
+              onChange={(e) => setAccessCode(e.target.value)}
+              disabled={!!loading}
+            />
+          </div>
+          <Button
+            rightIcon={
+              loading && loading === 'accesscode' ? (
+                <LoaderIcon className="animate-spin" />
+              ) : (
+                <ArrowRightCircleFilledIcon height="16" />
+              )
+            }
+            onClick={() => {
+              validateAccessCode();
+            }}
+            variant={'secondary'}
+            disabled={!accessCode || !isValidAccessCodeLength || !!loading}
+          >
+            Submit
+          </Button>
+          {error && error.type === 'accesscode' && (
+            <div className="flex flex-col gap-3">
+              <div className="justify-center items-center gap-2 inline-flex">
+                <div className="text-red-500 text-sm">
+                  Error: {error.message}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/frontend/src/pages/auth/AccessSignUp.tsx b/packages/frontend/src/pages/auth/AccessSignUp.tsx
new file mode 100644
index 00000000..d91fb167
--- /dev/null
+++ b/packages/frontend/src/pages/auth/AccessSignUp.tsx
@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+
+import { AccessCode } from './AccessCode';
+import { SignUp } from './SignUp';
+
+type AccessSignUpProps = {
+  onDone: () => void;
+};
+
+export const AccessSignUp: React.FC<AccessSignUpProps> = ({ onDone }) => {
+  const [isValidAccessCode, setIsValidAccessCode] = useState<boolean>(
+    !!localStorage.getItem('accessCode'),
+  );
+
+  return isValidAccessCode ? (
+    <SignUp onDone={onDone} />
+  ) : (
+    <AccessCode onCorrectAccessCode={() => setIsValidAccessCode(true)} />
+  );
+};
diff --git a/packages/frontend/src/pages/auth/SignUp.tsx b/packages/frontend/src/pages/auth/SignUp.tsx
index 581e9595..f5564e46 100644
--- a/packages/frontend/src/pages/auth/SignUp.tsx
+++ b/packages/frontend/src/pages/auth/SignUp.tsx
@@ -21,6 +21,7 @@ import {
   turnkeySignin,
   turnkeySignup,
 } from 'utils/turnkey-frontend';
+import { verifyAccessCode } from 'utils/accessCode';
 
 type Provider = 'google' | 'github' | 'apple' | 'email';
 
@@ -111,6 +112,29 @@ export const SignUp = ({ onDone }: Props) => {
   const loading = provider;
   const emailValid = /.@./.test(email);
 
+  useEffect(() => {
+    const validateAccessCode = async () => {
+      const accessCode = localStorage.getItem('accessCode');
+      if (!accessCode) {
+        redirectToSignup();
+        return;
+      }
+
+      try {
+        await verifyAccessCode(accessCode);
+      } catch (err: any) {
+        redirectToSignup();
+      }
+    };
+
+    const redirectToSignup = () => {
+      localStorage.removeItem('accessCode');
+      window.location.href = '/signup';
+    };
+
+    validateAccessCode();
+  }, []);
+
   return (
     <div>
       <div className="self-stretch p-3 xs:p-6 flex-col justify-center items-center gap-5 flex">
diff --git a/packages/frontend/src/pages/auth/SnowballAuth.tsx b/packages/frontend/src/pages/auth/SnowballAuth.tsx
index 69cb7987..dd5abf1a 100644
--- a/packages/frontend/src/pages/auth/SnowballAuth.tsx
+++ b/packages/frontend/src/pages/auth/SnowballAuth.tsx
@@ -1,14 +1,15 @@
+import React, { useEffect, useState } from 'react';
+
 import { snowball } from 'utils/use-snowball';
 import { Login } from './Login';
-import { SignUp } from './SignUp';
-import { useEffect, useState } from 'react';
 import { Done } from './Done';
+import { AccessSignUp } from './AccessSignUp';
 
 type Screen = 'login' | 'signup' | 'success';
 
 const DASHBOARD_URL = '/';
 
-export const SnowballAuth = () => {
+export const SnowballAuth: React.FC = () => {
   const path = window.location.pathname;
   const [screen, setScreen] = useState<Screen>(
     path === '/login' ? 'login' : 'signup',
@@ -30,7 +31,7 @@ export const SnowballAuth = () => {
 
   if (screen === 'signup') {
     return (
-      <SignUp
+      <AccessSignUp
         onDone={() => {
           setScreen('success');
         }}
diff --git a/packages/frontend/src/utils/accessCode.ts b/packages/frontend/src/utils/accessCode.ts
new file mode 100644
index 00000000..d5e1b68f
--- /dev/null
+++ b/packages/frontend/src/utils/accessCode.ts
@@ -0,0 +1,28 @@
+import { baseUrl } from './constants';
+
+export async function verifyAccessCode(
+  accesscode: string,
+): Promise<boolean | null> {
+  const res = await fetch(`${baseUrl}/auth/accesscode`, {
+    method: 'POST',
+    body: JSON.stringify({
+      accesscode,
+    }),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    credentials: 'include',
+  });
+  // If API returns a non-empty 200, this is a valid access code.
+  if (res.status == 200) {
+    const isValid = (await res.json()).isValid as boolean;
+    console.log('isValid', isValid);
+    return isValid;
+  } else if (res.status === 204) {
+    return null;
+  } else {
+    throw new Error(
+      `Unexpected response from access code endpoint: ${res.status}: ${await res.text()}`,
+    );
+  }
+}