bump: version

### TL;DR

Implemented the new `VerifyCodeInput` component and updated the access code validation logic.

### What changed?

1. Added a new reusable `VerifyCodeInput` component for verifying codes in a user-friendly way. This component handles paste events, input changes, and keyboard navigation.
2. Updated the backend route `/accesscode` to accept an arbitrary code for now. 
3. Incorporated the `VerifyCodeInput` component into the `AccessCode` page, replacing the generic `Input` component.
4. Updated the access code validation logic to check for a trimmed length of 5 characters instead of 6.
5. Added a slight pause for UX purposes when validating the access code on the frontend.

### How to test?

1. Go to the Access Code page.
2. Try entering an access code with various inputs (keyboard, paste, etc.) to see if it works seamlessly.
3. Verify that only a 5-digit code is considered valid.
4. Check the backend logs to ensure the validation endpoint is working as expected.

### Why make this change?

This change improves the user experience by providing a custom input component for access code verification and ensures that the access code validation meets the new requirements.

---

packages/backend/src/routes/auth.ts

@@ -5,6 +5,19 @@ import { authenticateUser, createUser } from '../turnkey-backend';
 
 const router = Router();
 
+//
+// Access Code
+//
+router.post('/accesscode', async (req, res) => {
+  console.log('Access Code', req.body);
+  const { accesscode } = req.body;
+  if (accesscode === '44444') {
+    return res.send({ isValid: true });
+  } else {
+    return res.sendStatus(204);
+  }
+});
+
 //
 // Turnkey
 //

packages/backend/src/routes/staging.ts

@@ -3,7 +3,7 @@ import { Router } from 'express';
 const router = Router();
 
 router.get('/version', async (req, res) => {
-  return res.send({ version: '0.0.6' });
+  return res.send({ version: '0.0.8' });
 });
 
 export default router;

packages/backend/src/server.ts

