- [Instructor] For the rest of this chapter,
we will take a look at how to secure
single-page applications,
as they are very common these days
and have specific requirements
when it comes to authentication.
The single-page application we will be working with
is a todolist implemented with Vue.js
This application is fully implemented,
so there is no need to understand Vue.js.
All you need to know is that it utilizes an API
provided by the Playground app.
Also, please keep in mind
that this single-page application supports multitenancy.
This means that a registered user
can maintain their individual todolist,
in contrast to all users
getting just access to a shared list.
Let's look at the API routes on the Playground app
the todolist app relies on.
So first we have the login route.
So it's a POST request to api/login
and their essential credentials too,
and then I expect the API to log me in in some way,
and there are some caveats about that when it comes to APIs
and we come to that later.
Also, we have a route that gives us just the current user
so that the single-page application
can show the currently logged-in user.
Also, there is a route of course,
that gives us all todolist items,
it's GET /api/todolist
and here very importantly,
this will just give us the items for the logged-in user.
Also, there is a method that lets us create
a new todolist item,
it's a POST request to api/todolist,
again, this new todolist item
will of course be assigned to the logged-in user.
Then we have another route that lets us update
todolist item with the given ID,
so PUT to api/todolist/
and then the id of the todolist item,
and then we also have a delete route,
it's DELETE api/todolist/,
enter id of the item to be deleted.
With the basics now sorted out,
let's look at the API in Visual Studio Code
before we set up the app.
So here in Visual Studio Code,
I open playground, server, routes,
and here you see this folder, api
and if we look at the index file,
you'll see that we have a login route here
and it's right now not implemented,
and also this route, whoami, which is also not implemented,
and then if you scroll down,
you also see that we are mounting here
the todolistRouter on /todolist,
and in this router, you find an index file
that we have all these methods
that we talked about before,
and as you see, they are all already implemented
and they use a services/TodolistService,
and if you want to look at it, find it here in services.
The test is addItem, updateItems,
so it's operating the database,
very similar to the user service before.
So now let's set up and run this todolist application.
For that, I open another integrate terminal
by clicking on this plus
here on the top right of the terminal,
and in here I change now into,
todolist and as it's a new project
then I'll have to run npm install,
and this will now pull down a lot of stuff
because it's a Vue.js application,
and of course it's all those front-end projects,
it has a lot of dependencies.
While this is running let's just have one look
into the, todolist application,
so open todolist and in source,
you find all the Vue.js components,
and there is also a folder api,
and in there you find actually the whole metric
that deals with the rest API.
You see that the base URL points to local host 3000,
so that's the API URL of our application,
and when I scroll down,
then you see that here are all those methods
that correspond to an API call to the rest API.
We also see for very recent
numb moderates security vulnerabilities,
they would need to be addressed
before we deploy the todolists into production to the open.
Now to run this todolist,
I can, again, just enter npm run dev
and now all this black magic
related to WEPEC and front-end apps is running
and it now packs and builds the application,
and when it's done,
it will serve the application on local host 8080.
So let's head to local host 8080,
so I click command and onto this link,
and then I ended up in the browser
and you see that we have there a very familiar looking form.
So it's very similar to what we saw on the Playground app.
So now let me open from developer tools.
So I'm clicking on this three dots,
then on More Tools, and Developer Tools,
because I want to look at the XHR traffic,
so I'm selecting that one and now I'm trying to login.
So I type lcorla and then mysecret2,
and I click login and you see, we get an error back,
so let's see what's happening here.
What are we sending?
So in the headers, you see the request headers,
and down there, you see the payload
and it's username lcorla, password mysecret,
and we get back this not implemented error,
because yes, you saw it before in the API,
we have to implement this still and there now is a caveat.
We cannot use the same login mechanism that we had
with the regular web application,
there's some huge difference that has to be addressed
by a different mechanism of authentication,
and I will show you that starting with the next video.