Automatically redirect user to project after Vercel Marketplace login

apps/studio/pages/sign-in-vercel-marketplace.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import toast from 'react-hot-toast'
 import * as Sentry from '@sentry/nextjs'
 
@@ -21,35 +21,41 @@ const SignInVercelMarketplace = () => {
     query: { vercel_id_token, vercel_resource_id },
   } = router
 
-  async function onSignInWithVercelMarketplace() {
-    if (isLoggedIn) {
-      await auth.signOut()
+  useEffect(() => {
+    if (!isReady) {
+      return
     }
 
-    try {
-      if (!vercel_id_token) {
-        throw new Error('missing required id_token query param')
+    async function onSignInWithVercelMarketplace() {
+      try {
+        if (!vercel_id_token) {
+          throw new Error('missing required id_token query param')
+        }
+
+        setLoading(true)
+        const { error } = await auth.signInWithIdToken({
+          token: vercel_id_token as string,
+          provider: 'vercel_marketplace',
+        })
+
+        if (error) {
+          throw error
+        }
+
+        setIsRedirecting(true)
+        router.push(vercel_resource_id ? `/project/${vercel_resource_id}` : `/projects`)
+      } catch (error: any) {
+        toast.error(`Failed to sign in via Vercel Marketplace: ${error.message}`)
+        Sentry.captureMessage(
+          '[CRITICAL] Failed to sign in via Vercel Marketplace: ' + error.message
+        )
+        setLoading(false)
+        setIsRedirecting(false)
       }
-
-      setLoading(true)
-      const { error } = await auth.signInWithIdToken({
-        token: vercel_id_token as string,
-        provider: 'vercel_marketplace',
-      })
-
-      if (error) {
-        throw error
-      }
-
-      setIsRedirecting(true)
-      router.push(vercel_resource_id ? `/project/${vercel_resource_id}` : `/projects`)
-    } catch (error: any) {
-      toast.error(`Failed to sign in via Vercel Marketplace: ${error.message}`)
-      Sentry.captureMessage('[CRITICAL] Failed to sign in via Vercel Marketplace: ' + error.message)
-      setLoading(false)
-      setIsRedirecting(false)
     }
-  }
+
+    onSignInWithVercelMarketplace()
+  }, [router, isReady, vercel_resource_id, vercel_id_token])
 
   return (
     <div className="relative mx-auto flex flex-1 w-full flex-col items-center justify-center space-y-6">
@@ -78,38 +84,7 @@ const SignInVercelMarketplace = () => {
       <div className="flex w-[480px] flex-col items-center justify-center space-y-3">
         <h4 className="text-lg">Continue to Supabase Dashboard</h4>
       </div>
-      {loading ? (
-        <p className="text-sm">Checking your access rights...</p>
-      ) : (
-        <div className="flex flex-col items-center space-x-4 space-y-4">
-          <Button
-            onClick={onSignInWithVercelMarketplace}
-            disabled={!vercel_id_token || isRedirecting}
-            loading={isRedirecting}
-          >
-            Login with Vercel Marketplace
-          </Button>
-          {isReady && !vercel_id_token && (
-            <p className="text-red-900 text-sm">An ID token is required to login</p>
-          )}
-        </div>
-      )}
-      <div className="sm:text-center">
-        <p className="text-xs text-foreground-lighter sm:mx-auto sm:max-w-sm">
-          By continuing, you agree to Supabase's{' '}
-          <Link href="https://supabase.com/terms" className="underline hover:text-foreground-light">
-            Terms of Service
-          </Link>{' '}
-          and{' '}
-          <Link
-            href="https://supabase.com/privacy"
-            className="underline hover:text-foreground-light"
-          >
-            Privacy Policy
-          </Link>
-          , and to receive periodic emails with updates.
-        </p>
-      </div>
+      {loading && <p className="text-sm">Checking your access rights...</p>}
     </div>
   )
 }