So things are coming along nicely, but we still have some work to do, for example, back here in Tolkien's
Dargo right now, when we insert a token, we're inserting a token every time somebody logs in.
And of course, we don't really need to keep the old tokens.
So perhaps once someone tries to log in, one of the right things to do is to get rid of any preexisting
tokens for that user I.D. So let's do that.
So we'll say delete existing tokens and we'll just create a statement.
We're going to have to change the assignment operator in a minute, but that's OK.
And that's going to be nothing more sophisticated than delete from tokens where user ID equals questionmark.
Now we execute that, so we don't care about the result, but we will check for an error and that's
equal to the exact context.
And we handed the context.
We handed our statement and we had a new idea, which is the user I.D. and we check for an error if
error is not equal to nil.
Return the air and all we have to do here is change these to equal signs instead of assignment operators.
So if there are no existing tokens, this won't it'll still execute.
It just won't delete any any rows.
And then we insert the token.
So that's the first step.
The second thing is on the login page, when we log in, we go to my Web browser.
When we log in, we get no feedback.
Now, eventually, we'll probably redirect the user to another page.
But it's still it's useful to give feedback, say if something goes wrong or if something goes right.
And we can do that easily enough.
If we go back to buy once the buy dash one start page that HTML, we have this nice alert just before
a forum.
So I'm going to copy that and go back into login page and just before the form, I'll put that right
here.
And I'll change the ID to login messages and then down here in the JavaScript, we can put the same
kind of thing we have in the striped dash, just partial.
So here, if we look at the top, we have error and success.
So I'm going to copy these functions and just change them as necessary.
So I'll copy those, go back to login page, paste those functions and I'll just call this show error
and show success.
And of course, we need a variable to point to that div, that alert give, so we'll just say let logging
messages
equal document, get out of it by ID.
And I called it, what did I call it, card messages.
No logging messages.
Logging the messages.
And I guess there's a reference to that debate, so I can just copy this.
Paste it here and here and here and here and here all the way down.
And we don't want this to be transaction's successful, we'll just make it log-in successful and everything
else should stay pretty much the same.
So now if we come down to the part where we do our attempt to authenticate when we call API authenticate
in the last, then cause we can still log the response.
There's nothing wrong with that.
But we can do a check.
So we'll just say, is there an error?
So if DataDot error, that's equal to true.
If that's exactly equal to false, then we've authenticate.
Otherwise something went wrong.
So if we have authenticated, what are we going to do with this?
Well, what I'm going to do is store the token and the expiry right.
In local storage.
And I can put it anywhere, but I'm going to put it in local storage for now.
So local storage and we'll set an item and we'll set token.
And that's what I'll call the entry so I can pull it back.
And what I needed to data the authentication token the token.
And I also want the expiry, so I'll just duplicate that and make this token expiry, and that's equal
to data to data syndication, underscore Tolkan expiry.
And the last thing I'll do is say show success, otherwise we want to show the error.
So show error.
And we're going to hand it DataDot message.
All right, let's start everything and try this out.
So make stuff to make sure everything is stopped.
It is make start and I'll just start the front and back in that way.
We'll go back to a Web browser, reload this page.
And we have an expected expression, God, learn more, let's go see that one Log-in one forty one.
So I have a typo somewhere.
There it is.
That was sloppy, let's start things over again, make stuff make start.
Reload that page again.
Good, let's clear the console.
So let's try logging in, first of all, with invalid credentials, me at here dot com test.
And data is not defined, so the more sloppy JavaScript error, so let's find that again.
Yes, so let's just call this data, because I'm calling it a response, and if we change this one to
data and start and stop the application a third time stop.
Start.
Let's try that again.
So reload the page, clear the JavaScript console and log in with invalid credentials, meet here dot
com test and that should give me my error div at the top, a little alert and it does invalid authentication
credentials.
Now let's login with the corrected credentials admin, for example, dot com with the password password,
which I think I just mistyped password.
And there it is now let's look at our storage, so I go to my JavaScript console and choose storage
and look at local storage for localhost four thousand and there is my token and there is my expiry.
Perfect.
So that works well.
So now that we have that information, we can actually do things like change the login link up here
to a log out if we're successfully logged in and change it back to a log in if and when we log out or
the token expires.
And of course, we can use that token to send back information to the back end with a barer header that
says, this is who I am, this is my token, and write some logic on the backend that verifies and validates
that token and make sure that it is a token we issued and that it hasn't expired yet.
And we'll get started on that in the next election.