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

what's going on guys it's Cooper codes and in this video we're going to be looking at Super Bass authentication to create a login system that can be used by all the different social providers we're going to set up super bass and create this component here and also integrate the Discord login as well in this video I'm only going to be showing how to use Discord but I'll also show you guys how to add more and understanding the process of adding oauth applications on top of superbase so for example we can sign in with an email press the sign in button and we're also using react router to bring us to the success route and we'll see we have a logged in user if we inspect element here we can go to their console and we can see that I've fully authenticated with Super Bass earlier I create an account and you guys can see every single created account under the authentication page in Super Bass we're also able to log out our users and then boom be able to log in again and then I'll just show this real quick I can also authorize with Discord and it will send me to the same page and again show my user object let's get into setting up Super Bass we can get started by going to Super Bass Dot com and pressing start your project in the top right it might ask you to sign in and authenticate through GitHub eventually you're going to get to app.superbase.com where we can start our project so press the new project button here I'm going to name this project login auth and I'm just going to generate the password here we're not going to work with the super based database in this example but make sure to save this password just in case but make sure to save this password if you want to use that in the future I'm going to select the region closest to me so shout out to the West Coast we can just use the free plan and then I'm going to create my new project so as you guys can see Super Bass has a bunch of functionality but for this video we are going to be working with specifically just authentication we can go to authentication by going to the left here and then pressing on the authentication here it's these two little people we can then go to the settings under configuration here there's a bunch of general settings if you guys are interested in looking at this but we're going to keep everything as default up here I'm going to add a domain to our redirect URLs and I'm going to make one say https localhost 3000 slash success this is the route we'll use for successful logins you guys will see we currently have email authentication on which is great news in order to get the URL and the public key of a super bass we want to go to this gear icon in the bottom left here this is the settings of your Super Bass project you can then press on the API here and I'm going to take a little notepad just so we can note these down you can use a text file if you like we want to copy this URL here so I'm just going to say Super Bass URL is equal to this then we also want the project API Keys we want this Anon public one so you can copy it here bring that over and guys I know this is a bunch of setup but we're also going to go and look over at Discord now so we can get the keys that we need for the Discord login as well in order to enable Discord we're going to go to discord.com developers slash applications we need to make a Discord application to enable Discord login we can start the application by setting new application in the top right and when you go to this webpage it should make you log in but log into the top right if you're not already there but press new application I'm just going to name it login off so you should be sent to a general information here we then want to go to oauth 2. under oauth2 we're going to have two incredibly important things the client ID which you can bring to our notepad so I'm going to say Discord client ID this can be that we also want the client secret so we can copy this client C right here and then we're going to go back to our super base and we want to go back to that authentication page where we saw all the different Integrations so go to the two people on the left go to settings now you're in the authentication settings and we can scroll down so if we want to enable Discord we can open up Discord and see all the different things they want us to have for Discord to work so we can press this Discord enable here and it's going to want a client ID and a client secret so we can bring the ID and the secret from our notepad get the secret as well and you'll see there's this redirect URL as well this redirect URL is actually defined by superbase and our Discord application needs to know about it so let's copy this redirect URL go to our Discord portal and then add a redirect under oauth 2. we can then paste this in here and then we can save the changes the reason why we have to use a Super Bass link to redirect is that super bass is kind of like a middleman between our application Super Bass and then any oauth provider so if you guys are integrating a different oauth provider for example you want to make sure that you fill out all the different things that are required from superbase here and if there's a redirect URL you want to make sure your outside application for example Discord knows about this redirect URL so now that we have everything it needs we can now save and now whenever we use this Super Bass application Discord is enabled for login and just to give a random example let's take a look at GitHub for example semi-deck thing we would figure out how to set up with GitHub and put the client ID and Secret in here and also make sure that GitHub has access to this redirect URL same thing and just for one more example let's take a look at twitch same exact thing right things like Azure can be strange but pretty much you just need an extra URL and look they even say it's like optional so you're going to follow a very similar process to how we set up Discord for any of these other providers now we have everything we need to set up for our Super Bass and Discord let's get into creating our react application so I'm going to get started by opening up an empty folder in Visual Studio code and then saying npx create Dash react Dash app with client to start our react application we can enter our react folder by saying CD client once that's all done for this video we're going to be working with three different packages so we can say npm install to start installing those the first one is at supabase slash auth Dash UI Dash react this is a pre-built component that's going to help us make a nice looking authorization thing pretty fast you can also say at Super Bass slash supabase Dash JS and then finally we're also going to have react Dash router Dash Dom to handle the different routes to the regular localhost and then also to localhost 3000 success so I'm going to go over to app.js Under The Source folder gonna delete everything except the div and the header here I'm not going to use that logo anymore so we can get rid of that and now I'm going to go and create two pretty basic Pages for a react application to use so we can make a folder here and called Pages these are just components that we want to point certain routes to for example localhost which is a slash the end is going to go to a certain page and localhost success is going to go to a different page so those are the pages we're defining here we are going to have a login page.js and we can actually copy what this function app looks like right here go over here I'm just going to name it function login and then export default login on the bottom and we can also make a success page as well with the successpage.js and we can take the same exact login here bring it over and make a success component in the success component I'm just going to make a little H1 saying success I made these components first because now we are going to route to show different information for different routes so let's go over to app.js and get started with our routing we can start by importing everything we're going to need for the routing and react for example we can import browser router as router we can import routes and also route from react router Dom these are just some components which allow us to make routing functionality super simple for example we can have the router on the very outside so a router is kind of like you know an internet or everything inside of here is now going to move the information around we can Define the routes of a certain router by saying routes like this and inside of routes is where we can use the route component the route has a path which we are just going to say slash so that'd be like you know localhost 3000 for example and the element is going to be equal to a component or a page for example which we are going to Define in a second then we're also going to have another route going to a success path we can import the pages by going to the top and saying import login from dot slash pages so we're saying go to that Pages folder and then go get the component out of the login page and we can do the exact same import for the success component from the success page and so down here we can pass in the component directly so I can say login for this guy and then success for this guy and so right now login page has no text but we should expect the success page to say something simple what did I say it was just a simple H1 success so let's start our application and see if that routing is working all right so we have our localhost 3000 here which is showing nothing which is a good sign it means that we're probably being routed to login and if we go to slash success we're going to see a success here which is great that means we're being routed to two different components based off the URL which is great news so let's get started and go to login page.js where we're going to work on that creating that initial login component we are going to start by importing a couple things from the super base which are going to help us out the first one is import create client from at superbase superbass.js create client is what allows us to establish a connection with our react application and then all the super bass code that we want to use we are also going to import auth and then theme supo which is going to to give us a nice looking auth component that is built by a Super Bass from Super Bass auth UI react we can initialize our client by saying const Super Bass is equal to create client and it's going to take in two parameters the Super Bass URL and then that public key that we saved before so I have my URL saved right here so I'm going to save it so I'm going to grab it here paste it in right there then I'm also going to take this public key right here copy that and bring it over to my react application as the second parameter and that's all it takes to initialize superbase in order to handle the event where the user logs in we can actually use the Super Bass client we just created we can say Super Bass which gives us access to a bunch of authorization functions and we can use the dot on off State change so this is if the user signs out the user logs in this event will get pulled so we can make an asynchronous callback here that's going to take in an event we can then Define what we want to do with this event the event is going to be the string and if the event we're being passed in is not signed out we are then going to navigate the user to the success URL so we want to forward to success URL which I'm going to talk about in a second otherwise we want to forward the user to just the regular localhost 3000 so they can go to the login page for example in order to forward a user to a URL for example I'm going to use something called use navigate we can import use navigate above from react router Dom so use navigate helps us with the react routing and we have to Define use navigate as it's a react hook so we can say const navigate is equal to use navigate like this and this gives us access to the functionality to kind of move our user around and send them to different links for example if we want to send the user to the success URL all we have to do is say navigate to the slash success path and if we want to send our user to just regular localhost 3000 since we're on localhost 3000 we can just navigate them to slash and that's going to take us to that localhost 3000 link and so pretty much what this code is doing is it's allowing us to move the user to the success if they do anything which does not sign out now we can initialize this auth component from right here this is a pre-made UI component which Super Bass gives us access to and it has a bunch of different properties which allows you to customize what this component looks like for example we need to set the client that this auth is looking at by saying superbase client is equal to the super base variable that we created above we can also change the appearance of the client I'm going to use the pre-made theme provided to us by superbase called theme super I'm also going to add theme equals dark on top of this it makes the text a little bit lighter and importantly I'm going to add providers as equal to curly braces and then an object you can see all the different providers here so if you're not just implementing Discord for example you can make this a list of all the different providers I'm implementing Discord so I'm going to put Discord in here let's go to our react application right now and see what it looks like bang so you guys can see we have the full UI component already created just to give an example if I also wanted to add in Facebook as a provider I could put that in here refresh my application and you'll see I also have the option to sign in with Facebook this isn't going to work because the provider is not enabled but if you enable this provider in your super based backend you're going to be able to sign in with Facebook through this little sign of the Facebook button but we're not doing that in this tutorial so I'm going to remove that and keep Discord and so right now if we log in we are going to be able to get navigated to the slash success path I'm going to create an account that we can test with so it says don't have an account sign up I'm going to press this and now we are in the sign up code which is something that auth it pretty much automates for us so it gives us access to the switching around so type in an email address and password and then press sign up then you're going to tell you to check your email for the confirmation link so go and pretty much confirm this email so I'm over here in my email I can press confirm right here and then boom it's going to actually instantly log me in but we don't have any logic to actually handle the user yet so we can't see information from the user here quite yet but that's some cool Super Bass functionality is it actually instantly logged in by email which is pretty cool now we can get started by making this success page console.log the actual users information and also give the user the option to sign out to make our lives easier I would go to the top of your login page copy all the Imports and this little Super Bass create client and bring it over to the top of your success page so your success should look something like this I'm also going to import react and I'm also going to import the use effect and use state from react firstly we are going to use the use State just to manage the user that we're going to get from superbase so we can make a very simple const user and set user is equal to use State and initially make it an empty object we're also going to be forwarding the user back and forth eventually so I'm just going to Define that const navigate is equal to use navigate now this is just like how we defined in the other page it's going to allow us to move the user to different URLs and importantly here I'm going to create a use Effect one thing the use effect helped us out with is it allows us to run code right when a user gets sent to a link or on their first render and so the actual effect can be defined by an arrow function and then you have curly braces that are going to Define all the logic of that function then at the end of the curly braces you can do a comma because now you're going into the second parameter and I'm going to create an empty array this empty array pretty much means that there's no reason for the use effect to ever run again because because you can use use effect where it's like if the user ever changes run the effect again but we don't want any logic like that so if we make it empty that means use effect is only ever going to run once and so on this initial run we want to make an asynchronous function inside of our use effect that I'm going to call it get user data inside of get user data we are going to ask superbase for the current logged in user so we can say oh wait Super Bass which we defined with this client above here dot auth dot get user dot then because it's get user is going to return a promise and so we can work with that promise and say dot then take the value out of the promise and then we can do an arrow here to say okay here is some logic to be defined to how we want to work with this value the value is then going to have a DOT data property and the dot data property is going to have a DOT user which is going to be that big user object of all the different things pertaining to our certain user and so I'm going to make some interesting syntax here so just in case the dot user part doesn't exist we can do some Java script to kind of get around that so we can say if value dot data question mark dot user that means if value.data is undefined we avoid the error of saying undefined dot user that's going to give us an error and so this question mark says hey if this stuff's undefined don't even try and get the dot user property out of it but if the dot user property is there then we can make an if statement to say okay now we can set the user object that we have above here to the value dot data dot user and we can also console.log.value.data.users so we can just see that being logged into our console and so when we use asynchronous functions inside of use effect we always have to call them so we actually run the logic because right now this is a function that's not being called so to Define it we can call it here so this means when our application initially loads it's going to try and get the user data of the person currently logged in so we can go to a react application and check this out so super bass is actually smart and it's going to persist your login which means you can like refresh the page and the user is going to stay there if you don't have a user object and it's just showing empty I would go back to localhost 3000 and then log in again but we do have a user inter session so we can just go to slash success and see that I'm logged in here right now there's no way to currently log out our user so let's get working on creating that logout button we can make an asynchronous function called sign out user I'm making it asynchronous because we are going to use a weight when working with Super Bass for example a weight superbase dot auth dot sign out and this is can also return an error I'm not going to do the error handling for this error here but just so you guys know how to get the error out of Super Bass you can use a syntax like this and when the user gets signed out I also want to navigate them back to the home page or back to the you know login page that we created before so this navigate slash is going to take the user back to that initial page we created to make a button for the user to sign out we can go down here and say button we can make the text say sign out then we can define an on click here we can make an arrow here and then we are going to tell the arrow to run the functionality of sign out user with a function called the end there so if we go over to a react application right now we should be able to sign out amazing one thing though is if we go back to slash success even though we're signed out and you'll see if we're getting errors in attempting to get the user because the user doesn't exist we want to be able to handle these errors so let's say someone wanted to go to like a dashboard or something it should be user secured we can handle that logic in our success page so let's go do that we can pretty much assume that if this user state right here is an empty object we currently don't have a user from superbase because our page is always going to load this use effect right away so inside of our react application we can make a little object dot keys of the user is not equal to zero and so this is just a way of checking if a object actually has properties in it or not any data inside of it is a more simple way to think about it and so if this is true then we want to show the success stuff here and if it's not true so the little colon in the ternary statement there is going to be the else then we can even show some stuff like you're not supposed to be at this page you manually went to the success page and here's a way to get out so we can make a little H1 saying that the user is not logged in and because we already have access to navigate we can make a little cool button that's going to navigate the user for us so we can say button go back home we can then set an on click which is going to work with navigate so we can pass it into this little arrow here and then Define some logic JavaScript logic here and say navigate to that regular base route so they can go back to a page where they can log in this is also helpful if you have like a dashboard or something and maybe you're a financial application and your users tokens only last like 30 minutes and the user gets logged out while they're on your site this is going to allow them to just click on a button go back and log in again oh and my bad so Keys is actually an array of all the keys in the object we can go to dot length to see that it's not equal to zero my bad let's go see us in our application so we're getting a user is not logged in and we can go back home here it's going to bring us back to that initial login page and so super bass is kind of like magic it handles an email login pretty much the same as it would handle a Discord login here so we can press sign in with Discord press authorize you know sign in with whatever Discord account you have and that is still going to authenticate our users and whatever platform you use super bass handles all the logic as long as you have your client ID your client secret and the redirect Uris are correct you're 100 good to go you're always going to be able to authenticate users and as you'll see get all the different user data and you guys can also see that if you go to your Super Bass authentication so go to the left here and then go under users you're going to be able to see every single user that logs into your application so this is a super basic video on Super Bass getting you guys up to speed if you guys are interested in working with Super Bass and more in the future let me know thanks so much for watching

Channel: Cooper Codes

Views: 22,905

Keywords: supabase, supabase react tutorial, supabase tutorial, supabase authentication tutorial, react login tutorial, react login supabase, supabase auth ui, auth ui supabase react, react auth ui supabase, learn react with supabase, initialize supabase, react supabase, react supabase auth, react authentication with supabase, supabase with react, javascripot supabase, supabase with react router, react router supabase, supabase for beginners

Id: H1V716XPUEs

Length: 20min 28sec (1228 seconds)

Published: Sat Oct 15 2022