- [Instructor] In addition to a database,
Firebase also offers the option
of working with authentication,
which is really cool because
authentication can be a pain to program yourself.
So let's go ahead and actually log this user
and read that user's email once they're logged
into the platform.
I'm also going to move the information
in my home component here,
into the app.vue file,
that is because I want all of my subcomponents
to be able to understand the registration
and also the user information,
not just my home component.
So I'm going to move most of this right here,
let's just grab all of it,
and I'll just go ahead and copy that,
and I'll leave this import statement right here.
And I'm going to delete all of this stuff.
Right, so now, this is just going to have
the home in it,
and what I want to do is actually insert that
into app.vue and pass it down to a subcomponent.
So let's go ahead and do that.
Here is our script.
And let's go ahead
and fix this up a little bit.
So it looks like this navigation thing
needs to go back up here,
and also,
this is actually called App,
so I have a couple of duplicates here.
So this is App,
and then I still need to import this component,
so I'll get rid of that name right here,
and bring home the navigation component.
Right, so now, I'm importing the database.
I'm also going to need Firebase
in this sort of bigger component, so I'll import
the library, Firebase from firebase,
all right, and
let's go ahead and save all that.
And now that I have the user right here,
and I'm reading the information from the database,
I'll need to make sure that this information gets passed
along to my subcomponents.
So this is pretty cool,
and your router-view,
where all the other subcomponents are loaded,
I can just go ahead and pass along this information
as a prop, which is a property.
In view.js, you kind of use HTML-like language,
so just like in any HTML tag, you have additional properties
like this id right here.
You can pass along additional information
by adding it as a property,
but it's sort of a made-up property.
So here we will specify that we are going to create
a property called user in the subcomponent,
and we're going to pass along the information about the user.
So we could call these different names but
the part on the left is the name of the variable
in the subcomponent,
and then this is the reference to our local variable
which is this user variable right here.
So that means now that all my subcomponents are going to get
this information about the user once we have it.
And now because I've moved the component up a level,
so in my vues, I was working within this home,
that vue file,
that was referencing the folder,
sort of the parent folder,
and looking for this db.js file,
so I just need to modify this so it has a single dot.
That means in the same folder as this item right here.
So, right now, it says Welcome back,
and let's take a look at the vue properties,
so there is an error here, and this is how you debug it.
Actually, we'll look at the console first.
So first we'll check the console and it says,
The Property of method user is not defined on the instance,
so what's happening now is that my subcomponent,
the one that's actually printing this stuff right here,
doesn't now know about this new variable
that I'm passing down to it,
so we need to specify that, and
we will go into the home component,
and we need to add this as a prop.
So you can say props, and then you pass along
any of the properties
that you want to in here, so we're passing along this thing
called a user,
so we'll need to add it in there,
and now you can see that my name appears right here.
So that's pretty cool, but, let's go ahead and
clear this error; so sometimes the errors will remain.
Let's go ahead and reload this just to
make sure that you know that this is coming in properly.
So now, really, what we want to do is be able to log in users.
Now to do that, I need to go ahead and go back into Firebase
and add an authentication type.
So I'm going to click right here on Authentication,
and we can add a sign in method,
and there's a bunch of different sign in methods,
so this is actually one of the things
that I like about Firebase,
that it gives you a way to authenticate
for all these different platforms by default.
So you can have users authenticate with Twitter,
Microsoft, GitHub, Google, etc.
But I'm going to go classic and just turn on
the authentication for email and password,
so we will click this on,
and it's almost just that easy,
and then we can if you want to this email length thing,
essentially what that does is, it allows people to
just submit an email address, and then it will send them
a link and they can sort of click on something maybe
a little bit more secure but we'll keep it sort of classic
and simple and we'll enable just the Email/Password.
We can leave all these other ones unchecked for right now.
So that's cool now, that means that my project is
going to receive authentication,
and what I also want to do is go ahead and
create a new user.
I don't have a registration form quite yet,
or a log in form,
but we can add in a user as a test
by typing in this Add User.
So I'm going to hit Add User, here, to create a new user,
and notice that you do get this ID,
which we can use later on.
Now we have an email, you know, some fields here
that it will automatically generate for us.
So now I can use that user or that user's information
when I go look for that project.
So let's go back.
So now that we have email and password set up
as an authentication method in our project,
we can start allowing people to log in to our platform.
However, we're going to need to build
a separate component for that.
We have the link ready, it's right here in login.vue
but we'll take care of this in the next video.