Supabase OAuth Callback setup not working

[ndom91]

Hey, this might be a dumb question, but this is the first time I've used supabase and I can't get the oauth callback setup to work.

I've setup an oauth clientId / clientSecret in Github, and added https://[projectId].supabase.co/auth/v1/callback as the callback URL. I've also added the prop redirectTo={'https://myblogpage.com'} to the AuthModal component.

However, after clicking "Signin with github" in the AuthModal, and asked to allow my custom Github App, I'm redirected to that supabase URL with an accessToken and verification code appended, so far so good. Decoding the jwt accessToken also reveals my correct settings from supabase, but then the browser just says Invalid Redirect.

Am I missing something obvious here? I'm assuming supabase is supposed to direct me back to the URL specified in the redirectTo prop. Right?

[ndom91]

Got it workined, issue was I had multiple URL's listed in the supabase dashboard's Site URL field.

If you can only have one there, I guess you have to manually change it back n forth between prod / dev while you're developing. Is that how you go about it?

[malerba118]

Hey man, not dumb at all, def a bit confusing.

It sounds like what you've done is correct, i think you're just missing a whitelist of auth redirect urls on the supabase dashboard.

[malerba118]

Ahh yeah, looks like you're on the right track. Basically what i've done (and i'm not sure if this is correct but it seems to work for me) is put my main prod site as the Site URL and then in additional redirect urls put localhost, codesandbox, any lower environment for example. I think if there's just one callback url then supabase knows unambiguously where to redirect the user, but if you have many then i think you have to use the redirectTo prop on the Auth component to disambiguate and as long as supabase finds the redirectTo url in your whitelist then it'll pass the user through successfully.

[ndom91]

Okay, yeah makes sense. Thanks for the quick response!

P.S. One other small suggestion - I see in your example you're manually adding the "Signout" link under the CommentProvider. But in the actual library, the signin link just gets replaced with "Submit" for the comment.

Might be useful to build in this part

!auth.user && (
  <button onClick={() => supabase.auth.signout()} />
)

into the component you're actually shipping 👍

Maybe just next to the submit btn?

[malerba118]

Good idea, i think i'm into it. Definitely want to do as much as possible to make it work just out of the box. And for those who want more customization they can always add their own sign out button and call supabase.auth.signOut() themself.

Thinking something like this, like a button group with a dropdown menu and in that menu there'd be a sign out option.

[ndom91]

Yeah I was thinking about just adding the signout button myself too, but it'd be hard to integrate it nicely into the preexisting comment box ui, right?

I could float it below, etc. but thats not really nice.

The combobox button isn't a bad choice either!

[malerba118]

Yeah i don't want the sign-out button to be too in the user's face is all, because when faced with two buttons "Submit" and "Sign Out", i think 95% of the time the user will be clicking submit