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

[@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: supabase.auth.onAuthStateChange(async (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.

[@CooperCodes]

Pinning this, thanks for providing the code here as well.

[@michaeltillcock3864]

legend

[@deoarlo]

Thanks! just what i need

[@SumaSuma-wl6tk]

Not work

[@gimmories21]

Thank you

[@CooperCodes]

Hey It's Cooper Codes, Supabase changed their UI since the recording of this video but everything you need to find regarding Supabase setup should be in the menu here: imgur.com/a/6lIzDPh the redirect URL and other things got tucked away into different sections so hopefully there isn't too much confusion here. Comment here if you are missing anything! Thanks.

[@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!

[@iGamerD2]

My man just carried dashboard handling for my bot, tysm

[@CooperCodes]

You are welcome, glad it helped :)

[@Hyp3rFX]

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

[@CooperCodes]

Thank you so much, for some reason I missed this comment. Appreciate the support :)

[@zerqPROSPIELER]

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

[@techuser1619]

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.

[@CooperCodes]

I can definitely integrate something like this into a project. My first assumption is that you create some auth middleware (some in-between steps with your authorization). When you authorize a user on your webpage, you can check the supabase user object to see 1. They logged in with discord 2. Make a call to the discord API with their credentials, seeing if they are part of a certain server. I will note, for a sign in like this you can actually make it so supabase ONLY allows Discord sign ins (pretty legit!). Hopefully this gets you in the right direction. You can do this by going into authorizations in supabase and disabling the email sign in (and for the Auth component shown in this video there is a property I believe to show only the social logins aka Discord on the front end).

[@JamesPero]

The property is called "onlyThirdPartyProviders" and it's a boolean value.

[@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?

[@jakubn.6572]

Thank you very much! Really appreciate this guide.

[@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 ?

[@Ross17]

it has been very helpful, thank you.

[@CooperCodes]

you're welcome! thanks for watching

[@AndrewDBrown2020]

That's such a great help - thank you.

[@CooperCodes]

You're welcome Andy, appreciate the comment

[@robbiewinfield7853]

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.

[@M4CARBINE556]

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

[@Peppzwerg]

You can pass the userobject down the childs or try using something like redux

[@anthonyngooo]

You can also use something like private routes

[@hitesh2293]

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

[@lolelylove8049]

Hm how setup it using google and facebook?

[@MarkiMark01]

Thank you very much!

[@nested9301]

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

[@anthonyngooo]

Yes this is the free tier. Not sure about the second part of your question

[@itsgox]

so i cant get the user guilds with this?

[@GUCKII]

why you can't? I haven't tried, but I think you just have to select guilds in URL generator and then you will be able to get data about user guilds.

[@RedRhinoPlayz]

Good Stuff Man

[@rgx11zprotv23]

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

[@CooperCodes]

I believe it should, I'd be surprised if it didn't.

[@rgx11zprotv23]

@@CooperCodes thx i'll probably try

[@bobo21D]

Fantastic vid

[@Deus-lo-Vuilt]

thanks for video

[@berendvanbeerschot1472]

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

[@CooperCodes]

Could you provide an explanation? This solution is generally standard for authentication, and is secure as long as you trust the calls to Supabase to be secure (which I do). Supabase has excellent token management (managing both refresh and access tokens) which is reliable even from an advanced security perspective.

[@berendvanbeerschot1472]

@@CooperCodes You put the url and anon key in the login page instead of in an env for starters.

[@CooperCodes]

That is because this is a tutorial (and I don't cover everything), you can easily swap those strings out. If you need to learn how you can check out this video here: kzbin.info/www/bejne/ZpqUmXqHgNxlm6c . I generally note this in videos when using the API keys in string format but I forgot to mention it here.

[@soko_sskk]

U are the best

[@soko_sskk]

More supabase tutorials plsss

[@CooperCodes]

I got you with more supabase stuff, thanks for watching!