How to Create Apps with Firebase

Firebase is a platform developed by Google for creating mobile and web applications.

We just published a course on the freeCodeCamp.org YouTube channel that will teach you how to use Firebase. This is the perfect course for beginners.

After learning the basics of Firebase, you will learn how to integrate Firebase with different JavaScript Frameworks.

Cybernatico developed this course. He has a lot of experience working with Firebase.

Here are the sections covered in this course:

• How to Setup Firebase and connect to a front-end application
• Firebase authentication with different methods
• Firebase CRUD operations
• Firebase Storage to store files
• Firebase Firestore Queries to filter data
• Firebase real-time listener in Firestore Database
• Firebase hosting
• Firebase with different JavaScript frameworks

Watch the full course below or on the freeCodeCamp.org YouTube channel (4-hour watch).

Transcript

(autogenerated)

Firebase is a platform from Google for creating mobile and web applications.

In this course, from cyber Nautico, you will learn how to use Firebase features and integrate Firebase with different JavaScript frameworks.

Firebase.

So dev tools needed to build a full stack application with authentication, databases, file storage, security tools, and analytics to build a full stack replication with easy to use documentation.

So by the end of this video, we will be able to learn authentication in Firebase, how they will databases, file image storage, uploads, and data and database updates, Firebase queries.

And at the last day, we learned how to host an application to Firebase.

We will also learn how to use Firebase with the template works like React, JavaScript, next, or Angular.

So let's start now.

So first of all, let me create one project in Firebase.

Let me enter Firebase front end.

Continue.

So I'm showing you from the start from the beginning how to do all of these.

Here I have a code sandbox, which has two inputs, email and password.

And let's tackle authentication first.

So here, we have so many options like password, email, authentication, email link, Google Sign In with Apple, with Facebook, Twitter, GitHub, Microsoft, Yahoo, and all.

So let me show you this things first.

Now, our project has been created.

Now let's create one app.

So click web app here.

Enter the name of it a second, maybe says Firebase basics.

The Registered app.

Yes, so here I have email and in email input and bathra input.

And when Submit button.

If you type anything here, this will be fed into this email of name stored in the input of name with the value, respectively.

So for the email, it will be emailing this data state.

For password, it will be password.

So we have to install Firebase first.

So it will stall Firebase, come here and go to this file, just add Firebase as tenancy like this, it will be added.

And for React app.

For the VS code, I mean, you have to install using this command npm install Firebase.

Now you see we have getting all this data here that we have to import in the app dot into this app.js.

So create a file fair, here, fire base config.js.

Let's put all the things here, copy these things, and just paste here.

Let me remove the comment.

To make it more clear.

We have to export this const app.

So this is a config data.

We have API key auth domain ID and all.

So we have to import it here.

So import app.

From one step back the file name Firebase config.

So now we can use Firebase for this app here.

So continue to console.

Let's Okay, we are targeting authentication first.

So we have to come to authentication tab, click get started here.

It's come with it comes with the so many type of indications that I shown you here, password email link, Google, Facebook and all.

So we have to enable them first.

So let's first enable email password signup and sign in.

Also add your domain here.

So let me add the domain the domain is this.

So copy this and just add it here.

It is sec added.

So it will work.

I guess.

Now what we have to do is we have to import a few things from Firebase authentication.

Just like it says here, import get off and create user with email and password here.

So get it get auth is a function to check whether we are authenticated or not.

And this function Create user with email and password it is it is used to create one user.

So let me do it.

First, let me define the auth instance.

So let auth equals to get off the employee like this In this function handle submit, if we click the button, hit submit button, this will be sent inside.

If we click the submit button, this one, this function will run, which is handle submit.

So in this function of CREATE USER with email and password, we have to pass the three things.

First is the auth.

See, it's getting passed here, not the email and the password.

So let me get the email to our email is from the data stick to data dot email.

Or I'm in and data dot password, password.

So we have to record the response in the console.

So we will use then it will send us our response.

To add the response in the params.

In the callback function, we can just say console dot log response dot user.

But if it fails, ever sign in fails, we can just catch it using catch error, we will just show an alert, which is error note message.

To save it.

Now let's try to sign in.

We don't have an email here.

So let's try it now.

Indeed the email or first open the console and play all these things here.

From the console, add the email and some password.

Submit.

See, we are reading all this data here.

Provider payloader.

Okay, we don't need this, we only need the access token, we need the display name original email that we used to sign up is verified phone number and all.

So here it's not verified.

So if we refresh this, we should see this email here.

See, it's coming here.

And one great thing about this is so let me sign in or sign up I mean, with the same email twice, is present here.

If we sign up again, or create the user again, we will see an error in the alert, submit.

See, we're reading off email already reuse.

So that's how we create a user in the Firebase fire store.

So not fire store, I mean in the auth I am getting Why am repeating Fiat stored every time I speak Firebase.

Okay, so create is done.

Now let's see how to find in sign in, we have this method, tying in with email and password.

So simply add it here, replace the Create user.

And here also, and all other things will be the same.

Save.

And now let's try to sign in with this email, clear it the console clear? Submit severity all the data here, which is really getting returned from here from this response.

But if we enter the wrong email that's not present here, we should see an error.

So let me use an wrong email, John 44084401 800 gmail.com.

And click Submit.

See, user not found because this user is not present inside the odd.

What did we enter the wrong password.

So let's enter the wrong password.

Submit.

See, still login ID or from password we are getting here.

So sign up and sign in is done.

I mean, create account and sign in.

So now let me focus on the email, or Google signup authentication.

So you can read the docs and do it just like I'm doing it for all other sign in methods, because I won't be able to show you show you everything.

The last here is let me just show you Google Auth provider first.

So we need the guitar and Google Auth provider.

Then we have to create the auth instance for provider Google.

So let Google provider equals to new we have to initialize the provider using new new Google Auth provider.

Fine, then we have to import one more thing, which is called sign in with pop, pop pop up.

It's here.

So we have three things get off Google Auth provider and sign in with Papa.

We have devised a function here.

And we will pass the earth this earth and the provider name is Google.

And that's all but here also we have to have to provide the provider of Google to enable this and then save using your email at the email support ID project support email, save.

So it's been created So save and filling submit button here.

This should open up a pop up here.

So if we just say when try, okay, it's it will work.

See the name of fish.

And as for the river dredge email account, the provided here is email.

If it try again, click submit.

Okay.

Okay.

So we are getting an error because we have to add the method here.

But this is not working this custom domain.

So let me fix this.

So, so So if I just copy this and add this here or just do a Share button.

Okay, it's not four hours, okay, just copy the web link here.

From there and just post it here in the domain.

Click Add.

And that should work now.

So if we click Submit button, okay, unauthorized domain.

Wait a second, submit once more.

Okay, what is the problem here? We can't ever to trigger this error.

So submit or refresh this, then click submit.

Okay, now we are getting it here.

Let me show you the pop up.

And I think you can see it too.

So then just click OK.

Where is it? Click the email any URL.

So see, we are getting returned all the data here that we got previously for the password signup, the email.

So this email is verified, because we have used the email signup.

Sorry, we have used the Google Sign up I mean, and the provider has been changed to Google.

So similarly, we have GitHub.

We have Facebook, Apple, Twitter, and all the for GitHub.

We have to import the GitHub provider.

And then we have to add the what is it? Let me just open the assignment method of GitHub.

GitHub, we have to add the client ID and secret, and it will return us the auth handler, author and learning that we have to paste in the GitHub website, GitHub app, I mean, if we go to github.com, we should see the settings here.

So go to settings.

And go to the developer settings here.

AWS apps to create a new app here.

So let me just open this file, right.

So I have to use the auth URL here that you are getting from here.

We are here we are there where from here.

Wait a second.

If we add the GitHub, this one, so we have to add this here in this authorization authorization callback URL, then we have to get the client ID and secret firmware.

So you have to figure it out.

If you're not, if not, you can check my video about data authentication in the same playlist.

So that's done.

So we have done Google authentication and password, create user and create user and sign in.

So now let's move to databases.

So for FireStore, let me just go to this cloud FireStore, then, okay, we don't need this.

You can read docs if you want.

But I will show you how to perform all the four operations for Firebase FireStore.

So open the fire store here in the left, tab, then just create database, start in test mode, then enable this.

So now we can use Cloud FireStore.

And here in the Firebase config, we have to import a thing called so import, get fire store.

So wait, let me just first add the Firebase slash fire store.

folder, we have to import, get fire store from from Firebase FireStore, then we have to create one no const of database, then we have to pass this app in the gate fire store function.

So we are done.

Also, we have to import the database in our app dot j s, because we have to use it to create the reference to a collection.

So see, we have to create a collection here.

So we can do it manually here or from the application from the React app.

So let me do it from the React app.

So we have to remove all these things that we don't need right now.

This let me remove this as well.

From what we have import two things First is the collection keyword collection function to add a collection to Firebase, then add doc to add document to the Firebase FireStore.

So we can do from, with what I'm doing Firebase slash fire store.

This.

So let's create a collection here.

So just type const.

Collection, ref equals to collection keyword, it will take the things here, which first is the database, the database, this database.

Second, the collection name.

So we can make the collection is users, the name users will be here in the collection, it will be shown later.

Now we have to send data using Add doc function to add doc, and it accepts two parameters.

First is the collection reference.

And second is the data.

So let me add one more.

Okay, live clip.

So just add email.

It will be data dot email, then let's add the password data dot password.

Fine, then we have to record our response.

Or we can just say, dot then for the success, alert.

And we can say alert.

Data added.

But if it is an error, we can just catch it and say error.

We can say console or alert.

Alert.

A are are not message.

Save it.

Now let's try to add data.

So let me do the email and some password.

Submit this function like add doc collection.

It will be it's common in all the frameworks like React Angular.

So we have if we have to add data from Angular, we have to add doc, if we have to add data from what is it felt or JavaScript or react or Vue js are next JS we have to use that Doc.

So it's common for all other frameworks.

So see, this new data is now here, this new collection name Nishan s 440 At the rate bla bla bla, and the password, let me add one more.

So let me just make it as one end, submit.

added.

And it's here.

If we refresh this page, I think it should be.

So let's check.

See, we have two collections here now Nishan.

There's one for the one, the latest one and this one the previous one.

Now let's see how to read data.

So we can create a function for this.

So const get data, it will be an arrow function.

So to get data, we have to get a function called Get docs.

This function gets data from Firebase.

To get data, we have to just pass the collection reference here.

So collection ref, we have to pass it here.

It returns some data as a response, like any API call to say response.

And here, we can just do console dot log response dot data, we have to match the data because it's very clumsy.

So it takes a parameter called Let's see item, then we have to return what do I have to return return item dot data or doc let me make this data we'll see what we get.

So we have to call a function because we are not calling it if we paste it here in the submit button.

We should see the data here if we click from it.

So Cannot read property of map.

Okay, I guess this is not data It's Doc.

We can check it here.

If we go to read data.

Get Data once Okay, okay.

Okay, okay.

Okay, get doc.

Okay, this is not the data it's only for one day.

Okay, region, let's check add and manage data.

I think red is already here.

So where does it read it? Read doc Okay, Doctor data.

Let me see Okay, leave it.

Let's try this submit, Cannot read property as of.

Okay, I think this is Doc.

And this one is data mated, save it submitted, then cannot read properties of what for for map.

So we are passing the collection reference and get Doc's.

And then we are controlling the response response to dogs, I think it's not the OSI submit as navigating this, we're adding two objects here, which are these objects, these two IDs.

So let's add the ID as well.

So wrap it in a curly bracket and make you tense for operator.

So it's storing the data and also the ID.

So Id will be item.id.

Save it.

And now let's try if we don't need it.

Okay, we don't need three brackets here, because it's just a single string.

So try it now.

Submit, see, it said the two objects with their IDs, this ID and this ID.

So if you have a document for Let's now try to update data, the const update doc, we need a function update data.

So these are common, I'm telling you once more.

So add the function to the submit button update data function.

So here, we have to import two things.

So we can just add, if we break this down, it will be good for us.

So we have to do a doc and update talk.

So we can update only one data at a time.

So in the update doc, we have to send the button, where to send the ID.

So you can send it I mean, because we didn't need the ID here.

So let me just choose any ID here from this too.

And I will show you.

And for the depth, you can see my other video where I have shown how to update data using the ID parameter.

It's just a common react thing, not from Firebase.

So what we can do is, we have to use the doc function.

So first, we have to specify which document to update.

So say const.

Doc, to update equals two, we have to use this doc function that we just imported, it takes three parameters.

So two of them are here, where let me check this collection reference with this one.

So it is the database and the user.

To pass it here, the database, the collection name, and the ID.

So let me choose the ID of this.

So this one, copy this ID we will update this field, then statically.

So add the idea here.

So now Okay, so Doc is now been selected, which document update.

So if we choose the submit button, click Submit button here, this mission test for for zero, and the password of 123456 will be updated, then we have to call update doc to update it, we will pass doc to update.

I mean we recommend to update and the new data.

So let's add email they should be let's say ABC and add password something anything 12312345 Fine.

So if it is successful, we can just call them which will show an alert and it will say data updated.

But if it fails, we can catch it using catch error and just an alert and it will say error dot message fine resident we are passing database, the collection name and the ID here in the doc to upgrade function.

And then we are doing all these things.

Save it.

Okay, let's also call this get a function.

Okay, that is not important.

So click submit.

So let me check first, the email is this okay? The email is this.

It will be changed to this ABC.

The password is this change to 12345 Submit updated and if we check here with Emily's ABC and the password is 123456.

