Supabase Auth bug exchangeCodeForSession returns "both auth code and code verifier should be non-empty"

[luisfelipeluis49]

Bug report

• I confirm this is a bug with Supabase, not with my own application.
• I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

Architecture:

This is Cross-Platform web-based (SEO focused) project, that was built in CSR due to bad performance using SSR w/ Capacitor framework.

Client: Svelte + Vite + Capacitor

Due to use of vanilla Svelte, to handle navigation our choice was "svelte-routing", for building the app on both web and mobile (iOS and Android) we use Capacitor.

Server: Fastify + Supabase

Our server framework of choice was Fastify, as long w/ Supabase, and thus we need to use the Supabase Auth solutions, what prevent us from using tools like Capacitor Generic OAuth2.

---

Problem

Following the Supabase guide to implement Google OAuth2, when storing the user session, got an AuthApiError: "invalid request: both auth code and code verifier should be non-empty"

---

Packages:

// package.json
{
    ...,
    "dependencies": {
        "@fastify/compress": "^8.0.1",
        "@fastify/cookie": "^11.0.2",
        "@fastify/cors": "^10.0.2",
        "@fastify/env": "^5.0.2",
        "@fastify/formbody": "^8.0.2",
        "@fastify/multipart": "^9.0.2",
        "@fastify/static": "^8.0.4",
        "@supabase/ssr": "^0.5.2",
        "@supabase/supabase-js": "^2.47.16",
        "dotenv": "^16.4.7",
        "fastify": "^5.2.1",
        ...
    },
    "packageManager": "yarn@4.5.1"
}

---

Code

Front:

Google sign-in button:

// AuthFormFooter.svelte

<script>
    // -- IMPORTS

    ...

    // -- FUNCTIONS

    async function signInWithOAuth(
        provider
        )
    {
        ...

        try
        {
            let redirectionToUrl;

            switch ( platform )
            {
                case 'android':
                    redirectionToUrl = 'com.myapp://auth';
                    break;
                case 'ios':
                    redirectionToUrl = 'com.myapp://auth';
                    break;
                default:
                    redirectionToUrl = 'http://localhost:5173/auth';
            }

            let data = await fetchData(
                '/api/auth/open-auth',
                {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify( { provider, redirectionToUrl } )
                }
                );

            if ( data.error )
            {
                console.error( 'Server sign-in error:', data.error );
            }
            else
            {
                if ( data.url )
                {
                    window.location.href = data.url;
                }
                else
                {
                    console.error( 'Server sign-in error:', data );
                }
            }
        }
        catch ( error )
        {
            console.error( errorText, error );
        }
    }
</script>

<div class="auth-modal-socials">
    <div
        class="auth-modal-socials-item"
        on:click={() => signInWithOAuth( 'google' )}>
        <span class="google-logo-icon size-150"></span>
    </div>
</div>

Auth Callback:

// AuthPage.svelte

<script>
    // -- IMPORTS

    import { onMount } from 'svelte';
    import { fetchData } from '$lib/base';
    import { navigate } from 'svelte-routing';

    // -- FUNCTIONS

    async function authCallback(
        code,
        next
        )
    {
        try
        {
            let response = await fetchData(
                '/api/auth/callback',
                {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify( { code } )
                }
                );

            if ( response.success )
            {
                navigate( `/${ next.slice( 1 ) }`, { replace: true } );
            }
            else
            {
                console.error( 'Authentication failed' );
            }
        }
        catch ( error )
        {
            console.error( 'Error during authentication', error );
        }
    }

    onMount(
        async () =>
        {
            let params = new URLSearchParams( window.location.search );
            let code = params.get( 'code' );
            let next = params.get( 'next' ) || '/';
            if ( code )
            {
                await authCallback( code, next );
            }
            else
            {
                console.error( 'No code found in query params' );
            }
        }
        );
</script>

Server:

Supabase client configuration:

// supabase_service.js

class SupabaseService
{
    // -- CONSTRUCTORS

    constructor(
        )
    {
        this.client = null;
    }

    // -- OPERATIONS

    initalizeDatabaseClient(
        request,
        reply
        )
    {
        this.client = createServerClient(
            process.env.SUPABASE_DATABASE_URL,
            process.env.SUPABASE_DATABASE_KEY,
            {
                cookies:
                {
                    getAll()
                    {
                        return parseCookieHeader( request.headers.cookie ?? '' );
                    },
                    setAll( cookiesToSet )
                    {
                        cookiesToSet.forEach(
                            ( { name, value, options } ) =>
                            {
                                let serializedCookie = serializeCookieHeader( name, value, options );

                                reply.header( 'Set-Cookie', serializedCookie );
                            }
                            );
                    }
                },
                auth:
                {
                    flowType: 'pkce'
                }
            }
            );
    }

    // ~~

    getClient(
        request,
        reply
        )
    {
        return this.client;
    }
}

// -- VARIABLES

export let supabaseService
    = new SupabaseService();

Auth controller:

// authentication_controller.js

...

// -- FUNCTIONS

...

// ~~

async function openAuth(
    request,
    reply
    )
{
    reply.header( 'Access-Control-Allow-Credentials', true );
    reply.header( 'Access-Control-Allow-Origin', request.headers.origin );

    let { redirectionToUrl, provider } = request.body;

    try
    {
        let { data, error } = await supabaseService.getClient().auth.signInWithOAuth(
            {
                provider,
                options: { redirectTo: redirectionToUrl }
            }
            );

        if ( data.url )
        {
            let url = data.url;

            return reply.code( 200 ).send( { url } );
        }
        else
        {
            return reply.code( 400 ).send( { error: 'auth-sign-in-failed' } );
        }
    }
    catch ( error )
    {
        return reply.code( 500 ).send(
            {
                error: 'Server error', details: error
            }
            );
    }
}

