What are the Requirements for redirect URIs

For redirects in Supabase Auth, do I have to include path parameters when registering my redirect URIs?

6 Replies

I can help with this. In Supabase Auth, redirect URIs must match exactly, including path parameters. Are your redirects static or do they include dynamic query parameters? @Harmony

HarmonyOP•2mo ago

I was planning to make them dynamic, but i guess i could jsut construct a statci one?

Lordvickthor•2mo ago

Yes, a static redirect is simplest. For dynamic behavior, you can append query parameters in your app after the redirect without registering multiple URIs. @Harmony

HarmonyOP•2mo ago

say my original redirect uri registered in supabase is: myapp.app/auth/callback but in some cases i need to append extra parameters to the path: myapp.app/auth/callback?redirect_to=new_path do i have to register the one with the parameters as well to make redirects work?

Lordvickthor•2mo ago

No, just register the base URI (myapp.app/auth/callback). You can append query parameters like ?redirect_to=new_path without registering them. @Harmony

HarmonyOP•2mo ago

thanks for the help much appriciated @Lordvickthor 👑 I'm using this:

  const signInWithProvider = async (
    provider: "google" | "facebook",
    redirectPath?: string,
  ) => {
    const redirectTo = `${window.location.origin}/auth/callback`;

    const finalRedirectTo = redirectPath
      ? `${redirectTo}?redirect_to=${encodeURIComponent(redirectPath)}`
      : redirectTo;

    console.log("Signing in with provider:", provider, finalRedirectTo);

    const { error } = await supabase.auth.signInWithOAuth({
      provider,
      options: {
        redirectTo: finalRedirectTo,
        queryParams: { prompt: "select_account" },
      },
    });

    return { error };
  };

  const signInWithProvider = async (
    provider: "google" | "facebook",
    redirectPath?: string,
  ) => {
    const redirectTo = `${window.location.origin}/auth/callback`;

    const finalRedirectTo = redirectPath
      ? `${redirectTo}?redirect_to=${encodeURIComponent(redirectPath)}`
      : redirectTo;

    console.log("Signing in with provider:", provider, finalRedirectTo);

    const { error } = await supabase.auth.signInWithOAuth({
      provider,
      options: {
        redirectTo: finalRedirectTo,
        queryParams: { prompt: "select_account" },
      },
    });

    return { error };
  };

and this is the resulting uri when using google:

https://accounts.google.com/o/oauth2/v2/auth/oauthchooseaccount?client_id=129246029335-ksir271hd81p4n7ro893lp5ti0r2r3tm.apps.googleusercontent.com&prompt=select_account&redirect_to=https%3A%2F%2Fmerry-electric-chicken.ngrok-free.app%2Fauth%2Fcallback%3Fredirect_to%3D%252Fen%252Fpremium%252Fpitch%253Fview%253Dpitch%2526network%253Ddigistore&redirect_uri=https%3A%2F%2Fdhpfsfjdrjotnmstzinx.supabase.co%2Fauth%2Fv1%2Fcallback&response_type=code&scope=email%20profile&state=eyJhbGciOiJIUzI1NiIsImtpZCI6ImZpRVFaRW1QU3FTekJWR1IiLCJ0eXAiOiJKV1QifQ.eyJleHAiOjE3NTY1NDc3NDQsInNpdGVfdXJsIjoiaHR0cHM6Ly9mb29kYW5hbHlzaXN0b29sLmNvbSIsImlkIjoiMDAwMDAwMDAtMDAwMC0wMDAwLTAwMDAtMDAwMDAwMDAwMDAwIiwiZnVuY3Rpb25faG9va3MiOm51bGwsInByb3ZpZGVyIjoiZ29vZ2xlIiwicmVmZXJyZXIiOiJodHRwczovL2Zvb2RhbmFseXNpc3Rvb2wuY29tIiwiZmxvd19zdGF0ZV9pZCI6IiJ9.NJBkz5D5pbmPTXjVKuUiBqiwfTxDR9NRYFtd9PDmrpk&service=lso&o2v=2&flowName=GeneralOAuthFlow

It does include the correct redirect_to path, but apparently something is wrong because I'm being redirected using the fallback redirect url which is the one for my live app

Gaming

Programming

What are the Requirements for redirect URIs

Did you find this page helpful?