diff --git a/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/onboarding-connect.tsx b/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/onboarding-connect.tsx
index 90b54e50..ab798317 100644
--- a/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/onboarding-connect.tsx
+++ b/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
Hmm, something fishy is going on. Please reload the page.
;
@@ -43,11 +42,7 @@ const Connect = ({ project }: Props) => {
Credentials
-
+
{project.types.map((type) => {
const Component = {
@@ -56,7 +51,7 @@ const Connect = ({ project }: Props) => {
backend: ConnectBackend,
}[type];
- return ;
+ return ;
})}
diff --git a/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/page.tsx b/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/page.tsx
index c993d826..34783f4f 100644
--- a/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/page.tsx
+++ b/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 Hmm, something fishy is going on. Please reload the page.
;
}
- // set visible client secret from cookie
- if (clientSecret && project.clients[0]) {
- project.clients[0].secret = clientSecret;
- }
-
return ;
};
diff --git a/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/verify/page.tsx b/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/verify/page.tsx
index 4631620f..efe52290 100644
--- a/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/verify/page.tsx
+++ b/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 Hmm, something fishy is going on. Please reload the page.
;
}
- // set visible client secret from cookie
- if (clientSecret && project.clients[0]) {
- project.clients[0].secret = clientSecret;
- }
-
return ;
};
diff --git a/apps/dashboard/src/app/(onboarding)/onboarding/onboarding-tracking.tsx b/apps/dashboard/src/app/(onboarding)/onboarding/onboarding-tracking.tsx
index 7c5d210c..a34ff59c 100644
--- a/apps/dashboard/src/app/(onboarding)/onboarding/onboarding-tracking.tsx
+++ b/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`);
},
});
diff --git a/apps/dashboard/src/hooks/useClientSecret.ts b/apps/dashboard/src/hooks/useClientSecret.ts
new file mode 100644
index 00000000..50e430ad
--- /dev/null
+++ b/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(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;
+}
diff --git a/packages/trpc/src/routers/onboarding.ts b/packages/trpc/src/routers/onboarding.ts
index 5a8c9135..219703e7 100644
--- a/packages/trpc/src/routers/onboarding.ts
+++ b/packages/trpc/src/routers/onboarding.ts
@@ -69,11 +69,6 @@ export const onboardingRouter = createTRPCRouter({
},
});
- ctx.setCookie('onboarding_client_secret', secret, {
- maxAge: 60 * 60, // 1 hour
- path: '/',
- });
-
return {
...client,
secret,