Vue 3 + Firebase Authentication in 10 Minutes

open authorization or oauth lets people give websites access their information on other sites but without giving them the passwords allowing them to log in with their other site's credentials it's pretty complex to set up your own authentication system because you have to worry about security encryption and a whole bunch of other things luckily for front-end developers we can easily add firebase and its built-in authentication to our apps in this video we're going to be building a simple view 3 app that lets users sign up for an account with either their google account or an email and password log into it and then restrict access to certain pages depending on the user's logged in state so inside of our new view app let's create a folder called views that contains our four different pages our home page a registration page a sign-in page and a feed page and we want to limit our feed page to only logged in users then to make our app display all these different pages let's npm install view router and then create a source slash router slash index.js file where we create our router and then define our routes then let's quickly add this router to our app by going to main.js importing our router and telling our app to use our router to make our different pages display in our view app let's go to app.view and include a router view element inside of our template and now if we go to any of the routes that we declared we can see the corresponding view component to make it easier to navigate between the different pages we can add a navigation section to our app.view and put our four different router links inside with the basics of our app setup let's go ahead and create our firebase project so we can head over to the firebase console and the link is in the description and create our project on this slide you can choose whether or not to add google analytics and then after our project is finally created we want to use this button to create a web app and there our project is created make sure to keep this page open because we're going to need the starter code in just a few minutes to set up authentication inside of our firebase console let's head over to this authentication tab and make sure that we enable both email and password and signing in with our google account now we're ready to add firebase into our view app inside of the terminal let's run npm install firebase and then go to main.js and let's go back and grab that code that was generated when we created our firebase project so let's copy and paste that firebase config and firebase initialize app inside of our main.js and we can just delete this const app that comes before initialize app and with that it's time to start the authentication process the first step in our authentication process will be allowing users to create their own accounts so let's go to our register.view component and inside of our template we want an h1 our email input and our password input we also want a button that allows user to submit and then finally a sign in with google button inside of our script let's import ref we want to make an email ref that maps to our input do the same thing with our password and create two methods one that registers with email and password and one that will trigger our google account oauth we're going to be using the firebase authentication api to create our user and this can be done through the create user with email and password function from the firebase authentication api in addition to taking firebase's authentication through the get auth method this method takes our email and password values and returns a promise we can use a dot then to cache a successful response and a dot catch to catch any errors and if we import use router from view router we can redirect users that complete registration to the feed page alright so let's try this out if we type in a valid email address and by default firebase requires a password at least six characters long once we submit and our page gets redirected and if we go back to the firebase authentication console we should see our new account inside of our database right after creating an account we're automatically logged in and this account information is accessed in firebase auth.currentuser by default this is saved in local storage to create some persistent across different sessions so if we open our app in another tab we'll still be logged in of course in a real app you want to add more validation and error messaging here but since we're just covering the basics let's move on to user sign-in our sign-in component will look exactly like a register component in fact we can just copy and paste the other code the only difference is instead of create user with the email and password we want to say sign in with email and password in our sign in page we also want to display some simple error messages if something goes wrong and we can capture these using firebase authentication's four error codes passed back in error.code we give an auth slash invalid email if the email is not valid there's user now found which is when the given email does not correspond to any user wrong password which is as you may guess when the password is invalid for the given email then we get auth slash user disabled which is thrown when the user corresponding to the given email has been disabled and we're not going to cover that in this video so inside of our sign in component let's create a value called error message and in our template we'll conditionally render a paragraph element that contains our error message to actually set it we can create a switch case inside of our error and switch based off those error codes that we just talked about now that we have a way to create users and sign them in let's now allow users to log out and this is ridiculously simple all we have to do is call firebase sign out and the current user will be removed to implement this let's add another button to our navigation bar since we only want this option to be available when user is logged in we can create a ref that changes every time our authentication state changes to do this we'll use a firebase hook called on off state changed which does exactly what it sounds like and we want to do this inside the on mounted hook so that we have access to firebase once our app is created so outside we'll define auth set auth to get auth and then we can say on auth state change inside it takes a function with user as a parameter and if the user is not null we'll set is logged in to true otherwise we'll set it to false meaning that there's no user so then we can go back to our template and add v if is logged in to our button inside sign out once again we just have to call sign out and for example we'll say router.push and just go to our home page so how do we make our feed page only accessible to logged in users we can do this using view router's navigation guards that run before each route is processed so let's go back to our router index.js file and where we see our feed page let's add metadata to our hook that we can access later we'll create a property named meta and inside this object we'll say requires auth and set it equal to true next let's add our navigation guard onto our router and we're going to be using the before each hook which runs before view router processes its routes and this hook takes 2 from and next and we can check if our 2 route requires authentication by saying 2 dot match dot sum and then checking if any of the records require authentication we can check the current user in firebase and if it's valid we can continue on otherwise we want to redirect our router to the home page using the next method so let's try this out if we log out and then try going to our feed page we get redirected to our home page but then if we log in with one of our users if we click feed we can actually access the page but we'll see if we're on the feed page and hit refresh we get notified that we don't have access and get rerouted to our home page and that's because by the time this initial page refresh happens our firebase current user doesn't exist yet to fix this we can use on off state change it again to ensure that we get a value so let's import that and create a method called get current user that returns a promise inside we want to set const remove listener to on auth stay changed get off and then have our callback inside the callback we want to remove our listener by invoking remove listener and resolve with the current auth state back in our navigation guard let's make our hook asynchronous and instead of checking the current user we can say await get current user now if we refresh our feed we see that we properly stay on the page with this working authentication system let's add oauth using google accounts into our app so where we're importing from firebase auth let's also import google auth provider and sign in with popup then on both our register and sign in pages when our sign in with google button is clicked we first want to create a provider using google auth provider and then call sign in with pop-up using auth and provider this creates that google pop-up that i'm sure you've seen before then when that pop-up resolves we can catch the result in a then similar to signing in this sets our current user to whichever account we choose and also returns the user inside result.user alright let's try this out so if we sign out click our button we'll see our pop-up and let's say i want to log in with this account when i click it we get redirected to the feed page and if we look inside of our authentication console we'll see the new account and also see that its source is coming from our google oauth how easy was that obviously there are so many different ways that you can take this project but in this quick bite size video we were able to get an authentication system working using view 3 and firebase if you have any questions leave them in the comments down below and if this helped you please subscribe to the channel and leave a like to get this video in front of more view developers

Channel: LearnVue

Views: 38,051

Keywords: vuejs, web development, technology

Id: xceR7mrrXsA

Length: 9min 6sec (546 seconds)

Published: Tue Jan 04 2022