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,