feat: add support for sould studio

Author: thedaviddias

apps/web/components/auth/desktop-auth-relay.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+/**
+ * Relays OAuth callback codes to the Soul Studio desktop app via deep-link.
+ *
+ * When the URL contains `?source=desktop&code=...`, this component redirects
+ * to `soulstudio://auth-callback?code=...` so the desktop app can complete
+ * the Convex Auth flow using its locally stored verifier.
+ */
+export function DesktopAuthRelay() {
+  const [relaying, setRelaying] = useState(false)
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search)
+    const source = params.get('source')
+    const code = params.get('code')
+
+    if (source !== 'desktop' || !code) return
+
+    setRelaying(true)
+
+    // Redirect to the desktop app via deep-link
+    window.location.href = `soulstudio://auth-callback?code=${encodeURIComponent(code)}`
+  }, [])
+
+  if (!relaying) return null
+
+  return (
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-bg/95">
+      <div className="text-center space-y-3">
+        <p className="text-lg font-medium text-text">Returning to Soul Studio...</p>
+        <p className="text-sm text-text-secondary">
+          If the app doesn&apos;t open automatically,{' '}
+          <button
+            type="button"
+            className="underline hover:text-text"
+            onClick={() => {
+              const params = new URLSearchParams(window.location.search)
+              const code = params.get('code')
+              if (code) {
+                window.location.href = `soulstudio://auth-callback?code=${encodeURIComponent(code)}`
+              }
+            }}
+          >
+            click here
+          </button>
+          .
+        </p>
+      </div>
+    </div>
+  )
+}

apps/web/components/layout/providers.tsx

@@ -1,13 +1,14 @@
 'use client'
 
+import { DesktopAuthRelay } from '@/components/auth/desktop-auth-relay'
 import { KeyboardShortcutsProvider } from '@/components/shortcuts/keyboard-shortcuts-provider'
 import { OpenPanelIdentify } from '@/components/user/openpanel-identify'
 import { UserBootstrap } from '@/components/user/user-bootstrap'
 import { ConvexAuthProvider } from '@convex-dev/auth/react'
 import { ConvexReactClient } from 'convex/react'
 import { ThemeProvider as NextThemesProvider } from 'next-themes'
 import { NuqsAdapter } from 'nuqs/adapters/next/app'
-import type { ReactNode } from 'react'
+import { type ReactNode, useCallback } from 'react'
 import { Toaster } from 'sonner'
 
 // Convex client: use real URL when set; otherwise placeholder so ConvexProvider is always present
@@ -29,6 +30,14 @@ interface ProvidersProps {
  * - Keyboard shortcuts (power users)
  */
 export function Providers({ children }: ProvidersProps) {
+  // Skip automatic code handling when the OAuth callback is for the desktop app.
+  // The DesktopAuthRelay component will relay the code via deep-link instead.
+  const shouldHandleCode = useCallback(() => {
+    if (typeof window === 'undefined') return true
+    const params = new URLSearchParams(window.location.search)
+    return params.get('source') !== 'desktop'
+  }, [])
+
   const content = (
     <NuqsAdapter>
       <NextThemesProvider
@@ -55,7 +64,8 @@ export function Providers({ children }: ProvidersProps) {
   )
 
   return (
-    <ConvexAuthProvider client={convex}>
+    <ConvexAuthProvider client={convex} shouldHandleCode={shouldHandleCode}>
+      <DesktopAuthRelay />
       <UserBootstrap />
       <OpenPanelIdentify />
       {content}