How to fix flow_state_not_found: PKCE flow state could not be found in Supabase

// Server-side configuration (if self-hosting Supabase)
// In your Supabase Auth configuration or environment variables
AUTH_FLOW_STATE_EXPIRY=900  // 15 minutes in seconds

// For managed Supabase, you may need to contact support
// or check project settings for timeout adjustments

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(supabaseUrl, supabaseAnonKey)

// Store code verifier in localStorage (survives page reloads)
// instead of sessionStorage (cleared on page reload)
const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'github',
  options: {
    // Supabase automatically handles PKCE, but ensure storage is consistent
    redirectTo: 'https://yourapp.com/auth/callback',
    // For custom implementations, store the code verifier:
    // codeVerifier: localStorage.getItem('pkce_code_verifier')
  }
})

// Clean up stored verifier after successful authentication
window.addEventListener('beforeunload', () => {
  localStorage.removeItem('pkce_code_verifier')
})

async function handleOAuthCallback() {
  try {
    const { data, error } = await supabase.auth.getSession()

    if (error?.message.includes('flow_state_not_found')) {
      console.warn('PKCE flow state expired or lost, restarting OAuth flow')

      // Clear any stale auth state
      await supabase.auth.signOut()

      // Restart OAuth flow with fresh state
      const { error: oauthError } = await supabase.auth.signInWithOAuth({
        provider: 'github',
        options: {
          redirectTo: window.location.href,
          skipBrowserRedirect: false
        }
      })

      if (oauthError) throw oauthError
      return
    }

    // Normal session handling...
  } catch (error) {
    console.error('Auth flow error:', error)
    // Show user-friendly message and retry button
  }
}

let oauthInProgress = false

async function startOAuthFlow(provider) {
  if (oauthInProgress) {
    console.warn('OAuth flow already in progress, waiting...')
    return
  }

  oauthInProgress = true

  try {
    const { error } = await supabase.auth.signInWithOAuth({
      provider,
      options: {
        redirectTo: 'https://yourapp.com/auth/callback'
      }
    })

    if (error) throw error
  } finally {
    // Reset flag after timeout to handle abandoned flows
    setTimeout(() => {
      oauthInProgress = false
    }, 30000) // 30 seconds
  }
}

// Also prevent multiple tabs from initiating OAuth simultaneously
window.addEventListener('storage', (event) => {
  if (event.key === 'oauth_flow_active') {
    if (event.newValue === 'true') {
      console.warn('OAuth flow active in another tab')
      // Show warning or disable login button
    }
  }
})

// Correct PKCE flow for custom OAuth
import { generatePKCE } from '@supabase/auth-js'

// 1. Generate code verifier and challenge
const { codeVerifier, codeChallenge } = await generatePKCE()

// 2. Store code verifier securely (survives redirects)
localStorage.setItem('pkce_code_verifier', codeVerifier)

// 3. Include code_challenge in authorization request
const authUrl = `https://custom-provider.com/oauth/authorize?client_id=YOUR_CLIENT_ID&redirect_uri=https://yourapp.com/auth/callback&response_type=code&code_challenge=${codeChallenge}&code_challenge_method=S256`

// 4. Exchange code for token with stored verifier
async function exchangeCode(code) {
  const codeVerifier = localStorage.getItem('pkce_code_verifier')

  const response = await fetch('https://custom-provider.com/oauth/token', {
    method: 'POST',
    body: new URLSearchParams({
      grant_type: 'authorization_code',
      code,
      redirect_uri: 'https://yourapp.com/auth/callback',
      client_id: 'YOUR_CLIENT_ID',
      code_verifier: codeVerifier
    })
  })

  // Clean up after successful exchange
  localStorage.removeItem('pkce_code_verifier')
  return response.json()
}

// Client-side logging
supabase.auth.onAuthStateChange((event, session) => {
  console.log('Auth event:', event, 'Session:', session)

  if (event === 'SIGNED_IN') {
    console.log('PKCE flow completed successfully')
    // Clear any debugging flags
    localStorage.removeItem('oauth_flow_started')
  }
})

// Log OAuth initiation
localStorage.setItem('oauth_flow_started', Date.now())

// Server-side (if you have access to Supabase logs)
// Monitor these log patterns:
// - "flow_state_not_found" errors in auth logs
// - PKCE flow creation vs completion timestamps
// - User agent and IP patterns for failing flows

// Implement alerting for elevated failure rates
const FLOW_STATE_FAILURE_THRESHOLD = 0.1 // 10%
if (flowStateFailures / totalOAuthAttempts > FLOW_STATE_FAILURE_THRESHOLD) {
  console.error('Elevated PKCE flow state failure rate detected')
  // Send alert to monitoring system
}