Vue JS and Firebase Email Authentication 2019 - All Topics Covered | Vamshi Krishna | Skillshare

Vue JS and Firebase Email Authentication 2019 - All Topics Covered

Vamshi Krishna, Front End Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (42m)
    • 1. 1. What are Vue JS and Firebase?

      4:37
    • 2. 2. Setting Up Firebase in Vue JS App

      4:19
    • 3. 3. Firebase Authentication State Listener - OnAuthStateChanged

      3:04
    • 4. 4. Firebase Anonymous Authentication

      5:59
    • 5. 5. Creating Users With Firebase Email Authentication

      6:01
    • 6. 6. [ Important ] Login and Auth Navigation

      8:08
    • 7. 7. Email Verification Using Firebase

      4:43
    • 8. 8. Reset Email Password - Firebase

      2:46
    • 9. 9. [ Bonus ] Editing Default Firebase Mail Templates

      1:45
    • 10. 10. Whats Next?

      0:25

About This Class

57289e7f

Let's Learn About Integrating Firebase Email and Password Authentication in Vue JS. 

Topics Covered: 

1. Setting Up Vue CLI

2. Setting Up Firebase Project.

3. Integrating Firebase in Vue JS App.

4. Firebase Anonymous Login.

5. Firebase Authentication State Listener.

6. Creating Users with Firebase Auth

7. Logging In Users with Firebase Auth

8. Navigation Based on Authentication State.

9. Firebase Email Verification.

10. Firebase Password Reset.

Looking for Fundamentals of Vue JS? : Click Here: 

Transcripts