// ~~

async function authCallback(
    request,
    reply
    )
{
    reply.header( 'Access-Control-Allow-Credentials', true );
    reply.header( 'Access-Control-Allow-Origin', request.headers.origin );

    let code = request.body.code;
    let route = request.body.route ?? '/';

    try
    {
        if ( code )
        {
            let { data, error } =
                await supabaseService.getClient().auth.exchangeCodeForSession( code );

            if ( error )
            {
                return reply.code( 400 ).send(
                    {
                        success: false,
                        error: error.message
                    }
                    );
            }

            return reply.code( 200 ).send(
                {
                    success: true,
                    route
                }
                );
        }
        else
        {
            return reply.code( 400 ).send(
                {
                    success: false,
                    error: 'No code provided'
                }
                );
        }
    }
    catch ( error )
    {
        return reply.code( 500 ).send(
            {
                success: false,
                error: 'Server error', details: error
            }
            );
    }
}

// ~~

...

// -- EXPORT

export
{
    ...,
    openAuth,
    authCallback,
    ...
}

Updated all packages, enabled flow type pkce, implemented getAll and setAll instead of get, set and remove on cookies options. But all for nothing, got the same error and couldn't get the solution to this error

---

System information

• OS: Windows 11
• Browser: Microsoft Edge
• Version of Node.js: 20.16.0

[qxygene1]

Is this why redirectTo not working? It only works on base /.

Also trğggers ...supabase.co/auth/v1/user twice.

[j4w8n]

Have you logged code to see if it's there? Also, after the error, is there a code verifier cookie?

The exchangeCodeForSession needs access to both of these - by passing in the code and having access to cookies.

[luisfelipeluis49]

Is this why redirectTo not working? It only works on base /.

Also trğggers ...supabase.co/auth/v1/user twice.

redirectTo works for me though...

@j4w8n yes debugged on client and server, both are getting the code, and sorry wdym code verifier cookie?

[j4w8n]

Is this why redirectTo not working? It only works on base /.

Also trğggers ...supabase.co/auth/v1/user twice.

redirectTo works for me though...

@j4w8n yes debugged on client and server, both are getting the code, and sorry wdym code verifier cookie?

@luisfelipeluis49 I see you're using the ssr library, which uses cookies for storage.

With the pkce flows, supabase will create a code verifier and store it as sb-<proj_id>-code-verifier. Then, when you call exchangeCodeForSession, it takes the code you pass in and then checks storage for the code verifier and sends both to the Supabase backend. If either of them aren't there, supabase returns the error you mentioned.

[j4w8n]

I should correct myself: the ssr library typically shows using cookies for storage, but you may be passing it a different type of storage (you don't show that code).

UPDATE: yes you show cookie storage, I'm sorry.

[qxygene1]

Have you logged code to see if it's there? Also, after the error, is there a code verifier cookie?

The exchangeCodeForSession needs access to both of these - by passing in the code and having access to cookies.

I dont use ssr, it is pwa; redirectTo site/auth/dashboard doesnt create a session, without redirectTo it creates session but only to base /

[j4w8n]

Have you logged code to see if it's there? Also, after the error, is there a code verifier cookie?

The exchangeCodeForSession needs access to both of these - by passing in the code and having access to cookies.

I dont use ssr, it is pwa; redirectTo site/auth/dashboard doesnt create a session, without redirectTo it creates session but only to base /

@qxygene1 if you're not using the ssr library, you should probably open your own issue so we don't get messages confused.

[luisfelipeluis49]

I should correct myself: the ssr library typically shows using cookies for storage, but you may be passing it a different type of storage (you don't show that code).

UPDATE: yes you show cookie storage, I'm sorry.

So, no idea what's happening right?

[j4w8n]

I should correct myself: the ssr library typically shows using cookies for storage, but you may be passing it a different type of storage (you don't show that code).

UPDATE: yes you show cookie storage, I'm sorry.

So, no idea what's happening right?

@luisfelipeluis49 is the code verifier cookie there?

[luisfelipeluis49]

@j4w8n I'm not sure, I know that I'm passing as supposed to be, but I don't know where I can check this

    setAll( cookiesToSet )
    {
        cookiesToSet.forEach(
            ( { name, value, options } ) =>
            {
                let serializedCookie = serializeCookieHeader( name, value, options );

                reply.header( 'Set-Cookie', serializedCookie );
                }
                );
    }

When I tried to see what was on client I added this code to see in the debugger

        let client = supabaseService.getClient();

        let { data, error } = await client.auth.signInWithOAuth(
            {
                provider,
                options: { redirectTo: redirectionToUrl }
            }
            );

        if ( data.url )
        {
            let url = data.url;
            let headers = client;

            return reply.code( 200 ).send( { url, headers } );
        }

And inside of client there was it:

[j4w8n]

I'm not sure how to check if you're using mobile. If possible, might try on a desktop browser.

[luisfelipeluis49]

@j4w8n I'm testing on desktop chromium based browser (Microsoft Edge), using http://localhost:5173

[j4w8n]

Then you should be able to check for the cookie in dev tools - after you try to login.