Merge pull request #2 from codegen-sh/codegen-bot/enhance-dev-setup-and-auth-flow

Author: jayhack

README.md

@@ -78,27 +78,91 @@ You can customize the extension behavior in VSCode settings:
 
 ## Development
 
-### Building from Source
+### Local Development Setup
 
-```bash
-# Clone the repository
-git clone https://github.com/codegen-sh/codegen-ide.git
-cd codegen-ide
+Most people will use this extension in development mode. Here's how to set it up:
 
-# Install dependencies
-npm install
+#### Prerequisites
+- [Node.js](https://nodejs.org/) (v16 or higher)
+- [VSCode](https://code.visualstudio.com/)
+- A [Codegen](https://codegen.com) account
+
+#### Setup Steps
+
+1. **Clone the repository**
+   ```bash
+   git clone https://github.com/codegen-sh/codegen-ide.git
+   cd codegen-ide
+   ```
+
+2. **Install dependencies**
+   ```bash
+   npm install
+   ```
+
+3. **Open in VSCode**
+   ```bash
+   code .
+   ```
 
-# Compile TypeScript
+4. **Launch Extension Development Host**
+   - Press `F5` or go to Run → Start Debugging
+   - This opens a new VSCode window with the extension loaded
+   - You can also use `Ctrl+Shift+P` → "Debug: Start Debugging"
+
+5. **Test the extension**
+   - In the new VSCode window, open the Command Palette (`Ctrl+Shift+P`)
+   - Run `Codegen: Login` to authenticate
+   - The Codegen sidebar should appear in the Activity Bar
+
+#### Development Workflow
+
+- **Hot Reload**: The extension automatically reloads when you make changes
+- **Debugging**: Set breakpoints in your TypeScript code and they'll work in the Extension Development Host
+- **Console Logs**: Check the Debug Console in the main VSCode window for extension logs
+- **Restart Extension**: Use `Ctrl+Shift+P` → "Developer: Reload Window" in the Extension Development Host
+
+#### Available Scripts
+
+```bash
+# Compile TypeScript (one-time)
 npm run compile
 
-# Run in development mode
+# Watch mode (auto-compile on changes)
 npm run watch
+
+# Run tests
+npm test
+
+# Lint code
+npm run lint
+
+# Package extension for distribution
+npm run package
 ```
 
-### Testing
+#### VSCode Launch Configurations
+
+The project includes pre-configured launch settings in `.vscode/launch.json`:
+
+- **Run Extension**: Launches the extension in a new VSCode window
+- **Extension Tests**: Runs the test suite
+- **Attach to Extension Host**: For debugging running extensions
+
+#### Debugging Tips
+
+1. **Extension Host Logs**: Check the Output panel → "Log (Extension Host)"
+2. **Developer Tools**: Use `Help → Toggle Developer Tools` in the Extension Development Host
+3. **Reload Extension**: `Ctrl+R` in the Extension Development Host to reload after changes
+
+### Building from Source
 
 ```bash
+# Full build process
+npm install
+npm run compile
 npm test
+npm run package
 ```
 
 ## Contributing

package.json

@@ -129,6 +129,11 @@
           "type": "number",
           "default": 30,
           "description": "Auto-refresh interval in seconds"
+        },
+        "codegen.webUrl": {
+          "type": "string",
+          "default": "https://codegen.com",
+          "description": "Codegen web URL for browser authentication"
         }
       }
     }

src/auth/AuthManager.ts

@@ -7,9 +7,82 @@ export class AuthManager {
     constructor(private context: vscode.ExtensionContext) {}
 
     async login(): Promise<void> {
+        // Show login options
+        const loginMethod = await vscode.window.showQuickPick([
+            {
+                label: '🌐 Login with Browser',
+                description: 'Open codegen.com in your browser to authenticate',
+                detail: 'Recommended - secure OAuth flow'
+            },
+            {
+                label: '🔑 Enter API Token',
+                description: 'Manually enter your API token',
+                detail: 'For users who already have a token'
+            }
+        ], {
+            placeHolder: 'Choose how you want to authenticate with Codegen',
+            ignoreFocusOut: true
+        });
+
+        if (!loginMethod) {
+            return;
+        }
+
+        if (loginMethod.label.includes('Browser')) {
+            await this.loginWithBrowser();
+        } else {
+            await this.loginWithToken();
+        }
+    }
+
+    private async loginWithBrowser(): Promise<void> {
+        try {
+            // Generate a unique state parameter for security
+            const state = Math.random().toString(36).substring(2, 15);
+            
+            // Construct the OAuth URL
+            const config = vscode.workspace.getConfiguration('codegen');
+            const baseUrl = config.get('webUrl', 'https://codegen.com');
+            const authUrl = `${baseUrl}/auth/vscode?state=${state}`;
+            
+            // Open the browser
+            vscode.env.openExternal(vscode.Uri.parse(authUrl));
+            
+            // Show a message to the user
+            const result = await vscode.window.showInformationMessage(
+                'Opening codegen.com in your browser for authentication...',
+                { modal: false },
+                'I\'ve completed authentication',
+                'Cancel'
+            );
+            
+            if (result === 'Cancel') {
+                return;
+            }
+            
+            if (result === 'I\'ve completed authentication') {
+                // Prompt for the token that should now be available
+                const token = await vscode.window.showInputBox({
+                    prompt: 'Paste the API token from your browser',
+                    placeHolder: 'The token should be displayed after authentication',
+                    password: true,
+                    ignoreFocusOut: true
+                });
+                
+                if (token) {
+                    await this.storeTokenAndValidate(token);
+                }
+            }
+        } catch (error) {
+            vscode.window.showErrorMessage(`Browser login failed: ${error}`);
+            throw error;
+        }
+    }
+
+    private async loginWithToken(): Promise<void> {
         const token = await vscode.window.showInputBox({
             prompt: 'Enter your Codegen API token',
-            placeHolder: 'Your API token from codegen.com',
+            placeHolder: 'Your API token from codegen.com/settings',
             password: true,
             ignoreFocusOut: true
         });
@@ -18,6 +91,10 @@ export class AuthManager {
             return;
         }
 
+        await this.storeTokenAndValidate(token);
+    }
+
+    private async storeTokenAndValidate(token: string): Promise<void> {
         // Store the token securely
         await this.context.secrets.store(AuthManager.TOKEN_KEY, token);
 
@@ -28,7 +105,7 @@ export class AuthManager {
                 await this.context.globalState.update(AuthManager.ORG_ID_KEY, orgId);
             }
 
-            vscode.window.showInformationMessage('Successfully logged in to Codegen!');
+            vscode.window.showInformationMessage('Successfully logged in to Codegen! 🎉');
         } catch (error) {
             vscode.window.showErrorMessage(`Login failed: ${error}`);
             // Clear the token if login failed