Up and Running with Stenciljs, Ionic and Firebase | Flavio Oliveira | Skillshare

Up and Running with Stenciljs, Ionic and Firebase

Flavio Oliveira, Web Developer and Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
24 Lessons (4h 30m)
    • 1. 0. Introduction

      0:50
    • 2. 1.1 Installation

      0:36
    • 3. 1.2 NVM configuration/usage (mac/linux)

      4:54
    • 4. 2.1 App scaffolding

      15:32
    • 5. 2.2 Firebase configuration

      10:36
    • 6. 3.1 Base components

      8:37
    • 7. 3.2 Sidebar menu

      10:23
    • 8. 3.3 Tab components

      7:16
    • 9. 3.4 Navbar (Functional Components)

      5:05
    • 10. 4.1 Adding a service layer

      3:45
    • 11. 4.2 OAuth login

      14:10
    • 12. 4.3 Email Link (magic links)

      21:36
    • 13. 4.4 Adding Capacitor

      6:21
    • 14. 4.5 Passing data to between components

      11:44
    • 15. 4.6 Logout and user detail

      11:11
    • 16. 4.7 Authentication Modal

      9:01
    • 17. 5.1 App User vs Firebase User

      10:19
    • 18. 5.2 Cloud functions (authentication triggers)

      17:14
    • 19. 5.3 Firebase Security Rules (users)

      11:35
    • 20. 5.4 Role based authorization

      8:34
    • 21. 5.5 User list

      18:19
    • 22. 5.6 User Detail

      22:17
    • 23. 5.7 User Update

      40:02
    • 24. Good Bye

      0:15

About This Class

In this course we will explore how to use web components to create full web applications using Firebase as a backend service.

Ditch your big monolithic framework in favor of a small and super fast library (Stenciljs) that lets you create smaller and faster apps.

Learn how to create fast PWAs with web components using Stenciljs and Ionic while learning the ins and outs of Firebase.

We will cover:

  • Authentication, including "Magic Links -  Passworldless auth";
  • Using Firestore to store our data and secure it;
  • How to upload, retrieve and delete files from Firebase Storage;
  • We will also learn how to integrate cloud functions onto your app;
  • How to use Ionic components to make your app beautiful out of the box.

Join now and lets get started!

Transcripts

