diff --git a/CLERK_REDIRECT_FIX.md b/CLERK_REDIRECT_FIX.md index bdafd363..8241edd9 100644 --- a/CLERK_REDIRECT_FIX.md +++ b/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 ``` -### 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 newline at end of file +- **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 \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index 98a7e0dd..37503952 100644 --- a/src/main.tsx +++ b/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( ,