Add debug button for the authentication bug

apps/researcher/package.json

@@ -38,6 +38,7 @@
     "classnames": "2.3.2",
     "fetch-sparql-endpoint": "4.1.0",
     "iso-639-1-dir": "3.0.5",
+    "jwt-decode": "^4.0.0",
     "next": "14.0.3",
     "next-intl": "3.2.5",
     "openseadragon": "4.1.0",

apps/researcher/src/app/[locale]/communities/[slug]/page.tsx

@@ -27,6 +27,7 @@ import {
 } from '@colonial-collections/ui';
 import EditCommunityForm from './edit-community-form';
 import ToFilteredListButton from '@/components/to-filtered-list-button';
+import {DebugButton} from '@/app/[locale]/debug/frontend';
 
 interface Props {
   params: {
@@ -121,6 +122,11 @@ export default async function CommunityPage({params}: Props) {
               </SlideOutButton>
             </div>
           )}
+          {!isAdmin(memberships) && (
+            <div className="w-full flex justify-end -mb-8">
+              <DebugButton />
+            </div>
+          )}
           <div className="-mb-16 md:-mb-24 w-full flex justify-center">
             <div className="w-32 h-32 lg:w-48 lg:h-48 rounded-full overflow-hidden relative">
               <Image

apps/researcher/src/app/[locale]/debug/backend.ts

@@ -0,0 +1,24 @@
+'use server';
+
+import {auth} from '@clerk/nextjs';
+import {jwtDecode} from 'jwt-decode';
+
+const dateTimeFormat = new Intl.DateTimeFormat('nl', {
+  dateStyle: 'full',
+  timeStyle: 'long',
+});
+
+export async function backendLogAction() {
+  const {getToken, sessionId, session, userId} = await auth();
+  const token = await getToken();
+  const tokenDecoded = token ? jwtDecode(token) : null;
+  const date = dateTimeFormat.format(tokenDecoded?.exp * 1000);
+  console.log('DEBUG BUTTON CLICKED: BACKEND', {
+    date,
+    token,
+    tokenDecoded,
+    sessionId,
+    session,
+    userId,
+  });
+}

apps/researcher/src/app/[locale]/debug/frontend.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import {backendLogAction} from './backend';
+import {useAuth} from '@clerk/nextjs';
+import {jwtDecode} from 'jwt-decode';
+import {useNotifications} from '@colonial-collections/ui';
+
+const dateTimeFormat = new Intl.DateTimeFormat('nl', {
+  dateStyle: 'full',
+  timeStyle: 'long',
+});
+
+export function DebugButton() {
+  const {isSignedIn, getToken, sessionId} = useAuth();
+  const {addNotification} = useNotifications();
+
+  const onClick = async () => {
+    const token = await getToken();
+    const tokenDecoded = token ? jwtDecode(token) : null;
+    const date = dateTimeFormat.format(tokenDecoded?.exp * 1000);
+    console.log('DEBUG BUTTON CLICKED: FRONTEND', {
+      date,
+      isSignedIn,
+      token,
+      tokenDecoded,
+      sessionId,
+    });
+    backendLogAction();
+    addNotification({
+      id: 'debugButtonClicked',
+      message: 'Your data has been logged, please let Barbara know.',
+      type: 'success',
+    });
+  };
+  return (
+    <button
+      className="p-1 sm:py-2 sm:px-3 rounded-full text-xs bg-neutral-200 hover:bg-neutral-300 text-neutral-800 transition flex items-center gap-1"
+      onClick={onClick}
+    >
+      BUG report: I don&apos;t see edit buttons
+    </button>
+  );
+}

apps/researcher/src/app/[locale]/debug/page.tsx

@@ -0,0 +1,13 @@
+import {DebugButton} from './frontend';
+import {Notifications} from '@colonial-collections/ui';
+
+export default function DebugPage() {
+  return (
+    <div>
+      <h1>Debug</h1>
+      <Notifications />
+      <p>Debug page</p>
+      <DebugButton />
+    </div>
+  );
+}