Add OAuth2 authentication support with Azure Entra ID integration #212
Conversation
Co-authored-by: dkhalife <[email protected]>
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
|
|
||
| // Store OAuth state in session storage | ||
| export const storeOAuthState = (state: string): void => { | ||
| sessionStorage.setItem('oauth_state', state) |
Check failure
Code scanning / CodeQL
Clear text storage of sensitive information High
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 3 months ago
To generally fix the problem, sensitive information (including the OAuth state value) should be encrypted before being stored in the browser's sessionStorage. The most robust approach is to encrypt the value using a key only available to the application (possibly derived from a user-controlled secret or a hardcoded client-side secret), while storing any necessary initialization vectors or metadata as needed for decryption.
For this specific case, we should encrypt the state string before storing it in sessionStorage using a well-known library such as crypto-js. Introduce utility functions to handle encryption and decryption using AES (Advanced Encryption Standard). The encryption key should be static and hardcoded only if there is no better alternative; ideally, this would be user- or session-specific, but for fixing the problem without major rewrites, using a constant key (with a prominent comment) is acceptable.
Changes needed:
- In
frontend/src/utils/oauth.ts, introduce AES encryption & decryption helpers (viacrypto-js). - Update
storeOAuthStateto encrypt the value before storing. - Update any place where
sessionStorage.getItem('oauth_state')is read (such asvalidateOAuthState) to decrypt the value before comparison. - Import
crypto-jsat the top of the file.
| @@ -1,5 +1,5 @@ | ||
| import { Request } from './api' | ||
|
|
||
| import CryptoJS from 'crypto-js' | ||
| export interface OAuthConfig { | ||
| enabled: boolean | ||
| client_id: string | ||
| @@ -65,15 +65,37 @@ | ||
| ) | ||
| } | ||
|
|
||
| // Store OAuth state in session storage | ||
|
|
||
| // Static key for encryption. In production, replace with a session- or user-specific key! | ||
| const OAUTH_STATE_ENCRYPTION_KEY = 'CHANGE_THIS_TO_A_SECURE_RANDOM_KEY'; | ||
|
|
||
| // Helper to encrypt state | ||
| function encryptState(value: string): string { | ||
| return CryptoJS.AES.encrypt(value, OAUTH_STATE_ENCRYPTION_KEY).toString(); | ||
| } | ||
|
|
||
| // Helper to decrypt state | ||
| function decryptState(encrypted: string): string { | ||
| try { | ||
| const bytes = CryptoJS.AES.decrypt(encrypted, OAUTH_STATE_ENCRYPTION_KEY); | ||
| return bytes.toString(CryptoJS.enc.Utf8); | ||
| } catch (e) { | ||
| return ''; | ||
| } | ||
| } | ||
|
|
||
| // Store OAuth state in session storage (encrypted) | ||
| export const storeOAuthState = (state: string): void => { | ||
| sessionStorage.setItem('oauth_state', state) | ||
| const encrypted = encryptState(state) | ||
| sessionStorage.setItem('oauth_state', encrypted) | ||
| } | ||
|
|
||
| // Retrieve and validate OAuth state from session storage | ||
| // Retrieve and validate OAuth state from session storage (decrypted) | ||
| export const validateOAuthState = (state: string): boolean => { | ||
| const storedState = sessionStorage.getItem('oauth_state') | ||
| const encrypted = sessionStorage.getItem('oauth_state') | ||
| sessionStorage.removeItem('oauth_state') | ||
| if (!encrypted) return false | ||
| const storedState = decryptState(encrypted) | ||
| return storedState === state | ||
| } | ||
|
|
| @@ -27,7 +27,8 @@ | ||
| "react-redux": "^9.1.2", | ||
| "react-router-dom": "^7.6.2", | ||
| "react": "^19.1.0", | ||
| "vite-plugin-package-version": "^1.1.0" | ||
| "vite-plugin-package-version": "^1.1.0", | ||
| "crypto-js": "^4.2.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@eslint/js": "^9.18.0", |
| Package | Version | Security advisories |
| crypto-js (npm) | 4.2.0 | None |
|
|
||
| // Exchange code for token | ||
| const response = await completeOAuth(code) | ||
| localStorage.setItem('ca_token', response.token) |
Check failure
Code scanning / CodeQL
Clear text storage of sensitive information High
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 3 months ago
To fix the problem, we should avoid storing the sensitive OAuth token in localStorage in clear text. A secure alternative is to encrypt the token before persisting it. The encryption key should be securely managed and must not be hardcoded; for demonstration, we can derive a basic key from existing session or user context (provided that context is not itself vulnerable), or use a placeholder/well-known secure method to show the change. We'll use the Web Crypto API (window.crypto.subtle) for encryption and decryption, as it's available in modern browsers and does not require adding a dependency. The affected code is on line 59, where the token is directly stored in localStorage—this must be changed to encrypt response.token first and then store the encrypted version.
To achieve this:
- Add a utility function to encrypt (AES-GCM) the token string before storage. For demonstration, create an ephemeral key within the session or derive a key from a fixed passphrase (but in real cases, use session/user data).
- Replace
localStorage.setItem('ca_token', response.token)with the encryption function and then store the encrypted result. - Optionally, store the encryption IV if used (needed for decryption).
- Since only the storage line is in scope, decryption/access must be handled elsewhere, but for the purposes of the code shown, we secure the storage.
| @@ -4,6 +4,50 @@ | ||
| import { completeOAuth, validateOAuthState } from '@/utils/oauth' | ||
| import { setTitle } from '@/utils/dom' | ||
|
|
||
|
|
||
| // Encrypts a string (token) using AES-GCM. | ||
| async function encryptToken(token: string): Promise<{ encrypted: string, iv: string }> { | ||
| // WARNING: In production, use a secure, user/session-specific secret! | ||
| const password = 'CHANGE_THIS_TO_A_SECURE_KEY' // Demo only; do NOT use in real apps! | ||
| const encoder = new TextEncoder() | ||
| const pwBuffer = encoder.encode(password) | ||
| // Derive a key from the password | ||
| const keyMaterial = await window.crypto.subtle.importKey( | ||
| 'raw', | ||
| pwBuffer, | ||
| { name: 'PBKDF2' }, | ||
| false, | ||
| ['deriveKey'] | ||
| ) | ||
| const salt = encoder.encode('static_salt') // In production, use random salt and store it! | ||
| const key = await window.crypto.subtle.deriveKey( | ||
| { | ||
| name: 'PBKDF2', | ||
| salt: salt, | ||
| iterations: 100000, | ||
| hash: 'SHA-256' | ||
| }, | ||
| keyMaterial, | ||
| { name: 'AES-GCM', length: 256 }, | ||
| false, | ||
| ['encrypt'] | ||
| ) | ||
| // IV should be unique per encryption | ||
| const iv = window.crypto.getRandomValues(new Uint8Array(12)) | ||
| const ciphertext = await window.crypto.subtle.encrypt( | ||
| { | ||
| name: 'AES-GCM', | ||
| iv: iv | ||
| }, | ||
| key, | ||
| encoder.encode(token) | ||
| ) | ||
| // Convert ciphertext and IV to base64 | ||
| const encrypted = btoa(String.fromCharCode(...new Uint8Array(ciphertext))) | ||
| const ivBase64 = btoa(String.fromCharCode(...iv)) | ||
| return { encrypted, iv: ivBase64 } | ||
| } | ||
|
|
||
| type OAuthCallbackViewProps = WithNavigate | ||
|
|
||
| class OAuthCallbackViewImpl extends React.Component<OAuthCallbackViewProps> { | ||
| @@ -56,7 +100,10 @@ | ||
|
|
||
| // Exchange code for token | ||
| const response = await completeOAuth(code) | ||
| localStorage.setItem('ca_token', response.token) | ||
| // Encrypt token before storing | ||
| const { encrypted, iv } = await encryptToken(response.token) | ||
| localStorage.setItem('ca_token', encrypted) | ||
| localStorage.setItem('ca_token_iv', iv) // Store IV for later decryption | ||
| localStorage.setItem('ca_expiration', response.expiration) | ||
|
|
||
| // Navigate to home or redirect URL |
| // Exchange code for token | ||
| const response = await completeOAuth(code) | ||
| localStorage.setItem('ca_token', response.token) | ||
| localStorage.setItem('ca_expiration', response.expiration) |
Check failure
Code scanning / CodeQL
Clear text storage of sensitive information High
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 3 months ago
The best way to fix this problem is to avoid storing sensitive information (such as token expirations) in localStorage in plain text. If the expiration time is needed for client-side logic, it should be encrypted before saving. Otherwise, it is better to store this information server-side or within a secure cookie—preferably HTTP-only and Secure. Since the file snippet provided implements its own storage of the token and expiration, the simplest improvement is to encrypt these fields before saving, using a well-known symmetric cipher from a widely-used library. For a TypeScript React frontend, the best choice is usually to use the crypto-js library, which is well-supported for browser-side cryptography.
Implementation steps:
- Add an import for the
crypto-jslibrary. - In
handleCallback, encryptresponse.tokenandresponse.expirationbefore storing. - Save the encrypted string to localStorage.
If you do not wish to add external dependencies, you could use the Web Crypto API (built into browsers), but for simplicity and cross-browser support, here we recommend crypto-js.
| @@ -3,7 +3,7 @@ | ||
| import { NavigationPaths, WithNavigate } from '@/utils/navigation' | ||
| import { completeOAuth, validateOAuthState } from '@/utils/oauth' | ||
| import { setTitle } from '@/utils/dom' | ||
|
|
||
| import CryptoJS from 'crypto-js' | ||
| type OAuthCallbackViewProps = WithNavigate | ||
|
|
||
| class OAuthCallbackViewImpl extends React.Component<OAuthCallbackViewProps> { | ||
| @@ -56,9 +56,12 @@ | ||
|
|
||
| // Exchange code for token | ||
| const response = await completeOAuth(code) | ||
| localStorage.setItem('ca_token', response.token) | ||
| localStorage.setItem('ca_expiration', response.expiration) | ||
|
|
||
| // Encrypt token and expiration before saving to localStorage | ||
| const encryptionKey = 'ca_oauth_secret' // Use a better key management strategy in production | ||
| const encryptedToken = CryptoJS.AES.encrypt(response.token, encryptionKey).toString() | ||
| const encryptedExpiration = CryptoJS.AES.encrypt(response.expiration, encryptionKey).toString() | ||
| localStorage.setItem('ca_token', encryptedToken) | ||
| localStorage.setItem('ca_expiration', encryptedExpiration) | ||
| // Navigate to home or redirect URL | ||
| const redirectUrl = localStorage.getItem('ca_redirect') | ||
| if (redirectUrl) { |
| @@ -27,7 +27,8 @@ | ||
| "react-redux": "^9.1.2", | ||
| "react-router-dom": "^7.6.2", | ||
| "react": "^19.1.0", | ||
| "vite-plugin-package-version": "^1.1.0" | ||
| "vite-plugin-package-version": "^1.1.0", | ||
| "crypto-js": "^4.2.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@eslint/js": "^9.18.0", |
| Package | Version | Security advisories |
| crypto-js (npm) | 4.2.0 | None |
Co-authored-by: dkhalife <[email protected]>
Co-authored-by: dkhalife <[email protected]>
Co-authored-by: dkhalife <[email protected]>
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
Overview
This PR adds OAuth2 authentication support to Task Wizard, enabling integration with identity providers like Azure Entra ID (formerly Azure AD). The implementation maintains full backward compatibility with existing username/password authentication through a feature flag, allowing both authentication methods to coexist.
Problem Statement
The application currently uses custom username/password authentication with bcrypt-hashed passwords stored in the database. For enterprise deployments and better security management, integration with centralized identity providers (like Azure Entra ID) is needed. This allows:
Solution
Backend (Go)
Added comprehensive OAuth2/OIDC support:
OAuthConfigstructure supporting client credentials, endpoints, scopes, and JWKS validationinternal/utils/oauth/oauth.go): Handles authorization URL generation, code exchange, and token validation using OIDCGET /api/v1/oauth/config- Returns OAuth configuration for frontendGET /api/v1/oauth/authorize- Initiates OAuth flow with state tokenGET /api/v1/oauth/callback- Handles OAuth callback and token exchangeTW_OAUTH_*environment variablesFrontend (TypeScript/React)
Seamless OAuth integration with existing UI:
utils/oauth.ts): Handles OAuth flow, token exchange, and state validationviews/OAuth/OAuthCallbackView.tsx): Processes OAuth redirects and completes authenticationVITE_OAUTH_*environment variables during buildConfiguration Examples
Provided comprehensive example configurations:
apiserver/config/config.oauth-example.yaml- Backend configuration with Azure Entra ID examplefrontend/.env.oauth-example- Frontend configuration with detailed commentsAzure Entra ID Configuration Example
Backend (
config.yaml):Frontend (
.env):VITE_OAUTH_ENABLED=true VITE_OAUTH_CLIENT_ID=frontend-client-id VITE_OAUTH_AUTHORITY=https://login.microsoftonline.com/{tenant-id}/oauth2/v2.0/authorize VITE_OAUTH_SCOPE=api://backend-api-client-id/Tasks.ReadWrite VITE_OAUTH_REDIRECT_URI=https://your-domain.com/oauth/callbackKey Features
Testing
Usage
config.yamlor via environment variablesVITE_OAUTH_*environment variables during buildSecurity Considerations
Tasks.ReadWrite) follow principle of least privilegeBackward Compatibility
false(OAuth disabled)Documentation
Closes #[issue-number]
Warning
Firewall rules blocked me from connecting to one or more addresses (expand for details)
I tried to connect to the following addresses, but was blocked by firewall rules:
example.com/tmp/go-build3213028217/b001/oauth.test -test.testlogfile=/tmp/go-build3213028217/b001/testlog.txt -test.paniconexit0 -test.timeout=10m0s -test.v=true(dns block)/tmp/go-build2574432368/b482/oauth.test -test.testlogfile=/tmp/go-build2574432368/b482/testlog.txt -test.paniconexit0 -test.timeout=10m0s(dns block)If you need me to access, download, or install something from one of these locations, you can either:
Original prompt
💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.