If we add this ID here, let me show you.

And we can all we can also update one field at a time.

So if we don't want to have a password, we can just remove this or make this just as anything you want or simple, some password.

So save, submit.

So here, they should be ABCD.

So let me make it ABCD.

This should be ABCD, the email submit, updated the the email now ABCD.

And the password is the same.

So that is how we bid document.

So the fourth one is delete document.

So let me show you here.

So we can make it delete data and pass the function here to the button.

And we don't need to pass data here, we only need to pass the doc to update or dock to delete.

So let me get one more function, which is known as delete dock, or delete, dock DRC.

Fine.

So just add the function here.

Where in the Okay, update doc place.

So we have to use the data deleted alert.

All the things are fine.

So save.

And now let's check.

If we click Submit.

Second, it will be deleted this one with email ABCD and the password 126.

Submit.

Okay, delete it.

And see it's not here, we only have one field with the email of MEC and the password of this.

So that's how delete function works.

If I want to delete this ID, we have to copy the ID and paste it here.

So trust dot the third parameter ID here.

So you have to get the ID from the params.

For this delete function, pass the ID from here it will be come here, it will come here and then pass the ID simply here.

Submit deleted.

And see we don't have any fields here we are having empty data in FireStore.

So that's how add document get document, update document and delete document works in Firebase FireStore.

All the for CRUD operations operation.

Now let's see File Storage for Firebase Storage.

So we have to do here import Wait a second.

from Firebase Storage, storage come come.

It's coming here.

Okay.

So it should be good storage from Firebase Storage, then we have export constant.

So export const storage equals to get storage.

And similarly past the app, then import the storage here.

So we don't need the database.

Because we are we are going to remove this things to make it clean.

Remove this, remove this, okay, don't remove this, remove handle submit, not the function just the contents of get data, delete data and all and here, let me create one wait a second first, make it handle submit.

Let me create one input field.

So we don't need this.

So remove it and on on JL it takes an event and we will call the handle input function for this.

So we can just set it like this as well.

So their data they should be event dot target dot files and zeroeth index the file will be stored here in the handle input and then if it see in the storage let me open the storage here click web click click upload files.

So we are getting the data here.

Let me show you with him it is the console dot log.

Let me say file here.

So file will be here okay, not this we don't have to use file I'm doing this wrong we have to use data.

So handle input.

Okay, then we also don't need this so just paste it here.

Mohammed function so if we choose one file or just save it, but but but the thing is we have to add the type.

So type will be file.

We don't need placeholder enter in the name so remove them.

So if we choose one file, they should have We're in the of sign I've decided appear here if we say if we press the button of submit.

So let me choose one file here, like REST API, click Submit.

See, the file is now here.

And now we have to send the file to this Firebase Storage.

So head over to storage here.

And let's enable a storage.

So it's already enabled, fine.

So we have to import this get storage and referenced here at the top.

So we don't need get storage, because we are already having this great tradition here.

We have to use it here, the storage if we want to use get storage.

See, it's doing this here, but we have done it here in the Firebase config file, then we have to specify which document to which data to save using mountain reference reference.

So created here, this should be the image name.

So the image name should be called as data dot name, because see, the name is here of the image.

So we can just say, data dot name.

So that's done.

Now we have to pass the mountain reference to a function.

So the function is this uploads by upload bytes.

But if we go down here, we should see a clear view of all the functions.

So we have to use this upload for upload by resumable to import it from Firebase Storage.

Here, then one more thing we need is the get download URL to our if our file upload is successful, we will get a URL in our console that we can just send to database.

Like, let's say, we submitted one profile picture, and it's a trigger selling, then we can send the link to database for the avatar or for profile picture.

So we have to use this upload bytes is a mobile function.

So stay upload task, create one instance of this, it takes the storage ref, which is not the mountain ref.

So packet store data find the kind of the file so it's data not file.

So then we have to do just this called upload task.on.

So here, let's do it.

So upload task.on state changed.

So it takes an callback URL.

So let me just make it like this.

And if you see here, it's taking a parameter called snapshot snap shot so in the first callback, we have to we can get calculate the progress of how many percentage of the photo has been uploaded, then using this data, we can create a progress bar.

So it will be shown here.

If it is an error, we can handle the error.

So let me just add this here.

So let me console the error.

So console dot log, error, not message wait.

Then if it is successful, if the file upload is done, we can just call the next function here which is called Get download URL.

So you see it returning us a URL.

Let me clear this comment.

Now if we refresh this, okay, let me just try this.

We don't have any files in the storage so let me just choose one file.

So we have chosen if we submit here, see upload is 0% Done.

Okay, unknown error occurred.

Okay, let me just refresh the page and try once more.

If you check here, we are passing the scripts today's year, fine.

All the things are great.

Here also.

So let's try this using ref to specify the reference data dot team.

Okay, let me pass it outside.

Save.

Now let's try to upload one file.

Click submit the report undone okay.

What is the error here? Okay, let me see.

Nonlinear aka check for payload.

So let me check this.

Check for payload check for payload Firebase Storage error.

It changed.

Okay, upload task.

Images ready dot jpg data dot name.

Okay, the clipping is back here.

So we're getting started affair like this Why are we passing this we're passing it here the storage.

So if we see ref const today's your storage, it's fine.

We are passing the ref here storage ref, then the data and upload bytes presumable we are using this file, but here we are using data line.

So what is the problem here? So, it's not being properly polluted because because why const upload task flow task is here.

Not on finite state changed.

Okay, final is well, snapshot progress error.

But why can't we upload a file here? Yes, because the rules are not set up here, I think.

So, we have to also check the rules.

So open the rules.

And see the rule here is, we can only upload a file only when we are authenticated.

Like we are, but we are not authenticated here.

So let me try once more, it will work permit.

Upload has done 100%.

And see we can see the file URL in the console.

If we go to this link here, which is the image that we uploaded.

Now we can now you can use this link to send data to Firebase databases.

So if we check it here, also refresh the page.

Wait, they should be shown here.

It is this what is this in the storage.

So wait a moment, see the images here with the name, all the things that you can use, also the location.

So what if we want to upload the file in an folder.

So here in the data dot name, we can specify the folder in a string variable.

So make this as a template literal literal first, then just add the folder, let's say it's images, slash the image name.

So we will send the images in the images folder.

So if we try once more to send data, so try it, choose another file, any random file, then submit.

It should be uploaded in images folder.

So let me check it here refresh storage.

See, it's in the images.

And the current image is here that we just uploaded.

So that's how Firebase Storage works in all frameworks for React, Angular view, swelled, JavaScript next, and all, all the things.

So fine.

Now let's see how to use the real time updates in the Firebase FireStore.

So let me show you what I mean.

We are getting the data here from Get Doc's function in the gate function.

And it's empty.

Here.

If we ever name Nishan, Kumar, and email, submit, it's added, but it's not getting refreshed here.

So to refresh the page, we have created fetch the page manually this, click this, and only then we will get this array of objects here.

From Firebase FireStore thoughtless issue, we have to create one more thing called on snapshot.

So import this function.

And let me just come in this get Doc's right now.

So this on snapshot listens to the real time updates in Firebase FireStore.

Here, we have to pass the collection reference and one callback function.

So this callback function will run every time there is a change inside Firebase FireStore.

Any change if we delete if we update or if we add data.

So we have to do this.

So it takes an parameter called Let's Make it data and just console dot log this thing, so I have already this consoling here, so copy and just paste it in the comments.

Let me refresh or let me format the code here.

Let's try again from the beginning.

Refresh the page.

We have an object here coming from here.

If we add one more object, let's say Nishan Kumar to and the email something else to submit this new data We'll be here that was not before with the good Doc's function.

So submit, see added, and we are getting listened in real time.

If we add one more 34403, we have three objects here, coming from here.

So when this data changes here, this will also change in the front end app.

If we delete this collection or any field, let's see what happens to delete document.

Start Delete.

See, here we have also refresh the page.

And we only have two objects coming from the FireStore.

This fire store.

So that's how it works.

If it did the whole collection, we will have the empty object or empty array there right now.

So delete this.

See, the ad is not empty, because it's getting listened to in real time.

So that was how all snapshot works to get data in real time from Firebase FireStore.

Now let's see the Firebase FireStore queries.

So queries are used to filter data based on some fields like name or age.

So here I have four fields I have added, which contains name, age, and email.

So let's filter data according to them.

So we need the keyword called query from Firebase FireStore.

And one more thing it is called where we are keyword.

So let me create one const of query.

So collect the coins, let's first add the age query.

So it takes the query parameter.

So we will filter out the ages, which are less than 28.

So I think we should get 2521 and 20 ages.

So the filter, this takes the collection reference here as first parameter, then in the second parameter, it takes aware, and here we define the condition.

So we have to filter out based on age, to add the age, lemon comma, then we have to add the condition, whether we want it to be equal to or we want it to be less than or greater than, then the value, so we want the age to be less than 28.

So here make this as less than, so if the ages is 28, then this will be shown, then we have to pass this h query to get function.

So in our case, it's on snapshot.

So on the place of collection, they've passed the H query here, and you will see, we will hit the three data's here, where the ages are less than 2820 21 and 25.

If we make it more than 28 or equal to date, we will see only one age which is 28 here, so let me just show you refresh.

So if it is equal to 28, we will see only that data.

See see we are getting only one h here, because only one data has the age of 28 here.

So that's how H or non numeric filter works.

So let's now try to filter name query.

So for the name query, we will use if the name is equals to this Nishant Kumar four, then it will print the data of this.

So if we refresh the page, let's see what we have here.

Okay.

Something is wrong.

If name equals to this Nishant Kumar for, okay, we have to pass the query here as well.

Not H query because that doesn't exist.

So see, we were only getting the name because the only one name because here the name is Shan Kumar for and we are filtering it based on that.

We can also add the email or any other field we want, and how that's how the H or any other query works.

Fine here.

Okay, make this as email.

Then we can see this query here.

Make it just Nishan for further gml.com.

They should be here, because this record has the name email of this and the name of this.

So that's how query works in Firebase FireStore.

So let's learn how to host a web app or a website to Firebase Hosting.

So I have a React app here blog website that we will host.

So first thing Do we have to create, or we have to install the Firebase CLI.

So we will just do this install Firebase tools here.

Let me install this.

And one more thing I have to do is we have to create a build here.

So NPM, run build.

After these two, we will be moving forward.

So we have to wait for the build to generate and for the Firebase tools to install.

So let's right now we have the build.

So let's deploy it.

First, let's log into Firebase using Firebase login CI, enter.

So it will open up a window in the Chrome, sign in with this, allow this and we are signed in with Firebase, then what we have to do is we have to initialize the project.

So let me just zoom this.

So we can just do Firebase in it.

We want to proceed.

So yes.

We want the hosting to just press page to select the option and enter.

But the next step, so we want the public directory has built because that's where the build is inter.

So, okay, we don't need this automatic build.

If it's something wrong, so let me do it once more.

Let me clear it first.

We have to initialize it using this.

So yes, we want the hosting.

Inter build is the Public folder.

We want the single page app.

Yes, Yvonne, do you don't mind automatic builds No.

Don't want to override this? No.

That's all let's just use the command called Firebase deploy to deploy this.

So the step is to generate a build first, then to log in, then to initialize then to deploy.

So we have different commands for generating the build for Angular for React, and for any other framework, like next.

So that's how we do it here.

So see it reading or giving us a website link here.

So let's open it and see if he sees our website here.

So this is the website that we just hosted in this link.

And that's how Firebase Hosting works.

Now, let's look into the Firebase security rules.

So if your BEN Firebase rules here, the rules are not set to public, it means anyone can write data or read them.

So even if we are not authenticated in Firebase, using login and password, we can dry data or read them.

So let's try this.

Currently, we are not logged in, because we are getting this message of not logged in, come in from this owner state changed.

That tells us that if we are logged in, we will see an LF have logged in.

But if not, we'll see the electron not logged in.

In my previous video, I have shown this how to use the auth state changed or not state changed Yes.

So we can also delete data from the console.

See, it's empty right now because the data is empty here.

So let me now add one data without signing in.

We're not signed in, not logged in.

At the email, add the name, the email and some age, click Add here.

See, we are seeing the islands of data added.

And if we check here, it will be added here.

It will be having one document of HD five emailed and the name that we just added here.

And we can read them also open the console.

See, it's coming here in the console.

So now let's change the rules to authenticated it means we will write data only if we are authenticated.

So let me do it here.

So remove this state right now.

Okay, just do if allow right only if if the request dot auth is not equal to empty.

So we can make it null here.

So it means it will allow us to read data or ID timing when we are logged in when the requested author is not null.

If it is not null.

There should be some data inside the request or the data we get from the authentication when we sign up or sign in.

So second thing to write here is allow rate in any case, so right is authenticated proof authentication proof, but not this read.

So publish this rule, and Open Data tab.

So like now let's say data without signing in, we are not logged in, and the name, the email and the age, click Add.

See we are getting this message called missing or insufficient permissions.

But we can read data.

So open the console, we are getting the data here see the age 25, and the blah, blah message or the fields here.

We are getting it here.

So now let's make the role of rake to be authenticated profile as well.

So do it here like this.

And you will see, we will still get that error that we got in the right permit right operation.

So save this or publish this.

Open the console, we will see the message of permission is not sufficient.

So there is a page not logged in.

See error and a snapshot listener Firebase error missing or insufficient permissions.

So it means we don't have permissions to read data because we are not logged in.

So now let's try to log in, and the email and the password.

Log in here.

We'll see a Nami logged in.

And if we refresh the page.

