Cannot redirect to redirectTo url when using the signInWithOAuth function

using @supabase/ssr

"use client";

import { createClient } from "@/utils/supabase/client";

export default function GoogleButton() {
  async function signInWithGoogle() {
    const supabase = createClient();

    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: "google",
      options: {
        redirectTo: 'https://example.com/welcome',
      }
    });

    if (error) {
      console.error("Google sign-in error:", error.message);
    }
  }

  return <button onClick={signInWithGoogle}>Sign in with Google</button>;
}

"use client";

import { createClient } from "@/utils/supabase/client";

export default function GoogleButton() {
  async function signInWithGoogle() {
    const supabase = createClient();

    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: "google",
      options: {
        redirectTo: 'https://example.com/welcome',
      }
    });

    if (error) {
      console.error("Google sign-in error:", error.message);
    }
  }

  return <button onClick={signInWithGoogle}>Sign in with Google</button>;
}

import { createBrowserClient } from '@supabase/ssr'

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )
}

import { createBrowserClient } from '@supabase/ssr'

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )
}

the login with password one works fine, but this one does not I followed the guide for server side auth, and I can't get this client side oauth with google to work. For redirect, I've tried everything but it just defaults to the default that I had set in supabase. When I had this prior fully client side (with no server side auth), it worked. No idea how to fix this and help would be appreciated, thanks

24 Replies

silentworks•4w ago

Can you share a link to the doc you followed here please?

JohnOP•4w ago

@silentworks https://supabase.com/docs/guides/auth/server-side/nextjs

Setting up Server-Side Auth for Next.js | Supabase Docs

JohnOP•4w ago

And then I couldn't figure out how to get the google oauth to work (that link only showed for simple user pass sign in)

silentworks•4w ago

You will have to continue with this guide to get this information https://supabase.com/docs/guides/auth/social-login/auth-google?queryGroups=environment&environment=server#signing-users-in

JohnOP•4w ago

even if i follow that and have something like

"use client";

import { createClient } from "@/utils/supabase/client";
import { redirect } from "next/navigation";

export default function GoogleButton() {
  async function signInWithGoogle() {
    const supabase = createClient();

    const redirectTo = `${process.env.NEXT_PUBLIC_SITE_URL}/auth/callback`;

    console.log("Google OAuth redirectTo:", redirectTo);

    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: "google",
      options: {
        redirectTo,
      }
    });

    if(data.url) redirect(data.url);

    if (error) {
      console.error("Google sign-in error:", error.message);
    }
  }

  return <button onClick={signInWithGoogle}>Sign in with Google</button>;
}

"use client";

import { createClient } from "@/utils/supabase/client";
import { redirect } from "next/navigation";

export default function GoogleButton() {
  async function signInWithGoogle() {
    const supabase = createClient();

    const redirectTo = `${process.env.NEXT_PUBLIC_SITE_URL}/auth/callback`;

    console.log("Google OAuth redirectTo:", redirectTo);

    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: "google",
      options: {
        redirectTo,
      }
    });

    if(data.url) redirect(data.url);

    if (error) {
      console.error("Google sign-in error:", error.message);
    }
  }

  return <button onClick={signInWithGoogle}>Sign in with Google</button>;
}

it still redirects to a different url @silentworks when i was just using client side, this worked

  const signInWithGoogle: AuthCtx["signInWithGoogle"] = async () => {
    const frontendUrl = process.env.NEXT_PUBLIC_SITE_URL;
    setLoading(true);
    try {
      const { data, error } = await supabase.auth.signInWithOAuth({
        provider: "google",
        options: {
          redirectTo: frontendUrl,
        },
      });
      if (error) return { ok: false, error: error?.message };

      return { ok: true };
    } catch (error: any) {
      console.error("Google sign-in error:", error);
      return { ok: false, error: error?.message || "Google Sign-in failed" };
    } finally {
      setLoading(false);
    }
  };

  const signInWithGoogle: AuthCtx["signInWithGoogle"] = async () => {
    const frontendUrl = process.env.NEXT_PUBLIC_SITE_URL;
    setLoading(true);
    try {
      const { data, error } = await supabase.auth.signInWithOAuth({
        provider: "google",
        options: {
          redirectTo: frontendUrl,
        },
      });
      if (error) return { ok: false, error: error?.message };

      return { ok: true };
    } catch (error: any) {
      console.error("Google sign-in error:", error);
      return { ok: false, error: error?.message || "Google Sign-in failed" };
    } finally {
      setLoading(false);
    }
  };

silentworks•4w ago

What do you mean by redirect to a different URL? please provide some concrete examples of what is happening as a user flow.

JohnOP•4w ago

so my NEXT_PUBLIC_SITE_URL is localhost:3000 it is redirecting to the production site url no matter what url i put in redirectTo (for the first approach, when i did client side only it did redirect correctly)

silentworks•4w ago

This is rather confusing because I now don't know what first approach you are referring to

JohnOP•4w ago

This one This was only using client side The one I am struggling is with now using server side auth

silentworks•4w ago

Are you using the same hosted Supabase instance for both local development and your production app?

JohnOP•4w ago

yes

silentworks•4w ago

Firstly this is bad practice but if you do wish to continue this way, you need to add your localhost:3000 as a Redirect URL inside of your dashboard. https://supabase.com/dashboard/project/_/auth/url-configuration

JohnOP•4w ago

Sure, but it already should be there if it worked when I was doing only client side auth right?

silentworks•4w ago

I don't know. Also if this works when you did the client side auth why are you changing it to server side?

JohnOP•4w ago

because i need server side gating rather than client side

silentworks•4w ago

You need to make sure the exact URL is set in your Redirect URLs in the Supabase Dashboard, so it should be http://localhost:3000/auth/callback. The client side version you said was working was only using http://localhost:3000.

JohnOP•4w ago

so why wouldn't the redirect work when i just tried redirect to localhsot:3000 then? (adding the exact url did fix the issue though)

silentworks•4w ago

Because this is not the URL you have passed to redirectTo in your code example for the server side setup.

JohnOP•4w ago

yeah, but even when I tried just passing the localhost:3000 it wasn't working

silentworks•4w ago

I think it's best to read the guide as I will only be reiterating what it covers here. But in the shortest format the ssr client requires an extra step in order to get you signed in which is what the page for /auth/callback handles.

JohnOP•4w ago

does magic pasword link require this auth callback handle as well? or is it only the 3rd party oauth providers?

silentworks•4w ago

Magic link (otp) requires a /auth/confirm as it uses a different method to the /auth/callback. It also requires an email template update, you can read more here https://supabase.com/docs/guides/auth/auth-email-passwordless?queryGroups=language&language=js#with-magic-link

JohnOP•4w ago

Got it. Thank you very much

silentworks•4w ago

The Supabase UI docs cover some of these with code examples too https://supabase.com/ui/docs/getting-started/introduction I also have a repo with code examples of all the flows in different frameworks, the Next example is not on the latest Next but it still works https://github.com/silentworks/supabase-by-example

Gaming

Programming

Cannot redirect to redirectTo url when using the signInWithOAuth function

Did you find this page helpful?