- [Instructor] I'm back in my playground app
and I also have the terminal of the playground app open.
So if you're still on the terminal of the to-do list,
just use the dropdown on the top right
to switch back so that you see the same what I see.
When I talked about the token before,
I told you that we are using a secret to sign it.
And I will show you now how I'm dealing
with secrets in general in my application.
So if I look into server, config, index.js,
we see that I have required dotenv here in line two
and dotenv is a very simple module
that will read configuration
from a file dotenv from the root of the project
and then make it available in process.env.
And in my case, you see here in line 12,
I'm having here JWTSECRET
and I'm getting it via process.env.JWTSECRET.
You can ignore the next two lines.
We will use that later.
But to set the secret now,
let's look into our file tree
and you see that there is a file called env.sample.
And I will now copy this env.sample
and paste it and then rename it to .env.
And then let's make sure
that I'm really opening that one file.
So I'm now in .env
and I want to now set this JWTSECRET now here
and I will just call it myverysecuresecret123.
So it just has to be some arbitrary string,
of course, the longer, the better.
And now there is one more thing to this story.
If we look into gitignore and scroll way down,
you see that in line 58,
I have added .env to the ignore list.
If I now commit and push to GitHub, for instance,
this file won't be committed
and this means that my credentials, secret, whatever,
won't ever be leaked into GitHub
because that's a very common security problem
that happens once in a while
that people just commit their secret tokens to GitHub.
With that done,
let's now implement the route
that creates this JWT token
and for that, I open routes,
api, and there index.js.
And as so often with Node.js,
there is already a module
that helps us with dealing with JSON web tokens
and I install it now.
So I run npm install -S jsonwebtoken.
And then I'm starting the application right away again
and here around line two,
I now add const jwt equals require jsonwebtoken
and I also bring in passport.
So I add const passport
equals require passport.
So the route that we want to change
is the login route, the post login route in line nine
and what we want to do now,
we want to authenticate the user
with username and passport
and we actually already have the logic for that implemented.
We just have to add now passport.authenticate
as we did before
and we are using the local strategy
because that's really technically the same
as we did for the form before.
And as configuration option now,
we add session: false
because as we are using JWT now,
we don't want the user to be stored in the session at all.
Then let's not forget the comma after this
and let's save to get this formatted,
so that looks good already.
So next, what do we want to do.
In the body, in the callback of this middleware,
we, of course, want to create this token now.
And for that, I now add const token
equals jwt and the method is called sign
and it gets first an object with the payload
and the payload in our case is userId
and it's request.user.id.
So this is again coming from passport
that authenticated our user before
and we only end up here in this body
of this route if the authentication worked.
A second argument, so after this curly bracket,
we now add config.JWTSECRET.
So the second argument it expects is the secret.
And now we also see that config is underlined
because it's not yet defined
but luckily, we get it through params
because params contains config as a property
and that's one reason
why I always define modules as functions
because then I can just easily pass down things
like the config.
So I can now add const
and in curly brackets, config
and that's in params.
So this will give us params.config
and store it in config.
And then we will add, after line 21,
one more thing.
We want to set an expiry date
and this is another config object
and there I set expiresIn
and I can simply add here 24 hours.
So this is given to us by this JWT module.
And in the end,
I want to return this token.
So I add return
and I want to return a JSON payload,
so it's res.json
and in there,
I know send an object
and the property's jwt
and the value is token.
And please note that this is completely arbitrary,
so in my Vue app,
I just know that the token has to come along
in a property called jwt
but you could also just call it token, for instance,
so that's completely up between the API
and the consumer of the API.
And with that, we can already try this out
in our Vue.js app.
And now let's try to log in.
So I'm using lcorla again.
And first, I will enter a wrong password,
just seeing if this works.
And you see that I'm getting back an error 401.
Of course, this could be a more friendly error message
but it basically tells us that the authentication
or the validation of the user via passport works.
And now I'm using the right password hopefully.
And I click Login again
and you see, it somehow already works.
So when we look at this one request that is not failed,
we see that the response,
so you can click into the response tab here
and you see that we get the JWT token back as a payload
and then the application sees the JWT payload
and stores it already
but then it fails, so it tries to call whoami
to show the username
and this again gives us this not implemented.
Why is it like that?
Because we have not yet created the strategy
and configured the strategy for passport
to check for the JWT tokens,
and we will do that in the next video.