So see, we should see the data here because it's allowing us to eat after authentication.

Now Now let's add data after authentication, the email and the age.

So click add here.

So see data added here.

So that how authentication works.

I mean, that's how the rule works in Firebase FireStore rules.

Authentication at all.

One more thing that is here is to allow the user to read or write in no cases.

So it means even we are logged in or we are in the authenticated tab.

It should allow us to not write data.

So we will just add if false here.

And here as well.

Okay, just make it only in the right permission.

This allow us to this will allow us to write data in no cases, even if we are authenticated.

So refresh page.

When logged in, let's add data.

The age, click Add.

See, we don't have the permission to see the data, I mean to write data.

So that's how Firebase FireStore rule works.

Now let's handle the Firebase real time auth updates.

So I mean, when we log in, our app should send data to Firebase that failed logged in.

If we log out, our app should send data to Firebase that were logged out.

So if here, I have an email one and one password field login button in logout button, I have added one email here of my mail.

So let me just create this ON OFF state something that will listen to us on stage changed in real time.

So just make it like this here.

And create one you will affect took us effect.

Simple as that.

Make it an empty string here.

I mean, the array.

So just call a function here.

I mean, when we are logging, it takes an off parameter.

And second thing it takes is a callback function.

callback function returns some data to us.

So we can say data and console it here.

Data.

If I check this console here, let's see what we have initially.

So we're reading the data here, because now we're logged in.

So let me start from the beginning logout.

Fine.

So sorry.

Now we're logged out here.

So let me enter the email and password.

Email is this and the password is something.

Okay, fine.

So if I click Log in with an email password, this function or not state changed.

It is sending data to Firebase that were logged in.

If we click logout, this will send data to Firebase that we are logged out and it's persisting.

Even if we refresh the page, it will still exist.

So unless we log out or log in, the state will not change.

So if I log in, click the button here.

We will get all the data here.

See, even if we refresh the page, it will be still the getting the data it will still let him retire.

But if we click logout This should be null.

It means now we're logged out.

So let me just refresh the page and you will still see the null because we have not logged in, we are logged out.

Let me give you one more thing here.

So create check if data exists, or if it's not null.

Or if we are logged in, we will show an alert here.

Every time it runs that we had logged in, but else if or less else, okay, just make it else, we will see an alert that we are logged out or not logged in evidence.

And now let's try this.

To see we are reading this message called logged logged in.

So refresh the page.

Still the same because we're not logged in.

If we enter the email and the password, we will see that we are logged in now.

Okay, then if we refresh, we are logged in because Firebase has said the state of US state into logged in.

If we log out, the state will change to log out.

So that was all about on a state change in Firebase, which leads us to our real time updates in order to create a file called index dot j s here, and when are the initial JCS and one for HTML, so index dot HTML.

So they are running here.

So let's add the embed code here.

And make this as Firebase js.

Two first, in this first video, we will just learn how to authenticate and use the CRUD operations for JavaScript for vanilla J S, I mean, so let's link the script tag here.

script script src through its index.js.

Let me format this fine.

So we will write everything inside the body and put the script tag after the body because it should load after here.

So let's start by creating a Firebase app here.

So go to console here.

Add a project.

Let's make it fire base.

Front end, continue.

Create Project here, it's creating.

So let's run the file here with live server.

So it's running here, but we can't see because we don't have anything.

Let me make a day when let's make four puts, or first let's make the two inputs for authentication.

So we'll have input off email, placeholder of email.

With email, and make this, then second one should have the pleasure of password.

Password save, and we have email and password.

Let's give them a styling.

So create one CSS file as well.

So this should be index dot css, simple.

And link the CSS here, we can just say link, CSS, and index dot css, save.

So give this div a class name of or class of wrote class name, let's say mean.

And here in the CSS we will just say mean display of flex height something unread via search and justify content center a line items a line item center, so they are now in the center positions.

So we need to make them row wise.

So we can also to do flex direction of row or I think it should be column yes, that column wise not row wise.

So we have now two input fields, email and password.

Let's add some Label Label email and put them in a div.

So this email and password sorry, this email label and the email input field are now one combination.

So do it again for the second year, or the input of password and at the level they should be password If and now we have these two, okay.

Or what we can do is just rename the main two body.

Fine, it's now fine.

So we will in password, let's give them the level some styling, or leave it, it's fine.

We are not focusing on the styles.

So we need a button here.

So make a button, make a test submit a layer and give the button a class name of submit button, or BTN.

And in the CSS, let's add the class name here.

It should be position of absolute, then left 50%, top 50% and pivot, then we also have to add a little bit more margin at the top.

So margin top 30 pixels, or 4050.

Fine.

We have now email and password Submit button.

So now let's get the data from these inputs.

So make this as Id add ID value and make it as email.

And they should be password IDs password.

Also, let's add the name of input fields.

They should be email.

And they should be password.

So name is password.

D The so now let's format them properly.

Give them a little indentation or whatever it is and then and then just wait.

Okay, fine, it's fine.

So we have now the email and password fields.

Now let's get data from them.

So to get data, just open index js file and create a function.

So const register, which will be an arrow function.

Here, let's get data from these input fields.

First is a male.

So let me use the type of the input.

So this should be male here.

And here, there should be password, type of password.

Then let's add the inputs here.

So const const, email equals to what should we call it document dot get element by ID, the email id and dot value to get its value, then we have to just use password equals to document dot get element by ID and the password its value.

If we can install these values, we should be able to see them.

But first, let's bind this function to this button here.

The Submit button on click on Click Register.

And now if we try to console them console dot log, email and password.

Let's see what we get.

So open the console inspect element.

And enter the email my end some password.

Submit.

See we are now getting the email and the password in the console.

We remove this console log.

Let's create the Firebase app, click the web here and give the name fire base.

Run and and here I have a guide on how to add Firebase to the JavaScript library.

So use a script tag here.

So we don't need all this right now.

So just open this documentation, I will leave a link in the comments or in the description, copy these three CDN tags, CDN links, I mean, and base it after.

Sorry, pasted before the index.js.

So we have these three.

What is the three links or script tags? First is for all and this is for Firebase FireStore.

So and the third is for app.

So we have to just use this called Firebase, initialize that in our index, dot j s, to save it here and open index.js Then we can just initialize it at the top.

Then we have to add our config here.

All this data, this data to copy these things.

I API key or domain and all and add it here.

Okay, then we have to initialize our database FireStore database and author.

So let's do it.

Do it here.

Now we can just use this odd to sign up.

So we can just say auth.

Dot sign for, we have to use CREATE USER with email, and password.

So minor spelling, and the it's a camel case letter user is use capital V w, capital H, capital L.

And we have to pass this email password inside this as params email password, then it's a promise.

So we can have a then block, it says a response to us.

And we can say response dot user in the console, RS dot user.

Let's also add a catch block if it fails to catch.

So this should be why should we call this it should take an error here, error.

And we can say console dot log error dot message.

And one more for the code.

So let's add the code air red dot code.

So let's try this now.

But first thing to do is continue to console here, open the auth tab in the side menu, authentication step, click get started here.

Then activate email and password sign in method.

Save it.

And we are done here.

So click Users.

You see we don't have any users here.

So let's add one into the email.

But first open the console into the email and some password.

Click Submit.

See, we are getting this all the data here with all the display name, email and everything else.

So we can use the display name, it's null email is my name, and everything else here.

If we refresh this data in the Firebase console authentications, we will see our email here you see, our email has been registered.

Now.

If we try to create the one more data, if for if you're trying to create the account with same email, we will fail, submit it here.

See, we are getting this message called auth or email already was.

So we can add an alert here.

Alert, which says error message.

So just added here, and you save email and password.

See, the email is already in use by another account.

So this is sign up to create one more function for login to const.

Log in revolute, same params I mean, we will use the same data here, same input fields and all.

So in the log in, we need one more button.

So create one button here.

That will point to sign in.

We can make this as low as we can make this as sign up to us but they are overlapped.

So what we can do is we are in submit button here Okay, make the says login button and air just add a new styling of Login button.

Make the same style here.

But it will be the same.

So make the left to 60%.

And this to be 30% Fine, don't mind the design.

We're just using the functionality there.

So in the index.js we are using this register to make it as login for sign in method.

And here.

Let's add the email password here like this.

And we can just say auth dot sign in with email and password.

I think the spelling is right.

It also takes two parameters, email and password.

So all the things they do the same so just copy this then in catch block and paste it.

Let's add an alert here as well.

Okay, alert will not work fine.

So now let's try to log in.

So enter the email and password and click Sign In but open the console first.

To check if it works or not sign in.

See, we're reading all the data here which says author display name, email and email verified and all the data what If we enter the wrong email that has not been registered yet, we will get an error in the alert.

So sign in.

See here getting this there is no user according to the identifier, the user may not use or may have been deleted and whatnot.

So it's working.

And if we do the right email, but the wrong password, we'll get the password error sign in.

See, the password is invalid, or the user doesn't know does not have password.

Fine.

So it's working fine, the invalid signer.

Now let's see how to use the same data to Firebase FireStore.

So pin this FireStore database here.

Oh, my God, chocolates.

So create database and start in test mode here because we are testing it.

So it's all the things they are fine.

So it's initializing and provisioning cloud FireStore.

Meanwhile, we can create a function here.

So it will say const saved it data for sale function.

We will use this method to save data.

So let's comment all this code here because we have already seen how this works to come in all this input.

No, don't commend it, we will reuse it.

So create one more button here.

So it should be known as the health data.

We can amend these buttons here.

Because we don't need them anymore right now, to save data, so we will just save the email password in the FireStore database.

That will that will work fine.

So we have saved data here and add this function to this button.

So on click on click this function of save data.

So we read the user an email, we read the email password, I mean, to add it here, and it will work.

If we click a button here, this should get the email password in our function here.

So to add data, we can just do this simple thing.

If we check the documentation here, it's listed here, I will leave the link in the description.

So we have to add the collection name first.

So DB dot collection.

So collection should be the user's collection, then we will use an add keyword to add data in the collection.

So first thing is our email, add the email as email, then we have a password.

So add password as password.

Then if it is successful, we can just use our then block.

So it takes our doc ref.

And we can just console dot log this data, but it will use this data, copy this and just replace the console log here.

And if it fails, we will use catch block.

Okay, so now let's try this, our database is empty you see here, let's add an email and some password.

So if you open the console and save data, we will get the message called document written with ID this ID.

If we check Firebase FireStore and refresh this ones, we should get the data here with that same ID that will Sawyer the same and the invalid password is listed here in the collection.

So for example, this is an array, this one is an object and in this object, we have the invalid password fields.

Let's add one more, change some data and save.

See the another one is here.

And it should be here as well.

See, so our ad Doc is functioning properly.

No.

Now let's see how to read data from FireStore.

So to read data, let's add a function here as well.

So const read data and just add the function here with in the index.

HTML so add the button here.

But done.

They should be read Wait a sec.

Read data.

Just say on the On Click event on click.

They should be read data here.

They when we have a button called read data that will correspond to this function called Surah terrain data.

It's very very very simple.

So we have to just say DB, dot collection and In the collection, let's parse the collection name, which is called users.

The collection name is users here.

And you'll see here, really using a get keyword here to get the data.

So we can use get, and it will send us some data back.

So we can just say, dot, then, to see in the console, the upcoming data, we can make it as document, or let's make it simply data, then we will just say, console dot log data.

So if you open the console now and click the save data button, get is not defined.

Wait a sec, let me see what is the problem? The gate is not defined.

Okay, okay.

Okay, if we just copy this, and let me just replace all these things.

Wait, wait.

So gate is not defined because we have to use a dot here.

Before this, get that file, save it and check again, read data.

We are getting this data here.

But it's not clear to us what is this? So let me just filter it out.

So data to docs, we can do, we have to get the documents inside.

So we will use Docs to read data again.

So we're reading this array here.

And inside this array, we have to find our data.

So we'll map this arrays.

So we will say map, it will send us an item as a fallback, then we will just say console, or we will just say return the item.

So we will return the item, not data to this item have a data as a retirement.

So if we save and check again, we should get this to array objects for the both fields here for both objects.

But the thing is, we're not getting the ID.

So we should get the ID by just adding ID and we should be item.id.

So create, click recreate again, we should have an ID here, see this unique ID for both documents.

So this is how we retained Firebase FireStore.

Now in the third thing, lift see how to update data.

So just say const.

One more function called update data equals to Mr function.

And we will do the collection name here.

So we will add the collection name, then we have to specify the collection ID.

So we have two IDs here, this one and this one.

So we can just say doc keyword, and we have to pass the idea.

So just pass the ID this one.

And then we have to update it.

So we can say update.

And we have to add the update date data to update first.

So let's first make the email to be something else to make it Ashish is good.

Boy 123, I read the read gmail.com.

So the password should be same.

So if we make the password to Okay, let's make this URL 123456 Fine.

So we will update the which field we will update the first field, this Nishan test for 501.

Invalid email.com.

So we need to pass this function to a button.

So we can create one button here.

It's just for showing you update one field and just pass a button here of one click on click this rate this function update data.

David, so we have to get a promise based response.

So just use dot then we will just say alert data updated.

Save it and let's check it now.

If we click update one field, this Rashaan as 4401 should be this email that federate here in the email.

Click Update one field okay, it's not defined.

So I guess we have to use it in an string like this.

So now let's try again update one field see updated here.

And if we check here is this see this email is now sheesh is goodbye and blah blah blah.

So we can change it again to 12321234.

And if we save it, update again So it's updated.

And here also 123 is now 1234.

So it's done.

