Support query parameters on Redirect /callback URIs

[kumarabhirup]

Exactly this, but for supabase-js: supabase/auth#1150
Right now, /callback (or other redirect URIs) are appended with ?code=xxx, how do I add my own custom parameters there?

              await supabase.auth.signInWithOAuth({
                provider: "apple",
                options: {
                  redirectTo: window.location.origin + "/callback"
                },
              })

[GaryAustin1]

Are you looking for this:

https://supabase.com/docs/reference/javascript/auth-signinwithoauth

[kumarabhirup]

Hey @GaryAustin1 thank you so much! How would you access this in /callback?

I tried this:

export async function GET(request: Request) {
  // The `/auth/callback` route is required for the server-side auth flow implemented
  // by the Auth Helpers package. It exchanges an auth code for the user's session.
  // https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-sign-in-with-code-exchange

  const requestUrl = new URL(request.url);
  const code = requestUrl.searchParams.get("code") as string;

  // always null somehow?
  const referralCodeFromHeaders = request.headers.get('x-referral-code') || requestUrl.searchParams.get("referralCode")

[GaryAustin1]

Sorry, beyond my skill set. I don't use redirects in my own code and not got into this level of detail. I can't guarantee that option even does what you want. This is their definition of query parameters in this context.

from here: https://github.com/supabase/gotrue-js/blob/15c7c8258b2d42d3378be4f7738c728a07523579/src/GoTrueClient.ts#L2252

At a quick reading seems like they are for the auth provider... but I'm not sure.

[GaryAustin1]

#14695 (comment)

[kumarabhirup]

hmm, so queryParams can't be accessed in the callback at all, I wonder if the Supabase team knows how I can append to ?code on Redirect URL.

[Slyracoon23]

I have the same issue. Any update would be appreciated

[j4crev]

@Slyracoon23 can you clarify why you're trying to do this?

Maybe I'm misunderstanding, but this has always worked for me. It's for my app to consume though, not the OAuth provider.

redirectTo: `${url.origin}/auth/callback?next=/app`

Then in the callback route(SvelteKit):

const next = url.searchParams.get('next') ?? '/'

[Slyracoon23]

Thanks for the reply @j4w8n

My first approach was to add the query parameter in the redirectTo like you suggested:

redirectTo: `${url.origin}/auth/callback?invite_id=xxxx`

However, when I deployed to production, the whitelist URL checks rejected any additional query params that did not follow the OAuth protocol.

I resolved my issue by introducing another endpoint that adds the identifier in the route path instead:

redirectTo: `${url.origin}/auth/${invite_id}/callback`

This way, I can whitelist this auth redirect, and it worked!

I'm not sure if this is a limitation of Supabase or a general requirement of the OAuth specifications.

[bytemtek]

Thanks for the reply @j4w8n

My first approach was to add the query parameter in the redirectTo like you suggested:

redirectTo: `${url.origin}/auth/callback?invite_id=xxxx`

However, when I deployed to production, the whitelist URL checks rejected any additional query params that did not follow the OAuth protocol.

I resolved my issue by introducing another endpoint that adds the identifier in the route path instead:

redirectTo: `${url.origin}/auth/${invite_id}/callback`

This way, I can whitelist this auth redirect, and it worked!

I'm not sure if this is a limitation of Supabase or a general requirement of the OAuth specifications.

I fixed with @Slyracoon23 method.
Thank you man !

[bytemtek]

Is there any solution about it ?

[leonardo2204]

I have the same problem. I can see the params being sent to supabase servers:

{
  provider: 'google',
  url: 'https://xxx.supabase.co/auth/v1/authorize?provider=google&redirect_to=http%3A%2F%2Flocalhost%3A3000%2Fauth%2Fcallback&code_challenge=<removed>&code_challenge_method=s256&invitation_code=123'
}

I'm sending the invitation_code here
The request back:

URL {
  href: 'http://localhost:3000/auth/callback?code=<edited>',
  origin: 'http://localhost:3000',
  protocol: 'http:',
  username: '',
  password: '',
  host: 'localhost:3000',
  hostname: 'localhost',
  port: '3000',
  pathname: '/auth/callback',
  search: '?code=<edited>',
  searchParams: URLSearchParams { 'code' => '<edited>' },
  hash: ''
}

So, basically the invitation_code is lost when supabase server returns.

[bytemtek]

I have the same problem. I can see the params being sent to supabase servers:

{
  provider: 'google',
  url: 'https://xxx.supabase.co/auth/v1/authorize?provider=google&redirect_to=http%3A%2F%2Flocalhost%3A3000%2Fauth%2Fcallback&code_challenge=<removed>&code_challenge_method=s256&invitation_code=123'
}

I'm sending the invitation_code here The request back:

URL {
  href: 'http://localhost:3000/auth/callback?code=<edited>',
  origin: 'http://localhost:3000',
  protocol: 'http:',
  username: '',
  password: '',
  host: 'localhost:3000',
  hostname: 'localhost',
  port: '3000',
  pathname: '/auth/callback',
  search: '?code=<edited>',
  searchParams: URLSearchParams { 'code' => '<edited>' },
  hash: ''
}

So, basically the invitation_code is lost when supabase server returns.

Try this, it's works for me.

https://github.com/orgs/supabase/discussions/21110#discussioncomment-9976704

[leonardo2204]

I saw this answer, but my invitation may be optiona, so it would be bizarre to have null in the URL. Also, it seems wrong to no pass the query params forward (bug, maybe?).

[linkdd]

@leonardo2204
I am in the same boat, and this is what I ended up doing:

I am using NextJS (React SSR framework), my callback route is /auth/callback/[[...next]], it will match the following:

Path	Params
/auth/callback	{ next: undefined }
/auth/callback/foo	{ next: ['foo'] }
/auth/callback/foo/bar	{ next: ['foo', 'bar'] }

In Supabase, I went to Auth > Configuration > Redirect URL and added the following:

• http://localhost:3000/auth/callback
• http://localhost:3000/auth/callback/** (the ** means any sequence of characters, separators included, as opposed to *)

Now my callback route does this :

const defaultNext = urlParams.next ? `/${urlParams.next.join('/')}` : '/'
const next = searchParams.get('next') ?? defaultNext

Any decent web framework should be able to do that or similar.

While I agree that it is wrong to not forward query parameters, this at least solve the "null in URL" problem.

[Chippd]

Hitting this problem myself now. I'd love to be able to pass arbitrary query params to the redirect so that I can handle them in my app on successful authentication as needed.

[alexreyes]

I also had this problem. Specifically I wanted to redirect to this URL after google sign in:

https://makeasite.io/auth/callback?preview_url=https://test.makeasite.io

But it kept bringing me to my default site URL (makeasite.io in my case).

It turns out, what I needed to do was change the redirect URL from:

https://makeasite.io/auth/callback

to:

https://makeasite.io/auth/*

The wildcard ended up allowing the query params to go through!

Here's a screenshot for reference:

[atali]

that discussion could be an option : https://github.com/orgs/supabase/discussions/20439

[josefbender]

You simply can't have dynamic urls for the callback url, even google forbids configuring that. If you want to have some additional data when logging a user in, you can save it in local storage and load it back in the callback route.

[Chippd]

You simply can't have dynamic urls for the callback url

Out of curiosity, why? Is it a security issue?