Pass state param through auth process

src/app/extension/sign-in/page.tsx

@@ -9,19 +9,19 @@ import { DeepLink } from './DeepLink';
 export default async function Page(params: {
   searchParams: { state?: string };
 }) {
-  const { userId } = await auth();
+  const { state } = await params.searchParams;
 
-  if (!userId) {
-    redirect('/sign-in');
+  if (!state) {
+    redirect(`/sign-in`);
   }
 
-  const code = await getSignInToken(userId);
+  const { userId } = await auth();
+  const code = userId ? await getSignInToken(userId) : undefined;
 
   if (!code) {
-    redirect('/sign-in');
+    redirect(`/sign-in?state=${state}`);
   }
 
-  const { state = '' } = await params.searchParams;
   const searchParams = new URLSearchParams({ state, code });
   const path = `/auth/clerk/callback?${searchParams.toString()}`;
   const vsCodeUrl = new URL(path, Env.VSCODE_EXTENSION_BASE_URL);

src/app/sign-in/[[...sign-in]]/SignIn.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { useMemo } from 'react';
+import { useSearchParams } from 'next/navigation';
 import Link from 'next/link';
 import { useTheme } from 'next-themes';
 import { dark } from '@clerk/themes';
@@ -10,13 +12,22 @@ import { Logo } from '@/components/layout';
 export const SignIn = () => {
   const { resolvedTheme } = useTheme();
   const baseTheme = resolvedTheme === 'dark' ? dark : undefined;
+  const searchParams = useSearchParams();
+
+  const forceRedirectUrl = useMemo(() => {
+    const state = searchParams.get('state');
+    return state ? `/extension/sign-in?state=${state}` : undefined;
+  }, [searchParams]);
 
   return (
     <div className="flex flex-col gap-8 h-screen w-full items-center justify-center">
       <Link href="/">
         <Logo />
       </Link>
-      <ClerkSignIn appearance={{ baseTheme }} />
+      <ClerkSignIn
+        appearance={{ baseTheme }}
+        forceRedirectUrl={forceRedirectUrl}
+      />
     </div>
   );
 };

src/app/sign-up/[[...sign-up]]/SignUp.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { useMemo } from 'react';
+import { useSearchParams } from 'next/navigation';
 import Link from 'next/link';
 import { useTheme } from 'next-themes';
 import { dark } from '@clerk/themes';
@@ -10,13 +12,22 @@ import { Logo } from '@/components/layout';
 export const SignUp = () => {
   const { resolvedTheme } = useTheme();
   const baseTheme = resolvedTheme === 'dark' ? dark : undefined;
+  const searchParams = useSearchParams();
+
+  const forceRedirectUrl = useMemo(() => {
+    const state = searchParams.get('state');
+    return state ? `/extension/sign-in?state=${state}` : undefined;
+  }, [searchParams]);
 
   return (
     <div className="flex flex-col gap-8 h-screen w-full items-center justify-center">
       <Link href="/">
         <Logo />
       </Link>
-      <ClerkSignUp appearance={{ baseTheme }} />
+      <ClerkSignUp
+        appearance={{ baseTheme }}
+        forceRedirectUrl={forceRedirectUrl}
+      />
     </div>
   );
 };