Now let's delete this field to make the says delete data.

And one more button here to delete this field to make this as this function called delete data, paste it and save the file here.

And here also, but let's delete this field called Michiganders 440 At the rate gmail.com.

And the password 126.

So we will just say delete three, we'll set doc here, it's fine.

So we'll just use this delete.

So delete, delete.

And we will save it.

And let's try this now.

So if we click this will change the name to derryl one field and click this it's updated.

But this should be deleted, yes, but it's not here anymore this field at related right now.

Okay, very little the wrong field.

Fine, doesn't matter.

So we have deleted this field off this ID.

It's not here anymore.

So let me just show you again, one more.

So make this says where there should be data deleted.

So let me add one, one field here.

So add an email and some password.

Have data saved here, and it should be here.

So we have two fields.

This and this.

We can read them.

If we click this rate data.

We are getting two fields here, we can update the one field.

So we are using this ID to update.

So let me use this ID.

So if I read it again and copy the ID here.

So let me get this ID of Dixie ca whatever and we will update this field of Nishan as for for the road rage gmail.com.

So save the index dot J's file.

And they should be updated.

With not this they should be updated.

If we click update, this name should be Ashish is a good boy 123 by address gmail.com.

So let's try it update one field.

And you will get this message called data updated in the alert.

And we should be see Ashish 123.

So she's a good boy 1234.

And if we delete the field here, so this field will be deleted.

But the thing is, we don't have the ID of this field.

So it's not here, if we click Delete, we should get an error.

So we can just say dot catch.

So it stick it takes a parameter called error.

So we can just say console dot log error.

If we now delete this field here, we should get rid of that deleted wait.

Okay, this ID is not present.

But how can you delete I think something is wrong here.

Doesn't matter.

So let's replace the ID with this SB as WB in whatever.

So read data and just copy the ID this one and place it here.

In one coat, not two coats.

They went we will delete this field called second one.

Michiganders 440 Reggie Miller comm password 126 and the IDs as WBQ TMG.

So click delete one field deleted.

And they shouldn't be here.

See, we only have one field.

If we delete this one also, we have to pass the idea like this for related this field as well.

And if we read data, we will have empty object here, empty array mean and nothing here.

So our four operations now know working, which are create, read, update and delete as well as the registered and login methods.

So we have done a lot.

And we have done database FireStore database I mean.

So next up is Angular two.

First of all, let's create one Angular project.

Make sure that you have installed the Angular CLI using this command.

And to create a new app, we will use the command called mg new I app name my app.

So paste it here and let's in the app name too.

But let's first change directory to Angular here, then we will use this command, this should be Angular, and go learn fire base, save it.

And it will create a project in that folder.

It will take some time.

So even the routing, yes, we were in CSS.

So it's installing all these things here.

So let's wait for it to install.

And the Angular app has now been created.

So now let's change the folder.

Just do T D.

Why does it have angular Firebase Angular and Angular? hyphen, fire? Beats index.

Now we are in that folder here.

So it has so many files here that I'm not going to explain to you.

What are these? But we have to install one package here called Angular phi.

This is the official package for Angular.

So you see, it's asking us this thing, though.

You can say yes or no doesn't matter.

So it will do some interesting things here.

So yes, we want to proceed.

It's installing the package.

See it straight ahead that the official Angular library for Firebase.

And they are here, I will show you how to use this whole thing.

So it's installing the packages.

We must wait for it.

And now it's asking a few things here.

So we want authentication here.

Authentication, so select.

We don't need deployment, okay, it is just select authentication.

We don't need deployment to leave it for now.

We need FireStore.

Okay, we need authentication in FireStore, then enter, it will automatically configure the project for this authentication and Firebase FireStore.

Dummy.

So enter your email account.

Yes, this is my email account.

The it's a similar project name.

So all the project from Firebase has been listed here.

So let me choose the Firebase front end project here.

This project here from the fire store cloud.

So yes, we need this app.

What would you like to call your new app? So make it wait a second? We did something wrong.

We have to start again.

Because we didn't need the new app.

We had already an app here that we can use that sir mistake I did from far away for a very long time.

After a long time, I mean, so we don't need deployment, this authentication and FireStore, enter.

Yes, email is this.

Let's do the project name Firebase front end.

So we need this.

So just use arrow keys to navigate, we don't need to create a new app.

If you don't have any app or in fire store, you can create it.

So it's downloading configuration data.

And it's done.

And if we check our what is the environment? Environment? Where is that in SRC environments, folder? Environment, OTs, we will see our storage environments in this fear, Project ID, all these things that is coming from this project overview.

So let me show you.

If we scroll down to this, you see, all these things are now here automatically.

So it's a relief in the both production and development TypeScript environment file.

So now what when we restart our app, so we can just say Engie server, enter.

So let me go to FireStore database settings, let's go to authentication first, because first of all, we will handle authentication.

So it starting let's wait for that to start.

It will take some time, maybe one day or two days.

Then I will come back to our project has now been run by so let's open it on the localhost 4200.

Okay, so open it here.

localhost 4200.

Let's bring it in the front.

So close the app module Ts.

Let's check abdominal STM AB dot component dot HTML.

So we also don't need this terminal.

So close the panel removes so we can remove it or leave it so let's remove it all HTML data here and in the TS You will see we are getting input, all the things are being imported automatically, like environment, get FireStore hit us and all that we just that we chose before.

So let me just format this and throws this open ab.component.ts.

So these are the this is the component for this HTML, so we write HTML layer.

And here we write the logic.

The logic, yes.

So let's get data first or okay.

But let's handle authentication first.

So we need two input fields.

So let's make it an input of input of placeholder, they should be email and make it an auto close.

They we have an email field here, then we have one for password input placeholder password, they have them, we have input and password for email and password fields.

And what we can do is we can just copy the previous input from this page.

So just copy this div and placing the HTML file like this.

So remove the buttons, command buttons, and let's just add the styling from index dot CSS to copy all this styling, and place into this app dot component dot CSS.

And save and save this as well.

Now they are here, but they are not no center.

So what we can do is, we don't, okay, we don't we can't use body here.

So copy these things and or cut it and paste it in the Okay, wait, let's do thing, let's do this.

So just copy main class name and replace body.

And it will be in the center like this.

So let's give them a margin little bit.

So what we can do in this input, fat is the class name, we don't have class name here.

So give them a class name of input fields and copy the input Class Name fields and add it here.

So let's give them a little bit margin before between them.

So margin 10 pixels.

Fine, we have some margin between them.

Okay, what we can do, we don't need the input labels or remove them.

It's, it's fine without them.

So let me just now give this input a class name.

Because it's maybe hard for you to see the input fields here.

But if it's if it is not, it's then good.

So class input field.

So don't confuse between this field and this field.

This is one field and this is single plural fields.

In Google rela and plural, I mean singular and plural.

Copy the input fields and here we can just do a little bit styling so which should be 49 Sorry, which should be 100.

Let's make it 100.

It should be 40 px okay.

Why is this not working? Okay, we need one dot also here.

So if we refresh okay, it's too ugly.

So make this 20 A height and 300 input.

So these are this now look fine.

I think now we need a button.

So we can just make a button here.

Button.

So they should be Wait a second Who is this move and is this the button should be let's say sign it and one more for sign up.

Sign up.

See we have two buttons.

Give them a class also.

Button or we can just do here.

Submit button we already have so we don't need to use this.

You can remove these buttons.

It will just the button and wait 30 px 30 will be small I think not 30 lakhs make it 100 unread and higher it should be 2020 PM.

Fine.

Also margin already bit 10 pixels to our signup button in the Sign In button is now created.

Make the height of 40 Okay, this looks fine also.

One more thing to do is cursor is pointer here.

So make it so we have Sign In button and sign up button.

Now we need to get data from these two fields.

So let's do that.

So I have wrapped the whole code in a form tag.

And I'm using this login form as mg for the known function called handler register, just handling the login form value.

Here we have any model in the both fields.

And we can collect our value when we click Sign Up, or sign in.

So now what we have to do is we have to do what we have to import a few things.

So first, import, what do we have to import from Firebase with not Firebase, we have to use AngularFire, then auth.

And from here, let's import a few things.

First is auth.

Second is create user with email and password.

And third one is sign in sign in with email and password, these three things.

So let me break this down.

Now imports, here like this.

And we have to make a constructor here, no constructor and we have to create one auth type here, the auth will be of auth type this like this.

So remote console upon the values here.

And it's here.

So, what we have to do is we have to just do this thing, which is called Create user with email and password, then we have to pass this odd then the email.

So email is our value dot email.

And third thing is that value dot password password and it will work right when you dot password, why I cannot type properly fine, but we have to use their this not Jared taught and what is there it does not it does not exist on the app component to make this as public right in doing public now it is fine here.

We can make it private, but public is fine.

So now we can sign and it will return the date it will return some data.

So we will just catch it.

So we will just say response.

And the type here will be any.

And we will just say console dot log or just say alert.

Response.

Okay, okay.

So we have to console it here, not just showing the alert the console dot log response dot user.

But if it fails, we will just catch it.

So catch error, we will show in the console.

So anyway, so in the alert.

So alert, they should be error dot message.

Then just save it.

And let's sign up now.

In the Firebase, we have an email, which is Nishan as for zero day gmail.com.

So we can sign up or sign in.

So let's first sign up, because there it is create user, enter the password, sign up here.

See all the email already in use, we are getting this error here.

And if we sign in, we will the same because the both are the same.

So remove Sign In button.

But if you sign up with different email, it will work.

So let me see.

Let me show you open the console, clear it and change the email a little bit and the password sign up.

We are getting all the data you see.

And in this one, it will be updated in the FireStore Firebase authentication see.

So now let's add the login.

So just replicate the form or just leave the form here, comment out this handle register function create one more function called handle logging just like this.

So it will accept the value and I will just pass the function here not handled register.

So fail to compile because we have to save this VS code and we will just use this second property called sign in with the invalid password so it will take the same things.

First is the auth to just copy this auth value of email and password and we are done.

Let's also copy this then catch block.

Put it before this after this study not before, permit this.

Now let's try to log in.

What is the error? Okay, we did something wrong.

So I guess we are using one extra s.

Curly braces now did work fine.

So enter the email and password.

So Emily's Nishan, test some password.

Sign up.

Okay, let's make this button a sign in.

Now.

So click Sign In into the imminent password.

If we open the console, it will work because we have the correct email password.

See, it's returning us this data, all the data that we get from Firebase, if we enter the wrong email, which doesn't which, which is not present in the authentications, it will get an error in the alert, see auth or user not found.

But if we entered the wrong password, but the right email, we will still get an error.

Or wrong password.

The it's now working to our authentication is done.

So now let's see add document in the FireStore database.

So we need few changes, make this as add data.

Add data, let's say the function name, this should be add data and remove all these things from air and also this previous sign in method.

So we don't need this public or an author instance and name of this import from fire off.

Then we have to add this data to this function.

So if we entered them into some name and password, they should be here in the console.

If we check it.

Now let's import a thing here.

So import.

It will be from Angular Fire and Gula slash fire.

And the thing to import is let them record down first.

The first thing to import is what do we import add doc? Second is Firebase.

Okay, we have to also use Angular Fire slash Firebase Firebase fire store not Firebase, then add dog is then we have to import Firebase for fire not Firebase fire toto initialize for our fire store, then collections keyword to specify the collections.

So at this tracings first then in the constructor, we have to add the instance of fire store.

So we can say public fire store and FireStore like this save so you see, we don't have we only have one account here one document so we let's add one more.

So to add, we just use the collections first so cones DB instance to select our database so we can have multiple collections here.

So let's select the collection we have to add data inside.

So we can just do we added collect we have added collection here collection like this, then just pass this fire store instance.

So this dot fire store FireStore second thing it takes is a collection name, so its users and we are done here then we have to pass this tables tense in add doc function with the data we have to add.

So pass table instance and the values values like this value we have singular value fine.

So we can use then block if it success if it is successful, we will just say a lot data and but if it fails, we will just say dot catch block some error it takes as parameter and we can throw an alert which will say error dot message now let's try this oh god is this Barry when reading this never translate this site.

So let's add one email and some password for there to send 123456 Add Data Data Set and let's check here.

They we have another data here that says the email and password.

We can add more fields so let's add more fields.

So make the self named input name name placeholder as name, ID, as name.

We don't need it here, but it's fine.

type will be text.

And that's fine.

We have three fields now.

So if we send it, we will have our third field in the document here.

So let's try this.

Or a second thing, no, we're not missing anything.

He let's add the name, the email, the password at data sent, and it will be here with the third new input field, which is named C, we have all these three things here.

So that's how we add data in FireStore, using Angular, now let's read the documents from the FireStore.

So import, get Doc's function.

Let's create a collection here in the constructor.

And what we can do is we can create one more function here.

So we will call get doc or get data like this, we can just create a collection here and then we will just pass the collection to this get Doc's function.

So the collection is DB instance, to pass this hair, and it will return some data.

So we'll call them block.

And we'll send us the response and we will just do can we will just do console dot log response dot data, not data dot doc dot not doc, do s do CS Doc's dot map, it will take an item again.

And then we can just return the item like this with the ID of the item.

So make the ideas item.id What is the problem here? It is not callable.

Hmm, what we are doing wrong here.

Okay, we have to you we are raising return fine.

So what we can do, we just open the JavaScript file here in the J S, and then just copy this block of data and replace it, it will be the same.

But what do we have to get the data here, we can just say item dot data point.

If we open the console, but we have to call the function here, in the constructor, we will use this keyword for the reference.

If we say well, let's check the console.