1. 1. What are Vue JS and Firebase?: Hello and welcome to the View Jays and Fabrice authentication class. My name is when she and thank you so much for joining me today. So before we go any further, let's looking toward his view. Js I noticed Barbies. So first, what is futures? So view Jay's here as states, it's a progressive JavaScript framework. It is used to create more than printing applications. It's very much similar toe anger and react. But when come back to those, it's very small and very fast. It's easy to get standard and really easy to create applications with. If you want to learn more about beauty is you can always sick or you just or or or you can check out my class here on school Shit. It's called his view. Jay is fun. Emergence for beginners with examples. In this class, I discuss about all the fundamentals of you. Jay is along with examples for each different property. So if you're looking to learn view Jay's, this class might be useful for you. Going forward to Firebase Firebase is back and as a service, So for every more than Trenton application, that is most possibly a requirement for the back end. For example, if you're creating a social media application, you need authentication platform. You need to set up a database you need to set up storage and so on authentication so that they can log on and log out authentications as that users can log in, log out storage, such that users can store their files, for example, photos or video sex except instruct as having to manage their own servers instead of us having to write only be ice, I'm doing all the hard work. Firebase is back in the service. So with Fire Base, we can build applications really fast. So it takes care of all the complexities off the back end and gives us this nice, simple interface and maybe a goals which we can use to build applications. So in this class, we're going to look into the authentication part of the fireplace. So let's get started. You can always learn more about fire base by good going to fire. Based on google dot com on when you go to five mr google dot com, and when you're logged in which a Google account you can click, go to console one sitting your console, you should see something like this. So here we can create a project. Let's name our project. Find peace off. You could name your budget anything you warned. Let's accept the five best terms and conditions and press continue. Since it is a devil project and we're using this project to learn we're not going to set up Google analytics. I'm click on Create Project it really a short while to create your project. Once your project is ready, click on Continue. And this is a project dashboard. So here we have different things. The first thing is our payment plan. Here are payment Linus Park. So spark is a free plan so we can click on upgrade to see what different plans we have. So spark is a free plan. So in this plan we have a specific amount of quarter that you can use for day to be that we can use for storage. Then, if your app is growing, you can use the flame plan, which is $25 per month and has increased benefits or increased bandwidth off the spark plan . Then you had the place plan. If you don't want to pay $25 payment or if you think your APP is going to have a little bit more you assistance part but little bit less than flame, you can choose the place plan. So with this you can pay to only the amount off which you have used five days. So as of now, we're going to leave it spark, and we're going to close this on the left. We have all the available features part of this year's go to develop inside the develop. We have authentication, We have database, we have storage, we have hosting, we have functions and we have a milk it. So what indication is the one that they're going to be talking in this class story? So let's go to authentication. So authentication can be used to create Sinan or maintain your users. So we have several different materials off authentication, For example, we can go deciding mattered to see all available types. So we have email and password. We have phoned. We have Google. We have played games. We have game center Facebooked. We don't get happy. Our home, Microsoft Anonymous. In this class, we're going to look into anonymous and email and password are the four tabs here the users stab, displace the amount of usage off our app. The user stab displays all the registered uses and currently showing nothing because we don't have any users registered. I'm deciding, muttered, shows all the different types offside methods available for this. And we have the status here, So we have. As of now, we have all the status disabled for all the siding methods on. We're going to enable them soon going to templates. We have the email address verification. We have the password reset. Emitters change. So these are kind of like the templates that user is going to receive that you can modify before sending to the user. So we look into this later. All right. In the next video, we'll start off by setting up our view project on adding fire base to it. 2. 2. Setting Up Firebase in Vue JS App: Welcome back to the video in this video. We're going to set up our view JIA's project on our fan base to it. I'm using Terminate because I'm on Mac and you can use command prompt if you're only knows . So before the creator project, we need to install views here like so if we can do that by seeing in PM installed hyphen G , which means global a great view slash cli once of u C L. A. Has been installed. Now we can create our view project. I'm going to create a review project on the desktop. So I got to stop and I would see, view, create and project name. In my case, it is fire bizarre. One thing you need to notice is that you cannot use capital letters for review project so you can save you create five years old and Chris Endo it's going to ask us a preset so we can say Manulis and it features We don't need Linda as of no, we need CSS pre processors. We would need a photo. We would not need progressive support. We would not need View X and that's it. So we need just these three. CS is pre processes because we might do some styling router because we might do some loading and be able because backward compatibility and press enter. Do you want to use history more for outer? Yes, we would like to Let's pick up CSS processor In this Gillis, you'll see a CSS in Pakistan deism. So if you want to brush up a little bit about your view Jay skills, you can always check back to the class on Skill Chair about the view. Jay's fundamentals for bigness with examples. So I brought it has been created. So if you go to the desktop, we can see we have a folder here that says, Firebase ought. So let's go into five years old. I did see yon So So if you is going to kick off a development server, Paris and it's going to run in local host 80 80. So if we go there, this is our beauteous project. So what we need to do now is let's open it up, in which the studio court it's clear to different rinos here and in the corridor, we can see we have the source. We have the abhorred view which is what s So this is our main. Come, we have Abdullah view. This is our main component and this is what gets loaded onto the main beach. Inside this we have the out of you. So as if it were displaying the home page with the image and hello world component. So, for example, if I can comment out the image, we can see that dimensional longer is there? This is going to back. I know. What you need to do is we need to add fire bees and that we can do by executing a command. Young add babies. In my case, I'm using Yang, but you can also use in B m. So firebase packages in start so we can go to packaged or Jason file to check out that. So here we have fire base under dependencies and know what you need to do is we need to set up five bees so we can go to Maine Dodgers. We can import fired, please by bees. And we need to initialize the app so we can say firebase door initialize at I'm here. We need to pass in an object and this object we can get it through are fire based project console. So when you go to fire base budget consult we have this gets talking about adding find peace to your app. So since ours is a web application, we're going to click the part. So here is the app name. We can just name it whatever reward What indication we're going to register the AB and we get this. So inside this we're just going to copy this object the fire based conflict object. You can copy this. You can go back and weaken basted inside this and that's it. You're Firebase ab has been in Cellist. So what? This your beauteous project is connected to your fired based app on the console. In the next video, let's look into authentication. 3. 3. Firebase Authentication State Listener - OnAuthStateChanged: all right, we'll come back in the previous video, we added Firebase toe tap. So in this video, what we're going to divest, we're going toe Look at five years old. So first thing Albert View. We need to import file these. Then let's create ammonia. Look instead the mounted hook. Let's see if we have any user. So obviously we don't have any user yet because we haven't quicker in the user. But still, let's go through the process of checking if we have a user or not, so we can go console or log. Five be stored dot current user. So this returns the current user if he or she exists, so we can see and can go back. And if I open the console, you can see we have no, which means we do not have any existing users, which was obvious, by the way. But still we got to know how to check a current user. So if I open up the console, we can see we have no, which means there is no current user, which was really obvious but still record to know how to check for current user. Then we're going to move back. Now. What we can do is now what we can do is fire base has distinct or less and other indication stayed. Lizano, another indication state listener, is very simple. Let's go to documentation off Abbey's incidental commendation. We can see that and authentication stateless know what it does is it listens to the authentication state off the application in our case, our view. GIs application. So whenever the authentication state changes, which means whenever a user logs in or whenever the user logs out both times, this authentication state listener is going to be fired. I'm based on the authentication state. At that point of time, begin perform in action. Let's try to implement that. We can say five be store bought, your own old state changed and we have odd as a promise, and we can see if odd, which means if you use that exists, what we can do is we can see consorted, log, use. It exists. But if the user doesn't exist, Mackenzie concerned or clog use that doesn't exist. So the difference between this one time just typing concerned or log based on odd, not current user. Five is the author current user is a one time thing. So whenever the user logs out or whenever the user logs in, the old State changes. But this would not fired up because this is not listening to it. But where does this? This will be fired up each and every single time dot Indication state changes. So if I remove this now and if I see him and go back and go to the console we have, that user doesn't exist, Alright. In the next video, we'll look into how to add anonymous authentication to see this on our state changed in action. 4. 4. Firebase Anonymous Authentication: all right, we'll come back to another video at any point of time. If you feel you're stuck, you can always refer to the fight with documentation. Already. Conduct me a message here on skill share or you can drop me. May on Ionic view address gmail dot com. So here's how you navigate to the fact this documentation it can go to your project console . You can click on CO two dogs, and since we're building for the bed, we have an option that says, Get started for Web Click on that and on the left you have this huge menu inside this, you need to goto authentication, Intel investigation. You need to go to a Web, and under Bab, you can go to manage users. For example, in the manage, users beget the fire base or not, state changed his authentication state listener that we implemented in the previous lecture . So at any point of time, if you get stuck, don't worry. Drop me a message or drop me a mail or go to the fireplace documentation and you should be fine. All right. In this video, let's implement the fire base authentication. So here we have the own old state listener ready to see if that indication state has changed on insider at Broadview, we have disorder navigation, which we're going to remove, and inside an alternative view. It's going to render the home view component, which we're going to clear it out. Let's also remove this one, and if I save and go back, I have a blank slate. Know what we Lewis inside the home component? Let's create a burden. That's his log in. I say, even go back. We have the burden. Let's assume it a little bit on Let's import families in the home component. And whenever the button is clicked, we want a matter to be executed. So for Dad declared a mattered instead of log in. What we want to do is we want to create an anonymous log in and anonymous Log in is by the name itself anonymous. So you're not going to take any information from the user, but you're just going to look him in so this can be used, especially when you want to have a guest drug in in your application. So in this video, water going to do is we're we're to log in the user anonymously. Jessel, weaken. See this? Get too good. All right. When the user gets logged in anonymously or any other, be the own Allstate changed function or the listener gets triggered on this whole function is ran again. So can go to home. And we can say fire. Based on what? So you need to remember anything related to what indication will be under fire. We start out dot sign in anonymously. So we have all these different set off my thirds, but we're going to use, citing anonymously and we can see it, then clogs. We can sequence older. Look what it's going to turn odd, and it's also for good measure. It's a concern. Backlog signed in anonymously save and go back. So when we click this button they used it will be signing anonymously. So let's click it. All right, what happened? So we haven't added here. The reason is all, I mean, restricted operation. So this operation is restricted to administrators only. Why is that? So the thing is, we haven't enabled the Firebase Anonymous authentication yet. So if you remember when we went to the signing method, we had all these options available on. Beside that, we have a status. So each of them have the disabled status along with the anonymous. So we need to click on Anonymous on. We need to enable it. So once we enabled and save it anonymous authentication is now enabled. So now if I go back and if I pressed on Logan, that's it. So now we're not only signed in the user, so we also have this authentication object. It has been consul dog. So inside this authentication object that we have this user data property and inside, it's usually the property. We have 77 properties that we can use for that as you go along in this lecture such as the U I. D. Which is the unique identification for the user. We also have this four number we also have for two u. R. L. We also have display name email, email verified, and all these different perimeters which can be used to kind of like toward the details as less fetch the details of the user. And obviously we have these use it exists. And if I refresh it, we still get user exists. So firebase in itself maintains the data so it persists. The data it persists authentication state without us having to kind of like use external applications to do that. So this is working now. What we need to do is let's also create another burden. It's a log out, no load. So what we want is when the user clicks this button they use that should be signed out, right? So once again, we're going to use fire, Be stored Ought. Since it is something related to what indication we're going to use Ought dog, sign out. That's it, then. Consoler dot log use a signed note? No, If I say even if I go back, we have these two burdens. Now we have the usual exists. I'm gonna say Log out. So we have two different console Mrs. Here. The 1st 1 is user signed out, which we wrote in terror Longer button on another one is user doesn't exist. So this one is coming from abhorred view From this on, our state changed listener so once again, when they use it has been logged out dot Indication state changed and discord triggered so similarly we can do that again. We can log in the user and we had to use it exists and weaken logo. The user and user doesn't exist. Alright, In the next video, we're going to look into the fire based email it indication. 5. 5. Creating Users With Firebase Email Authentication: or it will come back in the last video. We did the anonymous authentication, right? So if you go back to our fire base budget console and we go back to authentication here, we can see our list of users. So we get dot indication two times so we can have to users, each with their own unique. You I d on their date on the type of Simon. So if I do, I log in again. I would get out of the user. There you have it, But there's nothing much we can do with anonymous users, right? So let's create actually, user. So what we're going to do is we're going to delete These are Goencz, and this time we're going to use evil in Passport Indication for our users. So for the first step, what we need to do is we need to go into the siding, mattered, and we need to enable email and password. So click on this enable it and seep. So now we have do different email providers enabled when it's even and password, but it's anonymous. So if you're no longer using anonymous, we can just disable it. I see. So from now on, people will not be able to log on anonymously or your application. So if I go back and first looking out and then Logan, we get another. This operation is restricted. Only works fine. So let's go back to home and first thing. What we need to do is we need to create a user so that we can use the user credentials to log in. Right. So let's do a little bit of HTML here. I'm going to create a form I'm going to see create user. So when the form is submitted, we want to create a user we want to take in your different feels and the email address. Another one is last word. So that's also changed the type to password. And it's also created important that says, Sign up all your other guest book. We conceive and we can go back on. This is our form. I know not so pretty, but still something we can work with him. All right, Let's also remove the log and log out for now. So let's also have a date of poverty that's his user on inside this data property. Still, he may, and it's stored password. So what we're gonna do is we can bind these data property, school, these two input fees by saying using your email and use the door password. So we also want to set up the button type of submit Onda. So that's great. Um, entered. That's his create user, and it's also removed this one for now inside. Create Use it. What we want to do it. You are goingto call in fire bees. Once again, authentication not create user with email and password. It's as simple as that. So inside this mattered we're going to pass in the two different properties. The 1st 1 is the user's email address, which you can access by distort use that sort he made, and the next one is this door to use a Dort password, and that's it. Then it returns and authentication object, African console log. So with this two lines, we can create a fire with user for our application. Let's see, let's go back. So inside email address, let's are something like Ionic View and the Gmail com. Instead, the password. I'm going to say 123456789 and we can click sign up or register. And once Pakistan, we have the console here. And also, if you notice it builds, had the user object readily available for us here. Inside is we have the property of user on inside. If you see under email, we have Ionic view it. Reggie will not come. So that's the email. So we decided abusing the email it indication indirectly binds or definitely attach is the email property to the user. So, for example, what will Louis Let's also have another H one here, since your already logged in it should not matter much. That's also have a computer property instead of computer property. Let's say, used that email and this going to be done. Five bees. What dark and use it e me. So in this hatch, one property, we're goingto displayed the using may. So this is nothing. But just to show you how to can effect retrieve the email property from the find, this ought object. So the fire based on author current user is going to return us the auto object off the user on under that we're going to get the email property. So if I say even if I go back. We have this hitch one. I only give you a regional dot com. So one more thing. If you noticed we had another concert log message that says using exists, which means that fire is not only created our user, but also look, they use their influence. So now the using is already logged in. Let's also add our law. God mattered, Go to have a But then again, all right, we have the low good matter and you can see you there exists. And if I log out, use a signed note and use it doesn't exist. So now if you go back to our find basalt indication on, we can go to users, we have this. I only view it regimen dot com So this is our first user on. We also have his unique You ready? So that's how you create yourself using firebase email and passport indication. So in the next video, we're going to look into how to locking users using the email and passport Indication 6. 6. [ Important ] Login and Auth Navigation: all. It will come back now before we go into signing. And our user, I want to do one thing. So now they had the signing form inside that home component, right? So in order to change that, let's go into conference. Let's create two more components. One that's just log. In your view, when that sees, sign up your view and we're going to leave home as it is. So inside home wouldn't want her to. This I want to see will come home great. And then inside home, we wouldn't be needing any of these. So we just remove these No, instead of the outdoor view, what I wanted to this I want to remove it out of you. I want to import the home component, declare the component. I have it you. So if I see her and go back, nothing. Tina's tonight. So now what I also want to do is I want to import the log in and sign up components as well . Import log in. Let's also declare these two components great. No, what do you also want to do is I want to create a database table that says User logged in. Let's get a falls now inside mounted whenever the chicken. For that indication, let's also change this variable so you use it exists. Let's see through. Otherwise, it's a false so initially to be false. But then it will be as a tinge to true or it'll remain falls so wouldn't want to do with. I want to create another component that says, but indication incident indication. Let's remove on it. It's also remove these two from here because I think it would be better if we put it in North Indication. Sorry about that. It's also import log in from It's also have a data property. It's a logging its draw and you'll see just in a woman why I'm doing this. It's also have these two components declared. All right, so now what we'll do is we also try toe fill these two components. So I'm just doing everything that we did before. I'm just arranging it in multiple confidence, and I'll explain very shortly why I'm doing this. Why I'm segregating these into multiple components inside this form. It's also have two different input means. It's also declared the matter that says log in. So so far we looked into creating a user on but signing in the user. The process is very simple. It's almost exactly the same. We just have to begin firebase again, import fighter bees five days and instead log in. We were to say Fired based or about again. Since we're dealing without indication on, we say Sign in it email and Buster, that's an inside is even ambassador. We're going to pass in the use of your email on Distort Use a door password on. We have our own ought object that gets return. Look all right, that's sweet. Now you can see this. Similarly, we can also do the same thing for Sign up. I'm going to just quickly do this instead of siding with the 1,000,000 bus for we're going to say create user with even and password to conceive unsettled indication. What I want to do is I want to create a route, and inside this room didn't want to import these two components and with some magical few churches or to say be if log in on the else. We'll also have a button. That's his shift. That is odd shift, I guess, and upon clicking this button what I want to do is Logan equality, not Logan. So whenever the person clicks the old ship burden, you know they re toggle between Logan and kind of component. So we'll save this and we'll also import dot indication indoor abhorred view instead. Components. They see what and it's also bringing out here. Good. Now the reason why I did all that is, for example, to see we have really an actual application and we don't have a user logged in. So whenever we don't have a user log, then we want to show him the log in or side of the screen. And whenever we have the user log, then we want to show him the home screen or the welcome screen. Right? So what we're going to do is now we're going to see homey Quinto form is beef user logged in on orders, yells. So if user is logged in, we're going to show him home. If the user is not long, then we will show him the authentication page. Similarly, inside the own odd state changed in se v m. Dot is a lot of been called false and you conceive and we can go back. All right, all right. So if we get to be fresh since we don't have a user, we have the log in page. We can say all shift to register and again to Logan. All right, So in the previous video, since we have already created a user with the email address of Ionic your regimen dot com, we're just going to log in with that. Only you did. You would not come. And the bus word on, we will say log in. Once it's logged in, it automatically redirects us to home, right? So this in much more practical sense, would be done using ah, viewed out. But since it's just for the most Asian purposes and just doing it with components, so once again, what we can do is inside a home page. We can have another button that says, Log out on the processes are simplicities. We're going to import fire base. We're going to decay in a matter that's his little goat. Instead, limited, we were justifiably start ought not sign out. That's it. So this should be enough Onda. We can just buying just even closing up my thing on click log out So instead of home base. We have this and genetic log out. Once again, the old State changed on the owner or stateless. No extra good on this property has changed again. On this. The conference will get dog, so that's how we create a user and we'll organize you said using the email and passport indication. In fact, based on, that's how you try to kinetic navigate. The use of based on, if they use it exists or into user doesn't exist, so if they use that exist, you can navigate him to the home page. But if the user is not logged in, you can navigate him to the at Indication Page. All in in the next videos, we look into how toe get the email, verification of the user and also the next video. We'll also look in tow, how to kind of reset the password of the user 7. 7. Email Verification Using Firebase: Hello and welcome back to another video in this video, we're going to look into how to verify the email address. Off argues. It's for example, in our previous videos be implemented the firebase email and password authentication. Now, if you go back to our fire base authentication console, we have Ionic you and Reggie Miller come. So this is our user. So this is the minute is that has been endured by I'd use it now. There would be many cases when you're creating an application that you were born to verify your users email address. We can do that by doing the following first thing. Fibrous authentication has a small property. Corliss email verified. For example, If you go to Albert View, we had this own old state change listener on inside this. What we can do is we can say console, not log odd doored e mail verified. So this is a property that comes in without indication, and we can say when we can go back. I inferred logging in. Begin, say ionic view a regimen Lord home. Since this is the email address that we used in the previous lecture to create an account and we can say the password is 123456789 There is no password. I do know that and we can say log in I Here we have the user object on under the user object. We have falls, which means the email verified property is false began Go inside the user object and we have a small object Collins user ID Inside this we have this even verified, which is false. And we had this email which is ironic viewing regime will not come. So at this point of time, we do not have any proof that this email address is legend or this email address is valued . So water going to do is instead of abhorred view we're going to see if all your email verified is false. We're going to see ought Norc send email verification. So with this, a verification email will be sent to the person's email address and we can sit then. So at this point of time, you can do whatever you want. You can display a small alert saying your email address is north. Very fight or he can longer the user. If you don't want any unverified users to be using your application, but in our case, we're just going to show an alert. And now, if I save it and if I go back or even then we had this. Jordi Mill is not verified. Alert. The reason is when we saved the average precious on the authentication state listener is run again on since we have the user and the user's email is not very fight, the user has been saying on email and even gratification. And there has bean on alert that displays your email is not very far. So we can say OK, and if we go to a Gmail inbox, we have this small verification email. If I click on this, verify your email for project that is a Project five. This project number. We can obviously change this, and we have this modification link that we can click to verify Ari me. So if I click this, your email has been verified. So now we can close the tab. And if I go back and if I look out and if I But I do blogging again and if I say log in this time instead the user object, we can go on, we can see that the email verified is true. So let's do that. By creating a new account, we can log out, Let's say all shift. And before we do that, let's go to our firebase console. We can relate this account. I hear they're straight registered again. Let's it by owning viewers, they demanded a bomb. Let's say password is 123456789 And if I said it just ill, your email is not verified, and if I go back to my email address, I have another email link we check in Click. Hopefully, this is the one to verify. Okay, so this is the old link so we can click. The new link to verify the email address on my mail has been verified, and if I go back, I just loved it out. Ionic view of the home when we get into the bus word, and if I say Logan, we have the user object inside. Email verified is true. So that's how you verify your users email address. And in the next video, we're going to look into how touring said or change a users password 8. 8. Reset Email Password - Firebase: hello and welcome back to another video in this video, we're going to look into how toe allow your users to change their password. Since we're already logged in, let's likely implement that in home before the law. Good. But it's also trying to create under the burden that says that he said password, because resetting a password is one of the very important features for any application. You can see it, he said. Last word. It's also create another method inside this. What we can do is we can, since we already have the firebase imported. Let's see article do Fed B is not ought on, but it's also sailing email address equal. Do fire be stored. What door currently? User door email. So we get that even it does from that, and more Begin says ought doored, he said. Send password is a female guarded, so on inside is we need to pass in the email address that we took from the firebase current current user object. Then let's see and alert send, he said. Email only. If I say even if I go back, we have are the burden. That's a swing set password that's at a small br. So when I click this reset password burden, UNE email is going to be sent to my mail or to the Ionic we would regime and not commit. From there, we can reset our firebase accounts password. So let's click it. We have the email and it's called Good Inbox, and we have reset your password email. We can click on the link, and we had this nice little little box American enter a new password on One more thing that you need to remember is that for fire base, your passport needs to be at least eight characters long. So now what I'm going to do is I'm going to just say, 123456789 and zero. I'm adding the extra zero debt, and if I see it, that's it so we can log out. And if we try to log in with our order last word. So I just entered the old password, and if I log in, we won't be able to log in. We have. In fact, we have another. We say the password is invalid, but as soon as I had a zero, he'll we at home. So that's how you implement a reset password functionality to your application. That's it for this video 9. 9. [ Bonus ] Editing Default Firebase Mail Templates: all right. One more quick thing I wanted to show you was if you go to a fire base budget console and insert indication we can go to templates. And when we go to templates, we have this email address verification. We have this possibility said we had this even address change, and we have This is miss Verification. So these are the basic templates that get sent to us by email. So, for example, this is a reset password template so you can see the Ford Matt. It's written here instead of what indication? So we could possibly said. And this is a Ford, Matt. And we can change this format by clicking on this small planet going here so we can just change the project name you can see, but bees. So you're lesser project on product support. Email is ionic. View it a gym in your calm, since that's the account that I'm going to log them from and we can save from Ionic View. And you can also customize this customizes domain, for example, by default, we have this fire off a 6809 It finally stabbed or comb, and that's a D four domain that is given out by fire base on, we can click on this customize domain. For example, if you have your own domain, you can add your domain name here, and you need to go through a small procedure in order to verify your domain. And once that is, then you can just add your own domain. Hell, that sort of thing is seen on. You can also edit or change your subject here so you can go to this page. You can try to learn more regarding this. The documentation is always helpful, Similar for password, he said. You can do the same thing as well, so you can always go to the template Stab to make some customization is to your before templates so you can have a small personal touch to your application. Alright, so that's it for this video. 10. 10. Whats Next?: That's the end of the class. Thank you so much for taking the time toe. Go to the class. Hope you learned something new. If you did do leave a comment below. And also douche this class with your friends it would help out a lot on Do let me know in the comments what you wanted to cover next. And as always, you can reach out to me and I only you and Reggie will dot com. And you can also follow me at Medium Madrid. CHS, Vicky. In the next week, we're going to cover fire based social media Loggins, and I'm hoping to see you in the next class. Bye bye.