use session storage for client secret during onboarding (fix #14)

apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/onboarding-connect.tsx

@@ -1,12 +1,10 @@
 'use client';
 
-import { useEffect } from 'react';
 import { ButtonContainer } from '@/components/button-container';
 import { InputWithLabel } from '@/components/forms/input-with-label';
-import { Alert } from '@/components/ui/alert';
 import { LinkButton } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { KeyIcon, LockIcon } from 'lucide-react';
+import { useClientSecret } from '@/hooks/useClientSecret';
+import { LockIcon } from 'lucide-react';
 
 import type { IServiceProjectWithClients } from '@openpanel/db';
 
@@ -23,6 +21,7 @@ type Props = {
 
 const Connect = ({ project }: Props) => {
   const client = project.clients[0];
+  const [secret] = useClientSecret();
 
   if (!client) {
     return <div>Hmm, something fishy is going on. Please reload the page.</div>;
@@ -43,11 +42,7 @@ const Connect = ({ project }: Props) => {
           Credentials
         </div>
         <InputWithLabel label="Client ID" disabled value={client.id} />
-        <InputWithLabel
-          label="Client Secret"
-          disabled
-          value={client.secret ?? 'unknown'}
-        />
+        <InputWithLabel label="Client Secret" disabled value={secret} />
       </div>
       {project.types.map((type) => {
         const Component = {
@@ -56,7 +51,7 @@ const Connect = ({ project }: Props) => {
           backend: ConnectBackend,
         }[type];
 
-        return <Component key={type} client={client} />;
+        return <Component key={type} client={{ ...client, secret }} />;
       })}
       <ButtonContainer>
         <div />

apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/page.tsx

@@ -17,17 +17,11 @@ const Connect = async ({ params: { projectId } }: Props) => {
     throw new Error('No organization found');
   }
   const project = await getProjectWithClients(projectId);
-  const clientSecret = cookies().get('onboarding_client_secret')?.value ?? null;
 
   if (!project) {
     return <div>Hmm, something fishy is going on. Please reload the page.</div>;
   }
 
-  // set visible client secret from cookie
-  if (clientSecret && project.clients[0]) {
-    project.clients[0].secret = clientSecret;
-  }
-
   return <OnboardingConnect project={project} />;
 };
 

apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/verify/page.tsx

@@ -27,17 +27,11 @@ const Verify = async ({ params: { projectId } }: Props) => {
       `SELECT * FROM events WHERE project_id = ${escape(projectId)} LIMIT 100`
     ),
   ]);
-  const clientSecret = cookies().get('onboarding_client_secret')?.value ?? null;
 
   if (!project) {
     return <div>Hmm, something fishy is going on. Please reload the page.</div>;
   }
 
-  // set visible client secret from cookie
-  if (clientSecret && project.clients[0]) {
-    project.clients[0].secret = clientSecret;
-  }
-
   return <OnboardingVerify project={project} events={events} />;
 };
 

apps/dashboard/src/app/(onboarding)/onboarding/onboarding-tracking.tsx

@@ -8,6 +8,7 @@ import { InputWithLabel } from '@/components/forms/input-with-label';
 import { Button } from '@/components/ui/button';
 import { Combobox } from '@/components/ui/combobox';
 import { Label } from '@/components/ui/label';
+import { useClientSecret } from '@/hooks/useClientSecret';
 import { api, handleError } from '@/trpc/client';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
@@ -33,10 +34,12 @@ const Tracking = ({
 }: {
   organizations: IServiceOrganization[];
 }) => {
+  const [, setSecret] = useClientSecret();
   const router = useRouter();
   const mutation = api.onboarding.project.useMutation({
     onError: handleError,
     onSuccess(res) {
+      setSecret(res.secret);
       router.push(`/onboarding/${res.projectId}/connect`);
     },
   });

apps/dashboard/src/hooks/useClientSecret.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+
+export const ONBOARDING_SECRET_KEY = 'onboarding.clientSecret';
+const DEFAULT_SECRET = '[CLIENT_SECRET]';
+
+export function useClientSecret() {
+  const [clientSecret, setClientSecret] = useState<string>(DEFAULT_SECRET);
+
+  useEffect(() => {
+    if (clientSecret && DEFAULT_SECRET !== clientSecret) {
+      sessionStorage.setItem(ONBOARDING_SECRET_KEY, clientSecret);
+    }
+  }, [clientSecret]);
+
+  useEffect(() => {
+    const clientSecret = sessionStorage.getItem(ONBOARDING_SECRET_KEY);
+    if (clientSecret) {
+      setClientSecret(clientSecret);
+    }
+  }, []);
+
+  return [clientSecret, setClientSecret] as const;
+}