Handle staging clerk redirect for comfydeploy

CLERK_REDIRECT_FIX.md

@@ -1,86 +1,154 @@
 # Clerk Redirect Fix - COM-1575
 
 ## Issue
-Users were being redirected to `comfydeploy.com` instead of `app.comfydeploy.com` after signing up with Clerk.
+Users were being redirected to `comfydeploy.com` instead of `app.comfydeploy.com` after signing up with Clerk. Additionally, the staging environment (`staging.app.comfydeploy.com`) needed proper redirect handling.
 
 ## Root Cause
 The Clerk configuration in the frontend application was missing explicit redirect URLs for after sign-up and sign-in actions. Without these configured, Clerk was using default behavior which redirected to the base domain instead of the app subdomain.
 
 ## Solution Implemented
 
-### 1. Updated ClerkProvider Configuration
-Modified `src/main.tsx` to include proper redirect URLs:
+### 1. Dynamic Environment-Based Redirects
+Modified `src/main.tsx` to dynamically determine redirect URLs based on the current hostname:
+
+```typescript
+// Dynamically determine the base URL for redirects based on current hostname
+const getRedirectBaseUrl = () => {
+  if (typeof window !== 'undefined') {
+    const hostname = window.location.hostname;
+    const protocol = window.location.protocol;
+
+    // For staging environment
+    if (hostname === 'staging.app.comfydeploy.com') {
+      return `${protocol}//staging.app.comfydeploy.com`;
+    }
+
+    // For production environment
+    if (hostname === 'app.comfydeploy.com') {
+      return `${protocol}//app.comfydeploy.com`;
+    }
+
+    // For local development, use relative paths
+    return '';
+  }
+  return '';
+};
+
+const baseUrl = getRedirectBaseUrl();
+const defaultRedirectPath = '/workflows';
+
+// Build redirect URLs - use environment variables if provided, otherwise use dynamic URLs
+const afterSignUpUrl = process.env.NEXT_PUBLIC_CLERK_SIGN_UP_FORCE_REDIRECT_URL || 
+  (baseUrl ? `${baseUrl}${defaultRedirectPath}` : defaultRedirectPath);
+
+const afterSignInUrl = process.env.NEXT_PUBLIC_CLERK_SIGN_IN_FORCE_REDIRECT_URL || 
+  (baseUrl ? `${baseUrl}${defaultRedirectPath}` : defaultRedirectPath);
+```
+
+### 2. Updated ClerkProvider Configuration
+The ClerkProvider now uses the dynamically determined URLs:
 
 ```typescript
 <ClerkProvider
   // ... other props
-  afterSignUpUrl={process.env.NEXT_PUBLIC_CLERK_SIGN_UP_FORCE_REDIRECT_URL || "/workflows"}
-  afterSignInUrl={process.env.NEXT_PUBLIC_CLERK_SIGN_IN_FORCE_REDIRECT_URL || "/workflows"}
-  signUpFallbackRedirectUrl={process.env.NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL}
-  signInFallbackRedirectUrl={process.env.NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL}
+  afterSignUpUrl={afterSignUpUrl}
+  afterSignInUrl={afterSignInUrl}
+  signUpFallbackRedirectUrl={signUpFallbackRedirectUrl}
+  signInFallbackRedirectUrl={signInFallbackRedirectUrl}
 >
 ```
 
-### 2. Added Environment Variables
-Added new environment variables to `.env.example`:
+### 3. Environment Variables (Optional Override)
+The system still supports environment variable overrides for specific deployments:
 
 ```env
