EASY Vue 3 Authentication with Firebase ~ Login Form Vue JS Tutorial

what is going on fellow developers my name is telepotts and today we're going to be doing some firebase and few js authentication now as you can see on the right here we have this login um email password login need an account register here so we need an account so let's register quickly let's do um new at tests.com and we'll call it new123 let's hit register and we're going to say object object well that's useful let's click ok now it logs us straight in um actually welcome new it's grabbing the first bit of account and we go to the about page but let's say if we want to go back to login page now you'll see it takes us straight back to being logged in because obviously we're logged in so we log out and we try to go to let's say the home page you'll see it throws us back to logging page and let's say we tried to go to the about page also throws us back to the login page so it's authenticated and it's secured so without further ado let's get started [Music] okay fellow developers we're back and here we're going to create off our react app so we're going to use a few cli and say view create and then we'll give give our app a name so we're just going to say view off youtube hit enter and it's going to create our app but first it's going to ask us some questions now we're going to manually select some features we need the router to be able to obviously or um swap between routes and different pages uh autogra needs uh css preprocessors we actually don't need it i just want to use it for convenience um and let's hit enter we're going to choose few free we're going to be slapping through this we're going to choose node sas and we're just going to hit enter on the rest of these and there you go now it's going to start creating our view application while it does that we need to go to firebase.google.com and we're gonna click on go to console now this is where we're gonna set up our firebase application so let's click on add project now we're gonna give it a name let's say view off youtube and let's click continue let's turn off enable google analytics for this project we don't actually need it for this you you're more than welcome to keep it on if you want let's click create project now this could take a minute to create our project so let's quickly just shrink this back down um and have a look at uh this how this going on it's still going that's always good i'll see you once the one of these are finished okay guys so the firebase application is now finished so the first thing we're going to do is we're going to head over to this little cog here and click project settings we're then going to create a new app so we need a web app so we're going to click this little web boy here um and then we need to give her a name so we're just going to say uh front end now we're just going to click register app so you can have multiple apps within your view or firebase instance um which you use um with different configs as you can see here it is giving us this let's just click continue to console we need it we're gonna need this soon but for now let's head over to authentication over here click on that and it's gonna just say yeah get started let's hit get started and it's going to bring us over to this page now for this tutorial we're going to be using email and password but in the future we're going to try out some of the google stuff and maybe some of these other ones as well if you want them please let me know which ones you want uh in the comments section down below so to enable this let's click it and we can select enable here now you can also do password lists where you get emailed a link to login um we're not gonna do that we're just gonna select enable hit save and that is all we need to do for this set so that is now done so let's just leave that there and let's shrink this back down as you can see our terminal or our few few cli has finished running so we're gonna see the interview off youtube hit enter i'm going to just clear this now and i'm going to run mpmi firebase because we're going to need the firebase package to be able to obviously utilize firebase's um features so let's hit enter and i'll see you once that is done okay everyone that is now done so next up we just need to open this up in your text editor i'm going to use visual studio code and then i'm just going to concatenate the function run npm run surf now what this could do is obviously start our development server at the same time so let's hit enter and as you can see this is now opened up so let's just stretch this out to where we like it there we go nice let's close this welcome let's open up our source and let's delete the things we don't want so inside of assets we could delete the whole assets folder we don't need that for this tutorial inside of components we can delete that too because we're not going to be using components in this tutorial uh let's head into fuse and go to home and let's delete both of these and just put home hit save let's delete the component input and also that for now actually not delete the whole script tag just for now just so because we don't need it right yet we'll add it when we need it there we go so that's gone and as you can see let's refresh this page login's not going to be an actual page so let's just remove that and hit enter here we are we're home and we get these two pages so we can navigate between them but we need a new page we need a login page and a register page um but before we do that let's set up our firebase so inside of our main.js file underneath the router we're going to import firebase from firebase now you can import specific um things like authentication but for this tool again we're just going to set up um our app so once we've done that we need to go back to view off here uh let's open this sidebar click on the project go to project settings click off this scroll down and click config now in the config we're going to copy this firebase config here um please don't try and use mine cause i will be deleting this app as soon as this tutorial is done and it will not work um so we've got our firebase config let's now say firebase dot initialize app and then we're just going to pass through our firebase if i can type firebase configuration hit save and that is all we need to do in our main.js file so let's just close this uh go back here and then head into our app view so we don't actually need this we're going to use everything from inside of our um we don't need a route a navigation i think because i think we're going to put inside of our router for now um so we're going to do it page specific obviously you can do what you want you can add in if the noise to sort you out but what i'm going to do quickly is i want to style this up just a little bit we don't need this navigation anymore so that can go we can then say anchor tags colour of style inherit because we're just going to be setting the colour of everything to white let's take this colour here remove that whole thing and above app we're just going to say body we're going to say background is equal to that and our color if i can type is equal to white hit save and there we go we've just reversed how it all looks which is perfect so there you go we've got that done that's now finished the next thing we're going to do is we need to actually set up our check to check if our authentication is changed um but actually before we do that i've just thought we may want to set up our fuse quickly so let's create a new file let's call it login.view run view and then in here we're just going to put dot login and i'm just going to say login that's all i'm going to do for now what's going to create a register so i'm just going to say register dot view and i'm just going to put in here um view and i'm just going to write dot register and type in here register for now now let's head over to our router so we can set up the path for this now we don't need any of these um bloody comments we don't need comments we know what we're doing he says um and let's actually start creating our new path so we need a path which is for our login page and we need a name for this which is just going to be login if i can again once again i can't type today there's something wrong with me let's type in component and what we're going to do is go to an arrow function into an import which is just lazy loading our fuse when we need them let's go into fuse forward slash login dot view now we're going to copy this we're going to paste it oh it pasted it in the right place and we'll just let you go swap out all the logging bits for register or register register and then this bit i'm literally going to highlight press ctrl or alt d or command d sorry and i'm going to just do register there there you go that's swaps and both at the same time make spaces and tabs uh where where where indexed log it oh and login for you oh you'll kill me uh confirm indentations to tabs uh and that'll do they got their tabs now they're all tabs now what register two god this thing hates me confer indentations two tabs referred tabs tab so for spaces sorry guys i'm sorry um let's close that and close that and close that now back in our app view right so now we can actually go to the login for you we can say forward slash login and you can see we can go to login we can also go to um register so we've got our register but we can also go to home so as you saw here where he can be at home which isn't any we wouldn't normally be an issue but a promise we don't want people to be able to go home without registering or logging in so let's in here let's now create our scripts i'm just going to say javascript hit enter and in here i'm going to say setup so i'm going to be using the composition api for this as i do i'm going to then const router is equal to use router i'm going to say const route is equal to use routes now these are coming from the few routers so we need to import those so i'm going to say import use router and use root from view oh fine view hyphen router hit save and that should be fine yeah we've got an error but it's because we ain't using them yet we're then going to create we're then going to import on before mount a lifecycle method from view and if we now come down here we can say on on before i'm gonna move my keyboard over i think it's my keyboard slightly slanted view on before mount and in here we're just gonna say fire oh we need to actually import firebase too sorry i'm missing one let's import firebase from firebase now down here we can say firebase.org everything we're going to be doing to do if authentication will go through the dot off um route or method and then we're going to say on off state change so what this does is it checks if a user signs in or signs out and it will check if they have we're then going to pass through you sir i'm gonna do an arrow function and in here we're just gonna write if we don't have a user so if if we've not logged in if anything changes or we've logged out and we haven't logged in we're just gonna say router dot replace forward slash login so basically we're going to redirect ourselves back to the home page then we're just going to say else if and we're going to say route dot path is equal to forward slash login so if we are logged in if we have a user we're going to check if the path is equal to login or if the route dot path is equal to slash register we're then going to say let's close this sidebar so you can see that a bit easier uh four slash register and then i'm gonna say router dot replace home so what we're doing here is we're saying if it's if the path is equal to uh login or register but we are logged in so we have a user right we're going to then send us home because we don't want to go to the login or register pages we're already logged in meaning this pages can't be accessed once you're logged in but here we can say when we are logged in we'll go to our so now we've gone to a login page let's try and go home again so if we now come over here and we try to go home you'll see it redirects us straight to the login page meaning we can't actually access the home page and that's already secured our application that's all we need for the app.view file so the next page we're going to is our register for you because we're going to need well actually we're going to go to our login future one login here so let's just add in everything we need here so we've got a login let's just do h1 and just give it a proper log in there so give it a proper title we're going to give a form um and we're going to give it a on submit so we're going to say at submits dot prevent is equal to log in there you go and then we're just going to create a couple of inputs we're going to say input text and we're just going to say placeholder it's going to be equal to email we're then going to copy that put that underneath and then we're going to have a password and again password let's shut this side bit again uh let's spell password correctly and finally we're gonna have one more input but this one's gonna be of type submit and the value is gonna be uh login we then need a paragraph tag in here and we're just going to say need an account question mark need an account and then we're going to pass through a router link um and we're just going to say a register here and this is going to go to forward slash register hit save and there you go so now if we click register we go to the register page let's go back um as you can see this is now all set up we can hit log in and it won't do anything because obviously we don't have this login function yet so let's create one so let's go in our script up above here we're going to start by importing ref from view and then we're going to import firebase again from firebase we're going to go into export default and we're going to set up another setup here and inside of here we're then going to write constant email it's equal to reference this is going to be bound to our email um input there we're going to have cons password which could be equal to ref as well as an empty string we're going to create the logging function we're going to be using to submit our form and we're just going to say firebase dot or so we're going to break this down firebase hello break down dot off then we'll say dot sign now this bit's the important part we gotta sign in with and we can choose a lot of different things here pop-up is what we use for like google and stuff with uh stuff you can sign up for phone number and email link but what we're gonna actually do is sign in with email and password so we're going to hit email and password and this takes two values this is going to take a username or an email and a password so what we're going to pass through it's going to say email dot value and password dot value well i'm gonna say dot then and we're just gonna say data we're just gonna console log it for now console dot log data and we're then gonna catch if we get any errors so we're just gonna say error we're gonna alert the error dot message so all we're doing here is log in as assignment effort thing yeah so let's create a return quickly and just say login email password so once we've got that let's just try it out let's just hit log in it's going to say the email address is badly formatted because we don't actually have one so let's say test at test.com but even if we do that it's still going to throw an error because we actually are not binding these to our input so for email we're going to say fee model and this is just going to bind our email which we pass through our props here to our input we're then going to pass through another fee model also not our props our data and then we're going to pass the password and buy into that so now if we type anything in here let's just do test at test.com and hit login it's going to say the email is badly formatted again i think it's because we part of two let's say test one two three and hit login the email is badly formatted why is it badly formatted i assume that means it's just not in the database it's coming back for weird error there but let's try and register now so we've got our login it's not working because obviously we can't log in we have no username so let's go to register and set that up change your password a data breach on your site yeah i know it's it's because i like hacking myself so let's head over to the register view now in here we're actually going to copy the login view so we can actually copy this whole bit here and paste it in here now we just need to replace the login with register we're going to replace this with register because we'll create a register function instead we need the exact same email password email and password but we're just going to replace the value with register and then we're going to say have an account instead of need an account i'm going to replace that to login i'm going to say log in here there you go so the styling is now done for this one but let's actually get the functionality in we don't need these style tags either because we don't we're not actually styling this one up so we're just going to import firebase from firebase we're then going to import ref from view and finally in the export we're just going to say setup and we're going to create like we did before the constant email should be equal to an ref with a uh empty string and a password which will be ref with another empty string we'll create the register function here register we'll set it equal to an arrow function not minus an arrow function that wouldn't make any sense there we go bam register now we're going to do a similar thing here so down here we're going to say firebase we're then going to go underneath and they dot off again everything we do within the orth realm comes through the dot off um method we're gonna say dot and now here's the difference here instead of doing sign in we're gonna do create user with email and password now we're going to pass the email.value and the password dot value here and then we'll do dot then and we're just going to say user and then alert user now this might not work because we're actually gonna it's actually gonna redirect us straight away when we log in uh so we can say alert dot or error dot message if any errors come up so let's see what happens what we've got here register is not assigned yep so we need to actually return this from our setup and say register email password just like we did before and here we go so let's just set up with test at test dot com password will do test one two three and let's hit register object object that means we've actually succeeded in logging in because this this alert is actually a um user so if we just did user.email it's not going to change because we haven't done anything but now we are logged in you can see it logs us directly in so let's go slash login now and you can see it redirects us back to home because we're already logged in and we can't get back there so now we need to set up a sign up method so let's go to our home here and inside of our ho sorry i clicked on the wrong thing here we go let's click on our home here and now inside of here what we want to do is just let's just style it up let's add a h1 and say welcome and we're going to just for now we're going to just well we're not going to do anything we're just going to say welcome oh user we haven't got we haven't got their username yet we're going to create a router link to our about page we're going to say two that's not two two forward slash about slash about there we go and then we're just gonna say about in here and we're gonna have a break and under here we're gonna say button dot log it log out sorry not login log out um and in here we're just gonna say log out now we're going to create a method called um log out so we're going to do on click of the button when we click it we're going to say log out now let's go down here and let's set up our script and in here we're going to have a setup as usual which is going to just return nothing for the meat time and let's go up in script we're going to import ref um so we can create some variables from view we're then going to import firebase from firebase and inside of our setup here scroll up a little we're just going to say const user is equal to firebase dot off dot current user so what we're doing here is we're checking for our user we're going to try and find it and we're going to create user current user so what we're doing is from firebase we're asking if there's someone logged in what is their username obviously if we weren't logged in we wouldn't be able to get to this page so we don't need to actually do any checks here yet let's say const name is equal to ref and that will be an empty string and then we're just going to say if user so if the if the user exists oh actually so we need to actually import on before mount again so on b4 mount let's copy that copy that um and we're doing an arrow function excuse me arrow function and then here we're going to say if user we can actually move this inside of our setup here on before mount as well as it will make more sense so we'll say if user we're going to say name dot value is equal to user dot email dot split and we're going to check for the at symbol so we're going to split from the ad symbol and then we're going to get the first value so we're going to get any the username is going to be the name before the split and we're just going to return name so up here we can now change this to be name hit save and there you go it says welcome test because we are called test obviously we've got a log out button there so let's set up the logout burn so const log out it's going to be equal to an arrow function which is just going to say firebase we're going to breakdown.off dot sign out so it's as simple as calling sign out and you could end it there but we're gonna do a dot then and we're gonna just pass through this and we're just gonna say log sign out now we'll never see this because we're actually going to be um it's going to redirect us straight home but we just add it there anyway just so we know and then we'll alert an error.message here as well so hit save log out is defined but never used yeah let's just say a log out here save and there you go so now if we hit log out you can see it takes us back to the home page and we can no longer access the login page so that is cool so let's just try log in again it's test test.com the password is test123 let's hit login and there you go we'll log back in we can navigate between our page well we could if i put a link to go back home from this page but as you can see we can now log in we can create new users so let's log out let's register a new user let's actually do my email address at gmail.com and we'll just go again do test one two three we're gonna register and that object object that means it's locked we really should change that to be like user.name or something um but here you go we're logged in welcome tyler pods death and we can go to the about page we can go back if we use the arrow keys i know we should probably add a link in there but again it's just for demonstration purposes so as you can see guys we can now log in and use um firebase authentication within our few js application now guys if you enjoyed learning this project don't forget to leave a really big thumbs up on the channel it really does help and it really just saw the channel out then don't forget if you want to see more you want more tutorials like this then don't forget to smash that subscribe button that way i know you guys like this video and i want you guys following me just to see more um finally guys if you have any questions if you get stuck if there's something you don't know about just saying you want to learn more about don't forget to drop it in the comment section below and i'll try my best to get back to you as fast as i can but anyway guys thank you all for watching this video and peace out [Music] you

Channel: Tyler Potts

Views: 13,031

Rating: 4.9459457 out of 5

Keywords: webdev, javascript, javascript wizard, wizard, css, sass, scss, js, vuejs, vue, reactjs, website development, website design, app dev, app, app design, app development, mobile app, native, web developer, app developer, developer, programmer

Id: FMPHvxqDrVk

Length: 25min 23sec (1523 seconds)

Published: Sat Jan 09 2021

Reddit Comments

[u/nad_lab]

good stuff, thank you!