Refresh, we are getting the three areas here you see password, with the password, email and the name if it has a name.

So now we can store it in a variable.

So let's make a variable here.

So public public data, it will be an array.

So make any point in the series realize it like this wave.

And if we just stored this data here, it will work.

So we can just do data or this dot data equals to this response within spread operator to spread it inside this data.

It's getting stored in the data variable.

So we have to just open or just copy the public data.

And here, let's add in the after the form, we can come in this all the things here and just do an evil tag inside an ally list tag, let's loop through the array so we will just do in g4 and g4 then it takes a item select say let item or this array of data then we can just do item booking do curly brackets, I think we can just do item dot name save we are getting the name because we only have one name here so if we make this as email, or let's add like this, so first will be the email third will be the password save and we will get our email the password and if we have a name we will get that too.

So we are saying all this let me zoom it in and you will see also the email, the password and the name for the respective lists.

So read Doc is also done.

Now let's update the data.

So we need a button here.

First add a button.

And this will be called Update, save it.

And let's create or let's import two things here, which will be called dock and update dock dock will be used to specify which document to update.

But an update doc will be used to update the document that we chose using this doc.

So create a function called update data.

Okay, not const file, that's it, upgrade data, just dump the data, it will take our idea of string, type string, fine, then we have to add the button or the function to this button on click not on click, just click and just make the update data function and the ID will be passed here.

So item.id We have to receive it here, we are saving it to save the file.

If we control the ID, we should get the idea of that field we are working on it, open the console.

Let's try this click update for this first field.

It's getting here, this one and this one.

Here we are getting the ID.

And we will not use dynamic imports, I mean, we will not click the button and it's relevant populated in a four, we will just update it statically using the static data that we want.

So what we can do here is we can specify which document to update.

So make const data to update equals two, we will use doc keyword here, it will take three parameters.

The two of them is called this fire store instance.

And the collection a third one will be the ID select which document to update, then we will just use update dot function.

And we'll pass two things here data to update and the data we want to update.

So let's add the name here.

So let's add the name of Ashish.

Fine, save this.

If it is successful, we will throw that block here.

And we can just do alert data updated.

And if it fails, we will just catch it and say error alert couldn't or just throw the error dot message here.

Fine, save.

Now let's update any field.

So here we don't have the name of Ashish.

So it will be added if we click update here.

And one more thing we do we can do is we can just call this Get Data Function after we are updating because then it will automatically phase the page and get all the data so make this says these are good data to call the function here.

So now let's clean up data first.

Here, click it updated and see the artist name is popped up here.

If we change it to something else, let's say over there and click another one, let's say this last one, they should be here the name of the third field updated and it's here.

If we click the previous one, which has already the name Nishant it will be here that was our name not Nishan so they can change it like this.

Okay, the fourth one we will delete.

So we also need one more button here so let's add it it will be simple as well to delete the function name will be delete data.

So just save the file and create a function here delete data okay.

Then we have to add the collection started after document which document update.

So make this as document NATO delete simple.

We have to import the Delete dock as well so delete dock so just added here.

So we can do delete dock and pass this simple.

And the rest will be done in class block.

The usual things.

Let's also get the idea.

The idea of string because we also need the ID and add it in the params.

The event will see a delete function button here.

If I click Delete here, make this as data deleted first.

If we delete here, they should be deleted, deleted and it will be disappeared.

If we click Delete for the this one, okay, let me just change the few things made this update here.

But first, let me change it to Nishan.

We can change other fields as well.

So if we change the email here, in Update, it will be updated.

So let's say Nishan 123 At the rate gmail.com.

So here in this video, we are building two fields.

So if we change the first, the name and email, it will change here, click Update, updated, and the email is now Deshawn, the 123 at the rate gmail.com.

And the password is the password the same, but the name has been changed.

So let's delete this Deshawn field deleted.

And it's not anymore.

We only have one field.

And it's being updated dynamically.

So all four operations are now done, which is called CRUD operations, as well as create as far as well as sign up and sign in with email account and password.

So that was a lot about Angular, and how to handle Firebase authentication and clear operations in Angular.

Now let's handle the Firebase authentication and CRUD operations in React.

So into that folder for React where we create our application, we will just type MPX.

Wait, let me just zoom the terminal MPX create react app and the app name.

So make it Firebase React.

Let me just see Angular, well, Angular Firebase.

So let's make it react Firebase.

And the names have been small letters.

This should this you should keep in mind.

So let's wait for it to finish.

It's creating a new app in the folder of react to our React app has now been created and it started here.

So we need to do one more thing here.

So just open a terminal and just to npm install Firebase, we have to install this package, so install it and wait for it to finish.

Then we have to create here to input field so let's create them.

So remove the sluggers widget from there so to create two input fields, so we'll just say input and placeholder as let me make this an email and name of email also and the type of email as well for type this type of email, email repeat it once more for the password.

Manager is password name as password and this one is password as well type David and we can see two input name and pass email and password.

So remove the class name app and replace it with the app header save and let's remove the unnecessary class name like this app logo media queries and app link and key frames here at the bottom remove the background color here fine now give this input two class names or one last names I'm in for both of them.

So let me just format this.

So this should be what should we call this input class name of input fields so here should we should give the input field some margin 10 pixels.

So we have some margin here.

Let's sign up button at the bottom button to submit the form to make this as slick per sign up, because we will use Sign Up methods first.

So we need here two functions in the Ambrogio.

So create them the const and input input so we will handle the both inputs Same time, one more function to commit to handle submit equals to this function.

So the handle input, we will target it on this input field.

So on change, it will take a parameter will event.

And we will just send the event to this function using argument and props for the argument in params, not props and same here.

So, and in the handle submit button, we will just map it here in the button on click handle submit.

So, let's create one state here first import the use state from react use state from reactive and we will just do a state let's create one state of const data that data equals to US state it will be an object and it contains it will contain two properties.

So first will be the email and it will be empty initially, then the password also entity initially, then here we will have to get the input.

So say event, we will save it here and let's create a new lead variable.

So let inputs equals two.

So we will do it like this in the inputs, we will just do event dot target dot name.

And if the name matches, we will store the value in the name.

So if it is email coming from this name of email, and if it is password coming from this name, password, if they're matching, we will just store them inside their respective states object states.

So email email password password.

So here we will just say event dot target dot value.

So in this in output, we are setting it inputs, then we have to just store this data and set data.

Set Data.

We can just say input using three dots to spread them inputs.

And we have also to store the previous data.

But let me show you what I mean if we console this.

So console dot log, this data.

And if we enter the email and password here, it won't work perfectly.

So let me show you open the console.

internal email and password, sign up.

See we are only getting the password not the email.

That's why That's because we are setting only the field of inputs.

And let's say when did the first winter the email first, then the password.

So this password is overriding the email.

And that's why we're saying only the password.

So to fix that, we have to just pass the data as well this data so it will contain the current data and the previous data.

So save and now let's check, refresh and just entered email and password.

Sign up.

Okay, we are hitting this as empty.

I guess I have to pass it before inputs.

So first tell you the data then the input.

Now let's check.

email and password.

Yes, now we see we are reading the email and the password.

Now we can use this in the FireStore authentication.

So let's add the credential authentication authentication to import.

Let's import the two things from that with Oh yes, we need the app and the database.

So first, let's create them.

So in the source folder, create a file called Firebase can fake dot j s and in the file, we have to just import the FireStore configuration for this project.

So copy these things here and add it here.

So we have to export the contact.

And we need one more thing from the FireStore database.

Net fire store which is called so get fire store from Firebase slash fire store.

So I think the import name is correct.

Get fire store Okay, fire sword is a single line.

I mean single word.

So we have to initialize the buyer thread as well.

So export, export const let's make it okay, just database equals to get fired stored in this pass the app credentials inside here, this app, now it will work.

So now let's import these tools, I open database in the Ember js main file, import app, and data base from one step back Firebase config file.

Fine.

So we're done here.

But we have to get authentic IHS things also to open authentication step.

First, we have to emails to let's add one more from the React app.

So let's make this as import MPD from let's add in both first Firebase slash auth.

This one and in this curly brackets, we have to import passes the Get off.

The second is the sign in with email and password for the log in and create user with email password for Create Account, creating account here.

So these three we need, we need to create one instance for the auth.

So const or equal to get off.

And in the submit function, handle submit, we have to just call this function called Create user with email and password, we will pass this author, author instead instance, then the email password.

So we can just pass what the state name data dot email, comma data, dot password, so it takes three params you already know from my previous videos for other frameworks, it takes off data email and data password, Emily million password, then we have to do the then block to make it successful.

message so response.

And we will just say console dot log response, else if it's okay response to data, or user data.

And if it fails, we can just say catch error.

And they should be alert error dot message.

So if we save and now let's try to add some input.

If we sign up, we will get an error because we already have the symbol present in the authentication, we can't create a duplicate Li, sign up.

You see we are getting this email already in use.

But if we use the wrong or different email, let's say 4403.

And click sign up.

It will be successful that we are reading all this data here.

And here.

If we refresh the authentications tab, it will be in the users see this one.

So it's done.

So now let's add the Sign In button to add this says or make the signup a sign in.

And here just replace this function of CREATE USER with email password with this sign in with email password.

So added here.

And if we don't try this, it should work, we will get the same data here.

We are getting this data because now we're not creating the account we are signing in.

If we use the wrong email that is not in the User tab here, we will get error.

So try it see Earth user not found.

But if we use the wrong password as well, we will get the password error.

So make this something else that is not present in the store this authentication sign in wrong password.

So this is how we handle sign up or sign in method.

So one thing to show you before this is so we can store this token inside our social storage.

And we can use it for our authentication.

There are miticides there are other methods as well, you can use them as well.

So these are done.

So now let's see how to send data to Firebase FireStore.

So we need a few things here as well.

So first will be collection to create a collection or to get the collection and add dock.

So first, let me just import from Firebase slash fire store this so we're importing collection and add doc to collection will be used to specify a collection and add lock will add data inside the collection.

So let me remove this because we will just send data from here.

So we can just make this button off.

Sign in with Add data, we need to add one more field here called name.

So let me add it here.

To make the placeholder as name, name as name, type as text.

Fine, we are done.

And here one more object property called name, MT initially.

And that's done.

Now we can install our name here as well.

So what we can do is in the handle submit function, we have to use.

First, let's create a collection.

So if you open the FireStore database, we will see our collection name here.

So it's called users.

So we need to add the collection name.

So we can do it like this const let's say database, which database to edit users to add it? And then we have to pass this What is it this database? Where is it this database here? Okay, wait, was we database then the users.

So now we have them, it takes two params, we will use Okay.

Let's make a DB instance.

Instance, because we had to wait now.

So we will use and Doc, then we will pass the DB instance and then the data.

So our data is this data.

So simply pass it like this.

And it's done.

So if it is successful, we will then call the block.

And here we will just show an alert that says that data sent, or else if it fails, we will catch the read anything catch block, which will show us an error.

So alert, error dot message.

Save and now let's try to enter the name the email and some password.

Add Data data sent and if we check here, it should be here with if we refresh this okay.

Okay, wait a second.

Wait a second in the Firebase config? Yes, but we are not getting the data here.

Though.

So we are sending it.

Where is it? Where is it? We are sending the data which DB instance? Wait a sec, ad dog? Is it add doc? Yes, it's a dog.

Looking now let's try one more.

Let's make it mission Kumar to and then add data then yes, it's now getting saved here.

It's mission Kumar to end same email password.

So it's done we can now we now know how to add attire.

So next up is the get data from fire store.

So we will create and use effective first function but the cons to get data equals to this error function.

And here it will light our logic to get data.

So we need one more thing called get dogs.

We will just use this get dogs and pass the instance here.

So the instance is called this DB instance, it will specify the document the document name and the database to pass it then simply create one use effect hook or you can do it like this also on the button just pause the function if we click the button of add data or let's say get data, this function will run and it will get our data but we have to make it an asynchronous function.

In theory, we'll have to await this and we will store data inside one variable so let's say const data equals to await got await get Doc's DB instance.

And we can console this data like this, but we have to map it I mean, I will show you why.

Open the console, click Get Data.

We are getting all the data that we cannot read.

So let me just filter it out.

So in the top we have the docks and we will map it.

It will take an item param then they will simply return dot dot dot item dot data and then the ID of the item so it will be item dot Alright, now let's check, get data.

So we are getting three arrays, or three objects of three, three objects in an array from here.

So this is our very return now Firebase FireStore.

So the next up is update data.

So let me just use the function here as well.

Or, or, or Okay, fine.

So okay, let's now create a new function, the cons of date data.

And let me just figure out, just cut.

Okay, let's see, let me first do this.

So let's get back the add function and add the here, not get data.

Look what I'm doing, what the hell is I'm going to update data will be an arrow function.

So we have the handle submit, which add data, so make it add data.

I'm not running it at the moment, but it's fine.

To do to update data, we will just use a function called doc, let's print the function.

It's a, it's a function.

So we will specify which document to update.

So let's say we will use a new variable collect data to update.

So it will take the doc and here we will pass three things.

Three things.

So the database, the collection name.

For a document, what is it the start data, the database, the collection name, and the ID.

So we have to specify which document to edit, whether it is this one, or second or third one.

So we will get the ID from this fields.

So let me just create a new button here at the bottom here.

But, but the thing is, okay, what we can do is, let's map this data first.

It's simple as well.

So we had to create one state of, let's say, array, and set array.

Use state and array, empty array, and then just set the set era here.

On Nury data, we don't have to console it, then we will just map compiled with problems, it is not defined fine, we will address it later.