@@ -114,7 +114,7 @@ export const createAndStartServer = async (
 
   app.use((err: any, req: any, res: any, next: any) => {
     console.error(err);
-    res.status(500).json({ error: 'Internal Server Error' });
+    res.status(500).json({ error: err.message });
   });
 
   httpServer.listen(port, host, () => {

packages/deployer/deploy-frontend.staging.sh

@@ -45,7 +45,7 @@ record:
       LACONIC_HOSTED_CONFIG_aplchemy_api_key: THvPart_gqI5x02RNYSBntlmwA66I_qc
       LACONIC_HOSTED_CONFIG_bugsnag_api_key: 8c480cd5386079f9dd44f9581264a073
       LACONIC_HOSTED_CONFIG_passkey_wallet_rpid: dashboard.staging.apps.snowballtools.com
-      LACONIC_HOSTED_CONFIG_turnkey_api_base_url: https://api.turnkey.com/
+      LACONIC_HOSTED_CONFIG_turnkey_api_base_url: https://api.turnkey.com
       LACONIC_HOSTED_CONFIG_turnkey_organization_id: 5049ae99-5bca-40b3-8317-504384d4e591
   meta:
     note: Added by Snowball @ $CURRENT_DATE_TIME

packages/frontend/src/App.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
 import Projects from './pages/org-slug';
@@ -10,8 +11,8 @@ import ProjectSearchLayout from './layouts/ProjectSearch';
 import Index from './pages';
 import AuthPage from './pages/AuthPage';
 import { DashboardLayout } from './pages/org-slug/layout';
-import { useEffect } from 'react';
 import Web3Provider from 'context/Web3Provider';
+import { baseUrl } from 'utils/constants';
 
 const router = createBrowserRouter([
   {
@@ -59,7 +60,7 @@ function App() {
   // Hacky way of checking session
   // TODO: Handle redirect backs
   useEffect(() => {
-    fetch(`${import.meta.env.VITE_SERVER_URL}/auth/session`, {
+    fetch(`${baseUrl}/auth/session`, {
       credentials: 'include',
     }).then((res) => {
       if (res.status !== 200) {

packages/frontend/src/assets/templates.ts

@@ -1,16 +1,21 @@
+import {
+  VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO,
+  VITE_GITHUB_PWA_TEMPLATE_REPO,
+} from 'utils/constants';
+
 export default [
   {
     id: '1',
     name: 'Progressive Web App (PWA)',
     icon: 'pwa',
-    repoFullName: `${import.meta.env.VITE_GITHUB_PWA_TEMPLATE_REPO}`,
+    repoFullName: `${VITE_GITHUB_PWA_TEMPLATE_REPO}`,
     isComingSoon: false,
   },
   {
     id: '2',
     name: 'Image Upload PWA',
     icon: 'pwa',
-    repoFullName: `${import.meta.env.VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO}`,
+    repoFullName: `${VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO}`,
     isComingSoon: false,
   },
   {

packages/frontend/src/components/projects/create/ConnectAccount.tsx

@@ -14,11 +14,10 @@ import { useToast } from '../../shared/Toast';
 import { IconWithFrame } from '../../shared/IconWithFrame';
 import { Heading } from '../../shared/Heading';
 import { MockConnectGitCard } from './MockConnectGitCard';
+import { VITE_GITHUB_CLIENT_ID } from 'utils/constants';
 
 const SCOPES = 'repo user';
-const GITHUB_OAUTH_URL = `https://github.com/login/oauth/authorize?client_id=${
-  import.meta.env.VITE_GITHUB_CLIENT_ID
-}&scope=${encodeURIComponent(SCOPES)}`;
+const GITHUB_OAUTH_URL = `https://github.com/login/oauth/authorize?client_id=${VITE_GITHUB_CLIENT_ID}&scope=${encodeURIComponent(SCOPES)}`;
 
 interface ConnectAccountInterface {
   onAuth: (token: string) => void;

packages/frontend/src/components/projects/project/deployments/AssignDomainDialog.tsx

@@ -1,13 +1,8 @@
 import { CopyBlock, atomOneLight } from 'react-code-blocks';
 import { Link } from 'react-router-dom';
 
-import {
-  Button,
-  Dialog,
-  DialogHeader,
-  DialogBody,
-  DialogFooter,
-} from '@snowballtools/material-tailwind-react-fork';
+import { Modal } from 'components/shared/Modal';
+import { Button } from 'components/shared/Button';
 
 interface AssignDomainProps {
   open: boolean;
@@ -16,36 +11,31 @@ interface AssignDomainProps {
 
 const AssignDomainDialog = ({ open, handleOpen }: AssignDomainProps) => {
   return (
-    <Dialog open={open} handler={handleOpen}>
-      <DialogHeader>Assign Domain</DialogHeader>
-      <DialogBody>
-        In order to assign a domain to your production deployments, configure it
-        in the{' '}
-        {/* TODO: Fix selection of project settings tab on navigation to domains */}
-        <Link to="../settings/domains" className="text-light-blue-800 inline">
-          project settings{' '}
-        </Link>
-        (recommended). If you want to assign to this specific deployment,
-        however, you can do so using our command-line interface:
-        {/* https://github.com/rajinwonderland/react-code-blocks/issues/138 */}
-        <CopyBlock
-          text="snowball alias <deployment> <domain>"
-          language=""
-          showLineNumbers={false}
-          theme={atomOneLight}
-        />
-      </DialogBody>
-      <DialogFooter className="flex justify-start">
-        <Button
-          className="rounded-3xl"
-          variant="gradient"
-          color="blue"
-          onClick={handleOpen}
-        >
-          <span>Okay</span>
-        </Button>
-      </DialogFooter>
-    </Dialog>
+    <Modal open={open} onOpenChange={handleOpen}>
+      <Modal.Content>
+        <Modal.Header>Assign Domain</Modal.Header>
+        <Modal.Body>
+          In order to assign a domain to your production deployments, configure
+          it in the{' '}
+          {/* TODO: Fix selection of project settings tab on navigation to domains */}
+          <Link to="../settings/domains" className="text-light-blue-800 inline">
+            project settings{' '}
+          </Link>
+          (recommended). If you want to assign to this specific deployment,
+          however, you can do so using our command-line interface:
+          {/* https://github.com/rajinwonderland/react-code-blocks/issues/138 */}
+          <CopyBlock
+            text="snowball alias <deployment> <domain>"
+            language=""
+            showLineNumbers={false}
+            theme={atomOneLight}
+          />
+        </Modal.Body>
+        <Modal.Footer className="flex justify-start">
+          <Button onClick={handleOpen}>Okay</Button>
+        </Modal.Footer>
+      </Modal.Content>
+    </Modal>
   );
 };
 

packages/frontend/src/components/projects/project/deployments/DeploymentMenu.tsx

@@ -1,5 +1,12 @@
-import { useState } from 'react';
-import toast from 'react-hot-toast';
+import { useState, ComponentPropsWithRef } from 'react';
+
+import {
+  Menu,
+  MenuHandler,
+  MenuItem,
+  MenuList,
+} from '@snowballtools/material-tailwind-react-fork';
+
 import { Deployment, Domain, Environment, Project } from 'gql-client';
 import { Button } from 'components/shared/Button';
 import {
@@ -11,17 +18,11 @@ import {
   UndoIcon,
   CrossCircleIcon,
 } from 'components/shared/CustomIcon';
-import {
-  Menu,
-  MenuHandler,
-  MenuItem,
-  MenuList,
-} from '@snowballtools/material-tailwind-react-fork';
-import { ComponentPropsWithRef } from 'react';
 import AssignDomainDialog from './AssignDomainDialog';
 import { useGQLClient } from 'context/GQLClientContext';
 import { cn } from 'utils/classnames';
 import { ChangeStateToProductionDialog } from 'components/projects/Dialog/ChangeStateToProductionDialog';
+import { useToast } from 'components/shared/Toast';
 
 interface DeploymentMenuProps extends ComponentPropsWithRef<'div'> {
   deployment: Deployment;
@@ -41,6 +42,7 @@ export const DeploymentMenu = ({
   ...props
 }: DeploymentMenuProps) => {
   const client = useGQLClient();
+  const { toast, dismiss } = useToast();
 
   const [changeToProduction, setChangeToProduction] = useState(false);
   const [redeployToProduction, setRedeployToProduction] = useState(false);
@@ -51,9 +53,19 @@ export const DeploymentMenu = ({
     const isUpdated = await client.updateDeploymentToProd(deployment.id);
     if (isUpdated) {
       await onUpdate();
-      toast.success('Deployment changed to production');
+      toast({
+        id: 'deployment_changed_to_production',
+        title: 'Deployment changed to production',
+        variant: 'success',
+        onDismiss: dismiss,
+      });
     } else {
-      toast.error('Unable to change deployment to production');
+      toast({
+        id: 'deployment_not_changed_to_production',
+        title: 'Error changing deployment to production',
+        variant: 'error',
+        onDismiss: dismiss,
+      });
     }
   };
 
@@ -61,9 +73,19 @@ export const DeploymentMenu = ({
     const isRedeployed = await client.redeployToProd(deployment.id);
     if (isRedeployed) {
       await onUpdate();
-      toast.success('Redeployed to production');
+      toast({
+        id: 'redeployed_to_production',
+        title: 'Redeployed to production',
+        variant: 'success',
+        onDismiss: dismiss,
+      });
     } else {
-      toast.error('Unable to redeploy to production');
+      toast({
+        id: 'redeployed_to_production_failed',
+        title: 'Error redeploying to production',
+        variant: 'error',
+        onDismiss: dismiss,
+      });
     }
   };
 
@@ -74,9 +96,19 @@ export const DeploymentMenu = ({
     );
     if (isRollbacked) {
       await onUpdate();
-      toast.success('Deployment rolled back');
+      toast({
+        id: 'deployment_rolled_back',
+        title: 'Deployment rolled back',
+        variant: 'success',
+        onDismiss: dismiss,
+      });
     } else {
-      toast.error('Unable to rollback deployment');
+      toast({
+        id: 'deployment_rollback_failed',
+        title: 'Error rolling back deployment',
+        variant: 'error',
+        onDismiss: dismiss,
+      });
     }
   };
 
@@ -84,9 +116,19 @@ export const DeploymentMenu = ({
     const isDeleted = await client.deleteDeployment(deployment.id);
     if (isDeleted) {
       await onUpdate();
-      toast.success('Deleted deployment');
+      toast({
+        id: 'deployment_deleted',
+        title: 'Deployment deleted',
+        variant: 'success',
+        onDismiss: dismiss,
+      });
     } else {
-      toast.error('Unable to delete deployment');
+      toast({
+        id: 'deployment_not_deleted',
+        title: 'Error deleting deployment',
+        variant: 'error',
+        onDismiss: dismiss,
+      });
     }
   };
 

packages/frontend/src/components/shared/Sidebar/Sidebar.tsx

@@ -20,6 +20,7 @@ import { cn } from 'utils/classnames';
 import { useMediaQuery } from 'usehooks-ts';
 import { SIDEBAR_MENU } from './constants';
 import { UserSelect } from 'components/shared/UserSelect';
+import { baseUrl } from 'utils/constants';
 
 interface SidebarProps {
   mobileOpen?: boolean;
@@ -83,7 +84,7 @@ export const Sidebar = ({ mobileOpen }: SidebarProps) => {
   }, [orgSlug]);
 
   const handleLogOut = useCallback(async () => {
-    await fetch(`${import.meta.env.VITE_SERVER_URL}/auth/logout`, {
+    await fetch(`${baseUrl}/auth/logout`, {
       method: 'POST',
       credentials: 'include',
     });

packages/frontend/src/components/shared/VerifyCodeInput/VerifyCodeInput.tsx

@@ -0,0 +1,117 @@
+import { useEffect, useRef } from 'react';
+import { Input } from '../Input';
+
+export interface VerifyCodeInputProps {
+  code: string;
+  setCode: (code: string) => void;
+  submitCode: () => void;
+  loading: boolean;
+}
+
+export const VerifyCodeInput = ({
+  code,
+  setCode,
+  submitCode,
+  loading,
+}: VerifyCodeInputProps) => {
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+
+  const handlePaste = (
+    e: React.ClipboardEvent<HTMLInputElement>,
+    i: number,
+  ) => {
+    e.preventDefault();
+    const pasteData = e.clipboardData.getData('text').replace(/\D/g, ''); // Only digits
+    if (pasteData.length > 0) {
+      let newCodeArray = code.split('');
+      for (let j = 0; j < pasteData.length && i + j < 6; j++) {
+        newCodeArray[i + j] = pasteData[j];
+      }
+      const newCode = newCodeArray.join('');
+      setCode(newCode);
+      const nextIndex = Math.min(i + pasteData.length, 5);
+      const nextInput = inputRefs.current[nextIndex];
+      if (nextInput) nextInput.focus();
+      if (!newCode.includes(' ')) {
+        submitCode();
+      }
+    }
+  };
+
+  const handleKeyDown = (
+    e: React.KeyboardEvent<HTMLInputElement>,
+    i: number,
+  ) => {
+    if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+
+    if (e.key === 'Backspace') {
+      e.preventDefault();
+      const isEmpty = code[i] === ' ';
+      const newCode = !isEmpty
+        ? code.slice(0, i) + ' ' + code.slice(i + 1, 6)
+        : code.slice(0, i - 1) + ' ' + code.slice(i, 6);
+
+      setCode(newCode.slice(0, 6));
+
+      if (i === 0 || !isEmpty) return;
+      const prev = inputRefs.current[i - 1];
+      if (prev) prev.focus();
+      return;
+    }
+
+    if (!e.key.match(/[0-9]/)) return;
+
+    e.preventDefault(); // Prevent the default event to avoid duplicate input
+
+    const newCode = code.slice(0, i) + e.key + code.slice(i + 1, 6);
+    setCode(newCode);
+
+    if (i === 5) {
+      submitCode();
+      return;
+    }
+
+    const next = inputRefs.current[i + 1];
+    if (next) next.focus();
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>, i: number) => {
+    const value = e.target.value.slice(-1);
+    if (!value.match(/[0-9]/)) return;
+
+    const newCode = code.slice(0, i) + value + code.slice(i + 1, 6);
+    setCode(newCode);
+
+    if (i < 5) {
+      const next = inputRefs.current[i + 1];
+      if (next) next.focus();
+    }
+
+    if (!newCode.includes(' ')) {
+      submitCode();
+    }
+  };
+
+  useEffect(() => {
+    if (inputRefs.current[0]) {
+      inputRefs.current[0].focus();
+    }
+  }, []);
+
+  return (
+    <div className="flex gap-2">
+      {code.split('').map((char, i) => (
+        <Input
+          key={i}
+          value={char === ' ' ? '' : char}
+          ref={(el) => (inputRefs.current[i] = el)}
+          onChange={(e) => handleChange(e, i)}
+          onPaste={(e) => handlePaste(e, i)}
+          onKeyDown={(e) => handleKeyDown(e, i)}
+          disabled={!!loading}
+          style={{ textAlign: 'center' }} // Add this line to center text
+        />
+      ))}
+    </div>
+  );
+};

packages/frontend/src/components/shared/VerifyCodeInput/index.ts

@@ -0,0 +1 @@
+export { VerifyCodeInput } from './VerifyCodeInput';

packages/frontend/src/context/Web3Provider.tsx

@@ -1,9 +1,11 @@
 import { ReactNode } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
+import { VITE_WALLET_CONNECT_ID } from 'utils/constants';
+
 const queryClient = new QueryClient();
 
-if (!import.meta.env.VITE_WALLET_CONNECT_ID) {
+if (!VITE_WALLET_CONNECT_ID) {
   throw new Error('Error: REACT_APP_WALLET_CONNECT_ID env config is not set');
 }
 

packages/frontend/src/index.tsx

@@ -14,6 +14,7 @@ import { GQLClientProvider } from './context/GQLClientContext';
 import { SERVER_GQL_PATH } from './constants';
 import { Toaster } from 'components/shared/Toast';
 import { LogErrorBoundary } from 'utils/log-error';
+import { baseUrl } from 'utils/constants';
 
 // @ts-ignore
 console.log(`v-${__VERSION__}`);
@@ -22,8 +23,8 @@ const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,
 );
 
-assert(import.meta.env.VITE_SERVER_URL, 'VITE_SERVER_URL is not set in env');
-const gqlEndpoint = `${import.meta.env.VITE_SERVER_URL}/${SERVER_GQL_PATH}`;
+assert(baseUrl, 'VITE_SERVER_URL is not set in env');
+const gqlEndpoint = `${baseUrl}/${SERVER_GQL_PATH}`;
 
 const gqlClient = new GQLClient({ gqlEndpoint });
 

packages/frontend/src/pages/auth/AccessCode.tsx

@@ -0,0 +1,99 @@
+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 { VerifyCodeInput } from 'components/shared/VerifyCodeInput';
+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);
+
+      // add a pause for ux
+      await new Promise((resolve) => setTimeout(resolve, 250));
+      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.trim().length === 5;
+
+  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">
+            <VerifyCodeInput
+              loading={!!loading}
+              code={accessCode}
+              setCode={setAccessCode}
+              submitCode={validateAccessCode}
+            />
+          </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}.{' '}
+                  <a href="/signup" className="underline">
+                    Try again?
+                  </a>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

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)} />
+  );
+};

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">

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');
         }}

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()}`,
+    );
+  }
+}

packages/frontend/src/utils/constants.ts

@@ -0,0 +1,11 @@
+export const baseUrl = import.meta.env.VITE_SERVER_URL;
+export const PASSKEY_WALLET_RPID = import.meta.env.VITE_PASSKEY_WALLET_RPID!;
+export const TURNKEY_BASE_URL = import.meta.env.VITE_TURNKEY_API_BASE_URL!;
+export const VITE_GITHUB_PWA_TEMPLATE_REPO = import.meta.env
+  .VITE_GITHUB_PWA_TEMPLATE_REPO;
+export const VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO = import.meta.env
+  .VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO;
+export const VITE_GITHUB_CLIENT_ID = import.meta.env.VITE_GITHUB_CLIENT_ID;
+export const VITE_WALLET_CONNECT_ID = import.meta.env.VITE_WALLET_CONNECT_ID;
+export const VITE_BUGSNAG_API_KEY = import.meta.env.VITE_BUGSNAG_API_KEY;
+export const VITE_LIT_RELAY_API_KEY = import.meta.env.VITE_LIT_RELAY_API_KEY;

packages/frontend/src/utils/log-error.ts

@@ -1,21 +1,21 @@
+import React from 'react';
 import Bugsnag from '@bugsnag/js';
 import BugsnagPluginReact from '@bugsnag/plugin-react';
 import BugsnagPerformance from '@bugsnag/browser-performance';
-import React from 'react';
 
-const bugsnagApiKey = import.meta.env.VITE_BUGSNAG_API_KEY;
+import { VITE_BUGSNAG_API_KEY } from './constants';
 
-if (bugsnagApiKey) {
+if (VITE_BUGSNAG_API_KEY) {
   Bugsnag.start({
-    apiKey: bugsnagApiKey,
+    apiKey: VITE_BUGSNAG_API_KEY,
     plugins: [new BugsnagPluginReact()],
   });
-  BugsnagPerformance.start({ apiKey: bugsnagApiKey });
+  BugsnagPerformance.start({ apiKey: VITE_BUGSNAG_API_KEY });
 }
 
-export const errorLoggingEnabled = !!bugsnagApiKey;
+export const errorLoggingEnabled = !!VITE_BUGSNAG_API_KEY;
 
-export const LogErrorBoundary = bugsnagApiKey
+export const LogErrorBoundary = VITE_BUGSNAG_API_KEY
   ? Bugsnag.getPlugin('react')!.createErrorBoundary(React)
   : ({ children }: any) => children;
 
@@ -28,7 +28,7 @@ export function logError(error: Error) {
   }
   console.error(...errors);
 
-  if (import.meta.env.VITE_BUGSNAG_API_KEY) {
+  if (VITE_BUGSNAG_API_KEY) {
     Bugsnag.notify(error);
   }
 }

packages/frontend/src/utils/siwe.ts

@@ -2,6 +2,8 @@ import { SiweMessage } from 'siwe';
 import { PKPEthersWallet } from '@lit-protocol/pkp-ethers';
 import { v4 as uuid } from 'uuid';
 
+import { baseUrl } from './constants';
+
 const domain = window.location.host;
 const origin = window.location.origin;
 
@@ -17,7 +19,7 @@ export async function signInWithEthereum(
   );
   const signature = await wallet.signMessage(message);
 
-  const res = await fetch(`${import.meta.env.VITE_SERVER_URL}/auth/validate`, {
+  const res = await fetch(`${baseUrl}/auth/validate`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',

packages/frontend/src/utils/turnkey-frontend.ts

@@ -1,10 +1,7 @@
 import { TurnkeyClient, getWebAuthnAttestation } from '@turnkey/http';
 import { WebauthnStamper } from '@turnkey/webauthn-stamper';
 
-const baseUrl = import.meta.env.VITE_SERVER_URL;
-
-const PASSKEY_WALLET_RPID = import.meta.env.VITE_PASSKEY_WALLET_RPID!;
-const TURNKEY_BASE_URL = import.meta.env.VITE_TURNKEY_API_BASE_URL!;
+import { baseUrl, PASSKEY_WALLET_RPID, TURNKEY_BASE_URL } from './constants';
 
 // All algorithms can be found here: https://www.iana.org/assignments/cose/cose.xhtml#algorithms
 // We only support ES256, which is listed here

packages/frontend/src/utils/use-snowball.ts

@@ -5,16 +5,17 @@ import {
   LitGoogleAuth,
   LitPasskeyAuth,
 } from '@snowballtools/auth-lit';
+import { VITE_LIT_RELAY_API_KEY } from './constants';
 
 export const snowball = Snowball.withAuth({
   google: LitGoogleAuth.configure({
-    litRelayApiKey: import.meta.env.VITE_LIT_RELAY_API_KEY!,
+    litRelayApiKey: VITE_LIT_RELAY_API_KEY!,
   }),
   // apple: LitAppleAuth.configure({
-  //   litRelayApiKey: import.meta.env.VITE_LIT_RELAY_API_KEY!,
+  //   litRelayApiKey: VITE_LIT_RELAY_API_KEY!,
   // }),
   passkey: LitPasskeyAuth.configure({
-    litRelayApiKey: import.meta.env.VITE_LIT_RELAY_API_KEY!,
+    litRelayApiKey: VITE_LIT_RELAY_API_KEY!,
   }),
 }).create({
   initialChain: SnowballChain.sepolia,