callback error url parameters are formatted incorrectly

[jdgamble555]

Bug report

When I login with a Magic Link, or with Oauth, there can sometimes be an error. In the case of Oauth, there could be an error if the client secret is wrong. In the case of a Magic Link, there could be an error if the code has expired or already been used.

The searchParam parameters are not formatted correctly. For example I get this:

http://localhost:5173/auth/callback#error=unauthorized_client&error_code=401&error_description=Email+link+is+invalid+or+has+expired

Notice there is a hash # instead of a & or ?. If I need to parse these error messages to display them to the user, I would have to use a url hack. It is also differently formatted with login with oauth. It should be formatted correctly in any case so that I can display the error, error_code, and error_description respectively.

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

Describe the bug

See above.

To Reproduce

Login with a magic link that has expired. Make sure the server component (in React, SvelteKit, whatever) does not redirect to another page and look at the URL.

Expected behavior

The url parameters should be correctly formatted in both cases (oAuth and magic link). Then I could display the correct error messages to the user simply by parsing the URL.

System information

• OS: Windows 11
• Version of supabase-js: 1.77.9
• Version of Node.js: 18
• SvelteKit with auth-helpers-sveltekit: 0.10.1

Additional context

I would also like this formatted correctly when I pass additional parameters. For example next:

const { error } = await supabase.auth.signInWithOAuth({
	provider,
	options: {
		redirectTo: $page.url.origin + `/auth/callback?next=${next}`
	}
});

This may result in double ? instead of the correctly formatted ? and & for parameters.

Thanks,

J

[denvudd]

+1
Did you find a solution?

[jdgamble555]

I'm parsing just the description for now. Here is my SvelteKit example. This needs to be fixed internally in GoTrueJS.

import { error, redirect } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';

export const load = (async ({ url, locals: { supabase } }) => {

    const _error = url.searchParams.get('error_description');
    if (_error) {
        const description = _error || 'Authentication Provider Error';
        error(400, description);
    }

    const code = url.searchParams.get('code');
    const next = url.searchParams.get('next') || '/dashboard';

    if (code) {
        const { error: codeError } = await supabase.auth.exchangeCodeForSession(code);
        if (!codeError) {
            redirect(303, next);
        }
        error(400, codeError.message);
    }    

}) satisfies PageServerLoad;