Skip to content
This repository was archived by the owner on Jan 23, 2026. It is now read-only.
This repository was archived by the owner on Jan 23, 2026. It is now read-only.

callback error url parameters are formatted incorrectly #739

Description

@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

Activity

  1. denvudd commented on Mar 25, 2024

    @denvudd

    +1
    Did you find a solution?

  2. jdgamble555 commented on Mar 25, 2024

    @jdgamble555
    Author

    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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions