fix(auth): make PKCE optional for OAuth sign-in (#5570)

Fixes issue where OAuth sign-in fails with 'Cannot read properties of
undefined (reading 'digest')' when accessing Memos over HTTP.

The crypto.subtle API is only available in secure contexts (HTTPS or
localhost), but PKCE (RFC 7636) is optional per OAuth 2.0 standards.

Changes:
- Make PKCE generation optional with graceful fallback
- Use PKCE when crypto.subtle available (HTTPS/localhost)
- Fall back to standard OAuth flow when unavailable (HTTP)
- Log warning to console when PKCE unavailable
- Only include code_challenge in auth URL when PKCE enabled

The backend already supports optional PKCE (empty codeVerifier), so no
backend changes needed. This fix aligns frontend behavior with backend.

Benefits:
- OAuth sign-in works on HTTP deployments (reverse proxy scenarios)
- Enhanced security (PKCE) still used when HTTPS available
- Backward compatible with OAuth providers that don't support PKCE

Fixes #5570
This commit is contained in:
Steven 2026-02-02 23:27:40 +08:00
parent 3f8d867bb6
commit 43b5a51ec7
2 changed files with 37 additions and 9 deletions

View File

@ -49,17 +49,23 @@ const SignIn = () => {
try {
// Generate and store secure state parameter with CSRF protection
// Also generate PKCE parameters (code_challenge) for enhanced security
// Also generate PKCE parameters (code_challenge) for enhanced security if available
const identityProviderId = extractIdentityProviderIdFromName(identityProvider.name);
const { state, codeChallenge } = await storeOAuthState(identityProviderId);
// Build OAuth authorization URL with secure state and PKCE
// Build OAuth authorization URL with secure state
// Include PKCE if available (requires HTTPS/localhost for crypto.subtle)
// Using S256 (SHA-256) as the code_challenge_method per RFC 7636
const authUrl = `${oauth2Config.authUrl}?client_id=${
let authUrl = `${oauth2Config.authUrl}?client_id=${
oauth2Config.clientId
}&redirect_uri=${encodeURIComponent(redirectUri)}&state=${state}&response_type=code&scope=${encodeURIComponent(
oauth2Config.scopes.join(" "),
)}&code_challenge=${codeChallenge}&code_challenge_method=S256`;
)}`;
// Add PKCE parameters if available
if (codeChallenge) {
authUrl += `&code_challenge=${codeChallenge}&code_challenge_method=S256`;
}
window.location.href = authUrl;
} catch (error) {

View File

@ -40,18 +40,40 @@ function base64UrlEncode(buffer: Uint8Array): string {
}
// Store OAuth state and PKCE parameters in sessionStorage
// Returns both state and codeChallenge for use in authorization URL
export async function storeOAuthState(identityProviderId: number, returnUrl?: string): Promise<{ state: string; codeChallenge: string }> {
// Returns state and optional codeChallenge for use in authorization URL
// PKCE is optional - if crypto APIs are unavailable (HTTP context), falls back to standard OAuth
export async function storeOAuthState(identityProviderId: number, returnUrl?: string): Promise<{ state: string; codeChallenge?: string }> {
const state = generateSecureState();
const codeVerifier = generateCodeVerifier();
const codeChallenge = await generateCodeChallenge(codeVerifier);
// Try to generate PKCE parameters if crypto.subtle is available (HTTPS/localhost)
// Falls back to standard OAuth flow if unavailable (HTTP context)
let codeVerifier: string | undefined;
let codeChallenge: string | undefined;
try {
// Check if crypto.subtle is available (requires secure context: HTTPS or localhost)
if (typeof crypto !== "undefined" && crypto.subtle) {
codeVerifier = generateCodeVerifier();
codeChallenge = await generateCodeChallenge(codeVerifier);
} else {
console.warn(
"PKCE not available: crypto.subtle requires HTTPS. Falling back to standard OAuth flow without PKCE. " +
"For enhanced security, please access Memos over HTTPS.",
);
}
} catch (error) {
// If PKCE generation fails for any reason, fall back to standard OAuth
console.warn("Failed to generate PKCE parameters, falling back to standard OAuth:", error);
codeVerifier = undefined;
codeChallenge = undefined;
}
const stateData: OAuthState = {
state,
identityProviderId,
timestamp: Date.now(),
returnUrl,
codeVerifier, // Store for later retrieval in callback
codeVerifier, // Store for later retrieval in callback (undefined if PKCE not available)
};
try {