So where is it array, we have to map it.

So let's map it here.

To array dot map, it will take and item params anything you want to write, you can write it here, you will return something.

So let's return sleepy or first or dim as a parent, then three PII tax.

So I will just say item dot name, email password, so it will look through that array, just like we did in the Angular version.

So it will be an email now.

And here we will be in password.

So in the angular we have used, and before, but here we are using this array map to loop through the array.

So in the button, so we need one button here as well.

So make a button that will send data to that function.

So button on click, if you click the button, it will just send the data.

So we can just say, what is the function name, update data, update data, and we will just set the ID so item.id in the update field update function received the ID here and it will work fine.

So it's now here.

So we are adding the which video to update with a sec.

Let's add our name here as well, for the buttons to update if we refresh, okay, we're not getting this here.

Why? Red dot map? It's here.

Okay, let's remove this input fields and see or just comment this okay, we can we have good data but not this update? Y.

We are mapping the array and we are returning it here.

But we cannot see this.

That's why is that okay, okay, okay, app header.

If we choose the app header and if we remove all this or just remove the app data class What is the why we can't see our array mapping? So Eric map items, it returns some depth and a button inside.

Okay? Just copy this or cut this and remove all the things from there.

But more depth, we need to close it and then the okay, if we just open the console, let's see what we get.

Refresh.

Hmm.

Error is not here.

We are setting it here.

Okay, the problem is we're not sitting it here.

Okay, that's a blender mistake, I did revert all the things back.

So let's create one use effect hook or use effect.

So we are setting the data but we're not loading it when the app loads.

So, we will use the use effect hook here and we will just pass an empty array to make it an empty dependency array and we will just get data here call the Get Data function inside and it will work now you see we are getting all these three fields here name email and password.

But, but but so if we refresh you cannot see our fields.

If we are we are returning this item array dot map data.

Okay, okay.

Okay.

Why we cannot see our fields I cannot name fine frame on the class here.

Okay, now we are seeing okay, I guess it's because the color of the font is white, remove the color.

And now we can see this, we can see our name, our email and the password.

So let me just remove these things first.

Because we don't need at the moment, them.

So if we click update on this field, this ID will be passed down to this function here and it will update so let's create or let's uh let's just import some things here.

So we need to import update dock from FireStore.

So we also need one more to delete the document.

So delete dock should be here.

So drop dead dock, we will just do update data update, non data update dock.

And we will pass data to update and the data inside.

So let's just make the updation like this.

So we will change the name as first name should be not chan Kumar just Nishant let's add the email to be something else.

So okay, if we copy and let's change some small details for for the row 123.

Okay, let's update this only.

And if it is successful, we will just show and message called alert data updated.

But if it fails, it will catch it and say it will take an error.

And then we'll say console dot log error or alert also.

So if we now click the field of update here, so this ID will pass down to the function for this.

What is it for this property.

So Wait, one more thing only just last thing, given a chart area for the horizontal line.

So it's now getting separated with this line.

This is one field.

This is one field and this is the last field, click up date here.

This ID will be passed to the function of abrade data.

And it will be passed to this function late variable called late data to update.

It is specifying which document target first using the ID parameter.

And it's just updating the data using this lead variable and the data.

I guess you know what I mean? If it's successful, we will just have to call the get data to get the updated data.

If we click the first field, they should be Nishan not Nishant Kumar and nine will be changed to this.

So let's upgrade here.

Updated and see it's now Nishan and the image has been changed as well.

If we click or if we make this as our sheesh And email is something Ashish in, blah, blah, whatever.

So if you click this update, they should change to Ashish.

And the image should be this to update changed, you can also get the password.

So if I make the password to be and string of abc, def, and update, this name will be the same with the email and the password only will change alone update updated, and the password has been changed nowhere.

So we can do it through there as well.

If we update all the three fields will be changed.

See they are being changed.

So this is how data this is how we upload data into FireStore.

The fourth one is called delete data.

So it will just say const, delete data.

And here, although it will take the ID and delete data to update or make it data to delete.

So it takes three params just like the update doc.

So very important delete doc here and we will just have to pass this detour to delete in the Delete doc function, nothing else.

And followed by this then in catch block, in case of successful leaders make it data deleted.

And we have to pass the function in an ID in button has to make a button here.

This will be Delete.

And on click of the button.

We'll just say delete data and pass the item.id.

Save our it is not defined.

So let's save it here in the delete data function ID.

So we now have a delete button to delete.

They should be deleted, deleted.

And see it's not here.

If we check the FireStore.

It's getting deleted in real time.

If we delete the second one off, Aashish deleted, and it's not here, and it's not here as well.

So we have added all the four methods of CRUD operations, adding, deleting, get data, and update data creation, read creating, reading, updating and deleting.

So that's how we operate we perform CRUD operations in React, and authentications using SAML emails, email and password sign up.

You can also add one more sign up method called Google authentication or GitHub authentication.

And it is very easy.

Fine.

So let me now just comment out or comment, name the commands from these codes and save it.

So we can just add data here and it will show up in the bottom.

So if we entered the name, chan Kumar, some email and some password if we Okay, add data.

So let me just make the button here to be add data.

Where is it and the function name is add data.

If we now click Add Data, this will be here.

data sent.

Okay, we have to use the read data here first in the ad lock.

So so so here is the Get Data function if we add some more Nishant 123 and all the things will be same.

And then it's here.

So let me show you from the starting the eight, delete, add some data add data, then.

And it's here.

Let's make it as Ashish.

This one should be Ashish or for the roid rage gmail.com or just make it four to zero shorter piece of data, then it's here.

And that's how we add data we can update them.

It's being updated to this data we are adding here.

You can make it dynamic by passing data to this button and the function.

Sorry, button, sorry, passing data to this input fields.

So I'm not going to do that.

So that's how we do all the things in Firebase and react for Firebase and react.

Let's learn how to authenticate our next app with Firebase.

We will use Google and GitHub authentication plus mln sign up, we'll also see how to send data or save data.

It is also called CRUD operations in next step.

So let's start.

First thing to do is we have to create our next app.

So we can use this command and bX create next app latest version.

So this is just paste the command here to let's add the name of the app.

So it should be next, crud.

Next, crud, and odd.

Okay, this looks fine, then add.

So it's downloading all the packages from the library from our cell.

Then what we have to do is create an app in Firebase.

So let's create it.

So let's say next auth crud line, continue.

We don't need analytics, just create a project here.

So our project is getting created.

And here also in the React app to wait a second or wait a minute, 10 Continue.

So our Firebase project has been created here.

Now what we'll do is create an app.

So to create app, just type here, grad, OT, just type driver dot find.

And nearly Chyna folder.

So let's go into that project folder, which is called Next, OT or net next cried and not find.

So here we have pages, we have index our main page, we have our node modules that contain all our dependencies.

We have package dot JSON that contains all the list of packages, yarn log, I don't know what this is good ignore to ignore node modules and all the files to ignore when when push to get.

So now what we'll do is just install Firebase here.

So open the terminal and just type npm I Firebase.

So we need this command in order to Firebase to work.

Meanwhile, let's also create one file here.

So just create Firebase config.

dot j s.

So this will contain all this configuration data here.

So just copy these things and paste it here.

Remember the comments? Okay, let's minimum the comments.

So we're already importing the app here.

So we need to export this from the folder, let's say Export const app.

Now we can use this app in our project.

Okay, now we have to do in this home page, where it is it this one, okay.

But before that, let's create a folder, which is known as layout.

Lay out, okay with layouts, layouts inside create a file called index dot j s.

So this will contain our layout for all the pages.

So we will create two page.

So one is for registration.

One is for the homepage.

So we don't need next right now.

So just what can we do, let's create two pages.

So we already have index, which will serve as the homepage.

So let's change it first.

So we don't need all this code here.

So remove them on this head, though, we need the head, remove everything inside the main tag.

So So So remove it.

Then save.

And let's change the title here.

This should be next.

Read all the crud stands for create, read, update and delete.

To print to console here.

Now let's define our authentication methods.

Click Get Started here.

We will use email password.

So enable this.

And we have to use the web okay, we don't need this password less.

We don't need this right now.

So save it.

Plus, let's add two more provider.

So Google enable.

Save.

Then let's also add GitHub.

We will use signing for GitHub and Google so next one should be GitHub.

Where is it this one.

But for this, we need a client ID and client secret.

So just go to github.com.

And go to Settings.

Here we will have option developer settings, open auth apps.

And let's create a new log in or LDAP.

So let's make it grad auth.

homepage URL, let's make it localhost or this URL here.

So first, let's start the app.

So we have to start the app using npm.

Run Dev.

First learning on localhost 3000.

So let's copy this URL, and put it here in the homepage URL.

Then we need the callback, which we should get from Firebase.

So copy this auth URL, and paste it, then registered application.

So it's returning as the client ID, that we need to use it here.

And a client secret.

So we need to regenerate a new client secret.

Let me enter the password.

Okay, it's wrong.

I always forgot my password.

Okay, it's still wrong.

Let's try this.

Okay, it's not fine.

So we need this client secret.

So just copy this using the copy symbol or icon and paste it, then then save it.

So we have enabled email and password, Google and GitHub.

So So So what could we do now.

So we are now open here in the localhost 3000.

So let's create the layouts page.

Before that, let's give this home a title of h1, which is called home, and it will show up here to see it showing up here.

Now, let's do what should we do now, to create one more page, it should be register dot j s.

Let's make it smaller.

Fine.

One more, we need for login dot j s.

So we have registered component and login component.

And in the index, we are fine here.

So what I have to do, create a layout here for the route.

The first thing to do is importing import, let's say router from next router.

So we don't have to use React Router because it's not react, it's next.

And it's come it comes with the router.

Previously predefined router I mean now we have to create a function here to call export const let's say layout.

So we're exporting this constant layout and we can use it this will accept some prompts.

And then inside a div, we can just say router.

Okay, we're not router we run a router we need link sorry, Link.

Wait a second import link from next link.

Then we have to wrap our routes and a link.

So link grid to wait a second let me check part is the command for linking.

So when new deployment next link, click this.

Okay, we have to use h ref.

Next link h ref.

Let's type the link for the homepage first.

It should be just a slash by defaults to add a visitor register if you check our app or if we go to register so let's add a component here.

Export current export not const default function register then let's return something let's return a div first inside let's add an h1 It should be saying just save it we now go to registered page this not this okay let's go to register page now.

We can see that I used to text here you see it's now reflecting.

Let's let's do the same for the login.

Just make this says login and this solders this also log in.

Let them pull the styles from index which is called Home Node js.

This index I made first import styles and add it here.

We'll make it in the center, this is all the text, then then what can we do just add the main here.

So in that div, just copy this Dave till the footer and paste it here.

Just make this as register.

And just copy this again and paste it here.

Wait a second.

Here it is not defined.

So I guess we have to import head as well.

Head and image in register page.

No, it's working fine.

They when do the same for login, just change the text to login.

Where is it? This one and the default function name.

Now if we go to login, we have to change the add the input for login.

But we have to add the link for login.

To make it log in.

And let's add login here.

So we have the login text here, enter this text here.

Add one more for the homepage.

Make it let's say home.

And if we go to Home, which will be the home text and the center.

Okay, this is not found, I guess why? If we open home, wait a second.

It's not home it's index.

So let's change it to home.js We have to change the input.

Okay, it's automatically change is.

So so so we have now the layout here.

And we are passing this so we need to return the data as well.

So wait a second.

Okay, it's working fine.

So so so Okay, now we run, we have print board this index, or this Firebase config file in the home page.

So let's import, just say import.

So it should say from Firebase country.

So we have to import the app, the boat app from Firebase config.

In the home page, there's working fine, then we can see our footer here you see, powered by virtual.

Now let's create our district page first, then we'll move to homepage.

So close all these things.

So in this page called register.js, let's add the styling and the data.

So let's just remove footer, we don't need it here.

Save, let's go to the Start Page, register.

Save, and it's here.

So what we have to do now is we don't need image import here.

So let's import the Firebase config file.

So import app from Firebase config file, auto imported, then we have to create text inputs to a text inputs to just create them.

So we will say input and output it once more.

So what we have to do is the give this input a class input a placeholder of they should be email.

And second one should be password.

Pass password.

They've, we have email and password.

So let's style them a little bit.

So make this as the class name of input, input, input box, input box fine.

And here also in the second input, break it down.

Like this.

And then save David knowledge, style it a little bit.

So in this file called styles dot home dot model dot css, just say we have to just add here.

So input box, we can just say, let's say width to be 200 pixels.

But did we run work because represent us using styles, the state styles dot input, what is it the class input box? Save Okay, the problem here is we have to use it in this camel case.

Then it will work.

So just say input box.

There it's now it wide.

Repeat the important second input for password, save, they are both now wide.

Now let's add some height, make it 30 pixels.

Fine.

Let's also give them a little bit space between them.

So just say, margin, five pixels.

Now we have email and password.

Fine, this looks better, we can type email and type password.

So now what we'll do is create a state.

So let's create two states.

So first will be const, let's say email.

And password.

Setting will use state empty string, then const.

password, password and set a password then we have to just create a new state hook here.

empty string.

Now let's read them.

So in the email we have to use on change event on change.

Event it takes event.

And we can just do e set email event dot target dot value.

And the scorpion put the same here.

But this time here, they should be set password.

Now we can get even in password if we type here to also let set the value.

So value would be the trade off email here.

So email, and this one should be set up password.

Wait, wait, wait.

So value, we should be password.

Save when it's done.

Now we can get our email password input properly.

Now let's create a function here.

