feat: 5 digit code ui

## What changed?

This Pull Request introduces an access code validation feature to the authentication process. Changes encompass backend route for access code validation, new frontend components for handling access code input, and integration of the access code verification in the signup flow.

### Backend:
- Added POST `/accesscode` route in `auth.ts` for validating access codes.

### Frontend:
- Created `AccessCode` component for access code input and validation.
- Added `AccessSignUp` component that integrates access code verification before signup.
- Updated `SignUp` component to check for valid access code on mount.
- Modified `SnowballAuth` to use new `AccessSignUp` instead of `SignUp`.
- Added `verifyAccessCode` utility function for code verification API call.

## How to test?
1. Run the backend and frontend projects.
2. Navigate to the signup page. You should be prompted to enter an access code.
3. Enter the code `444444` and proceed. Any other code should display an error message.
4. Verify that valid access code routes to the signup component.

## Why make this change?

This change improves authentication by adding an extra layer of security through access code verification.

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