Login With Any Platform in React With Supabase (Discord, Google, Facebook, and More!)

In this video we go over creating an email and discord based authentication system, allowing users to sign up and login using Supabase. Supabase is extremely powerful and is a popular Firebase alternative. Although I only show the Discord OAuth flow for this video, Supabase makes it easier to stack other authentication platforms on top (as shown throughout various parts of the video). This is a perfect beginner Supabase video and even if you're unfamiliar with React you will have a full system built for authenticating users!

0:00 Intro / Project showcase
0:58 Initialize Supabase
2:45 Initialize Discord
5:18 Create React app and install packages
6:14 Set up pages (Login and success)
7:05 Implement app routing
8:50 Create login page
13:18 Create success page
16:48 Create logout button
18:00 Managing users going to /success that shouldn't
19:38 Discord login / OAuth discussion
20:18 Thanks for watching!

[UseOf]

For anyone else who has an issue with sign out causing the app to freeze, you need to change the code he wrote at 10:50 to:
(event) => {
if (event == "SIGNED_IN") {
navigate("/success");
}
});
Something must have changed on Supabase side which causes this event listener to trigger an infinite navigate loop.

[suhmer]

Been trying to find a good Supabase authentication tutorial for a long time but the other ones were very confusing. This video really helped me. Thank you so much!

[iGamerD]

My man just carried dashboard handling for my bot, tysm

[zerqPROSPIELER]

The best tutorial so far bro! Keep it up, sub

[HyprFX]

Great video! Thanks so much. ❤
Your seriously underrated.

[jakubn.]

Thank you very much! Really appreciate this guide.

[NightWisdom]

That's such a great help - thank you.

[LeighBriody]

Great video ! How do we manage the user who is currently logged in ? Can we store them in a session and use their email as an id for our database ?

[robbiewinfield]

Is there any way to not have the login page redirect the user to the success page if they are already logged in? If someone is just interested in switching their account, then this may be useful. I guess what I'm looking for is how to only make it redirect when that user actually just clicked "log in" and not whenever an already logged-in user goes to the login page.

[JadenParker-mh]

Hello.. please i want to sure if this wont compromise users password and usernames?

[techuser]

Do you think it’s possible to only allow “Sign in with Discord” only if the user is part of a Discord server? Would be cool to give Discord server members access to custom dashboards with their stats.

[Bubuljusak]

Hello! I have found that supabase o auth with azure in expo React Native is not working… can you give it a go ? And post a video?

[hitesh]

How are you navigating to success page after login? ??

[ThadKrugman]

What about navigating to other pages? Will the user still be signed in? Do you have to do the Supabase client on every page?

[lolelylove]

Hm how setup it using google and facebook?

[nested]

is this the free tier ? also what is the diffrence between this and sso

[berendvanbeerschot]

This is not the safe way to do it. Seems really vulnerable to me!

[itsgox]

so i cant get the user guilds with this?

[rgxzprotv]

hey does it work for a mobile version of the app ?