The const which should be signed up then we have to just import to function from Firebase.

So it should be import first Adline both then from Firebase Auth.

So we will have to import two things, which is called or get auth.

And tied in with or sign up with a second.

Register.

What is the method for registering with email? It's its fastest signup.

Papa, let me see the method to sign in with with email and password.

It's not a register.

It's not sign up.

It's weird to say let certain Google Sign up for Firebase signup method or Firebase Firebase authentication.

So let's go down we have to use web Okay, create the user with email and password and I get it now we will use these two you see it's here auth and create user with email and password then let's create an instance of auth.

So just say cost or equal to get off save it and just copy get CREATE USER with email and password then you have to just pass the auth then the email, email and then the password.

So now, if we had signed in we can just throw us to the page of home if we sign up successfully.

So we need to create a router instance so just import use router use router from next router then then create an instance of router to say const router it well to get router router but in it so to use router use router then we can just say router dot push to the home page.

So if we see in the where is it In the layout page, the router form is slash home.

So it will push us back to that home route.

So save.

Now we need to create a button here, that will send us to that page.

So just import a, sorry, just create a button and say, sign up.

We have the button here.

Let's try a little button.

Let me make it a class name of tiles, dot button, or button sign.

So in the button, class name, we will just say, button.

Let's make weight same as this or 100 pixels will be fine, I guess let's try 100 Fine with 20 pixels to 2200.

Fine.

Let's add the third is what I'm doing which should be high not with too much.

So I guess it was right.

It was right.

So we have the button here.

Make it 35 Also a cursor pointer.

If you hover this we will see a pointer cursor here.

Now what we can do is we are using the signup button, just add the button on click event on click the button the function name, signup right here.

Now let's add our email here and password to sign up.

So Nishan s for further g mail.com.

And some password.

But before that, make the type of password to be password, input type.

Password and this one is email type as email.

So if we type a password here, they should be in dotted format.

We can't see it.

So let me get some password 123456126 Sign up here.

So if we do see, we are now on the homepage we have signed up successfully.

So now open now users in authentication and we can see our email, the provider is email and password.

So we need to go back here and create two more.

Two more.

What is that? options, one for Google and one for GitHub to create two more buttons.

button, you should be Google or just say sign up 30 Sign up with Google.

Similarly, one more button for GitHub.

GitHub, let's add some red horizontal line within them.

Because I tag in here also in between these buttons.

Fine.

But but but we are not thinking properly because we are using the flex box.

So it's being gates, it's being synced down to our dot here.

So fine, it doesn't matter.

So now we have to use Google and YouTube sign up buttons.

So just repeat the styles here as well in buttons.

Just format it like this.

Now we have done okay, but the problem is we have to use let's make it Google or button alternate.

We will have to use more ICT here.

So okay, okay, okay, it looks fine, doesn't matter.

We are just using the font, we are just showing the functionality not tiling the app.

So what we have to do is create one more function or two more function.

The first will be sign up with Google.

Second function will be GitHub which should be GitHub.

So we can use one, we can use one function to do the both.

But it will be complicated.

So I don't want to make it complicated.

So we have to import the methods for Google signup, and GitHub signup.

So let's import.

First is Google Auth provider, the provider we have to import and then GitHub Auth provider.

Fine.

These are the two things we need here.

So we have to specify the provider for Google.

So let's say Google provider equals to this new Google Auth provider.

Similarly, do it for GitHub.

Copy and paste.

My Google has GitHub, get hub and this one is GitHub OAuth provider.

So in this function of Google, we can just say, we can just use this function called.

Okay, we need one more thing here, which is called sign up with, pop up, this one sign in will pop up, then we can just use this pop up method.

And we have to pass off this OPT, is this odd, and the provider.

So first button is Google.

So we will add Google provider, this one, and we will record the lead record the Yeah, what is it? Response response.

And we can do the same here also, we can record the response.

So let's control it first.

response dot user, we have to get the user ID from here.

And let's console it here also.

Now, this button of sign up with Google this function, we have to map it in this button here.

So what we can do on this Google button, just say, on click this button, then just format the code here and put the button at the bottom center.

And do the same for GitHub.

And this one is bottom at bottom fine.

So now if we click this button of Google, it will open up a window that you cannot see.

But I can only see because I'm not recording that window.

So open the console first, to see what we get on the console.

If we click the button here.

So open the console and see in this providers, we don't in the desert, we don't have the email, we just have my email here.

So let's sign up with Google again.

Click, we are seeing a pop up.

And we have to use our email to sign up.

Click your email.

And it will show us all the data inside the user that we're getting in the console where you see token or Display Name, Email.

verified email is true or not, is anonymous or not.

We have the photo URL, and all the things.

And if we see the Firebase Auth, it is let's refresh it.

We should see our new image layer and the providers Google ad, you see, it now works fine.

So the next thing we need to add GitHub, so let's add it.

So when the Okay, in this data provider, they put the same method here.

But this provider, Google, it should be data provider, GitHub.

Save, and let's go up and just copy this method const function and add it to GitHub.

On Click this GitHub, the sign of GitHub here.

So if we sign into GitHub again, let's right click this button.

Okay, you see, we are still getting this? What is it a pop up for GitHub now, not Google.

So you see, we're reading the red Auth Account exists with different credentials.

That is because we are already using my email, err, you see.

So we have to delete this first, in order to get up to work.

Because we can't create account with two different to save emails.

So if we refresh now, and try again, GitHub, click your email, or click Authorize.

You see, it now works.

And if we open the console, maybe we'll see the provider of GitHub here.

You see, the display name is same, the email that I use to add if I refresh this, or 33 fields, author users, the provider is now GitHub.

And my email is now listed here.

So we are done here, I guess, the author is now done.

The last thing to do is, is just push it to homepage here, so just push to home.

Remove console dot log or leave it file.

So if we now sign up, we should be on the homepage.

So excited Google again.

Sign up with Google.

And they will work because we already have the symbol Emily and we are on the homepage.

So let's do one more thing here we were going to the CRUD operations is import use effect from react.

Then create a use effect hook here at the bottom of the functions.

Use effect fun indirect hook.

And if we have two options here, two arguments are parameter is whatever passes the data inside the function that we are going to run, like, and we have no dependency array.

So if it is empty, it means it will run only one time when we load our page.

But if we have something inside, let's say a state, then this use, the function will run when the state changes.

So we have to do a check here.

So here, let's see, let's just store our token.

Inside session storage.

It's a good practice for authentication.

So we can just say show storage.

Dot set item, we have to use the token, E, and then the data, Rita is called response.user.ox.

Token.

And I'm using this session total because it is getting in gets destroyed when we close this tab.

So if we close the tab, we should be able, we should be logged out automatically.

And we can see that page to do it.

Same here.

And here.

Fine, we are now setting token inside session.

So go back and log in again, with Google or GitHub or your email password, anything in these three? And it's getting so if you open that Applications tab, we should see our you see, we're seeing our where is it says storage this next art Okay, we are not seeing this a second set item token.

What is the problem? What is okay, we are saying it localhost 3000.

Here, this one, we are seeing the token here.

So we have to create a check here.

First, let's get the token from the session storage when we load up an application.

So let token equals to, let's say storage, we have to get that two Connector Kit item, the key name, which is called token.

So let's check here if to connect this to if we have a token.

So if we don't have a token, it wants Solitaire, and this will be empty.

If it is not empty.

If we have a token here, we can just throw back to the homepage using router dot push.

Fine, save it.

So if we go back, so we have our token here.

And if we tried to go back, which would be thrown back to this homepage, you see, we can't go back to the history because we have tukar inside here.

Let's do the same for the homepage, to open that home page here.

So open that home page and create a will the same as before.

So important, you'll effect from react and we are done.

The router is not defined.

So let's create a auth it's not router, first import you will router from next router, then create a const or let router equals to let's say, use router this important that we imported right now, then it's fine.

So now here we have to do something like if we don't have a token, we will just push us back to register page register.

Save.

So we can't go back.

But let's try to destroy that token now.

So delete it in the session application, just delete this.

So if we now refresh the page, we don't have, we don't have the token.

So we can't go back to or go forward to the homepage.

Because it will check if we have a token or not.

Here, the author is now done.

Now let's move to the CRUD operations using React router by using next router.

And next.

So sign up with Google again.

So we will do that things in our homepage here to open the homepage and let's start though let's create two form weights between the homepage we don't need that h1 Or just leave it doesn't matter.

Create two inputs.

So input first, this input and repeat it second time here.

So this should be off, let's say placeholder of let's say just name and this one should be placeholder off let's say age.

So we have two fields name and age.

Let's give them some styles.

So copy the styles called Basic last name, and that style is right.

And just use styles.my digit, this input box, input box.

And he just repeat this once more here.

Okay, let's do the footer because it's checking last space in our app.

And we can also clear this console, close the console.

To have more space in our app.

Let's also add a button.

Button, make it add.

So now we can add data using this button.

So we can just use the class name here as well for the button that we created.

So just add class name of in tile dot button here and just break this.

Fine, save.

So now we have a button here that we can use to add data to Firebase.

But before all that, we will store data inside this FireStore database only to store data here, but we also have this real time.

So create database here, okay, create database, make it test mode, because we are not in production, we are just testing the functionalities.

So server is done.

Enable it.

So meanwhile, import function called from Firebase fire store.

So in Buda function, we just called get fire store.

Wait a second, the import is wrong.

Firebase fire store is totally fine.

So import, get fired store this function.

And let's create one more export here for export.

Let's create database database.

So we will use the get fire store.

And it will just add this app inside to initialize it.

We have the Firebase app Firebase, what is it? This database created here.

And we can just add a title.

So we can just import this, what is the database inside homepage.

So we are importing it here.

So just we have importing a whole app third, also import database bind.

So now we have to create the instance of the database, I'm in the collection.

So we can just say const.

Collection equal to not collection, let's say create cost, database, ref equals two.

So let's import collection here.

So to create a collection to import collection, from Firebase FireStore, then we will just create collection that takes two things, firstly, database, this database that we just imported, and second, the collection name that we want to give the collection.

So let's make it all pretty good data.

So we are done here.

We had created a database ref here.

And we need one more function.

So const, add data to database ref, we don't need this.

So let's import a few things here.

Other than the collection, which is called add doc.

So we need to use the Add doc to add data.

And we have different functions for all the different methods.

So add Doc is used for adding documents, we have read doc to the documents, and that things we will show in later parts.

And in the later videos later Later later.

So we will just use Add doc, and we'll just say, pass this database reference here.

Then the email and password state for email and age state here.

So we're in two states.

So let's create the const let's say name, set name.

That name use state.

Make it a string, empty string to initialize it.

Similarly for the age so we're starting name and age here.

Age Ah, so we can just get the name entered here in the inputs.

So we can just say on change and it will take a parameter called Event event.

And we've stored the event dot target dot value inside this, that name, value.

And just copy and paste again, make this as setting set age.

So if we type the retire, let's say name, okay? You see it is not defined.

So import it here, we find it used it, now it will work.

Now we can type something here and in the age.

Okay, so it's done.

So, in this input of age, let's make it a number number input type.

So just add type of number.

Because we can't add the alphabetical characters here we can just only add age.

Find, though make this as input of text, because it's simpler text elements.

And let's also add the value they should be the state name, which is called name and where they should be.

value should be.

It should be number or not number it should be age.

Save.

Now, let's try so just add the button to this function here.

Sorry, add the function to the button here.

I am swiping things so on click swapping add data.

And now we have to pass data inside this database.

So name should be the name state.

And it should be next should be age of the state of age.

So if it is successful, we will use them to denote that data has been sent.

So we can throw an alert here.

So we can say data sent.

But if it fails, we can just use a class catch block to throw the error.

So we can just show the error.

So console dot log, let's console it.

So console log error, we can just say error.

Save.

And now let's try.

So what we have to do here is to destroy things to just create the value empty, add something in the fire store.

So we can set name as empty and set age as empty as well.

Okay, not empty, this should be null because it's a number and make the edges null here also.

So now it's try enter my name Nishant, age 25, then just add it here.

Okay, data sent, click OK.

And they are being cleared, but not this email.

Not this age, because I don't know what's wrong with this input type of number.

It's fine with text but not number.

So if we check the fire base fire store, we should get our data here our name and age and the collection ID for the collection document ID.

So this ID is called unique.

This is ID is unique.

So let's add one more, let's say Nishan to age 27 ad sent okay.

And it should be here.

If we refresh this, this should be here.

You see the second collection document is here with a name of Michigan two and ages 27.

But the thing is, we are adding a number here, but we are serving string here.

So we have to convert this name into a string sorry, convert this number into a number as you know a number.

So just wrap it in a number thing here.

So now if we try again, let's add the Shawn three or three age 27.

Let's make 1000 Click Add then and head.

This should be the new document.

And okay.

You see the age is now number here.

It's not string to our add Doc is done.

So now let's move to read document.

So for the document, we need to input a function here as well which is called Get doc set with an s not single doc and create a function here.

The const get data and make it an arrow function.

Then we have to just use this get doc function We have to pass this database reference.

And that's all to get data.

So we have to call this function first.

So how to call this, we have to call this when our page loads.

So in this use effect hook, just pass it.

Yeah.

So if we have a token, we have to get data held like this fine, we can also create one checks, if we have a token, only then we will call this get data function, which is always so we can we can, we are calling this function.

So we have to make this function as synchronous.

And make use of it, because we are using a promise here.

So we can just say dot then to record the response we are getting, we can say response.

And let's calculate console dot log plus points, save to open the console now.

And we are getting this data.