-# Clerk redirect URLs - ensure users are redirected to the correct domain after auth
+# Clerk redirect URLs - these will override the dynamic detection if set
 NEXT_PUBLIC_CLERK_SIGN_UP_FORCE_REDIRECT_URL=https://app.comfydeploy.com/workflows
 NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=https://app.comfydeploy.com/workflows
 NEXT_PUBLIC_CLERK_SIGN_IN_FORCE_REDIRECT_URL=https://app.comfydeploy.com/workflows
 NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=https://app.comfydeploy.com/workflows
 ```
 
-### 3. Updated Build Configurations
-Updated both `vite.config.ts` and `rsbuild.config.ts` to include the new environment variables in the build process.
+## Supported Environments
+
+### Production (`app.comfydeploy.com`)
+- Automatically redirects to: `https://app.comfydeploy.com/workflows`
+- No additional configuration required
+
+### Staging (`staging.app.comfydeploy.com`)
+- Automatically redirects to: `https://staging.app.comfydeploy.com/workflows`
+- No additional configuration required
+
+### Local Development
+- Uses relative paths: `/workflows`
+- Works with any local development setup
+
+### Custom Environments
+- Can be overridden using environment variables
+- Useful for custom deployments or testing environments
 
 ## Deployment Steps Required
 
-### 1. Set Environment Variables
-In your production deployment environment, set the following environment variables:
+### 1. Verify Clerk Dashboard Settings
+In the Clerk dashboard (https://dashboard.clerk.com), ensure that **Allowed redirect URLs** include:
+
+**For Production:**
+- `https://app.comfydeploy.com/workflows`
+- `https://app.comfydeploy.com/*` (if you want to allow any path)
+
+**For Staging:**
+- `https://staging.app.comfydeploy.com/workflows`
+- `https://staging.app.comfydeploy.com/*` (if you want to allow any path)
+
+### 2. Deploy and Test
+1. Deploy the updated code
+2. Test the sign-up flow on both staging and production to ensure users are redirected correctly
+3. Test the sign-in flow to ensure the same behavior
+
+### 3. Optional: Set Environment Variables (Override)
+Only set these if you need to override the automatic detection:
 
 ```bash
+# Production override (usually not needed)
 NEXT_PUBLIC_CLERK_SIGN_UP_FORCE_REDIRECT_URL=https://app.comfydeploy.com/workflows
 NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=https://app.comfydeploy.com/workflows
 NEXT_PUBLIC_CLERK_SIGN_IN_FORCE_REDIRECT_URL=https://app.comfydeploy.com/workflows
 NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=https://app.comfydeploy.com/workflows
-```
-
-### 2. Verify Clerk Dashboard Settings
-In the Clerk dashboard (https://dashboard.clerk.com), ensure that:
-
-1. **Allowed redirect URLs** include:
-   - `https://app.comfydeploy.com/workflows`
-   - `https://app.comfydeploy.com/*` (if you want to allow any path)
-
-2. **Sign-up redirect URL** is set to:
-   - `https://app.comfydeploy.com/workflows`
 
-3. **Sign-in redirect URL** is set to:
-   - `https://app.comfydeploy.com/workflows`
-
-### 3. Deploy and Test
-1. Deploy the updated code with the new environment variables
-2. Test the sign-up flow to ensure users are redirected to `app.comfydeploy.com/workflows`
-3. Test the sign-in flow to ensure the same behavior
+# Staging override (usually not needed)
+NEXT_PUBLIC_CLERK_SIGN_UP_FORCE_REDIRECT_URL=https://staging.app.comfydeploy.com/workflows
+NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=https://staging.app.comfydeploy.com/workflows
+NEXT_PUBLIC_CLERK_SIGN_IN_FORCE_REDIRECT_URL=https://staging.app.comfydeploy.com/workflows
+NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=https://staging.app.comfydeploy.com/workflows
+```
 
 ## How It Works
 
-1. **Force Redirect URLs**: These URLs will always be used after authentication, overriding any other redirect settings
-2. **Fallback Redirect URLs**: These serve as backup URLs if no other redirect URL is specified
-3. **Environment Variable Fallback**: If environment variables are not set, the application defaults to `/workflows` (relative path)
+1. **Dynamic Detection**: The system automatically detects the current hostname and builds appropriate redirect URLs
+2. **Environment Variable Override**: If environment variables are set, they take precedence over dynamic detection
+3. **Fallback Behavior**: For local development or unknown hostnames, relative paths are used
+4. **Protocol Awareness**: The system preserves the current protocol (http/https)
 
 ## Testing
 
-To test locally:
-1. Set the environment variables in your local `.env` file
-2. Start the development server
-3. Go through the sign-up flow
-4. Verify you're redirected to the correct URL
+### Production Testing
+1. Visit `https://app.comfydeploy.com`
+2. Go through the sign-up flow
+3. Verify you're redirected to `https://app.comfydeploy.com/workflows`
+
+### Staging Testing
+1. Visit `https://staging.app.comfydeploy.com`
+2. Go through the sign-up flow
+3. Verify you're redirected to `https://staging.app.comfydeploy.com/workflows`
+
+### Local Testing
+1. Start the development server
+2. Go through the sign-up flow
+3. Verify you're redirected to `/workflows` (relative path)
 
 ## Notes
 
-- The `vercel.json` configuration already properly handles routing for `app.comfydeploy.com`
-- This fix ensures consistent behavior across all authentication flows
-- The environment variables allow for different configurations in different environments (staging, production, etc.)
+- **No Configuration Required**: The system automatically handles production and staging environments
+- **Backward Compatible**: Existing environment variable configurations continue to work
+- **Flexible**: Can be extended to support additional environments by modifying the `getRedirectBaseUrl` function
+- **Protocol Agnostic**: Works with both HTTP and HTTPS

src/main.tsx

@@ -262,6 +262,45 @@ function InnerApp() {
 
 if (!rootElement.innerHTML) {
   const root = ReactDOM.createRoot(rootElement);
+
+  // Dynamically determine the base URL for redirects based on current hostname
+  const getRedirectBaseUrl = () => {
+    if (typeof window !== 'undefined') {
+      const hostname = window.location.hostname;
+      const protocol = window.location.protocol;
+
+      // For staging environment
+      if (hostname === 'staging.app.comfydeploy.com') {
+        return `${protocol}//staging.app.comfydeploy.com`;
+      }
+
+      // For production environment
+      if (hostname === 'app.comfydeploy.com') {
+        return `${protocol}//app.comfydeploy.com`;
+      }
+
+      // For local development, use relative paths
+      return '';
+    }
+    return '';
+  };
+
+  const baseUrl = getRedirectBaseUrl();
+  const defaultRedirectPath = '/workflows';
+
+  // Build redirect URLs - use environment variables if provided, otherwise use dynamic URLs
+  const afterSignUpUrl = process.env.NEXT_PUBLIC_CLERK_SIGN_UP_FORCE_REDIRECT_URL || 
+    (baseUrl ? `${baseUrl}${defaultRedirectPath}` : defaultRedirectPath);
+
+  const afterSignInUrl = process.env.NEXT_PUBLIC_CLERK_SIGN_IN_FORCE_REDIRECT_URL || 
+    (baseUrl ? `${baseUrl}${defaultRedirectPath}` : defaultRedirectPath);
+
+  const signUpFallbackRedirectUrl = process.env.NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL || 
+    (baseUrl ? `${baseUrl}${defaultRedirectPath}` : undefined);
+
+  const signInFallbackRedirectUrl = process.env.NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL || 
+    (baseUrl ? `${baseUrl}${defaultRedirectPath}` : undefined);
+
   root.render(
     <ClerkProvider
       appearance={{
@@ -271,10 +310,10 @@ if (!rootElement.innerHTML) {
       }}
       publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
       afterSignOutUrl="/"
-      afterSignUpUrl={process.env.NEXT_PUBLIC_CLERK_SIGN_UP_FORCE_REDIRECT_URL || "/workflows"}
-      afterSignInUrl={process.env.NEXT_PUBLIC_CLERK_SIGN_IN_FORCE_REDIRECT_URL || "/workflows"}
-      signUpFallbackRedirectUrl={process.env.NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL}
-      signInFallbackRedirectUrl={process.env.NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL}
+      afterSignUpUrl={afterSignUpUrl}
+      afterSignInUrl={afterSignInUrl}
+      signUpFallbackRedirectUrl={signUpFallbackRedirectUrl}
+      signInFallbackRedirectUrl={signInFallbackRedirectUrl}
     >
       <InnerApp />
     </ClerkProvider>,