User Authentication with Supabase and React - Storage, Database, Auth

hey everyone and welcome back to daily tuition in this video we're going to talk about how you can create a user management app using superbits so let me first explain what is supervis it is open source firebase alternative with superbase you can create a backend in less than two minutes it provides all the backend services you need to build a product it can provide a database authentication file storage auto generated api and so on superbase is open source and uses postgres database so you can easily create tables with sql-like syntax superbase is a hosted platform which makes it very simple to get started without needing to manage any infrastructure so let's take a look at how you can create a simple user management app using superbiz superbase provides many frameworks to work with just like view angular nexus and so on in this tutorial we are focusing on react framework so let's create a very simple user management app using react so you have to first head on app.superbase.io and sign in with github i'm going to click on this button and sign in with my github profile now once you've done that you'll have the window something like this here you have your projects all projects then you have your account preference access token of your project and then the logout button and just down here you have the documentation of superbiz so let me first create a new project i'm going to click on this new project button that is going to allow me to create a new organization so let's first create a new organization and create a new project inside it so i'm going to click on this new organization so the first thing you need you need to specify organization name i'm going to specify your daily tuition that's upon you you can specify any name here and then i'm going to click on this create organization button when i click on it it will take few seconds to create this organization and now you have your new project window here you need to specify your project name so if i specify here user management system um system and then you specify your password for the database so let me specify here a password a strong password something like this and then i'm going to click on this create new project this will create a new project you can see it will take few seconds to set up this project just down here you have the public key and your secret you don't have to share this information to anyone right now just down here you have the url of your project and the jwt secret i already have a dedicated video on jwt if you want to know more about jwt you can check out that video from the description now once the project is successfully set up now just start that here you can notice you have the table editor authentication and few more tabs here if you want you can check out all these steps now you can see the superbase is successfully created a user management system project now just for that what you have to do is you have to create a table on the left side you have the table editor authentication and few more tabs you just have to click on this sql editor from this sql editor you can create a new table here you have different options to create a new table instead of specifying all the commands to create a new table super ways also provide a quick start snippet you can see when you scroll down you have the user management starter you can click on that and that is going to add all the commands to create a table what you have to do is you have to just click on this run button to execute these commands so i'm going to click on this run button you can see we have success message no rows written if you're back to the table you can see here you have a table here which is profile with the user uuid then you have the timestamp username and all the fills now just for that once you have your table you have to insert a data inside it so just after that you have to click on the settings and when you click on the settings click on the api super ways will automatically create api for you so don't worry about creating a new api for your database when you click on the api you have the project keys we are using this project keys to access the database so let me first create a react application so i'm going to open the visual studio code and open an empty folder inside it and then i'm going to open the terminal and here i'm going to create a new react project to create a new react project we execute a command npx create react app and then specify the project name so i'm gonna specify project name here superbase react and when i press enter this is going to create a new react project it will take few minutes to create a react project now once you have your react project you have to enter into your project directory so i'm going to say cd supervis react and then i'm going to execute a command to install the super bass library in this react project so i'm going to say here npm install and then i'm going to specify the package name which is at the rate superbase forward slash superbase hyphen js so this is a package name i'm going to install this package or you can say a library inside a react project so i'm going to press enter here now once i have this package let me clear the screen i'm also using here tailwind css to style the webpage so i'm going to say here npm install hyphen d to install all the packages in the development dependencies and then we need to install three packages delvin css post css and autoprefixer so to work with delvin you need to install all these three packages just for that i'm gonna say npx delvin css init iphone p so this is going to create a delve in css configuration file inside this project so when i press enter you can see this will create a television file here as well as it's going to create post css file as well now just for that just open the delve in css configuration file so let me open the delve in config.js file and inside this context try to specify the file extensions right here in the double quote we specify the source folder and inside the source folder i'm going to specify the extension of all the js and jsx files let me save this close this television file and back to the index dot css i'm going to open this file from the source right here get rid of this body and right here i'm going to add the tailwind directives the first base directive component and utilities if you don't know how to use this television directives then don't worry about that i have a complete course on it you can check out that course from the link provided in the description just for that let me see this close this index file and now let me open the terminal and start the development server so i'm going to say here npm start this is going to start my development server you can see this is going to start my development server now once we have the development server we need to first create the dot env file and get the api key and the super base url so let me close this now just for that let's create a dot entry file to store variables make sure you create that dot env file in the root directory outside of this source folder so i'm going to say here dot e n v using e and v we create the environment variables now you don't have to worry about installing packages inside react application because under the hood react use dot env to create environment variables now here i'm going to create two variables first is the react app superbass url and second is the superbase key here i'm going to specify the demo text you can notice now let's replace this text with the actual url and the non key so just back to your superbase and right here inside your api here you have your public key just copy it and specify that here something like this and then copy the url right down here you have the url of your superbase so just copy it and specify that here that will configure the superbase let me save this and now we don't need to worry about this dot env next we need to create a supervised client so let's create a file for that now next you have to create the supervis client so let's create a new file inside the source right here i'm going to create a new file and i'm going to name that file superbase client.js this is going to be a javascript file right here inside this javascript file let me first import a module from superbase.js and from this module we have to call create client so we have to create here a client so i'm going to say here constant super base is equal to create client and inside this you have to specify two parameters the super base url and the superbase key as you know we already have the superbiz url and supervis keys in the dot env file so let's first access that keys or we can say that variables so at the top i'm going to say constant superbase url is equal to process dot e and v dot the name of your variable in my case i'm going to have a name for this variable react app superbase url i'm going to specify that here just out of that i'm going to say constant super base a and o m key authentication key and now that i'm going to specify here process dot e and v dot the name of the variable which is react app superbase and when key close this file and pass that variable here now just are that you have to pass these variables here so you have to first specify this supervised url and then specify the superbase public key something like this and now at the end you have to export this variable so i'm going to say here export that's it your supervis client is now successfully ready let me save this file once you have the client let's create a component to manage logins and sign up so let's close this file and open the explorer tab here i'm going to create a new folder inside this source name this folder component you can name this anything and inside these components i'm going to create a new file i'm going to first name this file auth.js this file is going to use for authentication then i'm going to create another file and i'm going to name that file account.js this file is used to create a form using that form we are going to update the profile data so once we successfully login we allow user to update their own profile so once we have both these components let's back to the auth and create this authentication to make this auth component i'm going to say here export default function which is going to be auth the default function we are going to return from this component and then inside this function i'm going to return jsx inside this parenthesis and at the top we need to import two modules first is from react which is use state and second is from superbase client double dot forward slash then specify the super base client and from this we need to call supervise just sort of that inside this written statement i'm gonna create jsx for this auth component instead of wasting all the time to create the content for this simple react application let me grab a division tag and put that right here so this is going to create a simple login form inside this project you can see i'm going to add a title then a paragraph if it is loading i'm going to display the sending message link and if the loading is false then i'm going to return a form with input text box where you can specify your email and then you have here a button when you click on the button it will send a magic link to your email address and using that magic link you can successfully login in the application this is simple front end you have to add this functionality so inside this path at the top here you need to create two states so i'm going to say constant loading set loading and then i'm going to specify here use state which is going to be default value false then i'm going to copy this paste it down here and the default value is null here and i'm going to change this variable names and this is going to be email and set email now you can see we have the loading variable here i'm going to specify the same name to this use date and then we have your set email so you can access the set email hook here now just for that we also need to create handle login when you click on the submit button of the form we need to get the data of the user so i'm going to create here a constant function handle login and this is going to be a synchronous function and i'm going to pass your event parameter and the function body inside this we first need to say e dot prevent default and then i'm going to say try inside this try i'm going to say set loading is going to be true if we click on the form we change this loading variable set which is true and then i'm going to say constant error if it is error from the authentication tab then i'm going to say here equal to sign and say await superbase this client dot auth dot sign in with auth you will get the sign in function with this function you can authenticate the user inside this function you would specify the structure objects so i'm going to specify here object and then specify here my email i'm going to call here email now if there is any error from the authentication if there is error in the authentication i'm going to say if if it is error from the authentication then throw that error right and alter a message and i'm going to say here check your email for the login link so if the email is wrong or something went wrong you will get this ultra message and just out of that i'm also going to catch the error here something like this and inside this i'm going to say alter error dot error i'm gonna print the error description or the error message and finally i'm going to set loading again false that's it this is a very simple on submit handler function that's it just out of that once you have the successful authentication let's allow user to update their account data so you have to back to the account.js and here we need to allow user to update their profile detail now when the user click on the submit button of the login page it will redirect to the account page and inside this account page i'm going to display the details of the user so the user can update their profile data as you know in the super ways right here in the tables we have here a profile table i'm going to update the data of this profile table inside this profile table i'm going to have the id the timestamp the username of our url and the website field now let's access this field values now let me first get the fields values and then we will update these values so we need to first get these values so let's take a look at how we can get this so we need to first create here a react functional component so i'm going to first say here constant account i'm going to create a variable account and then i'm going to specify here a function like this inside this parenthesis i'm going to pass here an object and inside this object i'm going to pass here station variable when i call this account we need to pass here session variable inside decision variable i'm going to pass the session variable to the use effect hook so whenever decision variable change i'm going to update this account component so just for that inside this account component right down here i'm going to add here jsec but before that we need to export this account something like this this is another syntax of the act functional component i'm going to use that here and now i'm going to return here a jsx so i'm going to say here return and in the parentheses i'm going to return the jsx now i'm going to copy division tag and paste that here so this will add the front end for this react form let me explain this form first i'm going to create a container inside that container i'm going to create a loading variable if the loading is true i'm going to print saving as a response and if it is false i'm gonna return a form and inside that form we have the author component the user profile and then i'm gonna return the input text box where the user can specify their name and then we have the input text box for email and we have two buttons here first for the update profile and second folder sign out to the sign out here you can notice we have the on click event this on click event is going to call superbase auth dot sign out function this function is automatically going to remove the user id from the odd object so the user can automatically sign up now just out of that let me create these variables at the top don't worry you can download all this data from the link provided in the description inside this account right here as i said we need to create here two functions so i'm going to say here constant get profile is equal to and this is going to be the async function and then we need to create another function which is constant update profile and this is also going to be the asynchronous function now inside this get profile we get the data from the database and using this update profile we update the existing data of the database at the top we need to first create few states so i'm going to see here constant loading set loading is equal to use state as you know we don't have used date in this component so let me first import that so i'm going to import use state first and then i'm going to call the usted hook here and then i'm going to specify value to it which is true the default value of u state is true and then i'm going to add few more states here something like this the username website and altar url and i'm going to use these variables right inside the form you can see here set author said username set website you can see i'm using this state variables inside the form just for that inside this gate profile we need to get the data from the database so i'm using here try and catch method inside this try here i'm going to say set loading is going to be true then i'm going to say constant user is equal to super base auth user so we're going to first import the super base at the top here we need to say import superbase from the superbase client from the superbase client javascript file once we have this variable superbase i'm going to use that here so i'm going to say superbase dot auth dot user using this user function we can get the user id of the successful login user so if you are successfully login you will get the id from this user function inside this variable so just down here i'm going to say let i'm going to destruct your data from the superbase function so i'm going to say here data error and the status and i'm going to get this data from i'm going to pass here await from the superbase table so from the supervis table we need to get data so i'm going to say here superbase.prom from which table i want to get this data i can access the current user id from the same object and i'm also going to access the database table from the same user client object this is the easiest way to access the database right so what i'm going to do is here i'm going to say from this superbase client i need to access the table the table name is profiles if you back to the superbase dashboard you can see the table name is profiles we need to access at the profiles table and i'm going to select fields from that table so using the backtick operator i'm going to say username i want to get a username website and author url from the profile table as you can see i use here comma to separate these fields just out of that just down here i'm going to say equal the postgrad equal function is going to filter the data here i'm going to say if the id of the table if it is equal to user dot id it means if the successful login user id if it is equal to the table id then return a single object so i'm going to call here a function single that's it now this is going to return the data inside these variables if we have the data i'm going to get that data inside this data variable if there is an error we get that inside this error variable and we get the status inside this status variable just down here we need to say if we have data if we have data from this statement then i'm going to set the data to these states so just down here i'm going to say set user name i'm going to say data dot username then i'm going to say set website data dot website and then set author out of url is going to be data dot author url so i'm going to set the data to this states now just for that inside this catch right here i'm going to say alert error dot message and finally i'm going to add final statement as well here and i'm going to set loading which is going to be false that's it now what we have to do is we have to use this get profile function to use this function i'm going to call here a hook of react which is use effect and i'm going to just specify that hook here use effect something like this and inside this use effect i'm going to say get profile and as a dependency here i'm going to specify this decision variable this one as you can see when i call this account component i'm going to execute this get profile function and this is going to get the data from the database and pass that to the state variables and i'm using these state variables inside this form so we successfully set the values to the input text boxes now just for that what if i want to update the values of the input text boxes in that case i need to use this update profile function so to use this update profile function i'm going to use the same technique i'm going to first pass here the event parameter and then i'm going to say e dot prevent default something like this and then i'm gonna call here try and catch block inside this try and catch block i'm gonna first set loading variable which is going to be true and then i'm going to say constant user is equal to super base dot auth dot user as you know inside this function we have the current user id just out of that just down here i'm going to say constant updates is equal to an object and inside this object i need to pass id which is user dot id the current user id then we need to pass the user name then the website and then the author url and also we need to pass update at we have the update add field inside the table so we need to pass here value to this update add which is a new date so this is the updated data we need to pass to the table and just after that here i'm going to say let if there is any error from the super base we need to grab that inside this restructuring and then i'm going to say await superbase dot prompt in which table i want to insert this data we need to insert this data in the profiles table and then just after that you need to call here a function which is upset this absurd function is going to update the existing data and then you have to pass values to the fields as you know we have the variable here updates so we need to pass this variable here to pass value to these fields just after that you also need to return an object to return the value after inserting so we need to pass here a property called returning minimal values so i'm going to say here minimal just add that just down here i'm going to say if we have error i'm going to access this variable if we have error then throw it to the application and in the cache i'm going to say alert error dot message and finally i'm going to say set loading is going to be false that's it this update profile is now successfully ready let's use this update profile function so if you scroll down we already have here on submit update profile so when you click on the update profile this is going to update and call this asynchronous function that's it right now just are that at the last we need to create here after component now let's take a look at how we can upload a profile alta we specify here a field called after url inside this field i'm going to insert the url of the author the user profile page so if you upload a new profile inside the superbase we need to store that profile or you can say that image inside the storage if you closely look at these tabs then you can notice here you have the storage option just click on it and this is going to allows us to create a new bucket inside this bucket we already have here a bucket called altars if you open it this is going to allows us to drop a file and upload that file inside this superbase what we are going to do is we are going to create a new component called altar and allow user to upload a new profile and store that profile inside the storage and i am going to display that profile in the form so let's see how to do it we have the author component so let me first create this component inside this component folder here i'm going to create an altar largest and just out of that just before this we need to import this avatar inside this component so i'm going to say import author from author js just for that inside this author js let me first create a simple react functional component so i'm going to say react functional component and then i'm going to copy and paste the division tag here something like this and just sort of that at the top here as you know we need to first import the supervised client so i'm going to do that here like this we need to first import the supervis client then i'm going to first import a default profile image inside this project so here in the source i'm going to create a folder called assets and inside this i'm going to put a default profile image so i'm going to put few images inside this asset don't worry you can download all these images with the project and just for that i'm going to import these images inside this author component like this to start that right down here as i said as i said i'm gonna first download the image and then i'm gonna set the image url inside the database author url field so what we have to do is we need to first create two functions here so i'm gonna say here constant upload author is equal to a sync function i'm gonna call here a sync function like this and then i'm going to create another function constant download image is equal to a sync function i'm going to specify here path as a parameter now just for that let me create first this upload of our function now let me first import the use effect and use state to create state inside this application so let's create two states inside this author i'm going to create author url and uploading inside this upload author i'm going to call try and catch block like this and inside this try right here i'm going to set upload i'm going to say uploading is going to be true and then here i'm going to call if statement it will check if the event.targetfiles or the event.targetfiles.length if it is equal to zero then throw an error message that you must have to select an image to upload now because you don't have event parameter here you will get that line you can solve this problem by passing event here something like this just out of that we need to create few variables here so just down here i'm going to create few variables now let me explain these variables the file variable is going to first get the file from the file upload text box so when you upload a file it's going to return a file to the files variable and from that files variable i'm going to get the first file because we only upload a single image we need to grab that image using add a zero index we get that in the variable files we split the file name and the extension with this statement and then we get and specify the random name to the file and then specify the extension to it so this statement is going to uniquely identify each image and just for that i'm going to specify that file name to this file path variable now just add that here i'm going to say let error if it is the upload error then i'm going to say await superbase from the superbase i'm going to call storage and from the storage as you know we need author bucket and inside this author i'm going to upload an image so here we need to call a function called upload and then we need to specify the file path variable name this one and then the file name as the second parameter so i'm going to call here comma and the file name so i'm going to call this file variable here right and just sort of that right down here i'm going to call if upload error if we have value inside the support error then return an error message or i'm going to call here on upload function and we pass here file path variable now we get this on upload function from the variable parameter right from here so i'm gonna pass here an object and then i'm gonna pass your url size and on upload when i call this after i'm gonna pass all these values you can see to this component when i scroll down here you can see we have the url size and on upload function and inside this on upload we get the url of the file name and then we set that url into this outer variable now at the end what we need to do is inside this altar whenever we upload a new image we need to update the component i'm going to call use effect hook and inside that i'm going to call this download image so inside this download image i'm going to first call try and catch like this and inside this drawing i'm going to say constant data error of weight is equal to await superbase dot storage dot prompt from which storage i want to download this image is from authors and then i'm gonna download this image so i'm gonna say here dot download and pass here path i'm gonna pass value to this path when i call this download image just for that i'm gonna call here if it is error if it is any error then i'm going to say throw error if i get data then i'm going to say if i get the data then i'm going to store that data in the url so i'm going to say here url dot create object url and then pass here data and then we specify this url to this author url right here so i'm going to say here set author url url so when we download the image we first get the url of that image and store that in the url variable and then update the author url and we pass that value to this author and in the catch you can console.log a message something like this and then at the top right up here you can simply call use effect like this and in this use effect you can say if we have url if we have this url variable value inside this variable then i'm going to call download image function the url and i'm going to pause the dependencies here which is url that's it let me save these changes save this account file as well back to the auth save this file as well and at the end and at the end you have to back to the app.js and change this return statement here i'm going to simply going to return a division tag with the container and then i'm going to say if we don't have station if the station variable is not available then return the auth component and if decision variable is available then return the account component with this account component i'm going to pass the key and the session variable now let me show you how we can get this session variable so at the top here i'm going to first create a constant session state and i'm going to say set session is equal to use state like this and the default value is now just out of that i'm going to say here use effect i'm going to call the callback function here like this and then i'm going to call set station and inside this i'm going to first call the superbase client as you know to call the superbase client we need to first grab that like this i'm going to grab the supervis clan from the supervis client file and then i'm going to say superbase.org dot station now once we set the station variable i can simply see here superbase dot auth dot on auth state change if the authentication state change then i'm going to call here a callback function and inside this callback function we have two parameters event and station so we get event and session with this callback function we just need session so i'm gonna say set session then we pass a new session id to this station variable and in the dependencies i'm gonna pass the empty dependencies to this use effect book let me save all the changes after that we need to call this auth an account component inside this app so at the top i'm going to say import auth from the component auth and import account from the component account let me save this that's it we successfully said everything let me save all these files to the app.js save this file as well and restart the development server and you will get the result something like this you will get this login page with the input text box here i'm going to specify my email address and click on this send magic link button when i click on this button this button is going to send an email and using that email i can successfully log in and update my profile so let me first specify here my email and then i'm gonna click on this send magic link button when you click on this button you can see we have here the alter message which is check your email or the login link now when you successfully log in you can see we have here an email from the superbase io confirm your sign up just click on this confirm your mail when you click on that link you will now redirect to the form from here you can set your new profile specify your username and your website details right now you can see we don't have any default values to this username and the website data let me first specify here username i'm going to specify here daily tuition and then the website name is going to be anything and then i'm going to specify my profile i'm going to click on this profile icon you can see this will allows us to specify the profile icon i'm going to choose my profile from my current project here in my current project inside this asset i have this profile i'm going to choose this face profile and open it you'll see upload status you can see this will successfully upload this profile and now i can update this profile data by clicking on this update profile button now the profile data is successfully updated if you're back to your table profiles then you can see you have that data inside your table you can see you have your username author url and your website detail so we successfully updated this profile data using this form now if you want to sign out you can click on this sign out button and this is actually going to sign out and you can relog in with your email address just specify your email address and click on the send magic button that will allow you to log in with your email address with magic link so this is how you can use super ways with react application you are not limited to work with super ways only with react you can use a view angular next.js and so on and you also have a beautiful dashboard with super bits so i hope you understand how to work with super bass with react application if you find anything useful make sure to press the like button share this video with your friends subscribe for more latest videos that is all for now i will see you in the next one [Music] you

Channel: Daily Tuition

Views: 10,683

Keywords: supabase auth, supabase react, supabase authentication, supabase vs firebase, supbase storege, Supabase the Firebase Alternative - with React User Management Project, supabase firebase alternative, firebase alternative, react user management project with supabase, supabase, supabase tutorial, working with supabase io, react user management with supabase io, supabase tutorial with react, User Authentication with Supabase and React - Storage, Database, Auth

Id: HMXY4FfyGD4

Length: 42min 42sec (2562 seconds)

Published: Mon Apr 25 2022