So if we refresh it, let's refresh.

So we are getting all this data.

Here we are, we are where we are this one.

But there are a lot of data inside that we cannot read properly.

So we need to get the data in this format.

So this will be should be an array, this one should be an object.

And inside objects, we will have different properties of name and age.

Fine.

So what we can do is we have to map it to get our data.

So we can just respond not dogs.

So we have to map this box here.

It takes a parameter, or it takes a value, let's say, data.

Security turn the data, and the value of inside data, which is called data.

So it's peculiar.

So if we now save, we are getting these three objects here, in an array of objects.

We have an array, which is this array, raw data.

And inside we have two objects 101, and two, and inside the objects, we have two properties of agent name in all these three objects.

So let's also add the ID here, this document ID to differentiate between all these three.

So we have to wrap it inside a curly bracket.

And we have to merge it with the ID, Mr object, so we will just say ID, and we can just say data.id.

Now we can see our ideas.

Well, here, you see, we have this idea of HQ the day, whatever the first one, and second one should be PM, F that, and it's pm observed and third one is also here.

Fine, you see here.

So now where to store this in an array to create one added state the cost, let's say fire data, or data, fine, good name, that fire data.

The US state, there should be an array empty array first, then you have to set up set it here.

So just set this close.

Now let's map our this file should audit to see the data here in our UI.

So this BAFTA button will create a div here first, then we have to just say fire data map to get data inside this map.

So we can just say data to iterate over date, and we have to return some data here.

So let's put it in a div.

Again, then we have to first use h1 for the name.

So let's say we have to target data object dot name.

Then second thing is, plates are the p tag, it should be data dot age to save.

And now we can see our name and age respectively, like this.

So let's make it as two because it's three it's too big.

It's three.

Now we can see our name and the age respectively.

Let's make them in single row.

So we can just use styles dot flex, then in the home dot modular CSS, we can just add this flex.

We can just say display of flex.

Also justify content, justify content, trees evenly.

Fine, but here it's not even so best make this justify content page Between.

Okay, what about the third one? Why it is not getting reflected properly.

So let's check the grid.

So the main height is okay, let's remove all this predefined styles here.

Just leave input box and the styles following it.

Okay? Okay, okay.

Okay.

Let's also add, okay, okay, wait, this frigging refined doesn't matter.

Let me just add the margin here.

Or just say, gap to add the gap between the flex item to gap 53 between pixels.

Okay, now we have some gap here, we don't need the JSON content.

Okay, fine.

It's all we have the name and the age.

Let's also use align items to align it vertically.

Okay, it's fine.

So we can just add the name as well here.

So name, text and age text.

To the name is mission to energies 27.

Just like FireStore.

So, raid has now done also this raid operation.

Okay, what do we have in order to hit that strong fine.

So well done, name and age using RAID operation.

We're getting all this data here.

Now let's see how to update these fields.

So to update these fields, we need a button adjacent to this fields here to this name and age.

So add a button and give it a styles of predict last names of the button style that we have in home dot model dot css, they should be button.

So we can just a size dot button.

Fine.

So we don't have anything.

So just say update here.

By now we've clicked this, this app to send it to the function to a function.

To create a function here first, we should be const a date fields.

It should take the ID parameter here.

So to save it, and we will send ID from this from this button.

On Click.

They will just then the ID so let's say it is a data.id.

Now let's console it here the console dot log ID.

So open the console now if we click the button here, update for the first field, you can read on getting the ID because we have to use arrow function here like this.

Now it will work.

So click the update of Nishant to getting the ID in this function here in the bit fields, this one and this one.

Now let's update the fields.

So we need a function here first, it should be doc.

And we have to update the doc.

So doc me add doc will tell us which fun which field to edit in the FireStore.

And this update doc will edit.

So we have to add the doc First, let's create let data or field to a date to make this doc so it was selected document which takes some parameters.

The first is the database.

The second is the collection name, which is called which is the collection name current data.

So we can get it from this one.

This one this one.

And the third thing we need is the ID by so we have the fail to do it now which fail to edit.

So second thing to do is we have to just use update doc function and pass this fail to it first parameter.

Second thing we have to import so we import the name it the name I mean, and then we have to we have the updated name.

Then let's add the age and the data age.

Right.

So if it's successful, we can just throw them and we can just say console dot log.

They should be lates in a console.

Let's add an alert here.

Alert.

data updated.

But if it throws an error, we can just say catch error, we can add a alert here or an console log doesn't matter.

Or if it matters if you are building an app.

So we have done these things here.

Now let's try to update.

So if we click update here it's updated, but we are doing something wrong.

Okay, wait a second update fields.

So we are doing this thing wrong, because we have to add this function as get ID.

We don't need this hair, we have to make the on the Add button.

So this get ID, they should be here in this button of update of get ID.

So if we click this, we will get our Id find.

So we had something wrong here.

So name is now ready.

We don't have any lemonade.

So delete this first one.

Because it's not, it's not looking good.

So if we refresh this, this will be now fine.

So now we have to do is get this Nishan then a 25 in this input fields.

So what we can do is we can send our name and age.

Okay, what should we do? Okay, we have to send the name and age as well.

So just say data dot name, and data dot age, then no, then in this function, we have to save it of get ID.

So just say name is first and then we're adding age.

So now let's set the name and age inside this input.

states.

So set name should be the name.

But okay, just add that name as name.

And that age as age.

So now let's try to update click Update.

Awaiting the name and age here you see.

But we have to do one more thing.

So if we click update here, this add button should be changed to update.

So let's do this.

So create a Boolean value of real estate called is a bit and set is update the US state it should be false.

Then we will set the subject to true when we click the button of update here.

So where does it on this button click we are calling this function.

So just set this to true.

Now if it is true, then we will show a delete to update button here to read his Add button.

So we can just say if it is true, it will show update button or else the Add button to add the button here in the second value, second check.

And in the first just make the Add to update.

Update.

So let's create one more function to update the data.

So this should be const update.

Update fields equal to our function.

Then we have to add this field to edit.

Let's also create one more check for the ID.

So copy this and add the constant of ID ID and set ID which should be null because the ID is number.

So set ID should be this ID.

So to set the ID, we can just hit set ID s ID.

We are setting ID, name and age here.

So in this update field, just copy this previous function update doc and we have to add it here.

Just uncomment this and it will work.

So this update doc taking is taking fail to edit and it's updating.

So they should be capitalizing for the state to add the bit field to this button of update.

So now let's try those Nishan and is 24 for the first click Update.

And you'll see the button is now changed to update here advertent let me turn to say Click Update, updated.

And if you check here, okay, now, the Nishan is the name.

So you see the age 26.

Now.

So here also have to add the number property before the age to convert it into number.

Now if we try again.

So if we make it 27, click Update here, updated.

And the number is now number for ages or number.

So it's working fine.

So what we have to do now is just set all this data to null and empty string if we have date.

Fine.

One more thing to do, we can't see our Add button here.

So to get see the Add button, we have to set this set is set to true when we load our application or when we click Add Data.

Okay, not this if we refresh.

Okay, it's here.

So what we can do is just okay, it's fine, leave it.

For now we can update.

And we can set it to false when we are upgraded successfully.

So we can just say set update to false.

So let's try now, let's update to 25 H, click Update to update it.

And the buttons now add.

But this number is not getting removed from here because I don't know what's wrong with the email with the number input.

So let's update this second thing, second value.

To make the issue on T seven, and eight, just aim this Nishanth update updated.

And it's reflecting here, you see the is 27 NMS the chant.

Now let's add the delete function to just add a button just like this update to delete this.

So it should be here, just add a button up, delete the Delete, save, and it will do the same thing that the build is doing to to just pass the ID.

And we don't need the name and age, we have to just delete using this get ID function reading ID here.

And then we have to just import one more thing which is called delete doc to delete the document.

So simply create a function to call delete doc document file then we have to just use this delete doc function and pass it the okay we have to use the will do it first to create it and just pass the fail to edit.

We can response record this data using them.

And we will just throw an alert here to say data deleted.

Fine, then just catch it if it occurs, any error here.

So just say alert cannot delete that field.

So let's try to delete the name of Nishan that a 25 click Delete here.

Okay.

Okay, we have to add the function in here as well, in this Delete button.

Just wait a second.

So okay, the thing is we are using get ID to delete, do update.

But to delete, we don't have to use get ID we have just used get document and the pass ID here.

Pass ID and receive ID and just make this as Id now did work.

Refresh it again.

And let's check.

Delete the first field of Nishan then is 25.

So deleted here.

You see we don't have the paid off Nishan and H 25.

Here in the file.

But we can see it here.

It means we are have already finished data.

When we click Delete so we can just call the Get Data Function to click it again.

So now we don't see any fields here.

So we have to give it the Get Data Function in the update field as well.

Here just paste it after the alert in this.

Where is it in the Add Field as well.

If we click or if we add it as let's add data Nishan as default click Add sent and it is deflecting here.

Add another name, let's say Ashish e sh ISHH 25 AD, AD sent.

Let's add third one called Raju, and H 27.

Ad here.

So we have three fields.

Now let's add one more last one, which should be there.

Let's add a tea click add here, sent.

Now we have four fields.

And in this fire store, we have four fields for objects with name and age properties.

So now let's to try update this Roger field.

So the age of 25 here, make 25 Click Update.

And it now looks in real time.

It is getting updated properly.

Let's a bit Ashish make the SOB 2500 Click Update.

There is no running.

I wondered here real time.

Late certainly let me shank click the state here in this Delete button, deleted.

And we don't see the name of Deshawn here and neither in Firebase.

So we have now done all the four operations, which are called react create for creating data rate for reading data, update for updating data, and delete for deleting data, which is also known as crud.

So we have also added authentication here, so we can't go back unless we log out.

So let's create one more button.

Last button for logout here.

Because why not.

So we can just create a div here they will and make it a button inside this button.

Button maybe says log out.

Log out, save to a logout button here.

Let's create a function here.

The const log out equals to an arrow function, then we have to just destroy the token inside session.

Then we have to just navigate to our home ATO register page.

So we can just say, what can we say we can say session storage dot remove item, let's add the key name which is called token, then we will just return back to the home so router dot push to the register page register.

Now we have to just add this logout button in the button, lower function this button on click the logout to click logout.

Now, we are going to say start page.

And now we can go back to the home page.

Because we have predictive routes in next js.

Next js.

If we sign up, only, then we can go to that home page.

Sign up with my email account.

See, we're now seeing the homepage here with name of age names or text off name and age and all the data here.

So one more thing before going to sleep is I have to create one more page for logging in.

So let's create so let's say log in small login dot j s.

It's already existing in this location.

Okay, we have already hit here.

Log in, it's fine.

So let's go to login page.

So we can see log index here.

So we have to create the same thing that we didn't register the copy all the data and paste it in log in.

Just change some text or title.

So make it login.

Save.

Okay, reload it, login.

Okay, okay, log in.

So here, we don't need the cookie, we need Google GitHub fine.

Doesn't matter.

So but here, we don't have to use this site, create user and password, create im user with email password, because it's a login page.

We have to log in here.

But let me show you what I mean.

So if we go back to registered page, so let's add one random email.

So let's add Nishan 123 At the rate gmail.com.

So let's say this is an email of an user.

Let's add a password 123456 click sign up.

So it should be here in the fire through authentication, Firebase authentication.

So we have this Deshawn 123 at the red gmail.com and the password If we try to now create the user with same email account, we can't able to create it.

Let's try it will throw an error.

So Nishan 123 At the rate gmail.com.

Password added here likes open the console.

Okay, let's also just catch it here.

So just say catch error, we can just say console dot log error dot code.

To open the console, click sign up, you see email.

And already in use, because we already have the email here in this fires, so in this authentication step in this users, so you see we're getting this error here also.

So what we have to do is we have to log in not restart again, using same email.

So we can throw an error using alert.

So just say email already exists.

So to log in, we have to create a login function.

Here log in with Google and pass for a login with so it should be signed in with email and password.

Just replace creatives with invalid password with this function called signed with invalid password.

Now it will work.

So if we refresh this, let's try again.

Let's add this email Nishan 123 at gmail.com and the password to make the text of signup to log in here.

So they should be fine in no click sign in here.

Okay, we need to be on the way what is doing login page, it's not log in it's register.

So not earned the email, a recent recent 123 And the red g gmail.com.

The password sign in you can see we are now signed in here.

But if we use the wrong email to sign in, that we are not registered properly, we will get an error.

So we can just use the any email that we are not registered.

So let's try this one Nishan 1234 At the rate gmail.com Password anything.

Sign in, you see we are getting this email called Email already exists.

Okay, wait, we have added the wrong message here.

So you should be emailed that does not exist.

And in the register, we have to add that previous error message already existing message.

So just put in the catch block here after this then sign in again.

And you see email does not exist.

Because we don't have the Nishan 1234 here.

So let's create it in the sign in page signup page mean to email and the password.

We are using this Nishan 1234 At the rate gmail.com And the password one from six sign up.

We are seeing all the data.

Now what if we use the wrong password to sign in with again to log in.

And if we refresh this, we should be able to see 1234 account here in authentication, see we are getting this.

So let's sign in with this email, but the password should be wrong.

Let's try this 123 we'll still get this error here called email does not exist because we are not using custom error messages here.

Or we can just say cannot log in.

If we get this error because we have something wrong in the email or any in the password, sign in.

So you can see cannot log in because I think the password is wrong.

So 123456 sign in.

Now we can sign in here.

So we have done all the functionalities in our app starting from authentication to CRUD operations.

to Now I'm logging out and going to sleep