Vue 3 + Firebase Basic Auth (v9) - Fall 2021

hello everybody in this video we are going to learn how to do a real login application but we did the last time we faked the authorization and we just faked the state and we were able just to pull up the information we needed but we have pretty much the concept regarding faking the database getting the user from the database and things like that right we're going to use a real system a real software for that and we will rely on firebase firebase is one of the most that we can actually use in a real-world scenario uh local authentication doesn't exist that much anymore and in order to handle you we need to have to secure a back end and we are not there yet so it is better to actually use a tier pilot for that so i want to use firebase and we're going to use into my in two modes we're going to do the local authentication to firebase and we're going to use the gmail authentication or the google authentication through firebase firebase it's a google product at the end and you can do apple authentication microsoft authentication github there's a bunch of those that you can actually apply but i believe this will be more than enough and in this video i will focus on the local authentication in a future video the next one probably will do the google authentication and later we will continue using the rest of the firebase products so we can actually like what else they can do for us they have a really cool real-time database and module that we can actually implement and and it's pretty cool and is and is free to use as a developer the entry tier is actually free so we can actually test our application and leverage that but without paying any extra calls at the beginning so upfront so it's actually really cool so the first thing that you will need you need to go to firebat.google.com and you need to log in with your gmail credentials hope that you have those you know you will need to create one and you need to go to the console right now i'm already logged in so you go to the console i already have like a bunch of applications in there but you need to create an application i will call this view trees login test oops test [Music] when i do continue i will disable analytics i don't need analytics in this case and we just create a project we wait for a couple of minutes until our project is going to be provisioned and this is actually going to rely on the google cloud and we're going to be using it so let's wait for a fit project gets ready we will continue and we're going to open our project there's a couple of things that we need to do over here one we need to go to the get started we're going to add an application to the project and we're going to click the web section we are going to do a web app we are going to connect you and we'll go view up let's call that like that or anything could be there and we just register right away and this will provide a couple of credentials that we will require later but for now we'll skip a later we can actually see that we need to solve firebase as dependencies and this is pretty much the way that we will need it in order to initiate the app everything that you can see here in the firebase config those are specific keys for this particular project need to be secure in your in your code so it's important we don't need to upload any of those to jacob and i will show you how to do it but pretty much we just need to install firebase and utilize this and we do it we will do it later right so let me just continue after we have the application up it's a reader we'll go to the authentication method we can actually use cloud store we verify performance analytics we can send message testings there's a bunch of stuff that we can implement to firebase but we're going to use focus on the authentication piece we just click authentication and we open it again and we just get started and for now we're going to use the email password we use google later but for now use email password as you can see all these are the type of locations that we can actually handle so let me just email i will enable it and save it i will not create the password that sign in i will just keep the traditional email password master get done and wait this to be safe let's we need to add another right domain that means which and domain are able to go in and do the testing so for here i will type the url that i would think i will use so which is view login i believe roman.com is my url and view login it will be the subdomain that we'll use for this so after i have those just added and that should be let me just in case probably roman i have an issue with my brother man yeah it's working yes that's where i need to play perfect so after we have that we pretty much have everything set up here we're going to get back through the app we can click here nap we can clean the settings section in order to pull up the the permission and we can actually see those right here so we keep those right there the second step of the next we're going to go is i will go to the fake authorization and we use this as a base code in order to create the other one so we already learned that we need to go to settings and convert this to a template in the easiest way i believe and we need to save it where is the save button mobile is already done let me get back i can use this one use template i will call this repository view login need to be public remember so if i would i would able to create your assignment and i will create from the template we're going to wait for a couple of minutes and we're going to copy over the videos copy this actually i believe in my case i will do the ssh but for you remember to do the http as well you don't have your keys enabled right but i have that i will convert this to left oops sorry bro and let me do a simple jit clone that one i'm already in my repository there you go i go to view login then you want to create it i will install everything mpmi after i have that i want to do something because because i did this long ago it would npm out just to verify if i have outdated dependencies and yes i have bought a couple of those in this particular case i can see that my plugin view is a minor version behind a couple minor versions these also jump to seven this one just a little bit behind this one little bit behind behind and behind bu and view router is the correct one so actually view is a little bit behind so we can actually do without issues npm update and we should be able just to update all our dependencies it is important to do that often just to verify that we have the latest and greatest npm out again and yes we have the correct underwanted that's what we need we don't always need to go to latest in this case 3 and view router 4 are not the latest available they are still keeping dependencies with the old version but this is the wanted one so we actually keep the current with the quantity which should be fine so after we have that we just do npm run there and we can actually open the code and we have our fake authorization that need to change right we go to about working login we do admin admin i believe we call it like that and welcome administrator and we have access to the secret page so say that we can actually proceed with code let me open it and let me run it and we have around that [Music] we should be able to open my code here and i will open my that one over here perfect so the first thing that i will do is because we updated dependencies and we just saw updated dependencies in my in my desktop oh yes let's do this you're complaining with complaining okay i need to do this for sorry about this let me just copy this command let me open my terminal execute it enter and that should be enough to synchronize now they're like it's actually weird let me see what's happening here another no way let me go to another option if that doesn't work that's okay we keep it like that sorry for that delay okay let me clear everything and let me start doing some changes so i will open my nut bar let me look for my navbar.view [Music] where is it my source component snap actually and what i'm going to be doing here i'll probably make this a little bit smaller i probably can move this a little bit to the right there you go um let's call this instead of fake let's put real out through session perfect we have indigo let's change the color to yellow well it's something just to have something different there and the text let's actually change to yellow too right the hover over let me check this over here so we need to change to yellow right to yellow yellow and the text is going to be yellow yellow yellow there you go about home login page everything is there so we just changed that in order to make a little bit different i will change also the content of my package json so i will change this to fake out to real loud just to have a different name and i will change on my index html to view real out right that's pretty much i believe we have most of the pieces there i want to do something extra that probably we never did before so let me open the readme and let's change this to view 3 plus firebase authorization right and let's remove this and probably should be more than enough okay after we have those let me add it and i just put basic setup cool so we can actually proceed what we actually need to do the first thing we need to do we need to solve firebase as or dependency itself so i will open my terminal and i will execute npm install fragment we are going to wait for a minute and when it is done like this we can actually remove this from here and we can actually do undercomposable i want to use a new file called use firebase this is where all the logic fragment will rely and in order to initially take the app we just need pretty much copy all merchandise here and paste it that's pretty much everything we need so let's remove the comments we don't need those comments to be here let me know what is coming over here [Music] and let's remove this one over here there you go so there's two things that i want to do here i want to change the app to actually be called firebase app and i would like to export right i want to my youtube to able to use my firebase app if that's actually needed something extras i will need to do i will take my configuration and i will go to my source directory new file and i call this firebase config.javascript and we type export that configuration you can actually instead of cons we can default actually more than enough now that we have that there it is important as you can see or visual studio tell us that is a new file before we actually commit it and add it i want to go to my git ignore file and i will type source directory firebase config dot javascript and save it that will say to git to ignore that file and we don't need to keep track of that it is important it's really really important not to save your keys anywhere in github right because a public repository and somebody can use your kids for doing something extra and right now i don't worry to show my kids because when the video is going to be released those key are going to be already changed so don't worry about that but for you you need to keep your your keys secret and remember that section so now that i have that i can go back to firebase and i can actually use import privacy config from my firebase config and this will be something like this pretty much let me minimize this we have the firebase authorization already created and the weather is supposed to now so we sorry we just create that one the way that it is so let's get back here let's go to authentication and i will add a user let's put this user at fake.com and let's put fake one to train and add it and we can add user through the firebase console the way that i used it we're going to firebase will give us an id for that particular user by default something that we can actually use later but for now this will be more than enough so let's actually get started with authentication here i'm going to go all the way to the authentication on the left and let's do web and let's click and get starter so we already have this firebase sdk so what we need to do is we need to create a user with email and password and be able to save that well for that we just keep it a little bit as it is we're going to use first the signing method so something that we're actually using here is we need to import get authorization from firebase out in something that we don't have yet and then we that function we actually save it somewhere else and then whenever we sign in somebody we send that authentication through here so we can actually do something like this we can actually import let's call this get out from and it's going to be firebase authorization and then we can actually export cons firebase out equal get out but something that is not giving us there or not telling us is that we need to send the firebase application to this authentication method so having that we can actually say that the use firebase is pretty much done so the only things that we need to start changing now is in our use authorization method here when we fake the database and we have the login the logout and that's it so we're going to reduce the login in a different way implementing the sign-in method that we have right here so the first thing that i want to use is i will keep the it's authenticated the way that it is i will keep the user like this i will remove my user from the database i don't need those anymore i i'm not faking it anymore and my login will change i need to have my username and password my logout well we're going to do this on the logout for now so let's keep it like that but let's just start actually working so in order to make the fryerberry others do door we need to import the sign in with email and password so we're going to import we'll sign in email and password from firebase authorization right and then i need to pretty much send the email and password and the authorization method authorization is already safe it might use firebase method so i can actually use now import firebase authorization from used firebase so that means that in my login i will just use this method inside sign in with email and password and i need to send my authorization method that is going to be firebase authorization comma username password right here we have the promise method i want to use it a single way so that means that i will make this to be a synchronous so i need to wait for this to execute but not only are waiting and let me make this smaller so we're not going to choose yet we need to get the response of the credential so i will i like to call this cons response equal await that right and then we can actually say are going to wait and it is successful we are going to check if the user exists my response user we can see the color user credential in the user access i can actually use my is authenticated is going to be true and my user value is going to rest the user let's change this to that email in this case because the users are actually really big object let's use the email section only right and that should be it i believe it should be more than enough to actually make it work let's try it and hopefully it's working so as you remember we created the user fake with the fake one two three password and we're going to get back the email and let's see if it's actually working and it's not we have an issue so let's verify what is happening here oh i'm not closing at this there you go maybe oh wait that was fine let me expect let's move to my console i have an issue let's call this rest response no use authorization i have an issue which one let's change this response to credentials and this one is not doing credentials i have a reservoir somewhere let me verify where is my reserve board that is actually not working might have an issue what should be in oh wait important let me foreign this now still complaining or not probably just need to always something happened here let's restart my server inspector whatever word in here line 12. have my cons credentials sign in email and password send my firebase authorization username and password when i close that oh wait i know what's happening here my synchronous it should not be at this level is at the login level let me say that works for us config is not defined i didn't like and my favorite comfy let me export the cons from here i will get the firebase config like this there you go somehow i didn't like it okay there you go so if i need to go to login and i put some random we still have the invalid username and password okay but if i use user at fake.com and the password is fake one two three we log in there you go userface.com is actually working be able to log in user or firebase itself if i refresh here look at the sign in information i already changed it to the date at this moment that i actually signed it with the user there is still a delay here and something that we need to catch up and we need to fix so let me try again user at fake.com fade123 enter doesn't work if i try again doesn't work but to login the actual login does so is something happening just too fast let me go to my login view and probably the only things that we need to do there you go we just need to make this asynchronous and this login need to be await so we're going to wait for that to happen before to verify this status let's log out let's log in let's try one more time user at fake.com fade one two three and now it's working with a simple enter we were not waiting because now we need to wait for the process to to actually uh for the call to actually to process so we don't need to make the call limiting well you were able to see that without mind naming changes we just handle an authentication and that's actually pretty ready so our user addiction is working the way it's supposed to wait let me do one more thing and let me remove this login in false i don't need it where is my login let's do one more thing it's going to be user at fake.com and fake one two three my secret my logo actually not working so let me go to my map view there you go so we're talking about hindu let me do this code select all instance of a word ctrl shift l okay so if i do this one ctrl shift l and i can do yellow perfect now everything is yellow cool so now we have access to the secret page and we have access to the user this is actually pretty we were able to handle authentication actually really really fast we already had the main methods created and we're just using the same flow somehow now with the proprietary information that 5s requires what we are going to be doing now is i want to change my login page and i will duplicate this actually let's go to the firebase and we thought there is another method called create user email with username and password so this will help us to actually create a new user and the process is pretty much the same that means that we can go to the use authorization use out oop there you go and i can create i can pretty much copy all this over and paste it and i will call this signup but i will just now use create user with email and password that need to be imported of course and it's going to be created here but the process is pretty much the same [Music] right so if we do that we need to export the login the signup logout and the user and let's do one more thing for the logout it's not only that um let's look for firebase logout logout sign now there you go we get the authorization but we need to get the sign up too from there so we can actually just call comma sign out from the same place and we just call this one the authorization we already had it so we just call sign out firebase out and we need to make this to be a weight we need to make this to be asynchronous and that's it that's going to be the method to sign out and now i'm not handling errors right now but that's okay for now so what i want to do is in my login i want to able to not only to login to actually to register if i need to so for that actually let me update everything i will then log in firebase done and now what i need to do where i have to sign up method we just need to apply that to our login page so what i've been doing here is in my button i will create a div here i will put my button for the login inside that's okay i will duplicate my button and my second button will be sign up okay let's change the second button to be green just because and the change to be yellow [Music] okay so let me do those this element oh the this one i need to change the type it's not type submit anymore and it will change instead of submit would be add click i need to do something and what i need to be doing is [Music] from here i need to import the sign up and i'm pretty much sign up i will send my username and my password and that's probably the lazy one probably need to something like this but it should work in theory then make the button to look a little bit better let's change this class to be flex and we can change this one and this one to be flex grow actually no let's zoom with one half and here let's actually add a space x of 2. we have our login we have the sign up so in theory if i do another at email.com um let's call this fake123 let's put the same password if i click sign up i just signed it up to the page welcome another email if we go here to our firebase and i refresh reload we have now another at email we able just to sign up the user with a simple click at the bottom so probably we actually need to do something like this so let's refactor this a little bit let's make cons sign in up wow always i know we have to get a value rather push else imbalance with something like this could work but something that i just noticed is because this is actually exactly the same we can actually remove this and create another one go to come um we're going to be doing so i did that that means that here we're going to go to home and here instead of all this we're going to use go to home just not to repeat the code to be as clean as possible and we just can instead of scrolling all these we just can't design it up to the mortar enough so let's do a log out and let's call this third email dot com fade one two three sign up welcome to the email and that user is already created in firebase so just with that we are actually able to implement a firebase authentication through our app the next step will be pretty much just to deploy the application itself so let me just open my terminal i do legit status i believe i need to need to fix something just so get at everything hit comment dash m and i will call this um register done and there is another method that we can actually do with registration and that's actually the user profile so there is a way to pull up manage users and you can actually get the current user and you can get the profile so we can actually get the user and this is pretty much information that we have there we can get the email the photo url email verified and the display name but and the uid of course but display name is not there by default when you are doing local authentication you need to create that and that's updating the user profile that means that we need to get the current user and we need to update the profile that user and you change for example the display name or something we change the photoreal and probably we will do doing that in a future it's outside the scope right now but just to let you know that that's the way to get create a name for that but at this moment i believe more than enough the way that we had it okay so my let me do it push remaster there you go let me open my console let me cancel it let me go to my server it does my server don't remember brotherman.com there you go i can able to go through here excellent so let me go to my then release let me actually list everything here let me go to projects and i can do now it's a simple let's go to jethro by roman being my username and through here i should be able to go to my repositories and the view login is right there so let me just um you can see the rhythmic changes while we put it there but let me is it let me make it bigger there you go i will copy the url i'm going to make this bigger and let's do git clone this part we go to the view login i will start my dependencies and there is something extra that i need to do before we actually deploy and this is going to be really really important so australia's talking about dependencies remember that we actually know saving the firebase config we need to create the firebase config in here so in my case i will go to my source directory i will do this i could do use vi but you can actually use nano you're going to use nano tools so let's let's do nano firebase config dot yes how we call it inside the source directory remember where we actually save it and from that the only thing that i need to do is open my firebase config select everything and pretty much pasted it ctrl x yes enter i will get back one level npm run build you'll see right everything goes smoothly yeah everything is there let's go to my distribution folder perfect let me pwd let me save this one's somewhere else just in case and let me do now bi dc engine x configuration and let's zoom view login.configuration put your password there there you go if i remember correctly i need to do server listen import 80 and then i believe i need to do server name it's going to be you login is how i call it let me go to my i call it here let me go to my usage no user assigning method view login i call it oh before i proceed to i need to go to my digital ocean and what i want to do now i will go to here go to my domain and i will create the view login pointing to my server that makes it small probably should be bigger but i'll keep it like that for now oh something goes wrong i need to log out this login so how my browser keep the the session but digitization doesn't take accommodation for saving i don't know why okay let me try again let's do view login i'm going to do that one three create record perfect it's already there that mean and i can proceed with this one over there okay so another one let me login dot romantic that's in my case and then i need to go to the root and the root will be pretty much what i have my distribution folder i'm going to everybody give permission to that and i know that my index is my index.html let's go remember always finish with a semicolon so after i have that i do a simple location for the root and i will do try files understand uri dollar sign uri forward slash go to the index.html when i close this and i close this save it ng next dash t to test and canon load certificate for basic route you'll follow fail it permission denied oh i do sudo yeah missing so sure engine xt yeah he's working so to do suro ng next that s reload let's do let's verify this actually working oh before we let's do now sudo sharepod nginx your server if i find it correctly my view login is there so let me actually do four enter and it wait for a couple of minutes deploying the certificate done and that should be more than enough and let's close all this and let me open my it this let's do view on login dot roman dot com is already secure we can see the app if they log in they can do fake no we call it tutor at fake.com fade one two three enter welcome and we can access the secret page we can do log out i can do forward slash secret you'll send me to a login let me try now call it third i believe at email.com if you want to fake one two three login welcome to email if i do refresh go to login yeah i'm not saving the case so that mean let's do the other one let's actually create final at email.com let's call this again fake one two three sign up and yes we're able to sign in with a new user you go to the users finally survey there with the data they're actually signing in so with that and in under an hour we're able to have a real login using firebase basic authentication on the next video we will pretty much do it now using google authentication but for now i believe it's working enough remember in order to do the assignment you need to provide the g-hub url your application deploy this url for the application deploy you need to provide both and you need to change something i recommend change color change image and make this secret patch a little bit better i don't know put something different that just a simple lorem in there you can actually provide that and that will be great other than that i hope that you like it any question any doubt don't hesitate to reach me happy coding everybody

Channel: Learning with Rodo

Views: 640

Keywords:

Id: xWact5qZD8I

Length: 53min 9sec (3189 seconds)

Published: Sat Nov 06 2021