fix: improves SIWE session handling (#565)

Signed-off-by: Urban Vidovič <urbanfoundit@gmail.com> Co-authored-by: Urban Vidovič <urbanfoundit@gmail.com>
blockchain-lab-um · Feb 19, 2024 · 24f8dd4 · 24f8dd4
1 parent f834489
commit 24f8dd4
Show file tree

Hide file tree

Showing 10 changed files with 180 additions and 42 deletions.
diff --git a/.changeset/lucky-starfishes-occur.md b/.changeset/lucky-starfishes-occur.md
@@ -0,0 +1,5 @@
+---
+'@blockchain-lab-um/dapp': patch
+---
+
+Improves SIWE session handling.
diff --git a/.changeset/smart-poems-yawn.md b/.changeset/smart-poems-yawn.md
@@ -0,0 +1,5 @@
+---
+'@blockchain-lab-um/dapp': patch
+---
+
+Add loading skeleton on shared presentations page.
diff --git a/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/credentialPanel.tsx b/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/credentialPanel.tsx
@@ -78,9 +78,6 @@ const CredentialSubject = ({
             return (
               <>
                 <div className="flex flex-col space-y-0.5">
-                  <h2 className="dark:text-navy-blue-200 pr-2 font-bold text-gray-800">
-                    DID:
-                  </h2>
                   <div className="flex">
                     <DIDDisplay did={value} />
                   </div>
@@ -204,9 +201,6 @@ const CredentialPanel = ({ credential }: FormatedPanelProps) => {
                   {t('issuer')}
                 </h1>
                 <div className="flex flex-col space-y-0.5">
-                  <h2 className="dark:text-navy-blue-200 pr-2 font-bold text-gray-800">
-                    DID:
-                  </h2>
                   <div className="flex">
                     <DIDDisplay
                       did={

diff --git a/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/loading.tsx b/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/loading.tsx
@@ -0,0 +1,5 @@
+import SharedPresentationsSkeleton from '@/components/SharedPresentationsSkeleton';
+
+export default function Loading() {
+  return <SharedPresentationsSkeleton />;
+}
diff --git a/packages/dapp/src/app/[locale]/app/layout.tsx b/packages/dapp/src/app/[locale]/app/layout.tsx
@@ -32,9 +32,9 @@ export default async function AppLayout({
         <AppBottomBar />
         <QRCodeSessionProvider />
         <SignInModal />
+        <CookiesProvider />
       </WagmiProviderWrapper>
       <ToastWrapper />
-      <CookiesProvider />
     </>
   );
 }
diff --git a/packages/dapp/src/components/CookiesProvider/index.tsx b/packages/dapp/src/components/CookiesProvider/index.tsx
@@ -2,48 +2,47 @@
 
 import { useEffect } from 'react';
 import Cookies from 'js-cookie';
+import { useAccount } from 'wagmi';
 
+import { verifyToken } from '@/utils/verifyToken';
 import { useAuthStore } from '@/stores/authStore';
 
 export const CookiesProvider = () => {
-  const { isSignedIn, changeToken, changeIsSignedIn } = useAuthStore(
-    (state) => ({
-      isSignedIn: state.isSignedIn,
-      changeToken: state.changeToken,
-      changeIsSignedIn: state.changeIsSignedIn,
-    })
-  );
-
-  const verifyToken = async (token: string) => {
-    const response = await fetch('/api/supabase/verify', {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${token}`,
-      },
-    });
-
-    if (response.status !== 204) {
-      Cookies.remove('token');
-      changeToken('');
-      changeIsSignedIn(false);
-    }
+  const { changeToken, changeIsSignedIn } = useAuthStore((state) => ({
+    changeToken: state.changeToken,
+    changeIsSignedIn: state.changeIsSignedIn,
+  }));
 
-    changeToken(token);
-    changeIsSignedIn(true);
-  };
+  const { address } = useAccount();
 
   useEffect(() => {
-    if (isSignedIn) return;
+    // Return if user is not connected
+    if (!address) return;
 
-    const token = Cookies.get('token');
-    if (!token) return;
+    const token = Cookies.get(`token-${address}`);
+    if (!token) {
+      changeToken('');
+      changeIsSignedIn(false);
+      return;
+    }
 
-    verifyToken(token).catch((error) => {
-      Cookies.remove('token');
-      console.error(error);
-    });
-  }, []);
+    verifyToken(token)
+      .then((isVerified) => {
+        if (!isVerified) {
+          Cookies.remove(`token-${address}`);
+          changeToken('');
+          changeIsSignedIn(false);
+          return;
+        }
+
+        changeToken(token);
+        changeIsSignedIn(true);
+      })
+      .catch((error) => {
+        Cookies.remove(`token-${address}`);
+        console.error(error);
+      });
+  }, [address]);
 
   return null;
 };
diff --git a/packages/dapp/src/components/MetaMaskProvider/index.tsx b/packages/dapp/src/components/MetaMaskProvider/index.tsx
@@ -12,9 +12,13 @@ interface MetaMaskProviderProps {
 
 const MetaMaskProvider = ({ children }: MetaMaskProviderProps) => {
   const t = useTranslations('MetaMaskProvider');
+
+  // Local state
+  const [hasMetamask, setHasMetamask] = useState(false);
+
+  // Global state
   const { connectors } = useConnect();
   const { isConnected } = useAccount();
-  const [hasMetamask, setHasMetamask] = useState(false);
 
   useEffect(() => {
     const provider =

diff --git a/packages/dapp/src/components/SharedPresentationsSkeleton/index.tsx b/packages/dapp/src/components/SharedPresentationsSkeleton/index.tsx
@@ -0,0 +1,111 @@
+import { Pagination } from '@nextui-org/react';
+
+import { TextSkeleton } from '../Skeletons/TextSkeleton';
+
+export default function SharedPresentationsSkeleton() {
+  return (
+    <div className="flex w-full flex-1 items-start justify-center">
+      <div className="max-w-full flex-1 md:max-w-3xl">
+        <div className="dark:bg-navy-blue-800 h-full w-full rounded-3xl bg-white shadow-lg">
+          <div className="dark:from-navy-blue-700 dark:to-navy-blue-700 flex max-w-full flex-col-reverse items-center space-x-4 rounded-t-2xl bg-gradient-to-br from-pink-100 to-orange-100 px-10 pb-2 pt-6 sm:flex-row">
+            <div className="flex w-full">
+              <div className="flex flex-col space-y-4">
+                <div className="flex flex-col gap-1">
+                  <TextSkeleton className="h-[1em] w-[6em]" />
+                  <h1 className="font-ubuntu dark:text-orange-accent-dark text-left text-lg font-medium text-pink-500 sm:text-xl md:text-2xl lg:truncate">
+                    <div className="mt-2 flex items-center">
+                      <TextSkeleton className="h-[1em] w-[14em]" />
+                    </div>
+                  </h1>
+                </div>
+                <div className="flex flex-col gap-1">
+                  <TextSkeleton className="h-[1em] w-[8em]" />
+                  <TextSkeleton className="h-[1em] w-[5em]" />
+                </div>
+                <div className="flex flex-col">
+                  <TextSkeleton className="h-[1em] w-[8em]" />
+                </div>
+              </div>
+            </div>
+            <div className="flex w-full flex-1 justify-end space-x-1">
+              <div className="flex flex-col items-end gap-1">
+                <TextSkeleton className="h-[1.8em] w-[6em]" />
+                <TextSkeleton className="h-[1em] w-[4em]" />
+              </div>
+            </div>
+          </div>
+          <div className="px-4 pb-6">
+            <div className="ml-[14px] flex justify-start px-2">
+              <Pagination
+                loop
+                color="success"
+                total={1}
+                classNames={{
+                  wrapper:
+                    'space-x-2 pl-4 pr-6 pb-2 pt-1 rounded-none rounded-b-2xl bg-gradient-to-tr from-pink-100 to-orange-100 dark:from-navy-blue-700 dark:to-navy-blue-700',
+                  item: 'flex-nowrap w-5 h-5 text-black dark:text-navy-blue-200 bg-inherit shadow-none active:bg-inherit active:text-black dark:active:text-navy-blue-200 [&[data-hover=true]:not([data-active=true])]:bg-inherit',
+                  cursor:
+                    'w-5 h-5 rounded-full dark:bg-orange-accent-dark bg-pink-500 text-white dark:text-navy-blue-800',
+                }}
+              />
+            </div>
+            <div className="flex flex-col space-y-8">
+              <div className="items-cetner flex flex-col-reverse px-6 pt-6 sm:flex-row">
+                <div className="flex w-full flex-col gap-1 sm:w-11/12">
+                  <TextSkeleton className="h-[1em] w-[10em] p-1" />
+                  <TextSkeleton className="h-[1em] w-[16em] p-1" />
+                </div>
+                <div className="flex w-full flex-1 justify-end space-x-1">
+                  <div className="flex flex-col items-end gap-1">
+                    <TextSkeleton className="h-[1.8em] w-[6em]" />
+                    <TextSkeleton className="h-[1em] w-[4em]" />
+                  </div>
+                </div>
+              </div>
+              <div className="flex flex-col space-y-8 px-6 md:flex-row md:space-x-16 md:space-y-0">
+                <div className="flex w-full flex-col items-start space-y-2 md:max-w-[50%]">
+                  <TextSkeleton className="h-[1.3em] w-[5em]" />
+                  <div className="flex w-full flex-col items-start space-y-0.5 overflow-clip">
+                    <TextSkeleton className="h-[1em] w-[3em]" />
+                    <div className="text-md dark:text-navy-blue-300 w-full truncate font-normal text-gray-700">
+                      <TextSkeleton className="h-[1em] w-[7em]" />
+                    </div>
+                    <h2 className="dark:text-navy-blue-200 pr-2 font-bold capitalize text-gray-800">
+                      <TextSkeleton className="h-[1em] w-[3em]" />
+                    </h2>
+                    <div className="text-md dark:text-navy-blue-300 w-full truncate font-normal text-gray-700">
+                      <TextSkeleton className="h-[1em] w-[12em]" />
+                    </div>
+                  </div>
+                </div>
+                <div className="flex flex-1 flex-col">
+                  <div className="flex flex-col space-y-8">
+                    <div className="flex flex-col items-start justify-center space-y-2 ">
+                      <TextSkeleton className="h-[1.3em] w-[5em]" />
+                      <div className="flex flex-col space-y-0.5">
+                        <div className="flex flex-col gap-1">
+                          <TextSkeleton className="h-[1em] w-[3em]" />
+                          <TextSkeleton className="h-[1em] w-[12em]" />
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex flex-col items-start space-y-2">
+                      <TextSkeleton className="h-[1.3em] w-[5em]" />
+                      <div className="flex flex-col items-start gap-1 space-y-0.5">
+                        <TextSkeleton className="h-[1em] w-[10em]" />
+                        <TextSkeleton className="h-[1em] w-[10em]" />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="text-md dark:text-navy-blue-200 cursor-pointer px-6 font-medium text-gray-700">
+                <TextSkeleton className="h-[1em] w-[3em]" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/dapp/src/components/SignInModal/index.tsx b/packages/dapp/src/components/SignInModal/index.tsx
@@ -93,7 +93,7 @@ export const SignInModal = () => {
           // Set data
           changeToken(data.jwt);
           changeIsSignedIn(true);
-          Cookies.set('token', data.jwt);
+          Cookies.set(`token-${address}`, data.jwt);
 
           // Close modal and show toast
           changeIsSignInModalOpen(false);

diff --git a/packages/dapp/src/utils/verifyToken.ts b/packages/dapp/src/utils/verifyToken.ts
@@ -0,0 +1,15 @@
+export const verifyToken = async (token: string) => {
+  const response = await fetch('/api/supabase/verify', {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  if (response.status !== 204) {
+    return false;
+  }
+
+  return true;
+};