Redirect after login

Hi, I was wondering how I can redirect a user to a certain link when they login with OAuth. Here's my login code:

<button
onClick={() => supabaseClient.auth.signInWithOAuth({
  provider: "google",
  options: {
    redirectTo: "/settings" //I've tried variations, i.e. http://localhost:3000/settings and localhost:3000/settings.
  },
 })
}
>Log in</button>

<button
onClick={() => supabaseClient.auth.signInWithOAuth({
  provider: "google",
  options: {
    redirectTo: "/settings" //I've tried variations, i.e. http://localhost:3000/settings and localhost:3000/settings.
  },
 })
}
>Log in</button>

Here are my redirect links under auth/url-configuration: (keep in mind that I'm hoping to just have http://localhost:3000 and not http://localhost:3000/settings)

18 Replies

garyaustin•3y ago

You need the complete URL in both places.

LukasOP•3y ago

I've tried /settings, localhost:300/settings, and http://localhost:3000/settings. None of them work

garyaustin•3y ago

The third option would be correct used completely in both the redirectTo and the dashboard settings.

LukasOP•3y ago

that doesn't seem to be working for me

garyaustin•3y ago

What does not working mean?

LukasOP•3y ago

Heres the url I get after logging in with google: http://localhost:3000/login?redirectedFrom=%2Fsettings#access_token=token is here wait why is it redirect from

garyaustin•3y ago

What code base is this?

LukasOP•3y ago

nextjs

garyaustin•3y ago

supabase.js?

LukasOP•3y ago

I'm using the client const supabaseClient = useSupabaseClient<Database>(); from the auth helpers If I have time I'll see if the issue is inside the next auth library code, because I've used redirect to in privious projects and it worked fine (this was before supabase 2.0)

garyaustin•3y ago

Yeah your image is very weird if that is a hint telling you it is redirectedFrom there. That is not in gotrue-js current version I just checked. If it was not for that, I might think that is something used between Supabase server and the Oauth service that is being sent right to your code (like a config error).

LukasOP•3y ago

I can send some more code if you like

garyaustin•3y ago

I don't use that method, but is that comment in your pix provided by your IDE tool?

LukasOP•3y ago

Ignore the comment 😅, I want to eventually use middleware auth to return the user back to whatever page they were on once they log in, but this is the only part I can't get right Heres the full file (dumbed down for readability)

import { useSupabaseClient, useUser } from "@supabase/auth-helpers-react";
import { useRouter } from "next/router";
import { Database } from "../lib/db/database.types";

export default function Login() {
    const supabaseClient = useSupabaseClient<Database>();
    const user = useUser();
    const router = useRouter();

    if (user) router.push("/");

    return (
        <button
            className="mb-8 flex rounded-md bg-gray-200 px-4 py-3 font-mediumhover:bg-gray-300"
            onClick={() =>
                supabaseClient.auth.signInWithOAuth({
                    provider: "google",
                    options: {
                        redirectTo:
                            "http://localhost:3000/settings",
                    },
                })
            }
        >
            Continue with Google
        </button>
    );
}

import { useSupabaseClient, useUser } from "@supabase/auth-helpers-react";
import { useRouter } from "next/router";
import { Database } from "../lib/db/database.types";

export default function Login() {
    const supabaseClient = useSupabaseClient<Database>();
    const user = useUser();
    const router = useRouter();

    if (user) router.push("/");

    return (
        <button
            className="mb-8 flex rounded-md bg-gray-200 px-4 py-3 font-mediumhover:bg-gray-300"
            onClick={() =>
                supabaseClient.auth.signInWithOAuth({
                    provider: "google",
                    options: {
                        redirectTo:
                            "http://localhost:3000/settings",
                    },
                })
            }
        >
            Continue with Google
        </button>
    );
}

garyaustin•3y ago

There has never been an issue generated with redirectedFrom in it. But it is coming back with redirectedFrom in the URL?

LukasOP•3y ago

One second, I wonder if if (user) router.push("/"); is messing it up. I think I figured it out I don't know how to fix it but I'll document it here so if anyone else has this issue they can try and figure it out too theres 2 things that are messing it up: the first is the middleware auth. I'm not exactly sure why, but whenever logging in when using middleware auth, it doesn't yet think that the user is authorized. just as normal, it'll run the middleware auth, and because the user isn't authenticated yet, it'll return them to my /login page. on my login page, I check if the there is a user session, then I redirect the user to the homepage if there is a session. temp solution: for now, I'm going to check if the redirectedFrom url is set on the login page, and if so, redirect them to where they wanted to go rather than the login page. I'm also going to make a github issue to hopefully get this fixed

garyaustin•3y ago

OK, I have no idea what all you are saying, but as long as you do. (don't use next.js or auth helpers).

Gaming

Programming

Redirect after login

Did you find this page helpful?