Fix session management in backend

packages/backend/package.json

@@ -16,11 +16,11 @@
     "apollo-server-core": "^3.13.0",
     "apollo-server-express": "^3.13.0",
     "cookie-session": "^2.1.0",
-    "cors": "^2.8.5",
+    "cors": "2.8.5",
     "debug": "^4.3.1",
     "express": "^4.18.2",
     "express-async-errors": "^3.1.1",
-    "express-session": "^1.18.0",
+    "express-session": "1.18.0",
     "fs-extra": "^11.2.0",
     "graphql": "^16.8.1",
     "luxon": "^3.4.4",
@@ -51,7 +51,7 @@
   },
   "devDependencies": {
     "@types/cookie-session": "^2.0.49",
-    "@types/express-session": "^1.17.10",
+    "@types/express-session": "1.17.10",
     "@types/fs-extra": "^11.0.4",
     "better-sqlite3": "^9.2.2",
     "copyfiles": "^2.4.1",

packages/backend/src/routes/auth.ts

@@ -69,7 +69,6 @@ router.post('/validate', async (req, res) => {
     signature,
   });
 
-  console.log("VALIDATE CALL",message, signature )
   if (!success) {
     return res.send({ success, error: 'SIWE verifcation failed' } );
   }
@@ -90,7 +89,6 @@ router.post('/validate', async (req, res) => {
     req.session.address = user.id;
     req.session.chainId = data.chainId;
   }
-  console.log("VALIDATE CALL FINISHED", req.session)
 
   res.send({ success });
 });

packages/backend/src/server.ts

@@ -8,7 +8,7 @@ import {
   ApolloServerPluginLandingPageLocalDefault,
   AuthenticationError,
 } from 'apollo-server-core';
-import cookieSession from 'cookie-session';
+import session from 'express-session';
 
 import { TypeSource } from '@graphql-tools/utils';
 import { makeExecutableSchema } from '@graphql-tools/schema';
@@ -62,7 +62,6 @@ export const createAndStartServer = async (
       }
 
       const user = await service.getUser(address);
-
       return { user };
     },
     plugins: [
@@ -81,20 +80,26 @@ export const createAndStartServer = async (
     }),
   );
 
