S
Supabase2mo ago
mike

OAuth PKCE documentation needs an update for `createClient`

I was attempting to use the PKCE flow for google OAuth login but kept getting a result where the supabase auth endpoint would redirect to my url with an access token and other values at <redirecturl>#<values>, and there was no code to exchange but it had a supabase access token. After debugging and digging through mounds of issues and examples, I found that I needed to set a config option when using createClient from the @supabasejs/supabase-js library. This tells the auth to use the pkce flow:
import { createClient } from '@supabase/supabase-js';
createClient( <supabaseUrl>, <supabaseAnonKey>, { auth: { flowType: 'pkce' } })
import { createClient } from '@supabase/supabase-js';
createClient( <supabaseUrl>, <supabaseAnonKey>, { auth: { flowType: 'pkce' } })
None of the examples in the high-level OAuth documentation or facebook/google oauth docs said this needed to be done, and all the posts and issues I found did not mention anything about this (maybe because most of them are using createServerClient from the ssr package?). I did finally end up on this page of the js client docs and found the configuration. The most confusing part of all of this is that none of the other pkce flows for internal authentication required this configuration. E.g., registration, magiclink, email and phone verification all worked with the OTP.
JavaScript: Exchange an auth code for a session | Supabase Docs
Supabase API reference for JavaScript: Exchange an auth code for a session
2 Replies
mike
mikeOP2mo ago
per a recommendation, I made a github issue for this
j4
j42mo ago
Definitely room for improvement here. Even on the PKCE Flow tabs, they don't cover creating the supbase client and setting the correct options. With the SSR package, the option is set for you.

Did you find this page helpful?