signInWithOAuth flowId example
const { data, error } = await supabase.auth.signInWithOAuth({ provider: 'github', }) const flowId = data.flowId
Supabase · Auth · all subjects
session management
14 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
exchangeCodeForSession with flowId
Pass the flow ID to exchangeCodeForSession() to ensure the correct verifier is used, whether you read it from data.flowId or from the sb_flow_id query parameter in the redirect URL.
exchangeCodeForSession with flowId example
const { data, error } = await supabase.auth.exchangeCodeForSession(authCode, { flowId })
Auth Code exchange process
After successful verification, the user is redirected with a URL containing a code parameter (Auth Code). This code can be exchanged for an access token by calling exchangeCodeForSession(code).
Auth Code validity and exchange limits
The auth code has a validity of 5 minutes and can only be exchanged for an access token once. To obtain a new access token, you must restart the authentication flow from scratch.
Custom storage adapter configuration
For PKCE flow run server-side where localStorage may not be available, configure a custom storage adapter by setting the storage option to an object with getItem, setItem, and removeItem methods that can use alternate backing storage such as cookies.
Custom storage adapter example code
const customStorageAdapter: SupportedStorage = { getItem: (key) => { if (!supportsLocalStorage()) { return null } return globalThis.localStorage.getItem(key) }, setItem: (key, value) => { if (!supportsLocalStorage()) { return } globalThis.localStorage.setItem(key, value) }, removeItem: (key) => { if (!supportsLocalStorage()) { return } globalThis.localStorage.removeItem(key) }, }
PKCE client initialization with detectSessionInUrl
Set the detectSessionInUrl option to true to automatically exchange the auth code for a session after a successful redirect.
PKCE client initialization example
const supabase = createClient('https://your-project-id.supabase.co', 'sb_publishable_...', { auth: { detectSessionInUrl: true, flowType: 'pkce', storage: { getItem: () => Promise.resolve('FETCHED_TOKEN'), setItem: () => {}, removeItem: () => {}, }, }, })
PKCE code verifier requirement and limitation
The code exchange requires a code verifier created and stored locally when the auth flow is first initiated. The code exchange must be initiated on the same browser and device where the flow was started.
Overlapping PKCE flows problem
If more than one PKCE flow is started on the same browser before either completes (such as signInWithOAuth() called in two tabs), the code verifier stored for the earlier flow is overwritten by the later one, causing the first flow's code exchange to fail.
Experimental appendPkceFlowIdToRedirects option
To handle overlapping flows, set the experimental appendPkceFlowIdToRedirects option when creating the client. This appends an sb_flow_id query parameter to redirectTo so the OAuth callback page can read it and select the matching verifier.
appendPkceFlowIdToRedirects configuration example
const supabase = createClient(supabaseUrl, supabaseKey, { auth: { experimental: { appendPkceFlowIdToRedirects: true }, }, })
Getting flowId from signInWithOAuth response
When appendPkceFlowIdToRedirects is enabled, you can get the flow ID directly from the response of signInWithOAuth() via data.flowId, or read it from the sb_flow_id query parameter in the redirect URL.