+  const sessionOptions: session.SessionOptions = {
+    secret: secret,
+    resave: false,
+    saveUninitialized: true,
+    cookie: {
+      secure: new URL(appOriginUrl).protocol === 'https:',
+      // 23 hours (less than 24 hours to avoid sessionSigs expiration issues)
+      maxAge: 23 * 60 * 60 * 1000,
+      domain: domain || undefined,
+      sameSite: new URL(appOriginUrl).protocol === 'https:' ? 'none' : 'lax',
+    }
+  };
+
   if (trustProxy) {
     // trust first proxy
     app.set('trust proxy', 1);
   }
 
   app.use(
-    cookieSession({
+    session(sessionOptions)
-      secret: secret,
-      secure: new URL(appOriginUrl).protocol === 'https:',
-      // 23 hours (less than 24 hours to avoid sessionSigs expiration issues)
-      maxAge: 23 * 60 * 60 * 1000,
-      sameSite: new URL(appOriginUrl).protocol === 'https:' ? 'none' : 'lax',
-      domain: domain || undefined,
-    }),
   );
 
   server.applyMiddleware({

packages/frontend/src/App.tsx

@@ -50,28 +50,24 @@ const router = createBrowserRouter([
     path: '/login',
     element: <AuthPage />,
   },
-  {
-    path: '/signup',
-    element: <AuthPage />,
-  },
 ]);
 
 function App() {
   // Hacky way of checking session
   // TODO: Handle redirect backs
-  // useEffect(() => {
+  useEffect(() => {
-  //   fetch(`${baseUrl}/auth/session`, {
+    fetch(`${baseUrl}/auth/session`, {
-  //     credentials: 'include',
+      credentials: 'include',
-  //   }).then((res) => {
+    }).then((res) => {
-  //     if (res.status !== 200) {
+      if (res.status !== 200) {
-  //       localStorage.clear();
+        localStorage.clear();
-  //       const path = window.location.pathname;
+        const path = window.location.pathname;
-  //       if (path !== '/login' && path !== '/signup') {
+        if (path !== '/login') {
-  //         window.location.pathname = '/login';
+          window.location.pathname = '/login';
-  //       }
+        }
-  //     }
+      }
-  //   });
+    });
-  // }, []);
+  }, []);
 
   return (
     <Web3Provider>

packages/frontend/src/context/Web3Provider.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, Suspense } from 'react';
 import { SiweMessage, generateNonce } from 'siwe';
 import { WagmiProvider } from 'wagmi';
 import { arbitrum, mainnet } from 'wagmi/chains';
@@ -12,18 +12,17 @@ import type {
 } from '@web3modal/core';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
-// if (!process.env.VITE_WALLET_CONNECT_ID) {
+// TODO: Use environment variable
-//   throw new Error('Error: VITE_WALLET_CONNECT_ID env config is not set');
-// }
 const WALLET_CONNECT_ID="d37f5a2f09d22f5e3ccaff4bbc93d37c"
 const queryClient = new QueryClient();
 const axiosInstance = axios.create({
-  baseURL: 'http://127.0.0.1:8000',
+  // TODO: Use environment variable
-  // headers: {
+  baseURL: 'http://localhost:8000',
-  //   'Content-Type': 'application/json',
+  headers: {
-  //   'Access-Control-Allow-Origin': '*',
+    'Content-Type': 'application/json',
-  // },
+    'Access-Control-Allow-Origin': '*',
-  // withCredentials: true,
+  },
+  withCredentials: true,
 });
 const metadata = {
   name: 'Web3Modal',
@@ -78,13 +77,12 @@ const siweConfig = createSIWEConfig({
     }
   },
   signOut: async () => {
-    // try {
+    try {
-    //   const { success } = (await axiosInstance.post('/auth/logout')).data;
+      const { success } = (await axiosInstance.post('/auth/logout')).data;
-    //   return success;
+      return success;
-    // } catch (error) {
+    } catch (error) {
-    //   return false;
+      return false;
-    // }
+    }
-    return false
   },
   onSignOut: () => {
     window.location.href = '/login';

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

@@ -1,101 +1,6 @@
-import { Button } from 'components/shared/Button';
-import {
-  ArrowRightCircleFilledIcon,
-  GithubIcon,
-  LinkIcon,
-  LoaderIcon,
-  QuestionMarkRoundFilledIcon,
-} from 'components/shared/CustomIcon';
-import { GoogleIcon } from 'components/shared/CustomIcon/GoogleIcon';
-import { DotBorder } from 'components/shared/DotBorder';
 import { WavyBorder } from 'components/shared/WavyBorder';
-import { useEffect, useState } from 'react';
-import { CreatePasskey } from './CreatePasskey';
-import { AppleIcon } from 'components/shared/CustomIcon/AppleIcon';
-import { KeyIcon } from 'components/shared/CustomIcon/KeyIcon';
-import { useToast } from 'components/shared/Toast';
-import { Link } from 'react-router-dom';
-import { PKPEthersWallet } from '@lit-protocol/pkp-ethers';
-import { signInWithEthereum } from 'utils/siwe';
-import { useSnowball } from 'utils/use-snowball';
-import { logError } from 'utils/log-error';
-
-// type Provider = 'google' | 'github' | 'apple' | 'email' | 'passkey';
-
-type Props = {
-  onDone: () => void;
-};
-
-export const Login = ({ onDone }: Props) => {
-  // const snowball = useSnowball();
-  // const [error, setError] = useState<string>('');
-  // const [provider, setProvider] = useState<Provider | false>(false);
-
-  // const loading = snowball.auth.state.loading && provider;
-  // const loading = provider;
-  // const { toast } = useToast();
-
-  console.log(">>ondone", onDone)
-  // if (provider === 'email') {
-  //   return <CreatePasskey onDone={onDone} />;
-  // }
-
-  // async function handleSigninRedirect() {
-  //   let wallet: PKPEthersWallet | undefined;
-  //   const { google } = snowball.auth;
-  //   if (google.canHandleOAuthRedirectBack()) {
-  //     setProvider('google');
-  //     console.log('Handling google redirect back');
-  //     try {
-  //       await google.handleOAuthRedirectBack();
-  //       // @ts-ignore
-  //       wallet = await google.getEthersWallet();
-  //       // @ts-ignore
-  //       const result = await signInWithEthereum(1, 'login', wallet);
-  //       if (result.error) {
-  //         setError(result.error);
-  //         setProvider(false);
-  //         wallet = undefined;
-  //         logError(new Error(result.error));
-  //         return;
-  //       }
-  //     } catch (err: any) {
-  //       setError(err.message);
-  //       logError(err);
-  //       setProvider(false);
-  //       return;
-  //     }
-  //   }
-    // if (apple.canHandleOAuthRedirectBack()) {
-    //   setProvider('apple');
-    //   console.log('Handling apple redirect back');
-    //   try {
-    //     await apple.handleOAuthRedirectBack();
-    //     wallet = await apple.getEthersWallet();
-    //     const result = await signInWithEthereum(1, 'login', wallet);
-    //     if (result.error) {
-    //       setError(result.error);
-    //       setProvider(false);
-    //       wallet = undefined;
-    //       return;
-    //     }
-    //   } catch (err: any) {
-    //     setError(err.message);
-    //     console.log(err.message, err.name, err.details);
-    //     setProvider(false);
-    //     return;
-    //   }
-    // }
-
-    // if (wallet) {
-    //   window.location.pathname = '/';
-    // }
-  // }
-
-  // useEffect(() => {
-  //   handleSigninRedirect();
-  // }, []);
 
+export const Login = () => {
   return (
     <div>
       <div className="self-stretch p-3 xs:p-6 flex-col justify-center items-center gap-5 flex">
@@ -106,161 +11,8 @@ export const Login = ({ onDone }: Props) => {
       <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 p-5 bg-slate-50 rounded-xl shadow flex-col justify-center items-center gap-6 flex"> */}
-          {/* <div className="self-stretch flex-col justify-center items-center gap-4 flex">
-            <KeyIcon />
-            <div className="self-stretch flex-col justify-center items-center gap-2 flex">
-              <div className="self-stretch text-center text-sky-950 text-lg font-medium font-display leading-normal">
-                Got a Passkey?
-              </div>
-              <div className="self-stretch text-center text-slate-600 text-sm font-normal font-['Inter'] leading-tight">
-                Use it to sign in securely without using a password.
-              </div>
-            </div>
-          </div> */}
-          {/* <div className="self-stretch justify-center items-stretch xxs:items-center gap-3 flex flex-col xxs:flex-row"> */}
-            {/* <Button
-              as="a"
-              leftIcon={<QuestionMarkRoundFilledIcon />}
-              variant={'tertiary'}
-              target="_blank"
-              href="https://safety.google/authentication/passkey/"
-            >
-              Learn more
-            </Button> */}
-            {/* <Button
-              rightIcon={
-                loading && loading === 'passkey' ? (
-                  <LoaderIcon className="animate-spin" />
-                ) : (
-                  <ArrowRightCircleFilledIcon height="16" />
-                )
-              }
-              className="flex-1"
-              disabled={!!loading}
-              onClick={async () => {
-                setProvider('passkey');
-              }}
-            >
-              Sign In with Passkey
-            </Button> */}
-          {/* </div> */}
-
-          {/* <div className="h-5 justify-center items-center gap-2 inline-flex">
-            <div className="text-center text-slate-600 text-sm font-normal font-['Inter'] leading-tight">
-              Lost your passkey?
-            </div>
-            <div className="justify-center items-center gap-1.5 flex">
-              <button className="text-sky-950 text-sm font-normal font-['Inter'] underline leading-tight">
-                Recover account
-              </button>
-              <LinkIcon />
-            </div>
-          </div> */}
-        {/* </div> */}
-
-        {/* <div className="self-stretch justify-start items-center gap-8 inline-flex">
-          <DotBorder className="flex-1" />
-          <div className="text-center text-slate-400 text-xs font-normal font-['JetBrains Mono'] leading-none">
-            OR
-          </div>
-          <DotBorder className="flex-1" />
-        </div> */}
-
         <div className="self-stretch flex-col justify-center  items-center gap-3 flex">
         <w3m-button />
-          {/* <Button
-            leftIcon={<GoogleIcon />}
-            rightIcon={
-              loading && loading === 'google' ? (
-                <LoaderIcon className="animate-spin" />
-              ) : null
-            }
-            onClick={() => {
-              setProvider('google');
-              // snowball.auth.google.startOAuthRedirect();
-            }}
-            className="flex-1 self-stretch"
-            variant={'tertiary'}
-            disabled={!!loading}
-          >
-            Continue with Google
-          </Button> */}
-
-          {/* <Button
-            leftIcon={<GithubIcon />}
-            rightIcon={
-              loading && loading === 'github' ? (
-                <LoaderIcon className="animate-spin" />
-              ) : null
-            }
-            onClick={async () => {
-              setProvider('github');
-              // await new Promise((resolve) => setTimeout(resolve, 800));
-              // setProvider(false);
-              // toast({
-              //   id: 'coming-soon',
-              //   title: 'Sign-in with GitHub is coming soon!',
-              //   variant: 'info',
-              //   onDismiss() {},
-              // });
-            }}
-            className="flex-1 self-stretch"
-            variant={'tertiary'}
-            disabled={!!loading}
-          >
-            Continue with GitHub
-          </Button> */}
-
-          {/* <Button
-            leftIcon={<AppleIcon />}
-            rightIcon={
-              loading && loading === 'apple' ? (
-                <LoaderIcon className="animate-spin text-white" />
-              ) : null
-            }
-            onClick={async () => {
-              setProvider('apple');
-              // snowball.auth.apple.startOAuthRedirect();
-              // await new Promise((resolve) => setTimeout(resolve, 800));
-              // setProvider(false);
-              // toast({
-              //   id: 'coming-soon',
-              //   title: 'Sign-in with Apple is coming soon!',
-              //   variant: 'info',
-              //   onDismiss() {},
-              // });
-            }}
-            className={`flex-1 self-stretch border-black enabled:bg-black text-white ${
-              loading && loading === 'apple' ? 'disabled:bg-black' : ''
-            }`}
-            variant={'tertiary'}
-            disabled={!!loading}
-          >
-            Continue with Apple
-          </Button> */}
-        </div>
-
-        <div className="flex flex-col gap-3">
-          {/* {error && (
-            <div className="justify-center items-center gap-2 inline-flex">
-              <div className="text-red-500 text-sm">Error: {error}</div>
-            </div>
-          )} */}
-
-          {/* <div className="h-5 justify-center items-center gap-2 inline-flex">
-            <div className="text-center text-slate-600 text-sm font-normal font-['Inter'] leading-tight">
-              Don't have an account?
-            </div>
-            <div className="justify-center items-center gap-1.5 flex">
-              <Link
-                to="/signup"
-                className="text-sky-950 text-sm font-normal font-['Inter'] underline leading-tight"
-              >
-                Sign up now
-              </Link>
-            </div>
-          </div> */}
         </div>
       </div>
     </div>

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

@@ -40,11 +40,7 @@ export const SnowballAuth: React.FC = () => {
   }
   if (screen === 'login') {
     return (
-      <Login
+      <Login />
-        onDone={() => {
-          setScreen('success');
-        }}
-      />
     );
   }
   if (screen === 'success') {

yarn.lock

@@ -7495,10 +7495,10 @@
     "@types/range-parser" "*"
     "@types/send" "*"
 
-"@types/express-session@^1.17.10":
+"@types/express-session@1.17.10":
-  version "1.18.0"
+  version "1.17.10"
-  resolved "https://registry.yarnpkg.com/@types/express-session/-/express-session-1.18.0.tgz#7c6f25c3604b28d6bc08a2e3929997bbc7672fa2"
+  resolved "https://registry.yarnpkg.com/@types/express-session/-/express-session-1.17.10.tgz#3a9394f1f314a4c657af3fb1cdb52f00fc207fd2"
-  integrity sha512-27JdDRgor6PoYlURY+Y5kCakqp5ulC0kmf7y+QwaY+hv9jEFuQOThgkjyA53RP3jmKuBsH5GR6qEfFmvb8mwOA==
+  integrity sha512-U32bC/s0ejXijw5MAzyaV4tuZopCh/K7fPoUDyNbsRXHvPSeymygYD1RFL99YOLhF5PNOkzswvOTRaVHdL1zMw==
   dependencies:
     "@types/express" "*"
 
@@ -10416,7 +10416,7 @@ core-util-is@~1.0.0:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
   integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
 
-cors@^2.8.5:
+cors@2.8.5, cors@^2.8.5:
   version "2.8.5"
   resolved "https://registry.yarnpkg.com/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29"
   integrity sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==
@@ -11760,7 +11760,7 @@ express-async-errors@^3.1.1:
   resolved "https://registry.yarnpkg.com/express-async-errors/-/express-async-errors-3.1.1.tgz#6053236d61d21ddef4892d6bd1d736889fc9da41"
   integrity sha512-h6aK1da4tpqWSbyCa3FxB/V6Ehd4EEB15zyQq9qe75OZBp0krinNKuH4rAY+S/U/2I36vdLAUFSjQJ+TFmODng==
 
-express-session@^1.18.0:
+express-session@1.18.0:
   version "1.18.0"
   resolved "https://registry.yarnpkg.com/express-session/-/express-session-1.18.0.tgz#a6ae39d9091f2efba5f20fc5c65a3ce7c9ce16a3"
   integrity sha512-m93QLWr0ju+rOwApSsyso838LQwgfs44QtOP/WBiwtAgPIo/SAh1a5c6nn2BR6mFNZehTpqKDESzP+fRHVbxwQ==