In this video, we'll see how to create user authentication using Firebase.
So I'm bill now.
We have created that where we can add to lost functionality.
We can go to the checkout page, see the products that are present in our basket, remove that basket.
And also, there is a subtotal section that gets updated dynamically.
So basically, we have completed the basic functionality of e-commerce website, and now the remaining
part is signing so that the user can sign in through the username and password.
So we'll implement this using Firebase.
So first thing you have to go to the five best website by the best are Google.com, and you will see
this film.
So you have to sign in with a Google account.
So I got sign in with my account.
So once you sign in, both get there is a button called Go to consent the content button.
And then click Add Project, so now you are going to create a new project.
We have to give out project the name.
I'll give it a shot.
Click on Continue.
And then, like an Ebola Google Analytics for this project, yes, you have to enable it and then continue.
So for that, we have to select an account.
Again, period, anyway, convincingly like we can do any of the thing.
So we can use the deferred action for five minutes and then create a project that will take some time.
So long as the product is created like now, we have to be the log in page.
So I'm super concerned and they want to log in with that username and password.
So for that, it's fueling a chairman and see if this same order depends on the court.
You can go in log and digest and you can see that.
But I've created a platinum card login and I was very active and decided to link it with the.
Log in, --.
So they should be logging audio.
OK, this is.
So there's a sign up to begin with log in container with the sign up, and there is a form for the email
and password.
And then by signing in, you can update this morning on this already.
And then there's a button for creative recall and also a log signing button.
So I have used the use there to cover it.
I have like imported the used tech.
OK.
Again, like I reported the news story from React and then I have used the emergency payment for the
U.S..
So what does this new state does this whenever we type something in the form fund, for example, free
Typekit email, email and then retype something every time you buy a singing alphabet.
The the value inside the e-mail content, that is very important.
It should get updated dynamically.
So that is what your schedule does whenever you keep on typing, it automatically gets updated every
time and that is done using the set email function.
So the setting will take the input and through either targeted value, we can get the value of the email
that you're typing, which is basically the boilerplate that you have to do whenever you deal with forms
and react so that parallel to the same thing, you had the password for that videotaping something no
one can see it.
So as you can go to that door, Jesse Lingard linked to the log section.
When you click on the Hello guest sign in the region and many of adaptogens, you have to implement
the light switch, which can be shown in the inside incentive switch component so that it renders the
log in page and then the log and not see if this if you can check log in, but this idea.
This is not in our guest.
And then you go to long and not say this is going to see the state is basically moved over here.
Oh, and I just sort of button sign and button log in a paragraph form in book form.
It's fine, it's everything and basically follow the fans like it's simple, basic and entertainment.
So once you do that, when you click on certain things in his speech that we implemented using HDMI
lenses.
So when we click on email and password and click on Sign in it, that's the check to the database,
whether the image and password are already created or not, and then sign him.
If not, you have to be to shop upon.
So we'll see how to do that using this type of.
So once the project is read, you can click on Continue.
Now here.
We have to go to project or you.
But the product seconds.
So first thing you have to do is go to the five five star database.
And we have to create a new database to store the user's imminent past rhetoric that will be going to
the fire started this.
And then you can see the options are created inside of the database audit and stock investment.
You can't start investment because we are testing the product.
That's right.
Next.
Then you're going to be spending
another day for the problem, and I will.
It will take some fundamental reality to work.
So once this is done, we are determined the database that our database is ready and then we can select
authentication from the side panel already and choose the type of authentication that we need.
So that's going to be a bit using email or password type of authentication.
Yeah.
So long said, Sudan, go to the authentication section it.
And the underground water get started.
So we have been able this thing email or password type of authentication on the pen and IT configurations
in Bulgaria and emulate.
Then you save.
So I imagine it is, I love it.
So once you mix it.
And we have to say we saved it anyway.
And then now that the next step to do is that we have to add fire imagery that WebApp like to our visual
studio part for that to have to go to the product settings.
So here you can see three icons.
We have to create a Web app in the project so that we can integrate without a visual code that is a
third app on our air.
Click on a third iPhone.
And then we have to give you the app name.
I'll give it a shot.
But check out this thing.
Yeah.
Shut up.
So until this gets complicated now, well, what we'll do is we'll import some basic required fire based
tools that we need for the project.
So I've installed npm install.
Minus, these are flags to install everything properly.
By students.
Fire service and fire, the best logging.
So it is happening, so in the meantime, OK, we're going next, next, next.
Everything, order.
Yeah, this is for the tabloid papers, we'll see this in the next week or maybe after they apply that
the final step is to apply that application on to the US onto the onto the online platform so that we
can share the link to anyone.
So let's continue to function.
So now here in this, if because at that point, conflagration both the conflict and say everything
like this is the important thing that sets up this database and your app that we are building locally.
So populous and popping it already it.
What have made yesterday and create a fire alarm, fire, build our this.
And save the carpet corollary, you can remove the.
It's not required.
So once.
I have to go through this thing.
We'll see whether that be a more different standoff that is taking some more time, we'll wait for it.
So the basic God, what will I know what it is?
We have been fired from the package that we installed using, and so I'll put that.
What I address from.
By Airbus.
And then I'll be creating a fire with that.
By Firebase app.
But that's not an issue like that.
And then we'll be passing over the this object, the responsible object inside.
The initialize our parameters.
So after that, we have to create a constant database.
Frustrating the information, I find this.
And then we have to be at authentication object so that we can use it for authentication purposes,
Firebase has provided this object for us.
So this is a basic in the boilerplate for when you are always when you use your firebase for authentication
and deployment.
So to use this deal, we are not the we have to export them.
That it's actually five at.
Yeah.
So now we're going to explore.
They've been up.
So it is a completed the basic setup.
Let's see whether the back end is not in Somalia.
They're taking some more time US district for them.
So meanwhile, in light of what we have to like, will light up on the set up indications, but.
So that's Kelly waterlogging, Dargis.
And then here will be importing the thought that we just exported in Firebase.
I'm tired of us.
And then once it's implemented.
So we can, like use this inside insider Firebase.
So, yeah, so now once we have a imported dog, we'll be using the like, we'll ride the logic to implement
authentication.
So first thing we have to create new functions such as major shutdown signing, so that whenever whenever
we click on the button, we can trigger the functions and provide the function of the business logic.
The fragile the function of signing.
A little arrow function.
So then whenever, like the basic family, what it does is whenever we click on a button, it refreshes
the page.
But but the best practice in React is to avoid the refreshing of which we have to do a bit in dynamic
like that.
Like the each component should be updated instead of refreshing the page, the fact that I have to do
preventative front.
So even they even that will take place after clicking on signing button.
Preventive function.
So as we put it, all we have to like, there is a method inside our car signing with imminent password
that is provided by the phitidis, so we'll use that matter.
That.
I like values.
This is the best practice of writing.
Finding.
The event and last night.
And then inside will send they met in Boston.
That we already know, like the fonctionnent names which contains they met and that the user entrance.
So off the bat, if this metro successfully executed, then we'll get back the will get back something
from.
That is what we have to do with then.
Anyway, getting back up.
So now, if if, like successfully, we have completed DOD, we have to go back to the homepage.
Right?
So you go back to the homepage that is a can't use history.
So what does this news history does is when you can see inside the after days when we are putting literal
bombs, but out of all the tail components of the that's where the components that we use inside the
rover will be present in the U.S. history so that we can access the users to for loading back the components
that we used already.
So we're going back to my technologies.
If I log into our guess, I'll be importing the user's use history of audio.
Fast.
It's AstraZeneca's still uses.
So long as we're done, I can use his state on push.
Send back to my people like that.
But I take at the home road, if that's the homepage.
And then if there is an error, we can catch that up.
That is an area.
We can alert with that message.
So with this, we have done the signing part.
So how do you do that?
I just don't.
So I just do the same it.
Let me copy business.
So instead of saying it will be registered.
After Prevent Default and the insured up sign in with email and password, we'll have a function created
create using email and password.
So instead of saying create user.
User with the imminent threat so dark, they up.
So we can basically use brackets on non-native brackets, since it is only one argument only to use
brackets, but if you want to use that next year it.
So after this one of the images created, then if the order is successful very much like we have to
check with a dog, this successful or not we don't directly like.
We don't want to use it, provided you need anything below, but we want to check whether the user is
successfully registered or not.
So we have to use that if condition.
Then we are basically straight up.
And everything will be the same.
So one thing you have to change is click.
Wherever there is a battle to make, this is about like signing up here, signing on.
On getting off to.
Trigger the function of confinement.
And the direction conflict.
You have to register.
So once this is done.
So now we will see whether the yeah, so we can see all the tools are in start and then in the fight
against drugs, we are writing that boilerplate off our fire bets.
Here and then exporting not, and then we are catching up in the log in Dargis and creating the two
functions to write the business logic for sign in and register.
So once again, check out whether this is working or not.
And we'll throw out each of website fellows that cannot fight and fight fire with our guests.
OK, so like.
Here we are, we have to rename this.
Or we can change it instead of this or we can go blogging about this, and then it would fight so.
Well, this is an already I think it is setting the process.
Morning, not from volunteers on Fire Basin overnight is still fortified with identified with some the
one thing like the envoy to try to build bridges and then.
You can export and import fine best vampire vessel.
It should be smart.
Let us.
But basically, the idea that whenever you get a look at a new Stack Overflow.
So right about the log intervention, then what Cyprus?
They are that's not.
So the problem was as we start the fire, best fire, bad storms and fire based logging in a single
command, it was not installed properly.
So what any commander to do is install each and every thing's operating like PMI, fire based logging
and PMI.
Fire based ones are going to be in my fire to miss so that it should work.
And then when once this is done, we check whether the app is working or not?
I refresh the page.
Robo-Signing.
And let them do their best meditation, direct G-men, dot com and password, you can give any password.
Just click on first item check by clicking on signing.
One I on site, and you can see there's a lot of material that is throwing.
There is no user record corresponding to this identifier.
The user may have been deleted.
So checks the database that the virus has and then checks whether the user is present or not.
So since the user is not present, we can create a new shop account and click on Create Your Account.
Once it is done, it is directing.
Since I gave a very short password data alert extension of change, it's fine for now.
Exactly that we are getting any clarity into the.
So now I'll go to the same question to check whether we are getting an image when we check your e-shop
account or not.
That admitted that the email address is already in use by either un-American.
So you can use a signing so that you can sign in with that.
So there's no you can create your own authentication using Firebase.
You can also perform various functions like whether the user is signing, you can.
So he wants to sign or you can sign out and you can only render that one page whenever the user is signed
him so it can take various things.
You can check the fine print documentation for that and also you can get the user email ready whenever
he clicks on signing and then signing with the country's present in the database for all other functionality
that you can take as challenges and then finish it.
So with this being added, going into the final step on a project that is deploying that app that will
see in the next few.