Learn Vue - Towards Vue and Firebase Authentication - Google Authentication

hello and welcome to another tutorial so here we're going to explore view authentication systems using firebase Google authentication so here we're going to cover the view X so I'm going to give you an introduction to the mod using view X in a modular way using a modular approach we're going to configure the view router as per normal and in this tutorial we have a slow introduction to beautify which is a material design component framework that we can incorporate into view and then finally obviously we're using google firebase authentication so this is a full login system we're developing here via firebase in that it will have the ability to sign up users it will log them in and then it will log them out so using firebase back-end as a service can speed up application development as it eliminates the time-consuming back-end development or configuration hopefully I will show you how easy firebase is to set up so we end up with a login system where your application includes a sign up login and logout feature so in this tutorial I'll go through how you can work with firebase authentication to allow and deny users access to different resources components pages in your application so lastly I'll just say this is not intended to be a complete guide but rather an overview of the basics to get you up and running so that you can get to know view and firebase and understand what the framework and what firebase has to offer if you have any other tutorial suggestions then please let me know in the comments so as per normal there is a timeline that you can utilize in the description of this video so please skip ahead different sections if you're comfortable with what I'm about to show you so I do assume that some viewers may have never utilized view before so if that's the case then please head back to other tutorials to get view installed I will start from complete scratch here so we will just start a new project etc so if you're comfortable doing that then please skip to the next section so now I'm just going to show you how to set up a a view project and take out some of the clutter that we don't need so very quickly then if you are completely new to view you're going to need first of all no js' so download that and then head over to the view CLI and then just run this command here NPM install and you'll be able to then install the CLI for view and then we can get started so that's where we are in this tutorial so let's head into our code editor and start project so on my C Drive I've created a new folder called firebase or so I'm just going to go into that I'm gonna copy that directory and then open up my command prompt and then change directory to that directory so now what I can do is I can now do a view create and I create a new project I'm going to call this firebase oh okay so that's going to be able to project in our folder you can go ahead and select the default you could have just used the flag there but I didn't so I just select default and that will definitely now create your new project so the next task is installing the dependencies and we're going to do this for this project all at once so first of all we're going to install beautify so our material framework and then the Rueter firebase and view X store okay so first off let's install beautify so let's just make sure we're in our actual project so let's change directory to our project folder and then from here we can run beautify so you add you I okay so we're just going for the default recommended once that's completed we start this server and that should then just confirm its being installed so NPM runs serve so once that's done let's head over now to our localhost and this confirms that beautify has been installed successfully so next up let's install the Rooter and the store and firebase so back in the command prompt type ctrl + C to close the server it will close okay okay so from here NPM I firebase we're going to need to install view Rooter and view X so just make sure in your project folder before you run this command so now I have everything installed let's prepare firebase so we need to create a project create an app get the API details and then configure the authentication services so we're just going to turn on the ability to utilize Google authentication so head over to Google type in firebase sign in to firebase and then create a new project so just quickly running you through how to create a new project so here I'm just going to create a a view or project and press Continue and just use the default settings for this okay so that takes a couple of seconds I press Continue now I should be taken to the admin panel so from here it says get started by adding firebase to your app so we're going to use the web option here and my apps just going to be called view auth so I don't want to set up the firebase hosting in this case I'm just going to register this app and now we should be provided our API details so this is all the details so I'm just going to copy that and prepare that ready for for later so now let's go back to the console so secondly we need to just now add the authentication so I just select authentication and sign-in method and select Google so all I really need to do is enable it at this point and press safe not forgetting to first of course just select your project support email and then you'll be able to press safe so now we've selected authentication you can see it now is enabled so that really is it with firebase we now have a back-end server that's going to deal with all the authentication for our application when someone signs in they'll be added to this list of users if you go down you're using the free accounts Park so I think there's around about 10,000 signings per month for free so it's quite generous for small applications so now we're going to set up the route of configuration for this application is very simple there's only going to be one route and that is to the home instance so we first need to install view router which we've done then we create a new route route Egeus file and then add the Rooter to the main j/s we then create a view which is going to be called home or an instance called home inside of a view folder and then we need to add the router to the app view instance so let's go ahead and open our project folder so I'm just going to be utilizing Visual Studio code so open this folder okay right so now inside then so first of all let's just get rid of some of these things that we don't need so the hello world view go to our app view you'll see that there's loads of stuff here so let's just keep the V app in place and get rid of everything else now we can get rid of the import hello world because we've just deleted that and we don't need that components anymore and this data can also go so that's where we were left inside the app top view okay so first of all then let's add to the main project a new file called Rooter Jess you could call this route if you like and I'm gonna use a lower case okay so now that's in place so also going to create a folder called views you could call this pages if you wanted to that's going to have inside of here components that the Rooter will route to so one of these will be a component called home dot view okay so that's not that in place now so now what we need to do inside of our Rooter is tell the route tell the router that the home page or the home view is available at a certain URL which is going to be the default or the slash or the home directory so go inside the router so inside of our root address file first of all we import view from view and now we then import the router from view Rooter and the view route of dependency and now we import home so we want to import home from our views make that available and now we add the Rooter to the view instance and now creates our new Rooter so our new router has mode history so that we can make nice looking URLs and then we have routes so does anyone route that we want to build and that's going to be the home path slash and we're going to name that home so we're using named routes so that we can name this on other files and access the path if we're for example making links to the home page and then we want to connect this now to the component home which is the import home here which is the home instance so that pretty much sums up our route Egeus file so now let's go ahead into the main jazz file we just need to import that Reuter import Rita from Rita okay so now we've imported that in now we can put it into our view instance here so Reuter and there we go so now we need to actually add our views to our our screen our page so we go into the main app view so at the moment and what we're going to see is absolutely nothing so we need to import our views so here we're gonna have Reuter view so this is where our instances or our pages are going to appear on the page smack in the middle so now that's been imported in so what we should have now is access to the home use of when we access the home page of course at the moment there's nothing on this instance so let's just add a template and then just give it a div just add something inside remember that there needs to be an element inside the template otherwise this won't work so let's just now turn this on so npm runs up okay so the server took a couple seconds to build so we now go back into our page and you can see now where we used to have the view 2phi page we now have a SDS blah blah blah so that's what we got inside of our home page here so everything is now connected so now we're going to move ahead to the navigation bar so we're going to create in navbar components and then import the components into the View jeaious components and then also just quickly go through view to fine so let's start off building a new components I'm going to call this navbar dot view so this is just going to hold the navigation bar the top section of your page so if you've had over to beautify you'll find that in the get started menu section there are some pre-made layouts I've selected the baseline and I'll grab the code from this baseline and I put it into my my home dot view component so I've just straight copied and pasted that into there and you can now see I've got this running here so as you can see on this page we have a header we have content and we have a footer so the header and footer that's going to be placed inside of our app top view so we're gonna have header and footer and then the routes going to be in the middle because that then refers to the other components that we have in our application so the main section so let's go back to the home so I'm just going to get rid of this vide raw so that was the left navigation bar that appears so I just don't want to include that in this application so I'm just going to get rid of that that now leaves me with the V app bar this is the menu bar at the top so I want that to appear on all of my components so I'm going to put that into the app top view and that's going to appear up the top just before the views so I'm going to put that right there and once that's in place I then also want to grab from here the footer so let's just grab the footer cut that onto my amp top view and you can see here that I placed it just below the root of you okay so now that's in place it shouldn't have changed anything I don't need to refresh but other than the menu now isn't working this is now all in place so to transfer this app bar to your navbar we're simply just going to remove it from the app view and you grab it all and then transfer it to the navbar beyond you're going to need a component here so a template and then the app bar okay so that's my navigation bar and of course now what I need to do is just import it into my project so to do that I import the navbar from the components navbar and then I create the components navbar so once that's done I just need to now define where the navbar is going to reside that should now continue to appear on the screen okay so that's just an example of adding components to your two components essentially by breaking them up into smaller components they become a little bit more manageable of course you could do the same thing with the footer create a footer components and then import it in like we have done the navigation bar so now we're get into the interesting part so here we're going to prepare firebase first of all set up a firebase jazz file which is going to have our API details which we can then pass to our application and then we're going to create a crater off J's file so firebase is going to manage monitor whether we are logged in or not so this is essentially what this file is for if we are logged in its we're gonna be recognized as logged in and function is gonna happen and then when we are logged out this is firebase is gonna capture that and then run the commands to log us out or make sure that we are logged out of the system so once we've done that we're going to prepare the view X store first the structure in a modular way let's start off by adding the files that we need so firebase jeaious and then the OAS file so inside of our F dot JS file so let's just add firebase to our project so import firebase from firebase app and then we can add other dependencies for example authentication the firestore and so on and then we need to initialize our application with our API details or a grab that in a second and then export these details so that we can utilize it within our application so let's just head over back to the API so now back in our firebase admin panel here if you just select the project settings and make sure you select general down here your application you've got the details right here so you could just copy and paste all of these into your application right there so needless to say these details won't work if you do try to utilize them you'll need to get your own API details right here so now we've done that let's head over to the off page so as I previously mentioned firebase is going to manage and monitor whether the user is logged in or not so all we need to do is point it to the right facility or the right function wherever someone is used is actually logged in or not so if it detects someone's not logged in it's going to log out if someone has logged in it's going to initiate the login script and log that person in within our application so in this authentication page here we import firebase details so that we can connect to firebase etc and we're going to set up the store in a minute so that would be the case and now we're actually going to set up the the authentication the state change so like I said firebase is going to manage the state change so it's going to detect the state changing whether someone is logged in or not so all we need to do is set up a simple if statement so if there is a user if the user is logged in then we're going to grab the the details and we're going to put that into our store so if there isn't any details then the user must be logged out so therefore we're going to log out a user so when someone presses that logout button firebase is going to detect that authentication change and it's going to run this user log out so when firebase detects that someone's logged in then it's going to run this user details okay so now that's in place let's head over now to our store and set this up so first of all we're going to just add a new folder and we're just going to call that so inside of our store we have a an index dot JSP file so that's the root of our store and now what we're going to do is we're going to moduli x' this so that everything feeds into that the main store here and it just makes applications once they start scaling a lot more manageable to manage the storing components so inside of our store gonna have a a user folder and then inside of that we're going to create our index dot J's to include our store within the user here so firebase is going to manage all the authentication for this system so what we need to do is once someone has been authenticated is captured those user details in this case we're just going to capture their their name and also their profile picture from Google and also we need to store whether someone is logged in or not because we've in the system we want to set up different authentication potentially on different views instances we have or pages sorry we have in our project so we might only want the user to access certain pages if they're logged in so we need to know whether they are logged in or not so we capture that within the store so essentially the actions in our store once firebase determines or sees that someone has logged in we then update the store and then once firebase determines or recognizes that someone's logged out then we just need to update the store again that someone's logged out so destroy the details from the store so those are really the two main functions here and what we're storing within our view X store ok so now we're inside the store index the main store so from here we're going to import everything else so here's just one component you might have many different components in the store this is just a design in that you could utilize potentially if you wanted to kind of separate your store if it's getting rather large and larger projects so here in the main store index page we're going to first of all import view and then view X and then import the store and any other stores that you might have so once you've done that we then just status set up store as per normal so we don't need to include anything other than modules so the module we want to include is users and that's from this store user and then we simply just export default store so that's all that's included in your in your main store J's file so if you now head over to your user index.js file so here we're going to setup the store so first of all we're going to need firebase so we import that in and then we're then going to set up our state which is just going to include the user profile so here we're going to store the user name from Google and also the Google profile picture and then secondly we just want to also store whether someone is logged in or not like I said before within our application we might want to protect certain pages or do things based upon if someone is logged in or logged out so we'll just keep this in the state so that we can recognize if someone has logged in or not okay so I've now gone ahead and just made the framework for this store so we're gonna be utilizing getters mutations there's gonna be two actions login and logout and then we've exported the details notice I'm using namespace true so because I'm using this modular store system view provides us this namespaced option so that we can access our store utilizing the user in this case name so we can access this store by name so the first thing we're going to add to the login is we're basically going to check to see if someone's logged in if they are logged in then we don't actually need to log them in so if store state logged in so if this is true then so if this logged in is true then we're just basically going to return and obviously they're logged in so if we now determined whether someone is logged in or not using this if statement here so again if they are logged in then it would just return if they aren't logged in we now want to initiate a login so first of all we define the provider so have a look at the firebase documentation for this if you're using other providers but here we're using the Google provider so we put that into a variable and now we can actually try to login so we're going to use a pop-up which is going to appear on the screen and that's going to show you the traditional Google login username and password login screen and that's going to appear like I said in a pop-up so that then appears then if there is a problem we try and catch it so that's what we actually need to run to actually create or initiate the login so this action here is called login so what we need to do now is build a link on our navigation bar so that we can press it and activate this login sequence so we need to try and access that login function so we need to pass that information over to the nav bar so remember we start from the app so first of all what we need to do is import the we need to map actions from our view X store so we mapped the action so we now have access to the actions from a view X store so once you've done that we then utilize this method and we map options now we use the the name user so if you remember earlier inside our user store we use namespace so we can actually name this store inside of our app here so we're going to use the the actions from the user store and we want to access the login function so now we pass that over to the nav bar using colon login equals login so now we have that available that proper vailable so now when we go into the nav bar I've created a simple button here click equals props login so by pressing this button it's now gonna have access to our function in our store and initiate the login sequence or the login function so now when you head back into your application here I'm just using incognito because I'm already logged in so if I select login now it should activate the Google login and then from here we can of course log in at the moment we've not connected that so that's the next thing that we need to do I just want to point out that if you are following the guide at this point you will find that you might have this view so it looks as though the beautify is not working correctly so there is just a quick fix to that if you go into the main J's file you just need to import the all of you to Phi and then use beautified before you start the new view instance and that way when you go back and refresh if I save this you go back and refresh it will work okay if you're interested in reading why that is then head over to Stack Overflow we'll just type in this header here and just read some of the answers that it's providing potentially it's likely experiencing a problem with the order of the operations so let's just move on so now we have the ability to actually log in or attempt to log in we need something to happen once we're logged in so again firebase is going to monitor the state whether you are logged in or not so if you are logged in then go back to the orpheus notice that we're going to commit and run this user details so this is basically a mutation so this is going to collect details from the once you've logged in it's going to collect the user name and the user profile image and we're now going to put that within our store so we're going to capture that and make that available in our store so we now head back to our user store and above where we added the login we're now going to add the user details mutation so we take in the user information and the first thing that we need to do is we're going to change the state of the logged in variable here to true so if we do get details passed to this mutation it means we are logged in and therefore we need to change logged in to true so that's the first thing that we do and then we basically get the user profile and we add some details so first of all we're going to add the name so we had to use a probe profile name and then we add the user profile photo URL so this is the Google URL image you have for your Google profile image so that's now going to be placed with inside our state the user profile object here so now we have those details available within our project so an example here of gathering information from our state I've created to get a hit called user profile and we're returning and the user profile information so now what I want to do is output that on for examples a home page so when we are logged in we can see what the profile name is so this getter is going to retrieve the data in our state in our user profile state if available and now we can call this so that we can return the data from our user profile within our view so if we head over to home you can see first of all we need to import map getters from our store we can then make the data available so again we map getters from the user store and then basically we want to access the user profile data inside of our getter so that data is then captured here and now we can output for example to use a profile name or if you go back into the store we're capturing the name and the picture so those two things can be now outputted so here I've just outputted the name just to show those working if I go back here I've logged in you can now see it's taken the name from my Google profile and as I've now stored it in my application and I'm now out personally in here because I'm logged in so to recap what's happened so far first of all we started by creating the connection or building the parameters for our connection for firebase once we've done that we created the off j/s so here we imported our connection details and the store and here what we're doing is firebase is monitoring the user login status now a firebase now it finds that someone's logged out then it's going to commit the logout we haven't built yet and if we are logged in it's then going to commit the user details so imagine we are logged in it now runs the user details mutation so here we take the user details that's been collected from Google because you've logged in and what we do is we change the state of the logged in to true so we are logged in the system now thinks or it can be accessed the system can access the fact you now logged in and now what we do is also we change the data the name in the picture in our state to include the information that's been retrieved from Google and then finally I just showed you how to create a getter so we created the user profile Gesser to collect information from the state and then what we did we went to the home and we imported the gap the getter from our store we accessed access to get a via the name of the store a modular name and then basically we got the user profile information and we prepared it so that we can then access it and display it on our page or of you or our component however you want to call it so now we need to add the functionality within our login bar or yep sorry our navigation bar so that we can press login it logged us in obviously we want the login text to disappear and now say logout and also what we want to do is to show the user's profile image so to check if someone is logged in or not we obviously need to check whether the state logged in is true or false so we can it need to capture that so we're going to create another getter so this time it's the logged in getter we're just checking to see if they are logged in a lot or return the information that is stored in our state true or false so now we need to set up the app drop view because we want to pass this information over to is in that bar so we need to also now map the getters as well as the actions so because we want to display user information on on now bar we create this new computed here and we map the getters from the user store and we want to map across the data from the user profile and check to see if they're logged in or de logged in state true or false so we're now going to pass that information across to our nav bar so now we're passing all the data across to the nav bar log in log out use a profile and logged in of course we're not configured to log out yet we'd do that shortly but we just put that in place now so now we can head over to the nav bar again and this has now been completed so what we have here is a menu whereby we have the user profile picture being displayed with a drop-down with a button for logout and what we have here is a and if so if the user is logged in so if logged in equals true then this information here in this V menu is going to be displayed now if that isn't true if logged in equals false then this button is going to appear where you can log in so now if we test this we can now see we have the because I am logged in you can see that I've got the profile picture here from my account and I can click on it and I have the logout option so I can click on logout obviously that doesn't work yet because we haven't configured that functionality so that's what's next so let's remember that if firebase monitors and sees that the user has been logged out by Google or is not logged in then it's going to initiate the logout function so this is going to be a simple case of going into the user state here and just removing everything from the state and returning logged in back to false from true so back in our store our users door we've created this new function here logout this new mutation and we've basically changed the state of the login to false and we've removed all the data the user profile object here so now technically we are logged out of the system so here's how we look out so we just created the the logout mutation so that's going to just delete or remove all the details from our state so to actually log out what we do essentially we tell firebase that we've signed out so if we press logout we tell firebase we've logged out that's going to change the state remember so if we go back into our earth so if we tell firebase we've logged out firebase is now going to change its state and to logged out and then now we're going to commit the actual logout mutation that we've just created so that's the flow we tell firebase we've logged out it then makes this decision here this our statement here so we're now logged out so it now runs the log out which then if we go back here in our in our state here then we run this here which actually then removes all the details from our state here okay so hopefully that makes sense what's happening so we're running this logout so we basically tell five ways that we've signed out so that's what we need to now create remember that I'm just repeating myself now remember that then firebase will detect that on monitor that and now we've logged outs and then it will run the logout mutation and remove all the data from the store okay so now what we need to do is hook this up so if we go back into the app view so at the moment we've got login so what we can also do now is add logout to this and of course we've added now this method so that should now be available up here so now what we can do is we can call that from our nav bar so in on nav but I think we've already created that so when we click on logout it runs logout okay so now what we can do is head back here and hopefully we should be able to log out so now let's just test this I'm logged in at the moment I can select and log out my name disappears I can then select login obviously remembers my login details and now I'm logged back in again so here's a simple example of protecting elements on the page for example so here we have a V if and else so these are two banners from the beautify framework so we've created two banners you can see here this one's going to say unable to verify year as a real person please login so if you're not logged in its gonna show you this if else if you are logged in it's going to show you the profile name and has been logged in by Google authentication so down here before we included the user profile information to access the username so now what we need to do is also now access the second piece of information which is the user profile okay so sorry logged in so let's just take that go back to easy home so we can have logged in logged in we're gonna take on okay so now we have that information being passed so we're going to check to see like I said if someone is logged in then it's gonna show this next part here yes if they aren't logged in then it's gonna show this message here so we go back to our store here you can already see that it says you have been logged in so if I just log out you can now see it is saying the opposite unable to verify you as a real person and then when I log back in again it comes again so that's the simple way of protecting elements on the page for example

Channel: Very Academy

Views: 2,954

Keywords: vue auth, vue firebase, vue tutorial, vue authentication, vue js, firebase vue

Id: bEMDlH2SkKc

Length: 43min 24sec (2604 seconds)

Published: Thu Jun 18 2020