{"id":19450188,"url":"https://github.com/webexsamples/login-with-webex","last_synced_at":"2025-10-06T18:11:00.825Z","repository":{"id":51685784,"uuid":"487936128","full_name":"WebexSamples/login-with-webex","owner":"WebexSamples","description":"Examples of using the \"Login with Webex\" functionality","archived":false,"fork":false,"pushed_at":"2025-07-18T20:05:57.000Z","size":434,"stargazers_count":0,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-19T01:09:42.048Z","etag":null,"topics":["authentication","oauth2","openid-connect","pkce"],"latest_commit_sha":null,"homepage":"https://webexsamples.github.io/login-with-webex","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WebexSamples.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-02T17:42:58.000Z","updated_at":"2025-07-18T20:06:01.000Z","dependencies_parsed_at":"2024-11-10T16:37:13.418Z","dependency_job_id":"e1da12e8-7f65-49bf-a88a-d9fdda20e65e","html_url":"https://github.com/WebexSamples/login-with-webex","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/WebexSamples/login-with-webex","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebexSamples%2Flogin-with-webex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebexSamples%2Flogin-with-webex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebexSamples%2Flogin-with-webex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebexSamples%2Flogin-with-webex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebexSamples","download_url":"https://codeload.github.com/WebexSamples/login-with-webex/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebexSamples%2Flogin-with-webex/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278655265,"owners_count":26022993,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-06T02:00:05.630Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["authentication","oauth2","openid-connect","pkce"],"created_at":"2024-11-10T16:35:39.661Z","updated_at":"2025-10-06T18:11:00.820Z","avatar_url":"https://github.com/WebexSamples.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Login with Webex Samples\n\nThis repository contains samples for logging in with Webex Platform using Open ID Connect, known as \"Login with Webex\". These interactive samples demonstrate different OpenID Connect flows and provide practical examples for implementing Webex authentication in your applications.\n\n## 📋 Overview\n\nLogin with Webex lets users login to your app or service using their Webex account. Login with Webex is based on OpenID Connect, an identity layer built on the OAuth 2.0 protocol. Standard Webex Integrations use OAuth flows to obtain access tokens for making API calls on a user's behalf. Login with Webex uses those same flows, with some additional parameters, to obtain ID tokens. ID tokens are signed, Base64-encoded JSON Web Tokens (JWTs) that act as proof a user authenticated with Webex, and that contain information (\"claims\") about the authenticated user, such as their email or name.\n\n## 📚 Documentation\n\n**Official Documentation**: https://developer.webex.com/docs/login-with-webex\n\n## 🚀 Try It Out\n\nTry it out by choosing one of the available flows: https://webexsamples.github.io/login-with-webex\n\n## 🎯 Available Flows\n\nThis repository demonstrates two main OpenID Connect flows:\n\n### 1. ID Token Flow (`response_type=id_token`)\n- **File**: `openid3.html`\n- **Description**: Simple implicit flow returning an ID token directly\n- **Best For**: Single-page applications with minimal security requirements\n- **Flow Diagram**: [OpenID Connect ID Token Flow](https://darutk.medium.com/diagrams-of-all-the-openid-connect-flows-6968e3990660#:~:text=3.%20response_type%3Did_token)\n\n### 2. Authorization Code with PKCE Flow\n- **File**: `pkce.html`\n- **Description**: More secure flow using PKCE (Proof Key for Code Exchange)\n- **Best For**: Public clients and mobile/SPA applications requiring enhanced security\n- **Flow Diagram**: [OpenID Connect Authorization Code + PKCE Flow](https://darutk.medium.com/diagrams-of-all-the-openid-connect-flows-6968e3990660#:~:text=3.%20response_type%3Did_token)\n\n## 📁 Project Structure\n\n```\nlogin-with-webex/\n├── src/\n│   └── index.js          # Express server for local development\n├── docs/                 # Static web files (GitHub Pages)\n│   ├── index.html        # Main navigation page\n│   ├── openid3.html      # ID Token flow demo\n│   ├── pkce.html         # PKCE flow demo\n│   ├── pkce.js           # PKCE implementation\n│   ├── common.js         # Shared utilities\n│   ├── main.css          # Styling\n│   ├── juno.jpg          # Demo images\n│   └── webexlogo.png     # Webex branding\n├── package.json          # Node.js dependencies\n└── README.md            # This file\n```\n\n## 🛠️ Setup \u0026 Installation\n\n### Prerequisites\n\n- Node.js (v14 or higher)\n- npm or yarn\n- Webex Developer Account\n- Webex Integration (OAuth client)\n\n### Local Development\n\n1. **Clone the repository**:\n   ```bash\n   git clone https://github.com/WebexSamples/login-with-webex.git\n   cd login-with-webex\n   ```\n\n2. **Install dependencies**:\n   ```bash\n   npm install\n   ```\n\n3. **Start the development server**:\n   ```bash\n   npm start\n   ```\n\n4. **Open in browser**:\n   Navigate to `http://localhost:3000`\n\n## 🔧 Configuration\n\n### Setting up a Webex Integration\n\n1. **Go to Webex Developer Portal**: https://developer.webex.com/\n2. **Create an Integration**: Follow the [getting started guide](https://developer.webex.com/docs/login-with-webex#getting-started)\n3. **Configure Redirect URIs**: Add your application URLs\n   - For local development: `http://localhost:3000/openid3.html`\n   - For PKCE demo: `http://localhost:3000/pkce.html`\n   - For production: Your actual domain URLs\n\n### Required Scopes\n\n- `openid`: Required for OpenID Connect\n- `email`: Access to user's email address\n- Additional scopes as needed for your application\n\n## 💡 Usage Examples\n\n### ID Token Flow (openid3.html)\n\n**Features**:\n- Simple implicit flow\n- Direct ID token return\n- Automatic JWT parsing\n- User claim extraction\n\n**Implementation**:\n```javascript\n// Redirect to Webex authorization\nlet authUrl = 'https://webexapis.com/v1/authorize?' +\n    'response_type=id_token' +\n    '\u0026client_id=YOUR_CLIENT_ID' +\n    '\u0026redirect_uri=YOUR_REDIRECT_URI' +\n    '\u0026scope=openid%20email' +\n    '\u0026state=' + Math.random() +\n    '\u0026nonce=' + Math.random();\nwindow.location.href = authUrl;\n```\n\n**ID Token Claims**:\n```json\n{\n  \"sub\": \"user-id\",\n  \"email\": \"user@example.com\",\n  \"name\": \"John Doe\",\n  \"iss\": \"https://webexapis.com/v1\",\n  \"aud\": \"your-client-id\",\n  \"exp\": 1234567890,\n  \"iat\": 1234567890\n}\n```\n\n### PKCE Flow (pkce.html)\n\n**Features**:\n- Enhanced security with PKCE\n- Step-by-step demonstration\n- Interactive form interface\n- Full OAuth code flow\n\n**PKCE Implementation**:\n```javascript\n// Generate PKCE codes\nfunction generateCodeVerifier() {\n    return generateRandomString(128);\n}\n\nfunction generateCodeChallenge(verifier) {\n    return base64URL(CryptoJS.SHA256(verifier));\n}\n\n// Authorization request\nlet authUrl = 'https://webexapis.com/v1/authorize?' +\n    'response_type=code' +\n    '\u0026client_id=' + clientId +\n    '\u0026redirect_uri=' + redirectUri +\n    '\u0026scope=openid%20email' +\n    '\u0026code_challenge=' + codeChallenge +\n    '\u0026code_challenge_method=S256';\n```\n\n**Token Exchange**:\n```javascript\n// Exchange authorization code for access token\nconst tokenResponse = await fetch('https://webexapis.com/v1/access_token', {\n    method: 'POST',\n    headers: {\n        'Content-Type': 'application/x-www-form-urlencoded'\n    },\n    body: new URLSearchParams({\n        'grant_type': 'authorization_code',\n        'client_id': clientId,\n        'client_secret': clientSecret,\n        'code': authCode,\n        'code_verifier': codeVerifier,\n        'redirect_uri': redirectUri\n    })\n});\n```\n\n## 🔐 Security Considerations\n\n### ID Token Flow\n- **Use Case**: Simple applications with minimal security requirements\n- **Limitations**: Less secure than authorization code flow\n- **Best Practice**: Use only for public demos and testing\n\n### PKCE Flow\n- **Use Case**: Production applications requiring enhanced security\n- **Security**: Mitigates authorization code interception attacks\n- **Best Practice**: Recommended for all public clients\n\n### Important Notes\n\n⚠️ **Client Secret Warning**: The PKCE demo exposes the client secret for demonstration purposes only. In production:\n- Never expose client secrets in client-side code\n- Use server-side token exchange\n- Implement proper secret management\n\n## 📊 API Endpoints\n\n### Authorization Endpoint\n```\nGET https://webexapis.com/v1/authorize\n```\n\n**Parameters**:\n- `response_type`: `id_token` or `code`\n- `client_id`: Your Webex Integration Client ID\n- `redirect_uri`: Registered redirect URI\n- `scope`: `openid email` (minimum required)\n- `state`: CSRF protection parameter\n- `nonce`: Replay attack protection\n- `code_challenge`: PKCE code challenge (for code flow)\n- `code_challenge_method`: `S256` (for PKCE)\n\n### Token Endpoint\n```\nPOST https://webexapis.com/v1/access_token\n```\n\n**Parameters**:\n- `grant_type`: `authorization_code`\n- `client_id`: Your Client ID\n- `client_secret`: Your Client Secret\n- `code`: Authorization code from callback\n- `code_verifier`: PKCE code verifier\n- `redirect_uri`: Same as authorization request\n\n### UserInfo Endpoint\n```\nGET https://webexapis.com/v1/userinfo\nAuthorization: Bearer ACCESS_TOKEN\n```\n\n**Response**:\n```json\n{\n  \"sub\": \"user-id\",\n  \"email\": \"user@example.com\",\n  \"name\": \"John Doe\",\n  \"given_name\": \"John\",\n  \"family_name\": \"Doe\",\n  \"picture\": \"https://avatar.webex.com/...\"\n}\n```\n\n## 🧪 Testing\n\n### Local Testing\n1. Start the development server: `npm start`\n2. Navigate to `http://localhost:3000`\n3. Choose your desired flow (ID Token or PKCE)\n4. Enter your Webex Integration credentials\n5. Test the authentication flow\n\n### Integration Testing\n- Test with different user accounts\n- Verify token validation\n- Check claim extraction\n- Test error handling scenarios\n\n## 🎨 Customization\n\n### Styling\nModify `main.css` to customize the appearance:\n- Update colors and fonts\n- Modify layout and spacing\n- Add your branding elements\n\n### JavaScript Customization\n- `common.js`: Shared utilities and JWT parsing\n- `pkce.js`: PKCE-specific implementation\n- Add additional claim processing\n- Implement custom error handling\n\n## 🌐 Deployment\n\n### GitHub Pages\nThe repository is configured for GitHub Pages deployment:\n- Static files in `/docs` directory\n- Automatic deployment on push to main branch\n- Live demo at: https://webexsamples.github.io/login-with-webex\n\n### Custom Deployment\nFor custom deployment:\n1. Build your static files\n2. Deploy the `/docs` directory to your web server\n3. Update redirect URIs in your Webex Integration\n4. Configure HTTPS (recommended for production)\n\n## 📈 Advanced Features\n\n### JWT Token Parsing\n```javascript\nfunction parseJwt(token) {\n    const base64Url = token.split('.')[1];\n    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');\n    const jsonPayload = decodeURIComponent(\n        atob(base64)\n            .split('')\n            .map(c =\u003e '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))\n            .join('')\n    );\n    return JSON.parse(jsonPayload);\n}\n```\n\n### PKCE Code Generation\n```javascript\nfunction generateRandomString(length) {\n    const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~';\n    let text = '';\n    for (let i = 0; i \u003c length; i++) {\n        text += possible.charAt(Math.floor(Math.random() * possible.length));\n    }\n    return text;\n}\n\nfunction base64URL(string) {\n    return string\n        .toString(CryptoJS.enc.Base64)\n        .replace(/=/g, '')\n        .replace(/\\+/g, '-')\n        .replace(/\\//g, '_');\n}\n```\n\n## 🔧 Dependencies\n\n```json\n{\n  \"dependencies\": {\n    \"express\": \"^4.17.3\",\n    \"nodemon\": \"^2.0.15\",\n    \"openid-client\": \"^5.1.3\"\n  }\n}\n```\n\n### Key Dependencies\n- **express**: Web framework for local development server\n- **nodemon**: Development tool for auto-restarting server\n- **openid-client**: OpenID Connect client library\n\n### Client-Side Dependencies\n- **CryptoJS**: For PKCE code generation (loaded via CDN)\n- **Native Web APIs**: fetch, URLSearchParams, localStorage, sessionStorage\n\n## 🚨 Troubleshooting\n\n### Common Issues\n\n**Invalid Redirect URI**\n- Ensure redirect URI matches exactly in your Integration settings\n- Check for trailing slashes or port differences\n\n**CORS Errors**\n- Webex APIs support CORS for browser-based requests\n- Ensure proper origin configuration in your Integration\n\n**Token Validation Failures**\n- Verify client ID and secret are correct\n- Check token expiration times\n- Ensure proper scope configuration\n\n**PKCE Generation Issues**\n- Verify CryptoJS library is loaded\n- Check code verifier length (43-128 characters)\n- Ensure code challenge uses S256 method\n\n### Debug Mode\nEnable browser developer tools to inspect:\n- Network requests to Webex APIs\n- Console logs for error messages\n- Local storage for PKCE codes\n- JWT token contents\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch: `git checkout -b feature/new-feature`\n3. Make your changes\n4. Test with both authentication flows\n5. Submit a pull request\n\n### Development Guidelines\n- Follow existing code style\n- Add comments for complex logic\n- Test with multiple user scenarios\n- Ensure security best practices\n\n## 📄 License\n\nThis project is licensed under the terms specified in the [LICENSE](LICENSE) file.\n\n## 🌟 Don't be a Stranger\n\n- [Webex Developer Documentation](https://developer.webex.com/docs)\n- [Webex Developer Blog](https://developer.webex.com/blog)\n- [Webex Developer Support](https://developer.webex.com/support)\n- [@WebexDevs on Twitter](https://twitter.com/webexdevs)\n\n## 🔗 Related Resources\n\n- [OpenID Connect Specification](https://openid.net/connect/)\n- [OAuth 2.0 PKCE RFC](https://tools.ietf.org/html/rfc7636)\n- [Webex Integration Guide](https://developer.webex.com/docs/integrations)\n- [JWT.io Token Decoder](https://jwt.io/)\n\n## 🆘 Support\n\n- Create an issue in this repository\n- Review [Login with Webex Documentation](https://developer.webex.com/docs/login-with-webex)\n- Contact [Webex Developer Support](https://developer.webex.com/support)\n\n---\n\nMade with ❤️ by the Webex Developer Evangelism \u0026 Engineering Teams at Cisco\n\n**Repository**: https://github.com/WebexSamples/login-with-webex  \n**Live Demo**: https://webexsamples.github.io/login-with-webex\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebexsamples%2Flogin-with-webex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebexsamples%2Flogin-with-webex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebexsamples%2Flogin-with-webex/lists"}