Vuex 4 & Firebase Auth Tutorial #8 - Login Action

Key Takeaways

all right then so now we have our sign up action right here when a user signs up and when a user signs up firebase sends us back the user on the response so we commit that mutation set user and pass in that user so that we update the state right here to be that new user who's just signed up and that happens so now when they sign up our global state becomes that new user and then we can access that user wherever we want in the application now what i'd like to do is move on to the next action which is going to be the login action and this is actually going to be very similar to this one right here so first of all we need to import another function up here from firebase and this one is called sign in with email and password so sign in with email and password like so all right so now we have that i'm going to create a new function down here so comma and then async login like so we take in the context object and also we want the email and password on the payload so let's destructure that like so and then the inside of the function is going to be almost identical to this one so what i'm going to do is copy all this and paste it down here so first of all let's change this to login action and then over here we still get a response the function this time though is called sign in with email and password we're still passing the auth object as the first argument then the email then the password then we're logging out the response here we don't need that and in fact we don't need it up here as well let's get rid of that but if we have a response then we commit a mutation set user and we pass in the user object on that response object so again when we sign in and we commit this mutation right here we're saying okay update the user state to be that new user we pass in as a payload all right so that's when they sign in all right so then we'll say right here could not complete login like so and that's pretty much it for this action so now all we need to do is use the action inside the login component so again a lot of this is going to be very similar to this signup code right here so what i'm going to do is just copy all of this from error down here like so copy all of that and come over here and replace this thing so up here paste it in so we have the error now we have the store and the router and in fact we need to import those so let's do that as well import and we want the use store function from vue x then we also want use router as well so import use router and that comes from view router like so okay so handle submit is an async function we try this where we dispatch an action this time it needs to be the login action we're still passing the email and password values which are these refs and then if it's a success we push them to the home page if not we catch the error and we update our error ref to be the error message we need to also return the error right here and then we can output the error up here as well so i'll do another div with a v hyphen if and we set that equal to error so only if there's an error where we try to output it so in curly braces error like so then close off the div alright so that my friends is pretty much it so when they submit this form now we should be trying to dispatch the login action which is going to try to sign them up or rather sign them in sorry with this function and then when that's complete we get a response object back we commit a mutation to update our state with that user that's logged in all right okay so let's now save all this and give it a whirl all right so we already created that user mario at netninja.dev let's try logging in with that user so mario netninja dot dev and then test one two three in fact we'll just do test one two three which is the incorrect password because i want to show you the error right here so log in and we can see firebase error wrong password now you might not want to show that error to your user you could write a custom error instead but for the sake of this tutorial it's fine we know it's the wrong password so now i can add on forum five login then it should redirect us to the home page and we can see user state changed and this is the new user state in the store now and we can see it right here alright awesome so now we can sign in and now we can log in and when we do those things we're updating our store state to reflect that user who was either signed up or logged in next up we need to handle what happens when we try to log out