- [Instructor] So now that we have the application
set up for authentication,
it's time to log in a user.
We've already created a page for it,
and right now that just has a headline,
so we're going to work on this Login.vue file.
And I've created a special gist here
with just some HTML so you don't need to type all this,
and I'll click on this Raw button.
Just copy all this, and then switch back
and I'm just going to replace everything
in this template with this code.
So let's go ahead and save that,
and you can see that it looks pretty good.
I has a couple of fields, plus this error section.
So we'll need to sort of wire all that up
so that it's working with our project.
And...
We'll start of be creating a script section down here,
and we'll go ahead and import
Firebase
from firebase.
So we'll import the library,
and we'll need to create a data section in here.
So this is local data that our application
is going to take or understand.
And I see this import statement needs to be out here.
So this data will return the information
that we're going to need in this form,
which will be email,
and of course, we'll set it up as blank to begin with.
Password also set up to blank,
and also then the error.
This will be any errors that we receive
from Firebase.
Once we do that, then we can create variables
that point to these elements within our form.
So in our different input fields,
we're going to need to track
these different variables.
So in the email input field,
we'll create a v-model which is a way to link
an input field to the value of some data,
and so, of course, this will track
email, and we'll need to do that
for all the other input fields.
I see there's just another input field on this one,
so there's just email and password.
Also in our error right here,
right now it's just a hard-coded text of error,
but we'll create a link to that variable
by putting it in double curly braces.
So I'm going to save that,
it did a little bit of reformatting
just because of the v-term log in
that I've added in here,
but you can see that it's showing you
the email and the password here.
The error now kind of comes up like this,
so we'll go ahead and add an if statement,
and let's see, the error is up here somewhere.
Let's make this a little bit bigger.
And I'll just say v-if,
and then reference the error.
So that's only going to display
if we receive some sort of error
from Firebase.
It'll be hidden by default.
So that's cool, and we can also check
to make sure that these email and password fields
are coming in as we type them,
so we can go and inspect this form.
Switch over to Vue,
and let's go ahead and close this out.
So notice that I have my app component here,
and then I have this anonymous component,
but it has these fields, and as I type something in here,
it's going to go ahead and show you
that it is updating and then when we receive
something in here, then it's going to
automatically populate there
if there is an error in there.
All right, so now that we have this component
and we see that these fields are working,
it's time to connect with Firebase
to make sure that we can log in a user.
So we'll do that down here.
We'll need
some methods,
so this is another part of the configuration object,
and so you do methods,
and we're going to have a method called login,
which will execute this function
that we're going to put in here.
So here what we need is to create
a combination of what we need from the user,
so let's go ahead and create a new variable
called info, and just to make it more convenient,
I'll go ahead and pass along
what's in our email.
This is the loca email variable,
essentially what is right here.
And then I'll go ahead and add password.
So it's just sort of a local copy
of what's going on with our form.
And then, after this, then I can execute
a method from Firebase.
So I put that in the Firebase variable,
and the method that we use to authenticate it
is called off.
There's different ways that you can authenticate.
The one that we're interesting in
is signInWithEmailAndPassword.
Quite long if you ask me.
And then we're going to pass along
the email
and the password from the form,
and this is a promise,
so if
Firebase is able to log somebody in
with this information,
then we're going to do some stuff in here.
So we'll do a function.
In here, all we need to do is just
go ahead and go to a different page.
So I'll go ahead and do a router push.
This is how you get to another page.
So far we've been doing that with something called
router-link, this is how you do it in the template.
So now I want to do the same thing,
but whenever somebody finishes logging in.
So I'll say this, and then dollar sign, router,
and then we'll push something into the router
called meetings that will send us
to the Meetings page.
All right, so otherwise, so if somebody
tries to log in and say they are entering
a bad username or something else,
then I'm going to capture that error,
and
we'll set up the local error variable
to the message that we receive from Firebase.
So this is just a standard promise here,
so if somebody tries to log in,
and the login is successful,
then it's going to push the router to
another page called meetings,
otherwise it's going to just populate our error message,
and you'll see how that works.
So let's go ahead and save this.
All right, so one more thing we have to do here
is, in our Form tag,
we'll need to go ahead and send this form to submit
to the login method that we just created.
So we'll say at submit,
and Vue.js has a bunch of different properties
that you can pass along,
and we want to use one here called prevent.
So by default, forms will submit,
and it'll reload the page onto another document,
another webpage, usually like a thank you page
or something like that.
But because this is a single page application,
we want to prevent that from happening,
so we can pass along this prevent property.
And then we could just specify
that we want to use the login method that we created.
So let's do that.
And let's try logging somebody in.
Now, so we're here,
and I'm going to start off by trying to
log in some sort of random thing here,
and type in a password,
and if we make an error, you can see that
it says that there's no user corresponding
to this identifier.
And you'll see different errors appear here.
Now let's try typing in the proper email
that we used when we added it to
the application in Firebase.
And we'll hit Log in.
And if we're successful, let's go ahead and
never give the password,
if we're successful, we should be able to go
to Meetings.
That's great, so that is how you log in a user.
There's a lot more to do,
so let's keep on with this app.