1. 0. Introduction: welcome to building applications. Withstand suggests I only can fire base discourse. We learned how to create up components application, no time. My name is Flavio and I've been working as a Web developer for over five years. Now my focus is on front end development and back and services such as Far Base. I've been discourse for anyone who wants to learn or scares about what components and how to use it to create full Web applications after completing this course. So you know how toe use the stencil Js library and the ironic frame. Or also you know the things and out off our base and you be ableto get your applications up in running faster than ever. This course was made for anyone who knows the basic off modern JavaScript and wants to jump into a Web components word. Check out the course descriptions and outline and let's get started 2. 1.1 Installation: first of me to install node.js and the recommend using the LTs version. Because the current version my causes some problems when you install the SAS plugging if there are no windows platform, just used a Stahler. But if you're on a Mac or Lennox, we're gonna use Unversity Manager to install it. We also need the code janitor, and I highly recommend it is wise to decode because I'll be using, ah, few plug ins that we facilitate our workflow. So trees colleges choose your platform. And although days dollar 3. 1.2 NVM configuration/usage (mac/linux): and this week they were going to set up an AVM in our machine. And this is for Lennox and Mac users only. If you do a quick search for N v. M, it should be the top page to be the 1st 1 And if you're going it, you can just scroll down and gonna have two commands to install either core or w get when a used car and on my time now is gonna baste it. And because I musings, Yes, age. I'm gonna change bash through the s age and what this command us. It will call on the reports started in tow, our home folder, and create some path variables for us. After you install it, you need to open a new section on your terminal. Or you can just source your Bashar see, or in my case, yes, HRC and that you'll be the same as opening on your terminal. Now you can use the N v m and that this will give you all the options that you can use. So first, lest install a version with an VAM install, it's gonna clear my terminal. We can either use clear or control l so NPM install. You can use I for short. After that's done, you should be able tow use note than NPM deserve the versions you have. And if you want to least your versions with envy em Into NDM released one thing to notice that every version you have you have its own NPM global package. So if you start most professions and the star likable package that you only be available for that particular version, so envy enlist, you list your versions, he stopped. You can do envy me. Stop other versions. Now it says it's using version 11. But if you open on new terminal and you do know dashiki, you see that years up No. 10. And that's because our default it's the version 10 you can either use envy. M Use that version. This is temporarily or you can use envy em. It is the fault and diversion you want. So then, if you just close after now and open a new term now again, that will be the default version on your machine. So envy M used them is temporarily NPM Alia's, they felt then that is a permanent solution. No, I should be there we go. I'm just gonna close this terminals and envy m least again. So here, you see that we have then as the fault. You cannot delete the default, but you can remove in your division unit machine. So that's about it. This is just a basic off N v m. If you ever have a problem with a package office corrupted, you can do envy em. Gosh, Clear. And that will clear any dollars or corrupt files from your cash. And if clearing the cache doesn't work, you can remove your installation off envy M and install it again. And to do that, you just need to find out where it is in your machine and remove the folder on the route off your A computer. It should be inside. There are hidden files. If you don't ls dash early, you least all hidden files. And here's the folder. You can just remove that with RM slash r F dot N v m. Just be careful with this command. You cannot retreat any file after deleted with this command, So be very careful. After removing that folder, you also should remove the valuables he created for you. You should be in your bash or CSH file. So if you cut about Zs, HRC or Bash RC, depending on what you using, it should be DiSanza here and then you can just start again and install. So that's about it seeing the next lesson. 4. 2.1 App scaffolding: So let's start if you go toe stand. Sir. Js website on the getting started they give us Ah, really neat command toe strap. A stencil application here. You're gonna have a chance to create a W if ionic or I Since you up, he stands up. We have extensive router. And the Ionic we have Ionic router and the other one is just for our a basic component. We're not gonna be using this command because I find that the best way to learn about on you too is toe beauty it at least once from scratch. So on my time now, I'm gonna create a folder for our new project and we're gonna start from there, so we don't know the gate to mind that stop. And here I'm gonna create a folder with M K dear. Well, I call my project Fire Distain for Fire Base and Estancia I'm gonna sit into it. The first thing you need to do is to initialize are NPM. You can do that with NPM in it. And here gonna pass the dash y flag. So other need to answer enough. The question is gonna be as default. Now I'm gonna open it in my coat, Editor. So this is the father was created to remove this main and keywords because that's mainly for if you're building a library, it's changed the license and at the altar, your description is going to be a stance. You I am up with fire base. It's going to be duty. So here in the script finds I'm going to have to scripts once for starting an application. And here first bonito tell these things to compiler to build it. Then you're gonna say that it's for we're developing moves. So that excludes any ah, service worker. We wanted to watch as well for change, and we want to serve it in the browser. We can also do our beauty common, so we can just built the are up, he said of serving it. So that's the basic what you need to go now. Let's see. Stall, uh, are dependencies. The basic ones have gone into the special car. He stands your sauce because you're gonna be using S S S S s and the Ionic library as well . So, uh, I'm gonna open the terminal, and I'm gonna first install Ionic as a normal dependence. So is our unique core. And I'm gonna dough the death dependence because we only need this stance. You toe build our application. We won't need it after. So what sense you or and things with us. So now that it's done, it's gonna close the term now and here we have it. So now this command, the stance, your butte command, we'll get our files. Trust Violet. So we first need to tell the compiler what to do with the tax script files. Let's create a file called Jess Config. I love Jason. And here I'm gonna based a bunch of stuff. So let's get started with what we want tax script to do with our files. We're telling here that we're gonna be called the for the point. That module we're gonna be called the anything from old job script to Newer like a a single weight and we wanted toe compile it Toe Year 17 here. In this case, if you need toe if you need your app Toby running on old devices, you can specify here on old version off jobs creeps. If you hover over the the key, you can find all the options available. For example, if you need a real device will use this month and, uh yeah, this other ones, you can see what it does is well. And also, we're gonna add some JSX because distance you used Js excess in plate language. Extends also use decorators from yes, seven. So we're gonna market is a true on this allows synthetic in parts is just toe certainly type star thus far a base. For example. When you import something no, use a local. So if you leave anything imported that, you know, use it, it's gonna give you a warning. Samos Four parameters that you don't use it and the latest thing you're gonna add, it's ah, we're gonna put our files and what was excluded from from the package. We don't want it toe compile enough the codes that we impart to our application any we want . And we're gonna put off called into the source folder. So let's go ahead and create this folder and here's gonna leave every file we created. Yeah, regarding our application. So this fight is done. You can check the website for the tax Quito upside for options, and you can add more toe have to build better cold. So this is the now, the next one we need to configure the Estancia compiler. This was for the tax script. Now we do their stance. You I was gonna create a new file called Stan CEO. Perfect. Yes. And here I'm gonna import call fig from the since you car and sauce. So let's start first. We need to do to tell what type off app rebuilding. So the output targets you can express Fine. If you want the type off a webpage website, for example, or if you want library, which would be like a basic component. Yeah, if you're building to distribute it in the PM Odd her sister And again if you hoover it, you can get some more information about it. We're gonna have ah global script for ah, our main parts for application and also means Globalstar's and that I'll put a czar may not ts five. So let's create that fire. And here one of the first thing that we need in part for them, for the main is I guess the only thing that we install the at is the eye on a car. So this is gonna be available toe every toe, every component in our up. So it just makes sense to Bavaria. Now, let's do our global style. So, source again, Stein's dot s CSS. So let's create it. Those are so on this final, its import the Ionic style shits. Listen, I copied from Pages Butte from there from this command, I build a nap, and I just copied it from there. So commended, taking Just build one, like with that command. Take a look how they do it. So we have our main now we need index file and here could do Ah, bank. You can top it is gonna create a basic no cop for you. Okay, so now we have that one. And one more thing here on the Let's add this ass now to our your compiler options. One more thing I like to do, it's you see, it's ah, death server option. And it's about opening the browser. If you lived through it to open a browser window and that will keep opening all the time, so I find it quite an honest. That's why I put this one. And for this options resemble this one. I found it by reading the document documentation. If you go toe the website again and do on the tooling here on config here they are all the options. You can use it on their application. Simple. That's the death. Did that serve option that I use over there on my code editor is telling me that there's something wrong with this file and it's because off this this is out off there. It doesn't belong to the compiler Option is outside of it. Sorry about that. So now this is ready. We should be able tow start creating some components and start our server with them. Start scripting him, So let's create. Ah, um, a file that was gonna host are main component and here using back TSX for the typescript with JSX. So essential Component is basically on job spirit class with a few decorators attached to it. So let's circulate a class, huh? And here, uh, gonna render Let's do our hedge, Juan. So here's complaining that doesn't know what to do with this. That's because we don't have We're not saying to it that it's a JSX that you're trying to right over here. So JSX was built by Facebook to using the react dream work and it's septum plating on which allows you toe use JavaScript together with HTML. So this is our class just glasses render is something out to make it? I stencil components. You first need toe component. So let's see imported and here thistle component to take a few options. The most important is attack in the talk is what you're going to use to insert this component in other components. So I'm gonna call it up route And here's the thing you can just I'd like this because us to make it. What components you must name space it Or do I say it won't work the no names based one like the normal html they are reserved and you can just use you cannot do yours like that. So So remember to all his name space here, your components and you're good to go. This option here also accepts a few other parameters. If you find the best way to learn is just to inspect the components, so are they properties and stuff. If you control click on the component, you tell you everything that is. Except so life is if you can pass, um, start Shit hero. Tell it to use a shadow down, for example. So all these components, because it's our road components, we're just going to use it to a Petar routes. But I'm not gonna add a CSS file to it. So it's gonna leave it like this. No, let's go ahead and, uh, try This component on our index folder was gonna based inside our body, so no list run our application with 10. PM start. This will compile our files in tow, plain JavaScript and serve into this local host and this part. So if you control clicking it, you go have a bank. Plage. Nice. Uh, inspect. You see that our body has nothing to it. You have are up components. But this script talk over here is just ah, a se this service workout placeholder. So let's see what's going on if you'll back to our source folder here. Long decks. We have our up components. But if you check the cold that was produced by the compiler here on our index, we only have this and there's nothing else linking our code to our JavaScript. So we need to add a script. That tax are html five. So these two files over here, which is there, what was created by the compiler. And to do that, you just need toe. Go back to our index dot html Not this index. This was produced by the compiler, and we bill deleted. Every time you run the Butte Command, we only work on the source folder. So here, just inside our heather talk, we can other script a link to our style shit from this folder and the JavaScript. Now, if you save it, our compiler saw the change in the index because you're watching it and we can see how her award now here on the uproot we can find on JavaScript code does come fired. So that's about it. Um, you don't need them. Any files you don't need many dependence is to create I stance. You application. This is awesome. If you take something like a react, it's stones off dependencies that you have to application just toe have ah using the creator react up. That's like a big difference. When you're building something, you can rely that, um, broken package when you interfere with your application 5. 2.2 Firebase configuration: So let's create a project and a for this project and added to our application among the consul for this concert on display at Project here. You gonna get the name? Sometimes This project I d. You give something else, you can customize it so you can get a better link. This is gonna be the Here I am on your A p I kiss. So it's nice to Costa minded. Sometimes if you get a bunch of numbers in here on the location, livings, the rockets on school pitting there and Europe here basically should put the fire star location the closest to your customers. So it depends up to which country gonna be building are up for. So this is what you need to change in here. You need to click, accept and later project. Okay, now that was created. The first thing you need to go before you can start using it to create a database and create your bucket. So if you click on here in the cabin, just click here. We're gonna start in lock mode because we're gonna We don't want anybody writing toe our database results our call center. So just enable this you just add those rules and I Instead, she ate your database Fire star. So that was created. You can also add the real time database if you go to it. But we're not gonna use that. Ah, here. We also need to create our storage A bucket. Basically, when you create a project is not done yet, so you can come. Here it is. If you don't do it, you're gonna cause an error. If you try toe, call it from your application. But that's about it. That's all we need to go. And now on the project Overview Project overview, you can find your FBI kiss here. Uh, can just copy this object. Now, let's go back to our obligation and we're gonna set up for a base initialized firebase. Refer for keys. So here in the project, let's create a file called for base. Yes. So let's install for a base first on the gym now is going back into them. Install Five days now back here in that file, just in part for a base from firebase up. And we also need to import the modules. You gonna use our far star functions in a storage here, we're gonna export um, a constant called firebase up and that to hold the initialized project and inside, we need to add that keys. So I'm just gonna copy it based inside there. Now, for each off these components, we need toe exported so we can on imported somewhere else in our application, like and in the components. So we're gonna export going off as far base up, and you can do the same for the other modules. For the functions, we can choose the default location for our cloud functions. This is optional. But if you don't do it, it will default toe us some somewhere in the U. S. So this Europe West one is the closest one to me. And if you go toe the docks Ah, here on the get sacked for Web scrawled out toe functions, cloud functions, location. And here is the one that we just used. Now, if you scroll that, we can get the least off locations where you can add your function. So in our file is red. Let's ah install the fire base STK in our computer and we're gonna initialize a project here My turn now I'm gonna use NPM. He style dusty for global firebase tools. Okay, now that nothing stop, the first thing you need to do is to logging. We're firebase logging now. I've already logging, so I'm just gonna go straight for the immediate command. This you're gonna initial nice five days. And the first question is, toe what kindof resources we're gonna use from Far Bay. So let's go. Fire star. You can use the arrow keys to move and the space to select host. All this for That's it. And he was asking which project you want to use. I don't have that one in there. So the name for, uh, the five star rules defaults Fine. Defaults fine. Gonna stop script for the cloud functions? Yes. Why not? Go ahead and install it. So the public director here is where firebase confined are project. And, uh, for us is gonna be the this folder over here, so we need to change that one. Not the default our applications gonna be a single page up. That means that we have this component in here that is gonna control everything out so we only have a single page and from here is gonna jobs that it's gonna kicking and then that's it. There's no more HTML. So we can say he asking here. And this is if you, if you choose the asking here, is gonna override our on in that. So just put, No, but this is the firebase placeholder here. The default for starts. Fine to now. Have some new files Functions folder. Let's go to our project. See? Better have our functions. Folder this fire base R. C Jason. Here's the rewrite that it's going right to the index page and what rule filed to use it here. For this firebase dot rules. I'm using this plugging for a base. This is just toe the highlight of the wiser being like a normal fun. So it's quite nice, and that's about it on the fire base. Are See here you can set up if you have multiple projects you can set up. Uh, you must have a default. But for example, the way I do it's toe have, For example, if I have a deaf project and a proud I would have these two over here. So, for example, uh, this project was created. Let's use it as our development project and then you go toe the far bays here and create one for production. So if you go toe the term now, you can choose toe which project you want to use. For example, if you're in develop more chicken so far, base use death and that you're looking toe this file and I see which project to use for the book and swap between your development and project. And this is good because then you can create, um I scraped over here toe deploy toe development, deploy toe production, something like this deploy and you dough stance, you build and, uh, far based use that and for Bae's deploy. So this would be, ah, deploy script. Do this and then you change the project that's using and deploying. Then you could do the same four broads so proud here. Well, obviously I don't have this project, so if I Dhofar base use broad, you be an error. I was gonna do it this way, and I'll leave this one for reference. So that's about it. We have everything configure it initialized 6. 3.1 Base components: So let's have some components for application. One of the most common pattern that you see out there is the users off tops in a side menu like this ones. So, uh, this module we're gonna learn how toe implement this type of play out for application with stops in a sidebar, and we also gonna create the base components for applications. So let's get started, and we're gonna create a few components. I mean, a lot of components. Now first, let's under components further to our source folder. The style gun you goto stands website guides started. I've it recommends you to keep ah, folder for each component with fear. It's on TSX and CSS file. This is a style guide for creating extensive components, and it's a really good read. Really Recommend it doing that because you can clarify. Ah, lots off what's going on in a component. So let's get started. I'm going toe, go back to our components. We're gonna create a folder in Let's first create Ah, a page for our home so as you. So we need to create page home gsx in ah S s s If you remember our component, this is the base component, and it's gonna copy to run our wrote space. And Human is a change for the name of the component is it's gonna put home Beijing and this one. Now we need to add the royal So style you're all space age. Let's go and create a few more components. Now we're doing this mannerly, and it's quite annoying to create farmers like debt. There is dis plugging for Estancia. Call extensive toes from Nate. More has some commands that help you create components and also has, um, some snippets so you can just avoid typing a lot. So just install it. There's some are configuration that I did to it. So the configuration if you go toe to toe control, coma and type stance, you here's day Stansell tools. And if you scroll down, I change here for the defaults to create A S CSS file instead of, she says, and also removed the testing fire. So it is not gonna create testing fires. When I used a command to create a new compliant, here's the settings for stance. You No, it's now that ah ah you can choose toe not to use that plug in but I'm gonna use If you don't control shift being and type stance, you should have. You can open the docks from here as well. You can start a project if you don't have one already. So we're gonna use the new component, and I'll just need to track the name of it. So let's create. Ah, another page. Call it about for reload. Now my pages over here. Okay, two pages. Let's go. Let's go ahead and create some rowdies. Let's remove this age. I don't need it anymore. First, this is your top level component in a ironic application. So we're gonna use Ionic router and inside, Let's great routes for our page. If I am route, the stakes are euro in a component. So first, let's dough for our home page slash and will be the base form components here the page about and it's last above. No, let's start our server. The game start. Okay, so now again, we have ah, black screen. We added our routes, but we didn't aunt the outlets for it. If you if you ever did some, um, angle I ups, you know that you need to put the angler rather outlets, and this works about the same with the ionic application. Just need to add the iron mouth. Now, if you re loads, we have our page. And if you go to the about well, it's not gonna be there because there's something called hash on a single page. Your application. Because really there is only the root here, the name space it with, Ah, hush. It's kind of similar to when you try toe use the html uncle points. So if you put the hash, it's going toe goto our about page. But there is a way that you can remove this hash and just use about. You need to pass toe the I router Use half false. So here, using these to import a result, usually dough like that in JSX. It's the bracket. This is the same us. Ah, if you're using the JavaScript string interpolation like that, you just need to remove the dollar sign. So I figure back to our application and we reload. We have our about page table. Now let's create a few more components, and then we're gonna start creating our layout. Gonna dio you components up after menu and let's do one more for Dobbs wrote, You can either the dash ability or just come okays. You'll be the same them lucky we realize what you mean. So this is the way I chose toe name space for simple page will be a blank page and then stabs is for that component and anything else that a single component that I'm going on, import importing toe other components. I'm gonna in any space with up, like, up manually Here. You see more about these when you start to using it. So I'm gonna create and not a component called stamps hum. So we have our top route that we hold everything together and then inside, you're gonna have few other components. Like I'm creating the tops, the home, But you can add more on just name is facing top. So I know that this page belongs toe the top component. Okay, so we learn how to create components and, uh, at some basic routing. On the next lesson, we're gonna start creating our sidebar menu and adding some more ionic components 7. 3.2 Sidebar menu: So let's start building our up menu if you go toe there. I only documentation. Just look for the Ionic menu. Don't here and here to have some snippets that you can use to create. It's gonna copy this 1st 1 here, and I'm gonna replace with this Steve. Now it's gonna remove this, had them, and I'm gonna leave the content and the I only sitting there We don't need the menu, I d The many idea is, if you're using more, don't know menu and the site you can choose either start or end. This is the side which you open. Now let's insert the at menu in our up. Don't your sex You can add it anywhere inside your Iot up component. So that menu now, in order for this to work because you're going to be adding some links over here, we need to tell the IO menu components where you we want the content of it to be displayed and that will be inside are rather outlets. To do that, you just need to give it on idea of here. And we need to specify the content idea on the ironman. Your content. I did May without this the item and you wouldn't know where to display the content. So let's take a look on the browser. How it looks like it's gonna I start my server. So if you pulled from the side of him, we have our menu items over there. If you go on our mobile, you can open these interface with contra shift I And here you can see if you push from the corner you find in there there are a few other options that you cannot. She was killed down here in the documentation, there's a type which defaults to the overlay, the one with solving here that the content is behind and we have the shadow, the type push. We push the content outside off the view port. So if you go to the APP menu and other type Bush, you know, component, it's gonna be pushed aside. Instead of being different, something's gonna leave it overlay. Finally nicer. And also we need to add a bottom for users to be able to tuggle the side by open and close . So let's add one Manu to the home page here. I'm gonna change these age one talk and I'm gonna add on my own. Heather, I Heather is just like enough bar. You stay at the top off the page, and, uh, they also have a two bar a tube ironworks similar today HTML in optical elements. But he has some stars that we can use to place our components. So I am title. And here, for example, refuse. I own bottoms every and, uh, we are the item in your bottom. We can specify where we want these bottoms, Toby, either at the end or at the start off the menu. So I'm gonna put it on the right 10 sides. If you do start will be before the ion title. These Ironman you you can find the documentation here. Swell. I am in your bottom, and that's just ah, component to toggle day menu open and close. So sure loads. You're gonna get this aero off style on the fine. Usually you don't need to import a unicorn's if you're using and a Niantic project. But I find it every time I add on Ah, icon. I always need to reload the server. So I'm just gonna start my server again. I should go back to our page. The ear is gone, and we have our bottle over there. Now, let's add some links to it. So here, I'm going to remove this bottoms, and, uh, we're gonna be using this. I own item with our label and icons, so if you scroll down, we have icons and items. It's gonna copy this one, and I'm gonna places that off this one here. But I used a home. I I come It's gonna be start because I wanted before they the labor home and, uh, the I own item. It takes a page, ref, which will be the link toe are home page. You can also add on about it's gonna put our bare stones head over there for now. So this icon names you can find them in the unicorns websites. I only comes up Come. He had to have ah, all the icons you need and you can just choose one and copy from here. So I'm gonna reload my page, and my icon should be there if I click among about. And now it's the euro changed too about over there and my pages. Well, so if I go to home, I'm back to home, but when you click on it, the miniatures enclosed. So let's add one more component. And here on the menu we have this. I am in Utah. Go which you can wrap the link inside and it's going toe toe Go it after we click. So on the I r list, you can just go. I own menu tego. It's so back in a page, you can say I have the styling problem again. I'm gonna restart the server now. If I click, my, uh, menu closes after. So now let's just make this a little bit more dynamic. The menu back in my coat, As you can see I'm using, I'm repeating myself over here. To fix that, we can create Honore off links and then just map that array into this components over here . So here the top, I'm going to create a viable toe. Hold that a rape and we're gonna have an object with a title. First, have a home. Your, uh and on icon, that's for the icon Name home. Now we just need toe use this instead. Off the icons are in here is gonna live it one in there. So to do that. We need to use the JSX for JavaScript to use the are curly braces. And I we can do this dot up pages and then map it in tow. Those components. So for each page, this is what, the first phone? Ah, normal JavaScript. Usually you go on object, but in JSX you do a parenthesis, and he would just need to paste this component. So now we just need toe at the content off the updates dynamically here toe to do the interpolation. You do be that your oil And here, as I mentioned before, is the same as the string depopulation from JavaScript. So he just stood out there. Dollar sign the Eichel name. So it got icon in the title. That title. Now, I can just remove this once, going back to my page. I still have both of them in there, and they work. So this is how you are. I mean, you're component in the next one. We're gonna create, um, the tapas menu down here in the bottom, on the tops page 8. 3.3 Tab components: Now let's build our top component. If you check on the I don't like documentation and you go down toe components. I am times here to have ah, some quick snippets on how to use it. Currently, I couldn't make it work the way the documentation is because it seems a little bit outdated for a simple dick path. It's your ill now, but we're gonna talk about that throughout the lesson. So let's get started. And, uh, back on our component, you're gonna use ion tops. And inside here, we're gonna have to many components. One is for the top content. In another, it's gonna be the top bar, which is gonna hold the bottoms. So let's start with the that bar. And for each bottle, you need to create that. I own the bottom, which would take a label and an icon Start of the home if you're ever home bottom and the label So here at the top are you can specify a lot if you wanted to be at the top off your up or at the end. So let's leave it on the bottom. And for each time you need to tell it which top do you want to open? So we're going for dabs home. Let's get that time the content for it with my own top. And here also tops home inside You need to put the router outlet that we tell the i r outer what component to display inside. So now let's accurate the routes. If you go to the app dot gsx we first need to need to point our router. So the tops component that you display the other But, um, so I around here he is. You're all now it's home. And then a component that you load, which is the tops route. And now inside the row, we're gonna add all the routes for those components that we're displaying over here. So I around so here because we have Ah, here. I'll pointing toe home. We want to display in the home bath. We want to display this thumps home. So now let's load the server and, uh, see how it's looking like in in my project is gonna do npm start. It's a life I navigate toe home. I have my component here, but currently there is nothing showing you inside on the documentation. There's ah problem with the I around the way they displayed This one is supposed to be your health for now and the way they are adding these components also doesn't seem too much like this. So, um, to do toe display, that content there I found that works is if you put another router inside and here just called the component jobs home. So you have your main top component here. They're out and inside we display this for each component, so I'm gonna save it. And now, if freeload we have our tops home over here, let's travel more and see how it would work with more bottoms. So I'm gonna create a new component. I'm using the stance your toes. So when I call it Times User or you can do tops dashboard Now let's create one more out for that. It's gonna copy this one and here I want to go on user and I mean to change. Also here now in the tops. Let's create on your bottom now for the dashboard and that calm using the use your head. Now we also need to add the content for that. That's board. So let's look at the page. So as you can see, our icon is not working. And I think it's because I made a mistake. When I go today, I only concept site and I'm gonna you, sir, It's a person. So he was not The user is a bear song. Now, Now we have our eye Canada, and you can stop it. And we also have our job. Let's just add a link over here for the homepage. So now in the APP menu, we can just odd one morning here changed your all thumbs. Now, if you revote, you have our tops in there. Comes in here about Paige and home. Now we need to fix this now buy over here so that we have not by on every component that we can't ago. So let's do that in the next lesson. 9. 3.4 Navbar (Functional Components): So now we have our times and we need to fix this, not bar, because they don't have another pages here now called on our up home. We're showing that Heather with the title and the menu bottom. But instead of copping this heather into every component, which is a really bad practice because you're repeating yourself and then if you need to change something, you would have to go to every single component and change it. We're gonna create a component and then added toe every other component because we're just adding a title and a bottom. We don't need a full Stansell component to accomplish that. You take a look on the extensive documentation here in the components. They have a functional components which is basically a stateless company into parts of data to it and etudes play. So we're gonna use that to create our nav bar here in our court. We're going to create ah file. You can create a folder and not as many as you want. I'm just gonna create a fire. Call it functional, but their sex. So we're gonna import this functional component from this tense your car. You can create it without, But that's the reason using types create so you can have types to our components. So here but space that and what do you need to pass to this component? As we saw on the base home right now in the title, we could add some more stuff after, but its first creating their face and interfaces Ah, typescript way off constraint objects. Or perhaps And here in the the title, which is gonna be a string. So now we can support variable cold enough bar can name it whatever you like with the type functional components love bar crops. What it does is just gonna take props. And we were turned something. So they're props in here is going to be the title, so data. And here we can copy the up Heather because that's what do we want it to return in changing here for title just like that? So now we can add this component everywhere in our application, And if you need to change, you just come here and change it on the single file. So here we can just remove this and at that nav bar. So enough bar, we just need to import it at the top. Gonna It's complaining because we have the types. Property type is missing. So Tyto, it's gonna be home. Now let's add it to the other pages. It's not this one. We also anything part. Let's load our server and tried out. So in game starts, now we have ah, in there about pitch in the home. We have our title and never feed works. Well, if you want to remove this border from your heather components, you can just, uh, go to our functional components. See, in the heather, you put no border. Now he disappears. Now let's add it to the rest of the components. It's been a puppet again, so we have our tops. Dashboard in part dashboard, if you check you have are Army new everywhere. So that's about it for Dame, um, Nav bar the national components. It's a really nice way for you to break dire application into smaller chunks. We can just separate some parts of it that you can reuse somewhere else and just past the data to it and get it to display for you 10. 4.1 Adding a service layer: Now, let's start learning about five days. And for that, will you are the service layer to application here. Now, our source folder. I'm gonna create a folder called Services. And because we're talking about authentication when either fight call off service. Now, why do you need a service layer or for one, It's gonna keep your cold clean, like your components has the job off displaying the data and your service you fetch and return. Did that of from the server by the couple In your data layer from your components, you can change an update. One file. You can stop completely your back and service and just change it on your service. Your components to still be the same. So this is really important to keep your cold consistent. Now to create one. I'm just gonna create a JavaScript class garlic off service and tow. Use this class. We're gonna use a pattern call a single toe. I'm gonna export that constant that we're gonna use in your car components. And that is gonna be a newly stunts off off service. Now, why would you do this? This single don't pattern will prevent this off service. Toby Instance she ate multiple times. For example. Let's say we have a name and here let's instant shaped their name I that so whenever you goingto impart this in your component and use this name too stupid the same if you use it in multiple components, you create only one Eastern's off the name property. So let's get another function in here and I see how it works. Say hello and I'm gonna return so that now, to use this authentication service, you can go on any components. It's gonna go here and up, and here I'm gonna use a component love life cycle. We gonna learn about it later in this chapter. So component did load the component did love. Well, fetch the data before your component is rendered, but we will see more about that later. So here we're just gonna consul log that Hello function and also the name. Now I just need to import it. Our service off service. Now I'm gonna step my server and in the end, start now in the brother. If I opened it that tools and go on council, I can see whatever that function stays. So basically, this how you can use a service. We Stan, she ate a instance of the service and import it and we can use any off this functions inside or any properties that we are to it. Also, if you import this off service in mood spoke components, it will use the same instance off this class, which is very important. 11. 4.2 OAuth login: So this lesson we're gonna add authentication to our application before we cannot do that. We need to go on a firebase council here on their authentication and signing methods. And he had the least off the providers that we can use from far base. If you want to enable Facebook or Twitter, you need to create ah, developer account with them and then they're gonna give you the key and a secret key that you can use. And also, they're gonna ask you what your Ali Oneto redirect after, and this is the one that you use on their website, and it just need to click enable up and safe. We cannot do that Google, because it doesn't need any FBI keys because firebase belongs to Google course. So it just click enable, then save Now, After that's done, we can continue and let's go back to our code and in our off service, I'm just gonna clean up. So let's support for a base and you also need to import the authentication from there are fire base configuration file this one. So park go one up and then five days you're gonna create ah, Google that you log in the user with Google can also add some are you? And here we're gonna create a function that we'll use this providers and do the logging for us. This one's gonna be a private function. And let's call it provider handler. You can call it whatever you like if you take a provider and this year is gonna be a public function because you're going to use it from outside the service now for each of dysfunctions we need to create a provider, and this is going to return a for based off a Google off provider. Now we can just return the is not provide their handler and pass that provider. Gonna do the same for the Twitter. And here is gonna change for Twitter off provider. Now we're gonna get that, provide the information, and we're gonna return the authentication off this office They wanted to important from far base and here we cannot call it. Either we cannot do are looking with a papa or redirect. They used to be some problems with the redirect. When you doing PW way something between the browser and how to open up. I don't know if that's to a case. But let's use the pop pop. I've tried this on before and looks quite nice because he opens a pop up within your op in its realize. So that's it. We have our Twitter here, cannot Facebook and will be the same. We just passed creator provider with Facebook provider whatever or whichever you want to use. And you passed Tito dysfunction and it's gonna do the same thing. So now we need to call these functions from somewhere in our components. So let's create a page for authentication. When I used there stance your toes to create the new components. Oh, collect page off. So here we need to import our service to go one more up that service off service. So here we are in party this viable, not the class itself, because this is the instance that we created off service. Now let's remove this. I'm gonna create Honore off deep. So weak Another the heather. It's old enough bar. Remember, we added a title to it. So Keisha, have another My content. I don't game with Go, go. So to use this Google again, we can just go on click and here gonna pass on anonymous function that we call the off service Google. So let's go and check it. This in the browser gonna start my server? I'm getting deserve because I still have that from the previous last time here. So I'm just gonna remove it and I can delete this. Let's go to the browser here. My home page. Let's just go to the ALF page. I wanted to create a router for that. So let's open our up Dr Sex. And that's relative. So he just below did about Paige even and I around with your oil. This you can change. You cannot any routes you want and call the components. If you try again, you have authentication page, and he also has the menu. If you click, logging is gonna give you their options. If you would have users, I use their lucky. So if you go on an application, deaf tools and here on index to be, that's where Firebase keeps all its data. And then locals started to be, and then, of course, storage. And here's the firebase user object that was created and ah, here in the authentication users we have our using here and the provided that usedto create back owns. So we successfully luck be with fired up our base and I created a user account. I just add some styling here or directives Bottom tow center here in the middle. Let's see how we can do that. So back in our coat, I'm just going toe create Ah, layout here. And I'm going to use the I agreed to do that. The angry to give yourself a lot of farm easy to use styling that you can just place things around in your page and create a really nice layups. So I agreed. And the only it has Rose and Colon's. We're gonna have only one row and one color if you add more Collins, he's gonna share that collar within this role, the role being horizontal and the colon vertical. Now we're gonna love this bottom side, just like that. If you take a look, Nothing changed. He added some part things over here, but nothing changed. So let's add some CSS so we can style. It's a bit more now in our off beach s s s. Remove this and here I'm gonna under a great Is he gonna target that? Read that you are to the template and the I own roe. So when I when I'm dealing with greed zor a layout I like to add a color so I get to see what I'm changing. So I'm just gonna add this to unless take a look. There we go. We have our great that was on the rent over there and the row, it's ah, degree, it's gonna close this deaf toe. So let's out some height. I want agreed to be 100% off the contents after they Heather. So at the height off 100%. And I also add the 100% heights today row. Now, let's ah, center the bottom first of use textile I the horizontal that center it and then we can use ally item toe to the center. Uh, this red border that you see here is because the I agreed comes with our default panting to it so we can just remove that with pardon zero and it will disappear. This takes a line and align items if you take a look at the Ionic documentation and if you go here on guys and ah, responsive grid here, they they show you how to use it And what can you do with it? So there are great size that you can set set up. You're gonna see that later. How to set size to the colon's like Have you won smaller one bigger. Now this is what we used over there Allying items. If you go back to our coat and on this two hour row and I can remove this one here, a line item center had to be exactly the same as this one. They just give us some, uh, way off doing that inside the template. So let's take a look. We still have the same layout. Same goes for day. Alliant Tech Center Here we can. This is how to align. Let's go. And for the tax should be on the CSS utilities. You can use tax start and and that's what they want we used. So if you take a look, just gonna comment it out. This one and I'm going to add the deck stacked start and and that's their one years center . Same goes for this one. You can out and or start because you already are using CSS toe to change some stuff in the I row. I would rather live it in here all together, so I don't pollute the the template. But this is a really nice way off for you, toe. If you just want a quick styling just to use this a little helper stepped up. I only give us We're gonna learn a bit more about styling with these helper methods later on the course. So back to our application when she's gonna remove this background colors that we don't need anymore. And there we have it for the bottom. We also have some other properties that we can set to make it look nicer. If you go toe there components and ionic butter. I am bottom. So we have ah, expunged. It's on these expand blocking their So this one's gonna take up all the space off our roads . Eve it sets 70% would be 70%. We can also add the few like for outline or just thrust parents. Juan, you can make it small and as the most components, you can also change the color off it if you want to do any more styling for it. If you scroll down, there are some properties that you can set. This was you need to set inside the CSS. Fine. So you just toe I own Butta, and you need to add those dash because that's the coast on property custom styling. So you can just like that rent, and then the color is ready there. So if you want to use any of these custom properties, you need toe, see which one is available. Not all properties are available toe for each components. But you need to use this. Nash, Nash, you know, is lesson just room, office and, uh, and excellence, and we're gonna continue with authentication. 12. 4.3 Email Link (magic links): in this lesson, We're gonna create a password less authentication. Before we do that, we need toe. Go back to our firebase consul here on the authentication stop and signing methods. And we need to enable the 1,000,000 password so we won't be using the password is last time I was a student to enable both and then just click safe. Now in application, we're gonna start to create a new method in our service on here. We're gonna do it in two parents. First you need to do Are we gonna need a public matter to send them a link. You're gonna send the link, and then we're gonna verify that link. Now, the email link we're gonna need to pass. They may. You from the template to dysfunction. So may string and for dysfunction. Let's take a look at the documentation. If you go to the far basic plantation guides, authentication, web and email, you link authentication. If you scroll down, you can see this sense. Another potential link to sign your user with our I'm a link. We need to pass through informations first they may and inaction cold settings. And this you have Ah, your l If you're quoting for Andrada, address that one. And this handle Cody and up this one when it said too true, it will whenever someone is using either JAMAIS or any milieu up on their mobile or even if they're in a Web browser. When they click on that link, it will open your PW way instead off opening a, uh, a normal browser instance. So we need to do so to create the subject and passed to the function. Now, here we can create ah cost and start adding that So first is that you're ill and you're ever gonna use the local host. Is there still in that mode? And we're gonna pass that handle cold in up through for a P W why, this is all we need. You know, we're gonna return off signing with link it to email and here about the email you and the action codes. One more thing you need to do because we're gonna the use they're gonna have to leave your upto to go toe their email to check for the link. You need to set this email you somewhere so you can ah give passage to the very final a link, which we need it later. So let's say the toe, the local star John, the person's mobile phone set item. And here you Let's just call it G major for signing if you can call how every like is just a name so way can see what it's for a few years inspecting the local storage. Now that the function is long less creator user import in our page off here, we're gonna add a user input in a bottom. So the ionic pigmentation and I o input. I'm just gonna copy one from here. Just this one. They have a few different ones, like position fixed and floating. So back in the up, I'm going toe to space the year on top, and I'm gonna add another bottle. It's gonna copy this one. Sanderling him's gonna remove these and other council soundly. Now let's start our server knowing our now we have our floating label in our bottom. So let's on. Um, she says helper to give some space between the bottom and the import so it looks a bit nicer. So here on the bottle for this and Lincoln Granada marching, Marge ing the you can do bottle right and left us all. And let's also change this floating 40 million other. Go have some space in there and, uh, are floating now is the mayor you click. You have the consul logging here. Now let's hook up our function to this bottom here, within the page off I'm gonna create are facing function selling now. First we need to get the user input, and we can do that with iron on inputs. You go back to the Io input documentation and you scroll down. You have some events on my own change on my inputs on focus. So we're gonna use the on higher input. So here, first time, when I just say that he's required and is a tightly mayor, no books. And hey, we need to create a function that, well, do something with this, so we're gonna call it, he put handler, and we need to get this event and passed to the function now here on top of the creator. Private methods going for Chandler. Let's take that event and we can Consul, look the event. So let's try if he works, you know, application. And every time they use a type something. It will capture that event and consul logging here for us. So what we're looking for is the event target value. The target is the input, the html input. And if you scroll down, you can see the value over here. So let's clean up toe display. Only the value event, the target that value. No, that's the values over there. Okay, Now we can take this value and create a variable that we hold for a second. Pass it toe this sand link function. This will be our internal estate. And in stance, you you need toe, add a state on decorator, and this will control the rendering time off your you. May you, if you need to use it, came in your application, for example was gonna add that made you want here so we can see you May they started mayor . Now here in our application we don't see anything because we're not hooking up. So now let's call these thought email equals event that target value, as you can see, as with tide be changed over there. And that's because they state is telling, um, our templates went toe rear ender. If you don't add this. It won't work, so they state controls whatever you want to show the template and when it will be updated, it's one off the methods from the stance you and you can check it out on the documentation . And here the documentation. If you go to components, you have the internal state, and this is how you updated or an object. But a Z. We're dealing only with a string we can go the way we did. Now let's continue. Uh, we need to add the state back in there. So now, in our send link function, we cannot put in a track catch block because we need to know if anything happens. We need to cut some error. So whenever you're dealing with a sink, functions should always try to wrap it in a try catch. So let's, uh, council lock error and the records just in case. So if there is any made, we can around this function, so we're gonna wait for the off service send link, you're gonna pass it a mayor here, you can also add a dream so we can remove any white space in between. And then after that's done, we can console log may have sent. So now we can just, uh, hook it up to our bottom. Remove this console log over here So these thoughts and link and here is gonna base my main Now they may sent, and here it is. Now, before I click this link, let's create our function that is gonna verify it. I'm back in our authentication service. The first gonna grab that your health from the temp from the component and here we can use . So, uh, we're gonna use a function called It's Sunny with him a link and you're gonna pass day. You're ill. Now, if there is dealing is there and is a valid link, we're gonna run this cold. So first, you gonna get that email you that we saved in the local storage and compare it. Looker stars don't get item and is the major for signing If they may, is not there. Like in cases, the user tuneup disk onshore is look using another machine. We need toe. Ask the user again. So let's use window that prompt. And you just tell them like please provide. You are mayor. Now, this is just in case. There is no email you on the local storage. Now we can just a wait for the results with off signing with the mayor link and here past, they may and the year I'll that we get from the component just need to make it. I think so. Here. We're waiting for this. So let's let's grab the result. Whilst that's function and we can't go on so long that result this is gonna be our firebase user object. The one we saw on the That's does on the browser so far bays, user results. So the function is almost done. But we can try now. Let's ah added to our one ends so we can if you're running here and off service, we're redirecting them today. Root off our application so we can add that to the application. The update? Yes. Oh, here. I'm gonna use ah, life cycle again. Our component were Lords. These who happened before the rendering. So off service it's gonna use the out complete out import front of yes, cold, which is quite nice. And then I very fine mailing here. We can use the location it guy toe get the hey draft which is a four year I'll. So now we can speed the server. It's running. Let's try toe. Here's that link. I should click. We get our object back. And all this user, it's the same made that I use. And we should have a new user here. And the one is Ah, resistor with funny mayor. Now we also get some more information with the signing this additional user info and we got the Is user new true and we can do something with days in our coat. Let's go back in there and you see so back in our health service here. After we get the result, we can do something that you saw that we get results first. Let's go. So, look, uh, something issues they're new and that will come from the result. The additional user info is new. Now. If this user is new, you can do something. You can create some kind of flow for your application. For example, redirect them toe signing page or at a kind off Victoria on how to start to use your application. One thing toe note that this is not a reliable because the user my just click to signing click the link and signing, and then he just close the browser. And next time he's signing, that is not gonna be, uh, the user is not gonna be new anymore and that you're gonna lose this this flow. But anyways, here is ah, a place where you can does something for new users. It is not very reliable, but is that if you need toe now for the last thing we need to do Oh, it's we can remove this email you from here So we just don't leave in their safe safe on there on the browser because the local storage is not really safe place now through to do that to do, like our storage that removed I 10 and just passed that I tell you want to remove? Okay, now, another thing that we need to go is to remove these. This was the link that was created by fire base and has the FBI key and some cold. Now we need to remove this and here you can split this year. L here on this interrogations and just get this part and replaced the history. So let's do that now. If you re loading here that to cause an error because that is our expired cold, and it's already be used. And you have a here you have. Ah, he called his invalid. So that's why we need to remove that corn. And plus is now very nice to live in there. So here we're gonna check out the history. If there is history and history, not replace state available to us, we can. First, let's council logged a year. I'll split that you're gonna do you're out the split split, and here we're gonna do it on the variation. This is what we're gonna do is gonna get Honore off the first item and the second light or whatever is before. And whatever is after this one. Now for the cold, into our history, Dr Place State. And this takes on objects. Like if whatever data you want to past Fallujah and the Duckman tighter if you want to change. But we just want the same. So you're out that split interrogations. And here we just want the 1st 1 Whatever comes before. So it's an array and a raise always starts from zero in javascript, so that should do the job. Now I was gonna load. That's causing the area. So I'm just gonna remove it and we're going to start again. I know this up from the local storage and on the fire base. I'm just gonna remove that users we'll be like, just like a local looking out. Okay, so we don't have a user number. The digits may. So let's go back to our off page and I'm gonna do it again. Some link you may was sent. If I click it again, the year I'll disappear and the new user is false and he got that array. So this is what the zero means, and we're removing the rest. We just grabbing the new and replace the euro with that. So that's it. We have, Ah, password less authentication from for a base. And here's our user firebase objectors all. Now, one more thing to notice. That's what we did in the window that prompt that if they may is not there. It's gonna prompt the user to get ah, they may again. So let's try them on now. Were they removed the user again? Also, my local starch is empty, and I'm gonna send the link again, going to the off page, So I'm gonna send a link. Now I have it here on the local stars that he may. I'm gonna delete it and I'm gonna click on my league. As you can see, Before the app was loaded, he asked because we added that code on the component will load if Waas component did love it, rendered the application complaints the layout and then would do this verification. But here we can just entered a You may, if you went up, enter different a 1,000,000. This will cause an error because they seem ageless beauty into this link. So if it didn't made so much, you won't get signed in. Now again, the euro disappear and we have all user I want think we can improve is that we can change this for ah, better look looking prompt. So in the next lesson, we're gonna see how we can use capacitor toe at a native feel to our application. So I see in the next lesson 13. 4.4 Adding Capacitor: so capacitors elaborate from the Ionic Tim that makes it really easy to use them. Native AP eyes If you take a look at the website what? Where we can do that today you can see all these ap eyes that is available for us right now . So if you go to the capacitor upside on their docks and you scroll down here on the side, there is ah, the guy's available. And for this lesson, we're going to use on FBI co mode house and this can replace the alerts because he looks very ugly on the browser or the prompt. And it's really nice to use. So let's start it. We first gonna install the pastor. Yeah, family stall notto add it. Let's copy this imports and, uh, inside our service, we're gonna add that slide that So what we're looking for is to replace these window that prompt over here. So let's create a private function that is gonna open. Ah, modal for us. And this is a thing because we need to wait onto its open and I get the response from the user, wait for the model that's prompt, and this prompts takes Ah, phew. options. If you a control click in it is going toe open the interface, the type definitions. So here you can see it's an alert, A prompt off emotional actions here, the prompt options just here below. It takes a title. A message. Okay, Bottle Conso and I put placeholder. So we need they put for these are type their email you Let's have a message and a title zone. So a title message and also the input placeholder. And here let's just call it email address. You know, this And now we just need to return day the prompter value either if yours, council or the value we're not gonna do any of you with the cancer. So has just returned to that. And we can, uh, replace this window that prompt with the function open front and because this is returning a promise we need to await for this promise to fulfill. And then we're going to get our information. So just put in a wait a year and that we work. So let's try it on the page on their application. So in PM start so off page, send the link. I'm going to remove this one Now he opens the prompt. Now the pump is going to look different depending on where you are. If you're using the Web is gonna show this one. If you're using on, IOS is gonna display as a native application. So this is really nice. And this information were possible there. Please provider milieu in the placeholder, everything works as it should. And here we have our user. All right, so that's how simple ways to use the capacitor uh, you cannot take around. Take a look at their other examples. For example, if you want to use the camera, FBI, get photo. This stuff on the right notes is in case you're building it for I West anyone to use the finger like for suppose we did the We got the plug ins from the capacitor car and then we the structure, the plug ings out here. This was the same us. Ah, if you would call plug ins ducked Moto's by that and the same way we didn't hear they have it. And the for the commoner, beginning the coming out of the plug ings and then used the your weight for the camera to get a photo and he also has some properties that you can use if you're adopted, can toe the same way we did with the. With the prompt out here, you just control Click on that. Then it's gonna open the type definition, and here you can see all the information you can bastard to this flooding's. So it's really, really nice and simple to use. So that's about it for this lesson and we going toe see on the next module we're going to learn about what can we do with this firebase user object? So I see in the next lesson. 14. 4.5 Passing data to between components: so far, we managed to authenticate our users and get ah, the fire base user object back from the matters he we used. So now lets us see How can you implement this in our application if you go toe the firebase documentation on their web authentication off the web and on men is users. Here we get this out of on off state change. This is all observable that well, I listen for user change in case his signing or sign out so we can do something about it. But, you know, we're gonna use the library. Coal are expire, which is kind of new. There is doing better by was built by far based team themselves. Oh, and what it does it just make it, um, creating and combining observe balls much more easier than using the place decay. So let's install it first. We're gonna use off, are exploited. We already have our base and our extra Yes. So, back in our codes, that's when I stopped the server here. And I'm gonna any bme stall extra es in our ex fire. Now, um, if you scroll down all the way to the bottom Hey, there are some examples. But if you want, the full documentation here can have far for each module. So let's take a look at the authentication. You have these off state that will emit I either the user or a new value. So basically, what it does is just do the same as this one. But here, we need to do this cold. Either return the user or return new. And for the Iraq's fighter, we can just use one line codes and on that, your application. So now that this is install anything party off states from the Rx fire off, we're gonna do that in the off service. So first you need the off state. We're also gonna need the abs zero thrown a are extraneous and here we're going initialize are variable with the user. The results from that function not to initialize. You can do that in our constructor. So here we just need to call these not years are equals off state and the upstate takes the off module from firebase this one in here, so we just need to pass that decides Take a look at the documentation here. They're initializing the up and saving it in the off variable and passing it to it. Then you can subscribe and get the data. It's, ah the same once we did over there. So let's go back to our coats here. Now we have this. So now we can subscribe to this user data anywhere. No up. It just makes sense to subscribe to it from the not clever components so we can pass it out to your Children components. So let's do that in the up, not their sex. And he just turned a component. We a lot we can at that function. But before let's also create a variable toe Hold that So user fire days, user. Now we can impart the authentication service. We have it here now. I have already are imported off service and then you can use it off service dot user. Now we can subscribe to it. When you subscribe to data we open, I stream and keep listening for any change that happened to that. So this start user, because that so here we are, initializing this variable with in that the return from the subscribe which can be either the user object or no. So before we do this. Let's sack also locked a data and that's around the servers. Also, you can check it out now, Here, not sever. We get the data, which is the same as this one with other stuff to it, like the far possess decayed details and things like that. So now that you yet we need to display it in the component itself. Now, here's the thing. If you want stencil to render the data from this user in the template, you need to market as our internal estates. If you take a look at the documentation gone components Internal state, we need to use this state decorator before the our properties because this will tell went toe when they template needs to be re Orender in case off a change or even when the data is loaded. So now back to the application with just leave toe under decorator state and he got imported. They're definitely since your car. Now here we are and they up about their sex and we want to display the data. So we need to goto one of these components and display the data there. So for that, we can just use a route parameter If you control click on the ir out and go on a route attributes you can see we have a component which it did have a euro. Well, and we also have this components prop. And this is something we can use to send the data to that component. So back a year now, I around I'm going to send to the home page and, uh, we see how it works. So component, prop and remember, we need to add the jets access in population here, but we need to pass an object. So we need double Carly braces. So, user, and you're gonna pass it. Is that user from here? Now, this user, you can name however you like, But then you need to make sure that you added toe the component that is receiving as ah, but up. So let's go to the page home. And here we're gonna add another decorator called Prop. And it's for the user. This I'm getting from the far basis decay. And it is the type definition for the user that comes from Far Bay. So we have all of this year. So whenever you want to take a look, what out Jack CanDo are what are the properties? You can just control clicking it and issued open the type live nation. So now you can just display the data. Let's remove this one so we can create an array and here gonna deny content Any scientist Ah, hey Chuan With the user not sold, he's not user and display name unless this place on piano since he's not too user, not you May the survey's runny back in our application If you reload the page, we have the email you but we do not have, um display name because it's not set for these user And we also getting this error that we cannot get the display name because there isn't any. So when you're dealing with that, we should always try toe fallback in case there is nothing there. If you coming for on ah javascript framework like Angela, you'd have the n g if toe the check if there is a user first. But for us, we're dealing with far vanilla JavaScript and JSX. So we need toe do it ourselves. So here you can dough this start user. If there's a user and we can use our turn every operator front, just JavaScript. We display the name. If not, we just do nothing. And here for the 10 are if you do under fine is just not going around this block off court . So now if you re loads, we get the same for day meal. But we're displaying, they may hear, and that's because if you're reload, the components gonna render before the data is available. So we should also always keep up for back in case there is no data or your company's well, low before the data is available. So here's a sign he's not use or under Fine. So now I sure load again. All the years are gone and we get the Renato and it's Don now I I only just came out, came out with a new component very recently, and it's dice kill Aton. If you go to components and it has crawled all the way to progress indicators, you can see I ask, you don't text and this is one I'm gonna show is gonna display something while it's loading so we can use this us ah, replacement for the undefined. So if you're going here and we change that undefined toe the skeleton. So now if you reload the page, you can see that we get our flashes over there you can customize it with, Ah, there's, Ah, we've property that you can set. You can set the background. So but this is just a little, too that we can use it Just toe. Tell the user that there's something coming and that gap is not broken. So now that you can assess this user, let's learn how we can look out. And we're also gonna pass that data somewhere else on the user dashboard in here, play around with this mark. So the next lesson we're gonna look out, and now we're gonna add some more user data to this page. 15. 4.6 Logout and user detail: So let's add the user data to the dashboard is all You're gonna repeat the same steps back on our tops. Dashboards is the proper decorator to create the user property here so far, days, user. And then we can go to our outer and on that, um, property as well. But here's the difference. One, we have, um, Cuban en route. You have the times route throughout and inside to have this little routes. So, as I mentioned, the documentation is not up to date on this one. But to send the data, we should put the component drop on the in there route so we can get up down inside here on the out. ERM route. It won't work. So now we can test it first to go back to our dashboard and display some that over here same strata array off data there, my own content. And here I'm going to use on my own. I tend to display another star on the left and the name on the right. So I own item inside. They're gonna have a Niall avatar, and this holds he much Doc and then just a ion label sides monkey on a suitor for the user name, and they may use off. So in offered a photo you're ill can just use There is a Tuesday does for to your our same goes for the out should be there is there night and we probably gonna have a narrow here And now we mentioned I mentioned before that you need toe make a plan to see the data before, so we have it in there. But the photo you're l is not Load it one because we do not have a for two year old. Where does user father hours? No. And we also not testing for the case. The that is not there yet. So now here it's a different because you're using not just I string. So we're gonna dio that we first do the tests like these, not users there, and then we have they first case and second case. So in the first case, you're gonna put this item. And for the second case, that's first do undefined, so we can test. So we have our, uh, our Western, our answer and our fallback over him. So there you go. Now I have ah using their Let's just start at some margin you in the side because looks likes missy. So that's boredom going toe on. I don't. I let there you can just do ah, parting right 16 picks. So not body enlarging. There you go. We can also remove this lines over here. We somehow helper properties from the item with lines you can do it sets full and not it's going to remove it. And you can also add detail if there's gonna undo our cannot on the side. So just need to is on full and so neato through. And we are the correct, like mentioning like you can go to this link or whatever. So later we're gonna do a link over here to go to the user update. We can also add a margin to the top so he has a little bit off breathing RD over there. There. Now that the user is lovely, let's create some router redirects here now called Let's Go to the amp and just inside our router to the bottle. I'm gonna add some simple for directs. Now it's people later we're gonna do based on the user role or something. These So we do a check. If is that user, we can use the I own route redirect and this takes two options are front and to So we I say we want the user if he's looking, If if he's are at logging, we want to move them from off to their home page. Now, if the user is not there, we just cancel this check. Now, let's go ahead and I don't look out bottom. And we're going to do that in our first Let's check this. If you worked, I'm here and I have my user. So if I go toe off, you read, they're expected to home. Oh, there you go. So this is how we do operate directs. Now let's ah, go in on our look out bottom and we can do that on the sideboard here. That's putting on the bottom for now. A up menu, the way here after die content Lis I on the Iron Footer and that foot is going to stick to the bottom off the page. We have the higher Ed Heather. That's we stayed atop footer, the bottom and the content. We'll take all the remaining space. I am foot there. We can do a bottom you got. So here. Let's call day off service and go. We look out. Oh, Service flown one, not Omar up services off service and don't click. We wanted toe off service and here we're gonna do a lookout function. So let's go there and do a lookout function first. So in our service, off service, it's gonna having at the bottom so public. Look out and this will return the off. But sign out. That's it. So here on the up, we can just call that function. Look out. Now let's start check and just show this log out if there is a user, because that would be a bit ugly if there's a lockout bottle and there is no user, So here's our bata. I'm just stretching out all the way there with these pound food that we use before here expands for and let's do that check So But before we do that, we need to pass the user to this page. So back in our application, here's our top menu. So here we're not gonna use components problem because this is a property off the ir out. We're gonna create our own here they come. But components, props is expecting on objects because it could be anything. It's a kind of generic, but for us, we're gonna expect a user, so they use their would be, uh he's got to user. Now we need to create this at menu, they use a property on the APP menu. It's gonna save here and up there. I'm gonna use the the curator and added toe the up menu component so far based user. Okay, you see the difference? Because we could expect anything here. If you create a prop that we expect a no object, you would need to pass an object in here the same way this one was. The component props expects a no object. I am router air out. Our three boats, components prob could be anything. Um, now we can do that. Check. So let's go remove the bottles. The stopped user, if the user is that we do this If not, we don't show anything. So he uses there. We showed the bottom. If not, just leave it out. Now we can go to our up. It's is being expanded toe. Take it off. Here is our user just for load here, Look up. If I refresh, my user is not there anymore. So we successful. Look out. And now here we're doing the consul log for the user and how the user is no. So that this how we can do a lookout, our bottom disappear. And if you're like backing its, we're up here. So in the next lesson, let's take a look of something. Now you're having this authentication page over here, so let's do Ah, I'm older that were open and we can do the log in there, he said. Off doing it in Ah, you're all 16. 4.7 Authentication Modal: So the model Let's take a look at the documentation screwed out to modo you have an armada and a controller. So here, how is how we can create a basic model and passing that treats? We're not gonna be passing any data on this model because it is just an authentication and there will be any better. And here is the usage. Let's go to job script. We first need to add the motor controller so we have assessed to them open and close and showed or creates creating present on this case. So this we are to our template, we're gonna add it to the menu components so we can get assess from the sidebar. You can choose to add any where you like, but I think there is a good place to put a looking bottle. So we have the controller now we have access to it suspected of documentation. And I'm just gonna copy dysfunction over here. And I hear we have ah mazing function here is initialized a controller. It you wait for this on render method to finish to render off the components. So here is initializing the controller we to grab the reference off the I o model controller down here and you wait for you to be ready. So after that, we can just used a and element the controller and create. So let's at this present mood are let's create another bottle over here, so logging. And here we're gonna call dysfunction. It's call it open off model. So this stops opened more than gonna start my server. There you go. So now I have a log instead off the log out If I click, I haven't mowed down here, so you don't see because we are on the mobile. But if I open it up on the main page, we have, ah, a drop shadow and we can clicking it to close the mother. So the models now is showing nothing there. Because if you go back to the function, as you can see, we're putting a modal paging here component, but we don't have any, so let's change it to page off. If you open it again, we have our house page over here. Let's just remove this. Stop Byron here because not necessary anymore. So here we can just cost allowed this Now far. There you go, Mr to removing. There's all no lo g and they're going on that we cannot. A logo Your name Here, Here, H one resistor. There you go. We can add some parting toe this with on the CSS. So here on the edge one, it's on Fonzie, no margin. Butta, Let's do our 50 peak So a little bit this dance. So you could also other local here to make it nice, but I leave this up to you. Okay, Uh, now we still have the When you clicking here, this man, you should disappear because we don't want that anymore. So we need to wrap it in a Togo. Remember when we did them menu? We wrap the funk, the bottles in our menu toggle. That is gonna just to go off the menu so he can just wrap this bottoms a zero the same way . There you go. So now if you go back in there and we opened the modal goes away Sam, what happens with the low got in there? We should also remove the are froth here Console log. You can use it later if you like. You could afford the page styling. So one more thing. Now we need toe did the Togo for the menu. But now if you click on the low GI, we opened this one and the model is to open. So that's not nice either. Let's Ah, aunt at this misto the moder when someone clicks on the log in with Google or in the sand link So we can do that by removing this function over here. And we need to create one. They start, go looking and we need to create it. You would have this and link. So a sink go looking. And here, that's what you want to go? We're gonna wait Frito open The more the pop upto log in with Google, and then we're gonna return function that is gonna dismiss them older. Let's call it Ah, these may smolder just like that and we can also to the same over here when you click on the Link is gonna send a May you cause a log and then his Mr Model. So let's create dysfunction. So it's also gonna be on, I think, because you need to wait for the component to be ready. Hold on now here. Let's go back to our app menu. And as you can see here initialized the model we cannot do. This sandwich is gonna copy from here. And we did add them off the model controller to the page on the Iot manure, but because the off page is gonna be open in front of it is gonna be like a Children component. And this Ah, I o model is gonna be available to us. So let me show you what I mean. Here we have to moda this side bar and we have the controller. If you inspect, we have the i r. Modal controlling here, which you can use to logging. Now he opened the model, and if you inspect again, we have our Beijing here inside the model off page, we have the model, and if you scroll up, you see, we have the i o model controller up here. So this is ah, the first. The sidebar. Um um the app menu are sidebar and inside their stand by we have our controller, and we are the another component in front of it, which is the Children, which is our our modi over here. So now we just need toe after he got initialized a the model controller. We can just call it and dismiss the murder. So return model controller this miss. There you go. So now let's try it out. Oh, God, no game A game of cocoa. They model disappear and I got successful looking. So now this concludes our authentication module, we can display Loki and Loga dynamically. We created a model. We can send a link with the magic link. We can log in with different providers and we also can display some data from the user. And in the X module, we're gonna learn how toe create our own user and add more information to it. 17. 5.1 App User vs Firebase User: Hello. Welcome back in these model, we're gonna learn everything about how we can manage our users. And we're gonna take the fire base authentication user object, and we're gonna create our own. But why would you want to do that? About four starters. This object, you can change it. You cannot add more items to it and you don't really have control. You can change the may you and for number 40 year islands, etcetera. But you won't be ableto add in a an additional information to this user. And also, if you ever want to pack up him goto another provider, you won't be able to export the users from this list. You'd need toe added to our farm your first or and then you can export the data. So let's start this module by modeling our own user. I open up, my guests called and here we have our components and our service folder. I'm gonna create another one called interfaces. You can name, however like it. So as we saw before interfaces in typescript. It's a way that you can constrain a no object so that we're gonna that will give you warnings. If you try to set any properties that is not available toe that object and also give you some nice code completion. So let's get the five for our user. Call it user dot Yes. And here we're gonna export an interface, just a basic interface. So exports in their face user And here I'm gonna use ah, few off the items that is in the fire base, like email you display name. But to your out and also the your idea, which is very important for us. So inside here, decider. Once I grab it from them authentication, you can have more like the phone number. May is very fight creator. That is a good like a member since option. Anyways, um, and we also gonna add a few more things in here on their own on, uh, view website in ah, Twitter and get help handle. I'm just gonna add this one's you cannot as many as you want, and we also gonna have a road, and the role is gonna be I string Honore off strings. Okay. Next, we just need toe go to all service, and I hear the user we're getting is a firebase user. Now we're gonna change for our own user because this is restrain. So I'm gonna import this You zero flowers. If you start type E, you would give you the options to import for a non seeing the user interface the one most from fire base there go our user and I was complaining that it it's missing a few items and we have some that is not available. So we just need to change this one instead Off returning the firebase user with the upstate , we're gonna use the of state observable, and we're gonna get the use are far bays, user You I d which we'll then pull out the information from first store about our user. So in first are we need to create some collections and hours. You'll be user and then use their I d. So, this user, today we're going to get from the off state, and we're gonna pull out this document from Firebase after that. So let's start by wiping the sofa servo. Now, inside, we're gonna use a switch map operator from I X J s. And what it does is gonna take these observable and we're gonna get ups. Information for Anita and you're gonna return another observable. So here we're gonna take the user. It is the fire base user, and then we're gonna return something else. If there is a user authenticated, we return our user. And if there is a the user is not authenticated. We're gonna return on new value, but observable. And for that, we're gonna use the off the off from our extra Yes, it creates a no observable off whatever you want here. So we're gonna create an observable off. No. So we can read from here after when you subscribe to the user. Now to get our user. Now that you have the user, you are assessed to the user. You i d. We're gonna really data from Far Store. And for that, we're gonna also use the expire library. So let's go ahead and start using Jack's fire for a store back in our code. I'm gonna import the Rx fire fire star and here going to use a function called Dark Data. We have to talk about data and from reference. When is the data and that one is going to return the full object for us. So here we gonna return the doc data it takes a fire started, meant re friends. So we need toe called first or and this first are we need to pull it from our far basing year, which already initialized front are up. So here with the alpha I'm gonna imported so that we're gonna take a document. So here we're gonna add a top level collection. I'm gonna call it users users, but you can name it however you like, And I we need toe out the user user, you idea strong, there's a desirable make sure that using tactics so we cannot use the string interpolation . So basically, dysfunction is gonna use the upstate get whoever is loving at the moment, and then we're gonna pipe that user out. And with that user, we're gonna take the find the collections in our database with the user. Your i D. So in our database, you're gonna have a user's collection, and then, ah, we're gonna use the user. You i d. As a document key. So this observe book is either is going to return that document or no. Now, if you reload our page, we're gonna get that name t object. And that's because we don't have any users in here before. We were getting this object out here in our up. But yes, we're getting the zero. Because we're setting this data now is no longer firebase User is only our own user, so we need to import it from now interfaces and that hero should go away. So, as you see, we can only you can just change our that the provider functions and we better. We need to do anything in our components. That's why it's good to keep your that a layer separated stronger components. Now, another thing you can do is tow. Add a type over here off user. So now he returns are observable off user here, if you keep it without you to return observer off any. And as I mentioned, the more type things you use, the better would be for you to cold. You're gonna avoid some errors. And you also gonna have, um, quote completion from your editor. Now we should change this firebase user in the other place. We added. So here we're doing the up menu back in the up menu. We had here a swell for a base user. So let's just import our on user. Now the air is gone, so we need to change it everywhere where you call the the user, I think, was in last one us home. So in park. All right. I think that's all about it. From the errors. I have my server, Ronnie and I got in years there, so should be good to go. All right, In the next lesson, we're gonna create this object here. We cannot use cloud functions, and we're gonna generate behind the scenes. Whenever I user out a create an account for the first time, we're gonna use a cloud function that do you generate. We'll copy this data and, uh, added to our database. 18. 5.2 Cloud functions (authentication triggers): Well, let's get started with cloud functions. If you have any initialize your functions yet you can do so by, um, calling third base. You need functions. We've done that that in a previews video. So I'm not gonna do it again. And what that commander we do, it will generate this folder and installed a package for you. So it's gonna clean up in here, and we're gonna set up off our base functions. So first we need toe impart the Adami STK for a base of me and this you give you full assessed with that of a czar to your firebase project. Now we can initialize the up we functions and are hearing from this functions that config method you can grab your fire base a p I keys. So with that, don't we can start creating our user function. I'm gonna create a file over here, call users you can at folders and organized how every like, but we're not gonna have that many functions in discourse, So I'm just gonna keep symbol. So here's what I need to import. Yeah, functions And the Adami, the ad me, I'm gonna use the fire star, so I'm gonna greater cost. That's gonna hold that fire store just so we don't need toe type this all the time here, I'm gonna create a function with our export cost is gonna name it great user account. Now I'm gonna call functions, and there are a few ways you can trigger a function if you take a look at the documentation you go to called Functions to take her back girl function, you have absence toe trigger. When a something happened on your first store for the ball on created a comment on update or delete. But here, we're gonna use on authentication trigger, which is going toe trigger whenever a new user is created. So let's go back to our coat. And here I'm gonna call off. But you, sir, And now we cannot call on create on creator on the left, we started to triggers. There is for the authentication. So here, whenever the event happens, it's gonna make it sharp. I can do something of that event now. First, let's console log the event and this council luck, we'll appear for you on the you goto functions. You only gonna be able to see under the log stab and we have gonna take a look on that after now we can build our user object. Whatever is that we want to say to the database, Let's create the user object and we can Ah, on the mayor, which is from the event Amillia display name, event, display, name and so on can also get the phone number. It's gonna add a few more things which you're gonna need. And here you can also add like this about the role and the role as we model. Here on lower interface is an array of string. So I was gonna add, uh, remember as, ah, the fault for the road. And, um, we can also set something like Member sees. So it's the event that metadata creation time. This was whenever the user how God created on the fire base authentication. I think that's good for now. Now we can just create ah that the base reference and set and save this user to it. So use a ref and here's they d be a doc and gonna add it. Us damn users collection. And here we can just past the you I d off that user. Now, if you return When you're dealing with functions you always need toe return the icicle I'm on Get errors. Use a ref that set. This is a method that you can use from far base You have are created Lead, get and set is ah method off the dock that you can just save it. Anna is destructive. So if you're using these somewhere else which were later you need to pass. Ah, merge option to it In case you are adding more information to these user by here because we are creating it for the first time. We don't have anything that so. It doesn't really matter. But just remember, the set matter is destructive it Remove anything that you have under days users I d. Now our function is done. We create ah user. We get that information from the authentication object and I use that to create our own user and we're saving that here. Now let's go ahead and publish our function. Gonna open a new window over here And to do that you can just do a fire base before you. You you publish, you should set which project you want to use. So I if you remember. We have the fire base R C over here, and we set the fire base can either choose default Alodor, whichever so firebase use deaf to make sure that that's is done before uploading your function. So now here we can just do far based deploy because you just want toe export that function you can do on lee functions. And here's to do only functions gonna upload all functions in your source here. Or you can just call it one by one. For example, Now we have this great users. You put a colon and the name of the function. But before we do that, we create our function. But we're not exporting. You mean we're exporting here, but we're not doing anything. The index. So whenever you try to do this upload and you won't find this file. So we need to make sure that we go to our index and we're gonna export. You can either do one by one or we can just start everything from the users. So this will pick up everything that's exported from this file. So here we got the create user. Later we're gonna have on the activate user account. So with these, you can just add one off this for any file that you create while exporting your functions from that file. So now if you around this cold, it's gonna live it without, because you're gonna have one function anyway. And I'm gonna deploy. So now, before one this is getting their plight. The fire base instance that we're using right now as off this recording is defaulting toe note version six. Now you're in March 2000 and 19 and first off April off 2019 this will be defaulting to load eight. So if you are watching this course now, this month, you can goto package that jae song inside your functions. And here you can set the engine. I mean, it's always good toe. So which Ngeny you you want to use later? We can keep this one as well also. But that will be the default afterwards. So if you want to use a single weight right now, this month, you need to set the engine in there, and then that will change it for note. Eight. How another, um, thing that you need to bury mine is that called functions will default to us, Central one. But for me that we will not cut because I'm in Europe and I want my functions to be here. So So set your functions. If you remember, we set on the fire base. He was set toe Europe west one passing toe, the configuration for dysfunction. But this is the front end set up. We need to set up for our function. So here on the on create function, we can pass some more information. So before we set anything like out for fire store, we can do a few things, said the region so same. I'm gonna use Europe West one. And you can also set set the run with and this you can set a condom machine. You want how much memory, How long you want to keep it running before it stops like the time out. So here we pass an object and the object, As you can see, the runtime options is time out. Memory and the memories. You have these blocks 128 which the minimal and you can go up to two gigabytes if you're doing stuff like image processing and heavy stuff on the background we don't need that kind of power because this is just ah, database, Right, So we're gonna go over the minimum so memory on is taking my strength. So 128 is the minimum in a mouse. So gonna passed it time out seconds for a very short time, Let's say 60 seconds. So there you go by doing this year, function is gonna be created on these region, and it's gonna have these memory location and so on. Now, if you save it and let's redeploy now, here, on your consul, you're gonna have you're create user account function in the region and the runtime. And these were the defaults that was created for us. So let's not go back and published our function with this new settings. So I'm gonna do the same. Remember, we can just start to our create user account here if you want to deploy only one function and now that we have on our one function created with his name, it's gonna ask if you want to delete it, their function, and also because he's from a different, um region. All right, I made a mistake in that is ah, West one without the dash. So I'm gonna do that again. Sorry about that. If you want to get the least off regions, we can find that on the functions. If you scroll down functions location and if you scroll all the way down, you should have our fullest off regions. Now, back in our coat, as you can see, would you like procedure the Galician and dig analyst? The functions that would delete We cannot say yes. All right, now that was done. You can see you have ah deleted operation and I create. Now it's defaulting. Toe note eight. I take a look at the Here's other fault. If our load now, I have a request one note eight and with the memory location that we set. All right, Now it's time to test. First, I'm gonna go to my authentication stabbing. I'm gonna delete these, user. And I have my server, Ronnie. So I was gonna authenticate again first going to clean up my starch cash can go application dumb clear side data now. Are you There is No I'm gonna lugging with Google. No, my objectives empty because there was nothing there. And ah, here on the console. I have my new user. If I go to my database, my mother should have been created here. So I have my member scenes My may you everything that he got it from the event. Now, if I go to the function stab and ah here on logs. So now here's the lock for they create user function you can ignore disown. This was from that I did before on this project. So here's gonna tell if you want to click here and view always a Keisha, it's gonna display only the one. And here you have there I d for that function. So it started. He was telling that Ah, some off the what is ours limited. For example, if you want to use other Google ap eyes, you need to enable the the building first. But for our project, this is fine. This event with this little you for I could It's our consul log here. So you see the event I went in there and this is what we're gonna get from this on. Create function this event right here. And this is what we used to create our own user. No. The user finish with four carry. So that's done. And, uh, on our not the base, we now have our user with a user. I d is gonna be all the ideas for the other users. Now, we're gonna have one problem. If you remember, we set our that the base, not toe except reads or writes for anyone. But we we could, right, because we're using the Adam es decayed. But now, because we're trying to get this information from our front and and we didn't set any rules allowing that here in the rules, we see that read and write if a request off is not know. So if you go to application, we're gonna get this missing or insufficiency and permissions there are. And this Just tell me Hey, you're not allowed to grab that information for on us here on our application on our service. This is what we're trying to grab from there and were not allowed. So on the next lesson, we're gonna learn how to allow, reads and writes our database 19. 5.3 Firebase Security Rules (users): So in this lesson, we're gonna start learning about fire store rules so we can get rid of this pesky Errol here. Now, in our application, we have this block here that is targeting every document in our database, and it's not allowing any read or write hance the arrow here. So to fix that, we can start to create our own rules. So we want to allow people to be able to get this information. This outer block is much is our database. Any signs we can create our rooms. So here we can do a much users. And this, uh, it's gonna target this collection. Now we need to get up this idea and you can do that with the curly braces. So and the value for these user i d. We'll be different based on what kind of document the user is trying to get. So inside you have two times off rules the read and write. Let's start with those on sore it and allow. Right now we want people our users to be able to read, um, the documents without before don't indicate. So just use any public user. That means any person can come and see our application. So now, in the for the right, especially for the user document. You don't want anyone to allow anyone to be updating it so we can do it for the request. The request is an object that comes from the called for a star, and this allows to assess the Whichever user is authenticated at the moment so we can use this. So grab the authenticated user, and then we can just compare it to this I d here. So if they user they authenticate a user has this I d means that he is the owner, and he can I did. So this user would be ableto do anything on this path in our database. But now, um, they are few more ways off setting up this allow reading rights. Reading right is kind of a shortcut for allow, get and allow least. So here they get you allow someone to get only one that went to the time and least, well, it's gonna be able to least all the documenting that collection. But here's the thing. We don't we We could allow people toe check one document of the time, But if you don't want people like, for example, Toby scraping our Web site for data. You can, uh, avoid people to least documents from your from here, that the base so he could actually do something like so if they user is not authenticated, like with No. So what? This basically would do you check if there's ah, authenticated user. And if he's authenticator, he can least Although this one block people from scraping our web sites, it was still still, they're gonna need to create an account with you, and then you can keep track. What kind of that its user is Ah, saying it. This is the same as if you add if through so going to remove this one. And, uh, leave this to over here, so get at least you can use their read. And for the right, you have allow great hello update and hello, Delete. So this three, it's ah, the same as if you're doing the right. So if you do the right, it's going toe, allow people to create, update and delete. So here's our use case for this. Create update and delete. If you want to split them up so you could allow anyone toe create, Let's say a block post. Anyone could create a block forced. But then you want to be a role based and only allow editors The user role equals our editor , for example, And to the leads Onley add me can delete. So these are some use case for these. Create and delete an update. But if you just want a simple one that we can pass everything like this one, you allow the user to the lead to create and to update their own stuff, which for enough they own it. So now you should leave this one at the bottom because, um, this you much anything else that you have in another base. So here are creating the rule for this specific oh, place in our database. But if you don't leave this one, people be able to create other collections and stuff on your database. So so always always lived this one. So the rest of the database is secure, and I keep it false as well. Now we need to add it to our fire star on the council. So if you go to the rules, Tom, we have our, um, need here from before Soto send this one up. You can just do, um it's gonna share this terminal, and I'm gonna the same as we did with the functions. I'm gonna do a firebase deploy Onley Far store this time now there's gonna deploy indexes and the and the rules in ecstasy later. But ah, you go back to your the tabs role and you reload. And there you go are nearly deployed, user rose. So any time you do a change in here just deployed, we fire fire star only, and you can't updated in there. So try to always use it. So a detour euros here on your file so you can keep in in in ah, version control manager like it and you're gonna have ah copy of it. Otherwise, we're gonna have to come here if you creating you, and I have to copy it and then paste it over there, which is, like quite a nine. So let's try our new route. We have our missing permissions in here, and I have my server running right here. So I'm gonna reload. And here I have my object and is displaying the dot in there. It was before, but before it was from the firebase user object. And now it's from this object, which is ours from our own database with the role and, um, our member scenes the 300 before on the function. So, like this, we have our users and our rule is working. You can test that with the simulator over here. He will get this simulation type, and you can add a path to the other base. So first, let's try to get the item without being authenticated. So now you want to goto users. And here we need to pass a document so we can get out this idea here, it's gonna baste it. Yeah, So we're trying to reach this user if you're wrong. There you go. You get the 1st 1 that was listed, and we will all get. But if I tried toe, create or update, let's try update Iraq. This one you were blocking because I need to be there, that user toe to be able to run it. So let's say I mult indicated marketing here. They authenticated Togo, and I just need to pass the u i d. Here. So our day maze you prefer when I do if they five basic idea and I'm gonna run it so this will allow, right? Because I'm authenticated with this person, and I'm trying to get this document which I'm the owner. So it allows me This one will block anything so hourly. Our are all. So far, it's working. Let's try to least so unfortunately, we don't have a way toe the least toe test for this list. As you can see, you only get, get, create update and delete. We don't have the least for for that so we won't be able to test the one. But later, we're gonna see this. When you're gonna try to you to list our users. We're gonna see this ruling here in practice. So so far, this is how we can do a little bit off a simulator. It's nothing like really difficult to just choose which one You to make sure that you passed the idea of the document like Mark documents. Right now we're testing for this user, and here you can pass. What? Whichever user it's authenticated or an email. You You start off there. You idea. All right, so this is about it for this lesson. if you go to the documentation and you go to the cloud forest are secure data. Um, structure your rules. For example, Here is that What do we spoke about it? That we have a bit more grandeau, Um, way of doing things. And, uh, their some more information is in here. Like how toe set sub collections. And also, if you go to the bottom, there are some limits. But this is basically if you have ah, really high volume in your up. For now, we're testing. This is not It doesn't make any difference for us. But just keep in mind that there are some limitations. So so far, we have this rules, but throw the course we're gonna create whenever you create a new property or collection, we're gonna add some more rosy here and learn a bit more 20. 5.4 Role based authorization: So let's do some role, Basil authorization. The difference between authentication and authorization is that authentication You're trying to prove that you are who you say an authorization is you trying to prove that you are allowed to do something. So that's the basic difference between them. We've done our authentication, Alice, to authorization in our cold, less great up page, like another mean page, for example, So we can see how this plays out. So I'm gonna stay stance you toes to create a new component page at me. All right, so, um, no, it's there. Let's create some a route for it in our up. Don't. Yes. Just here. Belong in a cop, One off this and are based. And just stop this for me, just like that. Uh, no. Sure. Let's also add a link so we can have a museum. Says on our menu here. I'm just gonna go more. It's put the Nikon here. You can check on the I chronicles upsides for a Nikon off you're choosing. And let's name it at me. Okay, Now, let's test the routes on May. Now we can go to Adam in there, so page at me. We go to the database on the firebase console. We are at me here. Let me add a PSA member. And now let's block uses front. Assessing this link back on the court here, on the up, on the under. This in for a direct I'm gonna create a off guard. So is basically nous check if the user is Ah, a Not me. So let's create a function on the top that was gonna set the internal states for the Adami . Ah, here, it grabbing their users. So we can just added this, uh, check inside this data block. So let's create is Adam Me estate over here and it's Apulia. So here on the data that that is the user. So let me just stop this for user. And we just need to check if this users that means so this dot If user that role. And here we can use they are a dot includes to check if it's is at me. If battery includes at me, we we'll set the state is that it's C Adami states. We're gonna set it true. So let's keep it is a false here, just like that. So most users not going to be on anatomy. And if includes the ads, Miro, we added to True. So but But here we have to do one more check because there might not be on user. Because remember this user us observable my return new. And then if you do this check for day role and the user is no, it's gonna cause an error. So we need to check if there's and user and then check for them for the role. So enough for the guards we can check if there's a user. And if there is a user and that user is not at me, we'll block them toe. Visit that page. We'll devise just council dysfunction cuts off this check. So here we can just use the redirect again. It's gonna copy from here. So if the user is not anatomy, we're gonna move them from their toe anywhere else. So whenever they hit at me, this function is going to run. If they're not another mean there, gonna be read Director homepage. Now let's go and check how you hit at me and then you get redirect And if you are anatomy, just change here. The value of the car. So and I go there and I'm allowed on the page. You can reload, and nothing is gonna happen. Now if I change here back, remember, Now I get redirect out off the page. Okay? So let's let's add a few more things. I'm gonna go to the Times and here in the dashboard. I'm gonna put that control panel here for Dad to me, just below this user's gonna add another item, and here we're gonna have a Nikon and the label. So the Eichel name and we're gonna put it before the label. Now the the items I'm gonna do Ah h ref and ah, link it to the other being page. It's gonna add a few more things here. So it looks nicer. Lives. No. And I enlarging top. Okay, so if I click, I won't be able to go towards me because I'm not admit any year. So if I don't look at me, Nangle, my tops, Now I can go here. So now let's just hide this bottom. If the user is not anatomy, we can just wrap this around in a urinary condition. So things that user and these that user that rolled up includes on me. We can add these. So here, if they use, if there's a user out indicated and the user has the role of add me, you shall the link. If not, we just cancel this home tonight for reloads. I have my control panel, but if I change here from at me toe, remember, go back, it disappears. This is how we cannot display and high data based on the user's role. No. So in this lesson, we learn how toe create a role base authorization. We've added a page which only allows that rule to assess, and we can now see elements in our page based on the user's role as well. 21. 5.5 User list: Now we're gonna learn about listing items from firebase listening. I think it's one of the most common task we're gonna be performing on our database. So to get started, let's create the service and I wouldn't name it user service. Now fear again, we're gonna create the class and then we're gonna export the single instance of it Sports bones and discourse we're gonna be using observable. So I'm gonna import from our expire. They give us two options to retrieve data to least data. One of them is collection and the collection. We return you a lot of information about the collection, like our length amongst other things, including the data. But you also can get the collection data and the collection that we return you, the I. D and the document data. Nothing regard the the state of the collection. So if you want to get more information about the collection, you'd use the collection, um, methods and to get the data on the doctor used it collection nothing. So here I'm gonna create a function called get users. So not to use you cannot just return that function collection data and this function takes are for base query. It's a reference to our firebase collection we want to use. So in our case, you to be find a store and this one to report from our firebase file. Over here they saw variable, and here we can called collection in it and passed the name of the collection, which is users. And if you just want to get the data and you don't want the I d off the documents, you can just leave it like this. But because the idea is quite important. For example, if you want toe create our link, we'll need that I d. So we can just passed it. I defuse over here by that, and then it will merge the document data with the AG in. So now that we get our function ready, we can subscribe to the data from our component. So I'm gonna create two components. One is going to be a page which is going to be our users least page. And I'm gonna create the user list component that you just go on, hold it together the least, so I could really use that component somewhere else if we need. So when I was the extensive toes to create a new component. And the 1st 1 is gonna be the user, the user least top age. And then I'm gonna create a component user at least So this one is just a page which we're gonna have A You're all for it. And this one is we're gonna insert into a component like this one. So let's create the route for our users in our abduct. Yes, I'm just gonna replace this off. Here we find user space age and I'm going toe changed a component to user. At least now let's add this Ah link so we can have a quick access to it. Here in the app menu, we can just create I'm not there. Link over here over there and you're going toe target the users so users. And it's just a person hat cycle. Now let's not run our server and see if that route is working. Start. So here we have our home component and our is the least dick staking years us to the user list component. Now let's continue, and we're going to create our least, and that will be inside our user list here. I just did dummy component. Now, this list will only display the data. So we need to pass the data from our parents component. So we're gonna do that with the property from this stance. You, Hugh, Anything for the prop from the stands, your car And this you're gonna hold user array, which is a list off users. So this is that information, and we important. It's from our interface here. Now, here, we're going to return. If there's a users, we can return something otherwise gonna be undefined, and then this is not gonna show anything. Now, here we can map that those users in tow some components, it's going to be kind off a list are going to use the I own item. So this that's users that map. And here for each user, remember, here is not the JavaScript up function. It's ah, JSX. So we need to tow parentheses because we're dealing with J s exit here. So now inside, we're gonna return a Siri's off my own items, which you would have all the information when you so on my own avatar, which would taken image and here in the source is going to be used. Their doctor for two euro. And here they user display name. Now, this is one of the benefits off using the type is that we can just start the dot and you ought to complete for you on that. If you were to use any here, which any could be any value, you won't have any out the completion. So now we use our label. So we signed. I'm gonna used a use their display name. And I'm gonna also under paragraph to show the your idea. So we want, uh, to display a list off users. And when someone clicks on one of these items, we want toe navigate them. So the user profile toe this user's profile. So we're gonna use our own click method, which you were going to create now. So here we do our anonymous function and we call, let's say view function. We're gonna need to pass the u idea because we need this your idea toe navigate the user to the profile. That's great. That your function then. So you we take the your I d, which is a string, so I'm gonna create viable to host the router. And here is the document that where is select? But it's elector. We passed the element who you want to grab. So I'm gonna do the I own router, and now we can just start return. They're out there, not push. They're out of that. Bush expects your ill bath. So we're gonna use string interpolation to pass that you I d. So whenever someone clicks owner I am item, we're gonna push this route today. Staff. Now, to use this component, we're gonna insert the user list into our page list here, and there isn't Where do we like this? With a component to hold the data and the other one toe doing, sir, is that you might want to do like a search page, which you can really use this component. We just need to pass the search user array to it. The results. And then we can just display that if you're refuse. Er, in this case, so here for the return I'm going to use on the rape and we're gonna called enough bar and the title will be his earliest here got imported automatically, so we don't need to do that. And now we can use rapid in tow. I am content so you can get some nice scrolling from the Ionic. And here we can just call Ion. Least I remember this. I own least we asking for up property called users, so he would just need toe at users. You be equal toe. He said he's not users. And then we received that. So now we need to create this users and I pulled a data and safety, and I saved with So here we are, a state we departed for on Ionics. Yeah, I stand your car. Sorry. So, users and you'll be a user from in part from our interface and a user array just like that . Now we just need to grab the information from our service with these get use or function and a link to this data which would then pass to this component, and this component receives a prop and display it. So let's ah, use the component. We load like psycho. We'll talk more about component life cycles in the future, but the component we load, we'll do whatever you put inside. It will doe before it renders the components you do a component Lourdes and inside you can get the user service. But you get imported here and then you can use that function. Got users. Now, this is an observable, so we need to subscribe to it. So here we get the data and we can just do with these not users, because Dr Now here's complaining about that. We're trying to assign users array two on array off unknown objects here. To fix this, we just need to goto our user service. And he was just asking for, ah, collection. But because we're just passing the reference, we're not telling this function what kind of data we were expecting. It's returning like, uh, observable off on object on our A off object. So if you just past there user you it will know that we're expecting that users Over here you have the observable. This is what is gonna return. We can have it here so we can see it easier. So now I'm just into part the observable from Rx Js and now our era should be gone from this page. As you can see, things get users going to return the observable and weaken the link toe This our internal state Here. Now let's ah spin off our server, which is running, and we're gonna take a look. My lords, I mean, opened then have tools. Here. Have one object. I just need to save it. Forgot. Save it. And here is our that These are console logging here is from the up. So I'm just gonna remove it here on the up. We're getting day current user, so it's gonna delete that so it doesn't interfere before data. So here we have our to users. You go to the console, and here in the database, we have two entries in there, and so recess will display. Let's fix these are avatar a gap over here. If you go to the user list component, we can just add, um, enlarging to it. So inside, I'm just gonna base this one at a time, and you're gonna add the 16 picks of enlarging on the right sides and that's we Give some gap over here. Now, let's consul log The doctor. We're getting back from the server and we can do that with the some are extra s operators. Ah, here. The user service. We can just add a pipe, but we are allowing toe add additional commands to this observer so we can do them in order . So let's start with the top, and this one will allow you to take a look inside off your observable and do stuff like council lock the data. So here, let's just users Now, if you take a look at your are A you have the i d. Over here, and this is what this function is giving us a year. If you don't pass the i d. You live it out now. We don't have the I d field anymore. There will be times that you just need the data and you don't won't care about the idea. But in our this case, because we're using a list off users and we need the i d for them to click and go to that, i d. We should get the retreat. The ideas Well, we far users. So here we are again the idea and we get it over there. Now, this collection off yours. It's a bit different because we're already saving it as a u I. D. Over here, And that's because you were grabbing that from the front or authentication. But some collections, like for example, if you create products collection, you don't need to save the idea because you can just retrieve like we did over here anyway . So now we have our function and we're treating the data. And when someone clicks on the user, you should take them to users and the I d. Now to load that page, we should create a router, and we're gonna do that in the next lesson. Now, just before we go, As you can see, we can load at least the user. But if you remember in the beginning off this module, we create some rules to go toe the first articles. We create this rule that we can get one item, which would be for the profile. Anyone can do that, but the least you need to be authenticated to list is to get all the data like were retrieving over here, like to or more, or if you have any now is fine. But that's because I'm not indicated I have my user here. But if I open, um, incognito window and I hear our be authenticated, so if I try to list, I'm gonna get the missing and piece of sand permission so our firebase route is working. If the user is not authenticated, he won't be able to see listing. You might want to use these or my not for our use case. This is not really society, but that's just forced to learn. All right, so in the next lesson, we're going to create the user. They use their profile whenever someone here, the user item is gonna navigate them to this persons per fire. So I see in the next lesson. 22. 5.6 User Detail: So we're gonna continue where we left off in the last lesson. And this time we're gonna create our user detail page. So I'm gonna start by creating the component. So page, user detail, you can admit however you like, I just like to be consistent with the name E. So it is a page that you're gonna have a euro for it and that belongs to a user, and that's what it's doing. Now let's get the route or no, on the up. It's gonna copy this user. And here we want to pass the I d. And to do that, you do ah, column and passed the parameter name that you want. You could be anything like name or user name. We're gonna use the idea. And here is the user detail the name of the components. Now, if you load if you Lord our server and B M start now we get our use of detail. If you go back, toe our user list and become navigate to that, uh, you're ill. So now let's ah, create a function that is going to retrieve the data with this I d. Or which other idea Piercy here. So use their service here. Uh, we're gonna create another function called get User. And this was after to you idea from the router, and we're gonna use that to retrieve the data. So here, we're gonna use yet another are expire method which called doc Data, and we're going to return it. So get there. Look, data. Now this one takes ah, document reference. And on i d. So here we're going toe call Fire star again. And now is not The collection is a dock, and we can pass the collection with the u I. D. All together, just like that, If you are over, it is having the same problem that is returning Observable often object. So let's just tell them that this we want user That's what you were treating. So if you over over it again it's a observable off user. So it's gonna based in here so we can see what our functions are doing. Now let's do the same as we did hear the top and top the the doctor again. It's gonna change this one. You forget users and get user so we know what you want is rich. Now back in our component the user detail. We're gonna add some information on the template first. Gonna add Did not bar. So we have access to the sidebar and the title be You sent a top or whatever it wants not to forget the comma. Let's do on my own content. Um, here was gonna do our age, Juan. If they use the name, he stopped user not display name. And I'm gonna And also, I'm gonna display something else on this user. Dots, you I d. Now we need toe grab these internal states. So at ST from, uh, stand Zukor. Burkett. So, user, it's a user. And it's from our interface, not from far bays. So now, because we're using the Ionic welter, they do not have any method to retrieve the euro. So we're gonna have to use the location a p i to do that. So we're gonna use the component you love so we can get the data before anything is rendered. So, um, I'm gonna create a viable toe. Hold a your I d off the user. So that's kept our location and he ref Hey, Drift is gonna return to euro. Now, let's just cause a lot of peace, your idea, and see what we get. It was he We're gonna have to split and then get one entry off the array. I feel reloads. This is the euro. Just taking largest aero. Is that because you don't get in? You don't have any doctor? Yes. So this derail. And now we need toe split it and get this last information here. So back on the components, I'm just gonna commented, tops. We don't get the error so he could do Ah, split and splits. You always returned you Honore, and we want to split on these large so it can get the information after this last over here . So between eurozone team, my theory load, we get this an array with five items and the entry number four is the one we want with the I d. Here we can just say and 34 or index for And there you go. We got the you I d. Now we can pass this information toe or get user and function. So you use their service important and get user. And here we can pass that you idea. Now let's subscribe to it. This that that subscribe. And that would be things, not user equals data. Now, if you save these, we cannot comment This If you see my, uh, editor, behaving word like this is because I used prettier, um, this plugging it out from at my coat sometimes on eye specialist JSX. But it's really helpful. So let's take a look in the browser. Have our least fact click. We're navigating there now. I'm getting the display. Name is not available, but my data is here. My daughter arrived after my component was ready, so let's just do some tests over here. So if it is that user we showed that device. It's a new value because we don't have any data display into the same for day. Terrible. I felt reloads. My ear is gone, and I'm getting my doctor over here. Same for the other user. But the other user doesn't have Ah, this play name yet. So, uh, doesn't show now. Here we are, subscribing to this data, and when you subscribe, this will open a channel to the data and keep it open. And if there is any change on the server, it will change the data automatically for you now Every time you do Ah, subscription And you are here on your component. This component subscribed to the user and then you move away. Now you don't need that user anymore. But this connection will still be open, so we need to close it now. To do that, you need to unsubscribe from your zero Boz. Now let's create can be a state use their sub and usually when you're dealing with ah, observable is compacted toe add a dollar sign in front So we know that that is an observable Hey is gonna be a type of subscription and I'm gonna import from our extra Yes, this is just looking at the type. It's nothing that's important. So on components, well, unload This is a life cycle off. When you leave the component, it don't it anymore, it will destroy it. So here you can just do these thoughts user subscription unsubscribe. So now we just need toe market. The start to use their stuff equals this. This is a subscription. We're starting it in this users up, and whenever the component is, we will not be used anymore. It we won't load and on subscribe to our data like this you want have memory leaks on your application is really important. Now we need to do this for our other component as well on the user list. So here are going toe component where you unload at another state users. So some type of subscription. So these doctors there sub equals, and here we can this dust users up and I don't subscribe. All right, this is used. Usually they common workflow for subscriptions. You subscribe, and then you unsubscribed when you don't need it anymore. Now, let's do some Campbell toe Are user the top page, which is quite ugly at the moment back here in our user page, I'm gonna start two of them template. And I'm going to remove this now bar because I'm gonna add some bottoms that is particular for this component. So here I'm gonna add a ny own heather and, uh, some bottles. So to follow this suit, you know, the border Tobar And here gonna under I own back bottom. This comes from Ionic, but it's really unreliable. So I'm just gonna marketing here, and I will show you after what? I mean, no, this is very start. Other I am title. Here's the and now is the menu bar menu bottom here. Okay. For the tight. I'm gonna on um Ah, check if there is a user, we aren't They use their name. If not, we are the writer. Profile is a string. So if this user has a display name of you, show it. Otherwise we show the fire. Okay, so now let's tackle the content here. I'm gonna create on my own greed so we can send their day user inside. So I agree. I am role, and I am cold. So now here, Instead of doing all this check, I'm gonna do only one, but for the off whole block so we don't need to do on each property. So just before day I am called, I'm going toe check if there is a user and if there is a user in financial, the Colin on their lies under fine and here in the call, we can put the user and we don't need to do the check anymore. Okay? So instead of doing the check for each of this, we do only waas. But for the whole block, that's ah and save time and make our cooled a bit more readable. So now let's just find some CSS to center this in the middle of the page just before let's on, uh, use their dominoes off. So the time now it's gonna show you much the user avatar. Okay, Now let's go into their CSS. It's gonna pasty here. We did this before. We're giving the I am great 100%. So it takes all the space we're lining the items vertically and horizontally, But here, instead of taking up all the space, um, I'm doing 80% so it stays a little bit on top. Now, this is just toe display. The thumbnail with the size, the margin out is gonna center it him giving some space between the name and the photo Carol and make it a round shape. So I have my server running, but we got the nearer here. I need to remove that, not bar that we don't need an m r. So now that is looking a little bit better. Let's just other Nikon here to take them, tow them user update page, but only showed toe. Show it if the user is the owner. So let's get back to our coach, and I'm gonna create a function that you check for that user ownership. So it's gonna be a sink, cause me to wait for some data. And here we need to get your I d. Which you're going to use this one here so we cannot capacity here. This that check ownership, your idea. Now let's get they state that you hold that he's Adami information. So its owner a bullet and here can set the default value for it as well. Just like that. Let's create a bottom just before they I am in you. I call, and here we can say this. That is honor. If it's true, we show the bottom, if not under fine. So I am bottom and here I'm gonna put an icon. The iconic owns doesn't have a needed I console. The closest one they have is the create, which looks like a pen, and here we can send them to the user update. So that's created this route. You go to the abductee a sex, and we're doing it inside the top so we can have access to it from within the user dashboard after as well, so Let's just copy this one. And here we can call the made, use their update, and we can leave the properties up because if we're going to need it, I am. He would need to pass that your ill. So you're out. Course Abate now there, wrapped that we gave it over here is home. Use their update. He would have Ah, home route that takes all of this other routes inside. Hong user update users, Children off home Updated student off user So now we can go back and hook up this function here. We're gonna use the authentication service to grab the current user, so use their equals offs service using the outing part gutting party here. And we also need to import first operator from Rx Js the first operator. We'll keep us the first start of that. The observer put limits and we're going to use that. So here we can whose observers start user, and then you're gonna pipe it and use that first. So whenever there is observable emits some data, we're gonna grab that and the data, whatever comes first. And here we're gonna make it the promise so we can await for this data to come back. That would be the same us putting on Dan over here. As in a normal promise. We're waiting and he was starting it in the user, viable. Now we can just go the check if the u I. D. Which come from the euro from here because this user i d then he is the owner. So we can like this is owner equals through, and that's all about our check. Um, now let's go back to our page and check. My savior is running. It's a very load. You want to start my serve again? I'm like, No page. I have my icon there if I click, takes me to this empty page because we don't have the component or and if he on that route So now let's go back to the user list. And if I go to this user, which I'm not the honor, I don't have the bottom. So our check works and we can navigate. So now, um, are saying about the I am back bottom to be unreliable. And the reason is, for example, if you are here on the least going to refresh, and I go there I will have my bottle here at any five. Refreshing. Here I bought it disappears. And even if I go back in there, I don't have it anymore. And that's because when you were a French, you lose your browser history and, um, this I on bottom, we only show if there is, ah, browser history. A way to fix that is to creator on bottom, which can easily be Don't buy just adding your own bottom here. And I think the name is I roll back. I'm gonna commented out this iron bottom. My father load. I have that bottling there looks a bit different, but that's one way that you can make sure that the bottom, the back bottom, we'll always be there. But that's up to you. Our live it in here. Um, no. I use a profile is looking much better. We have our linking here and let's create our update page, then 23. 5.7 User Update: Now let's create our user update component. When I used a stance, you up does create a new component and every page use it update. So first thing we need to grab that user. We're passing over here in the router. So we need to import drop when you to create a viable toe, hold our user in here. And we also anything party, user front, our user interface. In this component, we're going to update our user, but because this is a property and we're passing it from somewhere else, it is not a good practice. Toe mutate this user because he can cause some unexpected side effects to your user. Let me show you what I mean. So I'm gonna create the life cycle here. We'll load and let's say I have ah, my user in there and the name is flawed. Now, if I we're toe create a new user that will be equals, Noah and I come and change the new user dot name. Now, if I can. So long there first user in there. What do you think is gonna happen? So let me run the server. I'm going to my user update page and There you go. The user. Its flag is not Flavier. So if somewhere down in your in your component three you change something, you mutate a property that we're not supposed to, it's gonna trickle down all over your up. And that's gonna make it really hard for you to find Where is the problem? That's why it's a good practice. Tow. Avoid most 80 year properties like these. But if you don't need to dough you can pass. Option here. Multiple. True, so we can rotate it. Here are the properties we're going to change. If you go on your face, we need our change. The display name beer upside to it There. It's not based here. And when you think Park ST here, the job it is a guitar bazaar. Now we can create our function that will set the state and this user we're getting from our up. So if there is a user, we're going toe. But about this information and out to eat. So I was gonna use a new JavaScript sent us. We could Oh, this that's display name because using that display, name me the start is Aaron about display name or we can just the structure the user with the information we need equals. He stopped to you, sir. And now here. Just use those fireballs he makes for a better syntax. So if you haven't seen this before this call the structuring, okay, so we can call it on our component to load. Now, when these component loads, we grab this user and set these variables in here with that information. It's not. It will be no cannolis. Great. Some four inputs that we can use after I'm gonna create an r a year. And now we can I own least I at least has a header which ex? Quite nice. And then we're gonna have a bunch of items in here, each eye on Tim. We have a label and then I owe you books. So we need for and we need one with the text area. So for all of them, the position on the I own label I wanted to float display name Mia Side Tweeter and get humped. Now the value of this feud it's going, Toby, this property is in here. This will be loaded, the information when the component is rendered. So you are the first of toe. Grab the information from these values. We need to name it so we can refer to them after. So this play name Now we're gonna create a function that we will grab the event. The only put event, and we're going toe struck the information from them for each of them. We need done on input. And here we have the event and you're gonna pass it to our That's quality input handler. Now we can create it. So you're just below their state. How many day event get this event less living, type any and let's just cancel agate when the target not bother. That's where the information will be. It's going to start this irregular and we could check that thing in browser. So here's our for you. Could have been. They use their fund am user that were the half. If I type something, I get my inputs change over here. So it's going back in there. I'm gonna add this on import toe all of the other components. Now, if I to end of them, I'm getting each of them here. So now let's use this name so we can see which off the inputs are receiving information and we can add them to these properties over here. So our include Tendler. We're gonna create a switch case over here and first going to remove this Also log. And I'm going to create a viable core values so we don't need to type event. I get that. Follow all the time switch and, uh, it's going to be the event off target, but name. So you're getting the value. And here's the name off the books. That's why we need it. So now, in case the name is display name it is that display name because value Then you can break you break Soto Vaida if need look so case b o, is that you? Because value cannot have our our latter we can create a function that is gonna save it. So this will be a think because you gonna wait for you toe do some database stuff so we can tell the user that it was successful or not. So dates and we can just create the pre load variable toe hold all the information, So display name explaining will be there. No one when he's ready. View get up. So here is important that you, Mark No, was Well, in case there is no data, they use a Denny put anything because if you don't that but this one is gonna be under find , and you cannot save under find values to for a store. So now here we can just cancel lock that payload and let's add a bottom so we can call this update function and to that less to one on the top here. So I'm just gonna go back to my using details and I'm gonna cop this heather here and this . It's conscience for a profile and one other bottom here for the safe se you can just call that function on click and they start update. You know, we can see this result over here. I will not risk start my cereal. Now, Here we have there, save bottom on our components, displaying really weird. And that's because most of the time you gonna need toe add the iron component content in here because that is what I owe next expects. So it kind of influences how your how they CSS behaves. So now it looks much better. Let's try to do some tests is over here if I click safe and get my dot over here. So I'm ready to send it to my service so it can do something about it. Now, next thing to do is tow. Add our image upload so it can grab the users image as well. So back in our court, just below this ion, least I'm going toe aunt. I'm gonna create kind of a Bonner over here the top. So give some space and some nice place where toe book them usurp Avatar. So I'm gonna just great emptied Eve before class schooler. Now, for the success is gonna handsome says that's over here, and it's gonna have a height of 25% just like that. So let me just on our about there. So we see what to be doing when I did some. Now again, I think I image so here way. Need to do the check. If there is a user on this fine Sam closing here, here you can have no was well, and it would be the same. But I started with under. Fine. And it's better be consistent. Let's go check Heather user here. Let's style it. So did some. Now, most of gonna have a position relative and office size. Ah, 100 pictures here because we're dealing with far I only component. And we need to add the dash dash to get the custom size and that as a mission for you can see the doc on the bottom off the page. There is always styling information in there. So for the image, I'm gonna make it round at some party around and a white border because they back around this spring for now, when another border save and see how it looks like. Okay, so now on this to be here in the middle. So here. Just need to add some Margie. So it's gonna be all toe on the science zero from the bottom and minus 50 from the top. There you go. And you have that whites board in there. It was a look so nice, but they bring back crowd is not meant to be there. All right, so I can remove that back around there. Now we should add are input bottom so we can open there. File explorer just below there. I want, um I'm gonna create a deep, so we can at the label. So here you need to the attention because we're dealing JSX and on the label. We have a property that call for because we are working with JSX and four is a key word for JavaScript. We need to put html four, and that's how it works. JSX and an HTML properties. So if something doesn't work is because on that keyword is already taken by something you know you cannot use. So here I'm gonna create filing puts just some name Sorkin. I get it now for the label's gonna make a commoner on icon. So I own icon coming up again. This cycle names you can find it on the I I only concept site So here, musing on normal input and not the I own goods because the iron put is, ah, rapper on the native input. So if you would have to use the iron put, you have to dig into the element itself and then find this impure. He puts on I just keep it seems to be typed, fired and because it's an image we're gonna accept on the image off any time and the idea you'll be there. Label here now, here can call on change. Come out. Case Correct. So event Is that a date for the area? We need great dysfunction in the past in the event. So let's go ahead and create dysfunction. Just talk about there. Here, in there. So and you busted event here, you can console log it. All right, it's over. So course lugging the event on back here, Have our input less Take a look. You go ahead on our Eichel and we can open it. So now let's style it so we can get rid of all of this ugliness here. Beckon. Are she assess We're gonna target are I am icon first. So let's understeer says for our icon. Okay, this for our I call next. We need to do the about their filing boat. So the only thing we need to do is to hide it. Who's right now? It shows in here. What you're gonna do is just gonna change the opacity and make it disappear. Because if you remove it, you put in the side. You're gonna have some problems with the clicking now icons getting center on top off our time name and this one's gonna hide the bottom. So let's restart our server so I can pick up this change properly. Now they're able have, ah, the bottle on top and we can click any Opens. So now let's try to change in here to see if you get there. Here's our event. Now, if you go toe targets, which is that which is? They put itself and screwed out of fires you were getting on the ray and here's our file. So let's constant like this file, and that's what we're gonna be sending toe the our service. So, back in our coat, close this now we don't need it anymore. Here is the event, the targets that fire's and this is the array overloads. Do it again, their voice, an array. So let's describe the number zero, which is there in expert Terry. And that's exactly what you're gonna be sending tow them to our service. It's gonna other any over here. Now we have our photo update and have the file to send. And here we also have already payload to send to our service. Now I can go ahead and start to create our service so we can make use of this payload and this file over here. Get out for the service. We're going to create a few more functions in here. Want to update and want to update a photo? You're ill. So let's start with a simple one and update the user profile. You're gonna get that payloads, which is going to be a user. And that's Safran. Our interface here. We're also gonna need the u i D. So we know which Documenta safeties data to. And we're gonna get this information from that component. So let's sound just call it up. The user back in our components user page user update. So here, just below the payload, we're gonna use that user service. I'll dream party over here, and you can update you them. Now they your ideas, this duct user dot your i d and the pillows. So now we're getting this peril and the basically saying that they are me. Ah, we're trying to save in this user, but is missing some information like the role user, your I d. We only passing this one in here so you could just come here and my all of them as the optional with the interrogation. Translate this or you can come here. And once a spade loads, we're expecting the payload to be a user. But we can use the typescript partial, which is a generic that tells tax. Keep that. This is some pieces off the user. Don't bother if it's something amazing. So if you save it, then you go back in. There are here, is gone. I found this a better way off doing it. Because for the user, for example, you probably we don't want then not toe, Have you i d as an optional or other things like a may you or whatever. The rolling here present whisker is quite important as well, so Oh, I prefer to keep all of it us are required. And when I need toe, pass it. I set it us a partial over here. Now, this is only for top typescript typescript. We'll convert your cold, no javascript and is going to strip away all of it. This is just for better development experience. You're gonna have them ever study you like a sure you doing this right or you're gonna have doubt Completion. It's not a side you can easily slap any here on front, off anything and be done of tax script. But then what's the point in ways? Let's go for a store. And, uh, we are a heavy thing. Portage. No, look here. It's our users. And we gonna use the u I d to get that document. How can just go set? And I said the payloads now remember, set is destructive. It's gonna raise your whole documents and create a new one with is, that s so we need to pass the option marriage through and that will merge with the existing content. So we're returning this so back here in our function update, you can just let's await for this function to be done and we console log. But if I as being amputated now, let's go and test it. Gonna start the server now in our far base up. We have our rules over here, which allows the owner toe right, so we should not have any problems with this. Cannot have my user you on the side. So it's gonna add my details and I'm gonna click safe. And there you go. Everything got saved in there, and I have My profile has been amputated here, so our update function works. Now let's go into their photo Euro. Now hearing it to Sandy. Still the service again. So Lexar called the service user service and would have the function and so up days photo, you're and you're gonna pass that down in there. And we also need toe send the U I D. Off the user. So we know whatever saving. Now let's go create dysfunction on our service. So it so you idea and our fire. And here's type of fire. Now any to import storage from are fire base. And this is a storage from our far based fire that is be set toe our application. Okay, inside, I'm gonna use our try. Koch, because you're gonna be dealing with are facing function, and anything can go wrong in here. So firstly, toe reference our bucket on my storage. So that's great. I upload ref, and you can call a storage starts. Ref, Now here we need to save as a child because they ref is your bucket All the root off your bucket? So Andi called child, is anything that you want. Oh, create inside the bucket. So we want to create a folder core user users in here. Ah, we're gonna start all the photos from this user under his year. You idea. Now we're saving foot to your ill. Now, here's the thing you could. If you start like this, it will not star the extension off the file. And every time the user updates the photo, it's gonna override this one in the bucket. If you want to save every photo that the user uploads, you should add five dot name here. And that's gonna be whatever name they user uploaded that time off the fire. So But I want the user to have only one for the year Iowa and get get a variety. So I save some space on my bucket. That, and avoid all that rundown photos that does not be used. Now we can do our upload task and this you have some information about the up the load itself, things like they download to your out. What? What you were gonna use to safe to our another base. So upload, ref, That put. But you can put the file to it is that symbol. Whenever you call put, it's going to start the upload automatically. So that's the final part of it. And so here we gonna get that photo, really? And then you're gonna save toe our database. So you toe Oh, wait again for the upload task now, and we're gonna get the reference and get doubled. Iraq. Now, I think what's along this 40 year old And that's the link that we saving it to our fire star Doc and then called the users again Update update is another option that you can go instead of the sets the update. We will not destruct so we can just pass the doctor just like that. So we have a set and, um, update methods that you can use toe change dot The difference is that update. We'll fail if they that is not a red created. If there is no user with this you i d the update. We fell the set. If there is no user, it will create. So set creates and updates, update on updates and fell if the document doesn't exist. And after that, Just console lock muscle Counselor, Any error that my car now the reds toe test. Let's ah, check out on the beach. No, one's gonna upload an image. Here you go. And it has changed. This was the Consul Lakoff Day for two year I'll. Now the reason we could do this is because our for a base rules if you check it out. That fire star we allowed to write. So we did that before. But our storage rules, anyone can write if he's authenticated, anyone can write and read it is authenticated. So let's change this a little bit. So we have ah, bits, more secure application. That's first make it no for everybody. So no one can write anywhere this open Samos day and fire star. We have our bucket in here. Uh, he said the subject the bucket. And then we can do much blocks over here. So this one's matching every path. Same us here. We have matching old documents. No, let's upload this to fire base. So we cannot have this sound changed so far. Bays deploy only storage. And that should deploy this file over here. Okay, she check on the project storage. Now it's updated. Let's check in on Mittal Low the server now. If I tried to upload on image again, I get the user doesn't have permission and all. Unauthorized. So we locked out our storage. So now let's a great a rule that we allow this user toe update anything that is under his you I d over here on the storage users there. So back in our coats, we can do a much block over here. So much users. And here's the user. I d. Now I can go everything years old this up. Oh, perhaps we much any sub collections that you aren't for example, user user I D. Photos, photo I d and so on. So let's allow raid for anyone because it's a profile photo. So I think that anyone could be really that so Now allow right? So if request but off. But you idea, because user i d. So if the authenticated user is the same as the user, that district are the data requested, we allow it to. Right? So now if you save it, we can send it back again. Toe far base her best supplies on a storage. Let's go back to our reloads, uh, server again. I reckon up I'm going toe I upload the photo again. I got uploaded even though is the same photo. It will override the previous one in there. So that's it about our user update. We can update the entries. We can update the photo. You're l here on the beer. We can add some spacing here as well. She got toe there. Component use update page, and it's go down here on the text. Study the text, our assets. Ah, uh, rose value, which is the same as they native one that accepts Coghlan's and rose so we can go for four rows. I should have a little bit bigger here, so it looks nicer now. Our functionality works. Now we can do some, uh, improvements in here. For example, With this Bonner, we added, over there, you can change the color play around, maybe changed their stop by here to be the same color or things like these. Um, but that's up to you. This is designed I circle design 24. Good Bye: Congratulations on finishing the course. I hope you enjoy. If you need any help, you can find me on Twitter at Folly, Dev or all my eyes like channel. The link for these, like China, is in the course introduction. So I see you soon. Good bye for now.