Tutorial for setting up Supabase Login Providers

Hi All - can someone point me to a good Supabase Login Providers tutorial? I’ve tried to glean how to make it work from a patchwork of information and I cannot seem to get it to work properly with the editor which is preventing the supabase “user” object from filling in within the editor and causing lots of errors.

1 Like

Hi @karyzmatik :wave:

It’s on our list of video tutorials to record.

Which provider would you need in priority?

1 Like

Hi Joyce,

It would be great to have Google to start from adding the button to an existing form the right way, to adding and using the Login Provider feature, and then calling the profile picture into a nav bar.

Supabase Auth with email works great!

I’ve gotten close but this could really help.

1 Like

Ok cool! Can’t make any promises but we’ll try to record a tutorial for you this week :slightly_smiling_face:

4 Likes

Hi Joyce,

Thanks for prioritizing this.

In Supabase, the URL configuration needs to be set up to work with weweb in order to return the authentication properly. It looks like there are some challenges with redirects between the two platforms and I’m getting closer but still not quite there. I cannot seem to figure out how to configure the editor or preview in weweb as a callback target. I’ve tried a few things.

Hi @karyzmatik :wave:

We’ve had to prioritize a couple of other things but I know @Quentin has been working on a tutorial for you. It should be coming soon :slightly_smiling_face:

Hey @karyzmatik :wave:

Still working on the video. In the meantime, did you check this doc by Supabase? Part Five: Google Oauth | Supabase Docs

Basically, you need to enter their callback URL inside your Google Cloud console.

1 Like

Here’s an example of what it looks like for the Client ID:

And what it should look like for the consent screen:

2 Likes

And finally, in Supabase, inside authentication > URL configuration, you should setup the final redirect URL for your WeWeb app (in this example, the homepage), for your main domain, weweb-preview and editor:

2 Likes

As the final process is like this: WeWeb app triggers Google Login > User is redirected to Google > Google redirects to callback URL in Supabase > Supabase redirects back to WeWeb app.

2 Likes

@karyzmatik here’s the final tutorial on video: Setting up Google Oauth using WeWeb and Supabase - YouTube

3 Likes

Haha @Quentin on :fire: Thanks so much for this! I will go through it as well because OAuth is one of my personal nightmares :sweat_smile:

If anything is still unclear @karyzmatik, please let us know so we can try to explain it in a different way

Thank you both! The Home page had something not working with it but I re-created it and now it all works great! The video walkthrough was extremely helpful for my troubleshooting!

1 Like

Also worth stating that the Redirect To page for the Login Provider must be available to Everyone and does not work with pages that require Authentication. If you want to have the user land behind an authenticated page, then you will need a redirect page:

1 Like

@Joyce - the functionality would work better if we could pick a private access page to redirect to… within the Supabase Login Provider workflow.

Really appreciate your efforts and a big thank you to @Quentin :grinning:

1 Like

@Quentin , I see you said to link the final address in Supabase as the SITE_URL… but if I do that, then in my staging and my editor environments, the auth login redirects to production…

See my thread here: Supabase OAuth - Google - Staging/Prod vs. Editor Redirects

What is your best practice for having one supabase back-end that can redirect to multiple environments? I see the Xano plugin has some dev/staging/prod settings to it, but the auth plugin for supabase doesn’t seem to have those options…

Thanks!