Firebase Authentication in React project

hello everyone welcome to my new video in this video i'm gonna talk about firebase authentication um the main purpose of this video is to fulfill one of the badges i have here here it says integrate authentication to allow users to log in and sign up through your frontend application so the main purpose of this video is to build a login page and sign up page the usual stuff which most websites have so we have to create a user using sign up and then it has to log in with that user credentials um for that purpose uh i'm gonna use firebase firebase what is firebase um i have found a good explanation or a definition kind of thing in one of blogs blog posts and that said like firebase is a tool set to build improve and grow your app uh how do we do this how do we build how do we improve how do we grow our app using firebase and how do we do this is firebase provides tools um these tools um are already built in and most developers can use these uh tools to build their applications what are these tools the things like analytics authentication authentication is nothing but what i am going to discuss in this video the sign in sign up thing and also databases and in this video i'm gonna use fire firebase's firestore database and it also covers configuration file storage and a lot of things all these things are already built and we all developers can use these tools in their applications so in this application we don't need to like put our time into building sign in logic and sign up logic all that is taken care by firebase so in this video i'm gonna use a react project builder react project and i'm gonna use firebase authentication in to that uh to sign in users let's see how we are going to do that quickly i'm gonna delete this file folder i'm gonna create a react project to do that i'm gonna open the inbuilt terminal here and i'm gonna create a react project just like so px create react app let's name this authentication and it's gonna take a while to create a react app and let's wait okay now the react project is installed and now we'll quickly change our directory to authentication and also in this project i'm gonna use react router dom so i'm gonna quickly install that too npm install react router down okay now react router dom is installed too we can see all those in package.json nuclear router dom and react all these things are installed and the next thing what we are gonna do is we are gonna install firebase [Music] how we can install firebase let me show you quickly inside firebase if you say get started i already have few projects here and we can just go to docs okay let me search for install okay now to install firebase we have to register your app with firebase how do we do that okay this is something we have to do like to install firebase just remember this line for now and before that what we are gonna do is first we need to create a project to create a project we are gonna go to the home page and say add project here you can name your project as authentic i say authentic okay let's say authentic continue i'm not enabling analytics and create project continue and this is the authentic project page and to the left side you can see all the services that firebase can provide authentication file store database storage hosting functions so in this video i'm gonna talk about authentication um before we go into authentication after registering our project what we have to do is um we need to add firebase sdk and initialize it to do that first we need to install firebase into our project so we are gonna do that quickly here in the terminal npm install firebase and it's gonna install firebase into our project after that we need to initialize it to do to initialize it we need a folder named firebase.js let me show you and we need to import all these things that we need okay for that first we need to create let's go back in src folder create a file called firebase.js inside this firebase.js we need to copy all these things okay is always required and must be listed first firebase app okay we are gonna copy it and then paste it here and we need config file how do we get this config file and you might be wondering why didn't i import all this okay if we in our project if we are using analytics we are gonna import only analytics if we are using authentication we got to import auth we are using firestore database then we are gonna import this in our project we might be needing these two so i'm gonna copy these two and paste it in our project and now we need to find this config file so if you remember previously we created authentic uh project we need to get config data of this project by going to web here if you can see these less than greater than symbol there we need to say we need to give a nickname let's say authentic same nickname no i don't need hosting so i register my app and now i'm gonna get the config value and i'm gonna paste it and now we have to initialize it initialize firebase just like this so we have got everything configured and we also imported authentic auth and firestore and we need to import those i mean export export cost equal to firebase dot fire stove now we have initialized everything let me double check that let me say continue to console i have copied it and in authentication now we have to get started you're gonna use email password we have to enable it then save that's the sign-in method we are gonna use and fire store we're gonna create a database in starting test mode and next and i'm gonna leave it a central time okay now a collection is created in this we can store all our collections with various documents okay let's jump right into creating our project and before we start coding uh let me show you a pictorial representation of how our pages look like so here i have a our project starts with a login page which takes email or password of the existing user and when the button is clicked if the user exists it opens a profile page of that user showing his name and email for now and this profile page also has a sign out button once the user clicks sign out it goes back to the login page and this login page also has a link to sign up page if there is no existing user one can create a a user um to create a user we go to the sign up page by clicking on this button and in the sign up page it asks details like name email password and then after we click the sign up button the user is created this user is being created using firebase authentication uh and the created user is stored in [Music] firebase and um and it after sign up it directly goes into the profile page which shows the created user's name and email the one thing i want to talk about is we use firebase authentication here to store the users email and password details and if there are any extra information about the user like here we have name the name of this user can be stored in firestore um so that is why i told you we are gonna use a little bit of firestore in this project um okay now let's jump right into building our project okay now let's actually start building our project um here in index.js it calls app inside app i'm gonna take off everything and build it from scratch i'm gonna import and i'm gonna create a app just like that [Music] um [Music] default okay this is the basic project and now uh this app component is gonna call let's say application component and i'm gonna create this application component in inside src i'm gonna create a folder called components this components folder is gonna have a file called application.js and now this is be it let's import it import the application from components slash application okay just like that and this application or what it's gonna have is um all the routes to our pages as i have shown uh these things we have we are gonna have route to login page and sign up page and profile page all these routes are stored in application let's quickly create that and i have installed a extension called react snippets using that i'm gonna quickly say rfc to create [Music] [Music] [Applause] [Music] [Music] [Applause] [Music] okay now we have our application now what we need to do is we have to build the login page let's jump right into it what does login page have let's see what it's gonna open okay here we have email password and the login button and if not a member will go to sign up page let's quickly click here and it's going to the sign up page okay it's working um now let's quickly build sign up page two okay here in sign up page we have name input email input password input and sign up button if you are already a member you go to the login page okay now let's quickly right here hi let's copy this and paste it and see how it looks okay sign up page this is sign up should be login okay this is login page and this is sign up page okay we have our pages and now we need to deal with the events to use these events i'm gonna create uh i need to make use of states so i'm gonna quickly create states as like this i'm gonna take email and set email uh for now empty state and just like this i'm gonna copy this and paste [Music] i'm gonna create one for okay no so whenever the event is changed the event has values from the input fields so i'm gonna access that values like first name [Music] and if name is equal to user email i'm gonna set email to that particular value so here it says value but i can give the state as email email state so whenever there is a change the value is email is set to that value okay set okay so whenever there is a change in the input value of it is going to be changed too now we got our states and what happens on clicking this button let's say on click equals um into this get user function okay now we need to create the get user function here so what should happen in get user first we need to prevent default this get user is gonna make a call to firebase and then we are gonna get the user the function we are going to use here is that we exported in firebase we are going to use this function sign in sign in with email and password of email comma password [Music] as this is a asynchronous error just like that okay now we don't have any users in our project in firebase so if we try to sign in with some random email and password it might throw error and that is caught using this sketch we try that just okay let's go back to the login page and let me quickly open my console here and if i say oh i have so many but these are not in our project for authentication so i'm gonna say some abc at gmail.com some password and say login it throw an error there is no record corresponding to the identifier so now our objective is to create the user using sign up page let's go to sign up page and we have our [Music] um form i'm gonna quickly copy this take off this input right here and paste this instead of email i'm gonna say text display name okay on change okay now i'm gonna take off this one and paste for email and there is nothing to change here [Music] and for password i'm gonna copy the password section here ctrl c so we have password okay we forgot to put the state password here okay that is why it was empty before i didn't observe it rather clearly okay now our sign up page is also almost ready and we need to on change get the on change handler it's the same as before but we need to add the date add for display name too okay if name equal equal we also have to create states set display name okay now let's also get these states also this is okay that's the display name we have our states and we have our own change handler and we have our inputs and now when one click sign up button click equals let's create an arrow function and see let's say create user it takes event and event [Music] and now let's create this create user foreign password okay now this has to create user into the firebase that is done with auth dot create user with email and password which takes email password which is an asynchronous function so we wait okay this creates an user let's try this without displaying without storing display let me refresh this let's go to sign up page let me see gmail.com [Music] if i click sign up okay to make sure if the user is created or not let's go back to the uh our project authentic project and go to authentication yes it created romeo uh in authentication so a user is added so what we are going to do now is for this romeo um it has an user id using this user id we are gonna create a collection in firestore this uh in this collection we are gonna see a collection id as users and auto id we are gonna take some auto id and save it so it's going to create a collection called users all our users that we are going to create they are going to be saved we are gonna use the user id of particular user romeo and store his display name in firestore using this user id of romeo so let me say that again we are gonna take romeo's user id and as a unique value and we are gonna create a document in firestore using that the unique value and then in that document we are gonna store romeo's name display name okay how do we do that let's go back to our project okay here now in our project uh i'm gonna quickly take off this one here and we have uh created our user with email and password if this is successful so after it creates then what i'm gonna do is create arrow function here quickly and then uh this create user with email and password uh it returns a credential i'm gonna take that credential and then store it in user okay let's console this credential and i'll show you where our data is inside this credential um this credential is like a reference as far as i know okay now let's console log this and see okay in our project if we are creating one more user okay let me quickly delete this so that we are not gonna confuse with our okay there are no users in for our project so and we also have to set state after clear all these values after entering after clicking sign up we can do that later i'll show you but for now let's create one more username pal or pop paul [Music] okay if i click sign up you're gonna see a console log for credential okay here is our credential it's an object which has a lot of details and inside this credential there is an user object which has our email paul gmail.com and also there is uid you can use all these things from dot user so we have to use this credential object inside that credential object we are gonna use the user object okay let's get back here so what i'm gonna do is const user equals credential dot user okay i i stored user in to user okay how i'm gonna use this user now let's see what i'm gonna do is document i'm gonna create a new function and i'm gonna create this function inside firebase file firebase.js file so what i'm gonna send is i'm gonna send user and some the display name i'm gonna send okay where am i gonna get this display name from here i mean get that object display name object okay now it says generate user document is not defined so what i'm gonna do is in firebase.js document equals [Music] okay what this one does is first we need to get the reference for our firebase firestore users we need to get reference for this um the way we are gonna do that is we are gonna say const user reference equals [Music] slash user dot uid that's how we are gonna reference our users collection and now let's say snapshot equals firestore no whatever we have got here user ref dot get oops we're gonna get a snapshot and then why are we going to get this snapshot because when we are creating an user if an all if a user is already existing user we have to check before creating that user so if he doesn't exist if snapshot access if it doesn't exist we are gonna create um the uid into firestore okay [Music] so this already if it doesn't exist this already creates uid in this uid we are gonna store our uh display name how we are gonna do that is first we are gonna the structure our email from user okay now we have our email and we are gonna um we're gonna what we are gonna do is wait user breath dot set off you're gonna set an object okay that's the object we are gonna set into user reference so it's gonna create a document with email key value pair and additional data as display name value pair if this uh throws an error you're gonna catch that error just like that and console log it for now okay okay we used a weight and now we are gonna see a sink okay generate user document has to be [Music] imported from i think firebase is already there so i'm gonna say comma generate user document okay additional data is not defined i have to do that okay now i got maybe a typo [Music] okay now i put everything into my firestore project database and after i do this i want to return get user [Music] uid [Music] uh what we are gonna do is we are gonna return our use the right user email and display name from our firestore okay okay here um wait sorry [Music] users slash uid not yet it's gonna get users from uid [Music] um dot data i think that is the one okay you need to spread the operators okay but we need to put this in a try catch block okay so that's how we use fire store 2 in this project and sign up we are going to call generate user document with the display name send it to a firestore and store it in the collection users collection with that particular user id okay let's see if this is working let's go back and we already have something here but i'm gonna delete that later and let me see here we have paul let me delete paul for now and let's try our application from first let's empty all this we need to put a catch block here with error and then if uh let's try to run it now okay let me open i'll refresh the page okay now if i'm gonna create with a new name called um team team gmail.com and sign up okay i got credentials so i think the user is created team gmail.com let's go check in our authentication i have theme with user id bsm something something something let's check in firestore if it has display name yes there is bsm something something with the display name team and email team gmail.com okay that's how we create signup that's how we do sign up and let's see if us login is working let's okay let's say okay here and let's say team gmail.com and login i think we logged in how to make sure we are logged in we need to make our profile page open after we login how do we do that for that we're gonna use uh the use context hook of react what are we gonna do is we're gonna create a provider um inside src i'm gonna create a folder called provider inside provider i'm gonna create a file called user provider dot js inside this user provider what i'm gonna do is i'm gonna create a class component i'm gonna make use of state which says user now and also i'm gonna create a cons context just like create context let's say const user context equals react create context of object and it's gonna return user provider i'm sorry use a context dot provider which takes value as this inside this it's gonna use this dot okay why is this showing error okay we have to place this okay um every time the state changes our user context has to take that changed state value so every time component did mount we are gonna say [Music] changed user path we're gonna get that user out and we are gonna set states okay so whenever they change the user it's gonna be affected in the state whenever the state change the context changes and it's gonna take that context okay now we are exporting this context now we're gonna use it in our components and before that we are gonna [Music] render our app inside user provider and put our application inside user provider so all our application is wrapped inside user provider so it's gonna look for the context so we can use context all our application let's go back to login so when um we are gonna import user equal to react dot use context sorry context of user provider okay using this user we are gonna redirect our page basically user access or not so if user exists we are gonna render 2 profile else we're gonna display the login page we're gonna import redirect save it okay let's see inside profile we are gonna do just like this um no we're gonna have to get the details okay inside here copy paste user provider and email colon okay let's see let's see if we are getting email okay let's see if we are getting our email refresh um let's check who is the user here tim we have tim so let's login [Music] gmail.com okay i figured out where the issue is here i'm gonna use inside use context i'm gonna say user context i'm gonna take off this one and try it out now read property email of undefined profile page okay [Music] here also user context i'm gonna take off user provider here too and refresh the page [Music] since there is no user okay as tim is already logged in it went back to theme at gmail.com and also should okay that's how um if we implement sign out functionality then we can go back to login page so quickly let me see put a button which says sign out on click um [Music] which sign out if user access it's gonna stay in this page to root i say sign out i think i'm using auth dot sign out correctly it's not a function okay what what is that function should be out it's just case of the oh capital o okay i say sign out it went back to login page if i log in as team team team123 it logged in and now if i sign out here and sign up as [Music] sign up okay it signed up but we have to change sign up return to and first i need to get user inside sign up let's see the user context imported [Music] redirect to profile redirect profile else render the sign up page did we get redirect okay we have after we sign out login right gmail rack one two three it's like gmail.com okay yes that's how our login page and signup page are working thank you for staying with me till the end i'll see you another time with another video bye bye

Channel: Charishma Somisetty

Views: 148

Rating: 5 out of 5

Keywords: firebase, firebase authentication, firebase firestore, firestore, react, authentication, html, login, signup

Id: vrCad65d5vQ

Length: 69min 14sec (4154 seconds)

Published: Tue May 11 2021