# Generate Auth State

Generate an authentication state file by logging into localhost:3000 via Google OAuth and saving the session data as a named profile.

## Usage

```
/generate-auth-state [profile-name]
```

- `profile-name` (optional): Name for this authentication profile. If not provided, you'll be prompted to enter one. The file will be saved to `~/.playwright-mcp/storage-states/<profile-name>/storage-state.json`.

## What this command does

1. Opens localhost:3000 using Playwright MCP
2. Guides you through the Google OAuth login process  
3. Extracts authentication cookies and localStorage data
4. Saves the authentication state to a JSON file
5. Provides instructions for configuring Playwright MCP to use the saved state

## Examples

```bash
claude /generate-auth-state
claude /generate-auth-state justin
claude /generate-auth-state test-user
```

This will create profiles at:
- `~/.playwright-mcp/storage-states/default/storage-state.json` (if no name provided, uses "default")
- `~/.playwright-mcp/storage-states/justin/storage-state.json`
- `~/.playwright-mcp/storage-states/test-user/storage-state.json`

---

You are a Claude Code assistant helping to generate authentication state files for automated testing.

Follow these steps:

1. **Get Profile Name**
   - If no profile name was provided as an argument, ask the user: "What would you like to name this authentication profile?"
   - Use the provided name or "default" if none given
   - Set the output path to `~/.playwright-mcp/storage-states/<profile-name>/storage-state.json`

2. **Setup and Navigation**
   - Use Playwright MCP to navigate to http://localhost:3000
   - Take a snapshot to show the current page state

3. **Initiate Login Process**  
   - Look for and click the "Sign In" button
   - Wait for the sign-in modal to appear
   - Click "Sign in with Google" to start OAuth flow

4. **User Manual Login**
   - Inform the user that they need to manually complete the Google OAuth login process:
     - Enter their Google email/phone  
     - Click "Next"
     - Enter their password
     - Complete any 2FA if required
     - Grant permissions to the app
   - Wait for the user to confirm they have completed the login and are back on localhost:3000

5. **Extract Authentication State**
   - Take a snapshot to confirm successful login (should show authenticated interface)
   - Use browser evaluation to extract authentication data specifically using the following code:
     ```javascript
     () => {
       // Get only authentication-related cookies and localStorage
       const authCookies = document.cookie.split(';')
         .map(cookie => {
           const [name, value] = cookie.split('=').map(s => s.trim());
           return { 
             domain: "localhost",
             path: "/",
             name, 
             value 
           };
         })
         .filter(cookie => 
           cookie.name && cookie.value && 
           (cookie.name.includes('session') || 
            cookie.name.includes('auth') || 
            cookie.name.includes('clerk') ||
            cookie.name.includes('token'))
         );

       return {
         cookies: authCookies,
         timestamp: new Date().toISOString()
       };
     }
     ```

6. **Save Authentication State**
   - Create the directory `~/.playwright-mcp/storage-states/<profile-name>/` if it doesn't exist
   - Save the extracted data to `~/.playwright-mcp/storage-states/<profile-name>/storage-state.json`
   - Format the JSON nicely for readability

7. **Provide Usage Instructions**
   - Show the user how to configure their Playwright MCP to use the saved authentication state:
     ```json
     {
       "mcpServers": {
         "playwright": {
           "command": "npx",
           "args": [
             "@playwright/mcp@latest",
             "--isolated",
             "--storage-state=/Users/[username]/.playwright-mcp/storage-states/<profile-name>/storage-state.json"
           ]
         }
       }
     }
     ```
   - Replace `[username]` with their actual username and `<profile-name>` with the chosen profile name
   - Explain that this configuration should be added to their `~/.claude.json` file
   - Explain that this will automatically log them in for future Playwright sessions
   - Mention they can create multiple profiles for different users/accounts

## Important Notes

- This command requires localhost:3000 to be running
- The user must manually complete the Google OAuth flow for security reasons  
- The generated storage-state.json contains sensitive session data - keep it secure
- Profiles are organized in `~/.playwright-mcp/storage-states/` for easy management
- Authentication state may expire and need regeneration periodically
- Works with Clerk-based authentication systems that use Google OAuth

## Security Considerations

- Never commit storage-state.json files to version control
- The file contains active session tokens that provide access to the user's account
- Regenerate the file if you suspect it has been compromised
- Store the file in a secure location with appropriate file permissions