- 00:00:01 welcome back and well now we already
- 00:00:04 achieved a lot in this series we are
- 00:00:06 fennec aided users we edited the back
- 00:00:08 and to allow us to authenticate users in
- 00:00:10 the first place and in the last video we
- 00:00:13 were able to sign the user in and
- 00:00:14 receive two token which of indicates to
- 00:00:17 user which allows us to authenticate for
- 00:00:19 subsequent requests now we're at this
- 00:00:21 subsequent request part now when I use
- 00:00:24 this token to well allow us to create
- 00:00:27 quotes again because right now we get
- 00:00:29 this error message so let's change
- 00:00:31 something about this and let's make sure
- 00:00:33 that we can indeed now create quotes
- 00:00:36 again to do this we already stored token
- 00:00:40 in the local storage now we need to
- 00:00:42 retrieve it when we send requests to the
- 00:00:44 server so in my quote service here we
- 00:00:49 need to attach this token for adding
- 00:00:51 quotes updating quotes or deleting
- 00:00:54 quotes and to do so we need to reach
- 00:00:56 Reeve to token so I'll add a little help
- 00:00:59 a method to my whoops to my off service
- 00:01:02 here I'll name it get token and you
- 00:01:05 could add this anywhere but I think
- 00:01:07 logically it makes sense to sell in the
- 00:01:09 off service and all I will do here is I
- 00:01:11 will return local storage get item
- 00:01:15 tokens although try to fetch this token
- 00:01:18 from the local storage of course this is
- 00:01:20 undefined if we don't have two token
- 00:01:22 store it there so with this in place I
- 00:01:25 can go to the quote service and inject
- 00:01:27 my off service here to get access to
- 00:01:29 this newly created method so the off
- 00:01:31 service is added here but that we're now
- 00:01:33 able to get D token from the off service
- 00:01:36 make sure to add this import here at the
- 00:01:39 top though in the quote service that is
- 00:01:41 now and now for adding a quote I need to
- 00:01:45 get to token so I can reach out to off
- 00:01:47 service and simply call get token there
- 00:01:51 and this is even the token or null if we
- 00:01:54 don't have a token whatever it is if it
- 00:01:56 is null well we will get an error
- 00:01:58 anyways when trying to reach out to the
- 00:02:00 back end so in this case here when we
- 00:02:04 get the token we now need to add adhere
- 00:02:07 to our request so I will add a query
- 00:02:13 parameter token equal
- 00:02:14 and then well equals our token which you
- 00:02:17 just fetched from the local storage some
- 00:02:19 of that we're trying to attach the token
- 00:02:21 to our request and this is how you saw a
- 00:02:24 few lectures earlier how we do it we add
- 00:02:27 it as a query parameter at the end of
- 00:02:29 our URL well with that we now send the
- 00:02:34 token to the back end we we now are able
- 00:02:38 to hopefully create posts again or
- 00:02:41 quotes again let's see it in action I
- 00:02:44 already have a quote token stored in a
- 00:02:48 local storage from the last video let's
- 00:02:51 now go to add a new quote and new quote
- 00:02:54 again and let's hit submit and an open
- 00:02:59 on a new window but I got this quote
- 00:03:00 created alert so this seems to work
- 00:03:03 let's have a look at the database figure
- 00:03:05 two quotes here it is a new quote again
- 00:03:08 so indeed we were able to create this
- 00:03:11 quote with the token we passed so this
- 00:03:14 works as it should now let's quickly add
- 00:03:17 it for all the other methods here too
- 00:03:19 so for updating a quote here we should
- 00:03:24 also at the end after the ID here we
- 00:03:27 should also then add to token query
- 00:03:29 parameter and pass the token so make
- 00:03:32 sure to do this after the idea after /id
- 00:03:35 add question mark token equals and then
- 00:03:37 your token and do the same for deleting
- 00:03:40 also here after the ID because it should
- 00:03:43 be the last thing you have in a string
- 00:03:46 token equals and then your token and
- 00:03:49 this should allow you to delete an
- 00:03:50 update post too now of course we also
- 00:03:54 should implement some error handling for
- 00:03:57 example if we get an error that the
- 00:03:59 token did expire and you remember
- 00:04:02 probably that we do send or that the JWT
- 00:04:05 middleware does send such messages if
- 00:04:09 that is actually the case so that is
- 00:04:11 something you should do in a real app
- 00:04:12 implement some error handling here
- 00:04:15 handle the case that you're not getting
- 00:04:17 a successful response but instead that
- 00:04:19 you're getting an error and show an
- 00:04:22 appropriate message to user like you
- 00:04:24 need to sign in again I won't do it here
- 00:04:26 for now maybe add later
- 00:04:28 see but it's something to keep in mind
- 00:04:30 right now we will only see an error in
- 00:04:33 the console and of course the user
- 00:04:35 typically doesn't look at the console
- 00:04:37 and shouldn't
- 00:04:38 so definitely implement your own error
- 00:04:41 handling but I want to check if it works
- 00:04:43 for updating and deleting quoting quotes
- 00:04:45 if the token is sent there so let's go
- 00:04:48 to quotes and get all the quotes whoops
- 00:04:51 get quotes and yeah let's add it just
- 00:04:54 quote here a new quote 20 20 to 80 or 2
- 00:04:58 – 2 – I mean but save looks good no
- 00:05:01 error message if I reload here get
- 00:05:04 quotes again that looks good and if I
- 00:05:06 now delete it dad seems to work to quote
- 00:05:10 delete at let's again reload and see if
- 00:05:13 there really gone looks great
- 00:05:15 with that we changed our angle to front
- 00:05:18 and to now also allow us to sign users
- 00:05:21 up sign users in stored a token and use
- 00:05:24 that token to then do something on the
- 00:05:27 server and authenticate ourselves and
- 00:05:29 you also saw that we are protected
- 00:05:31 against invalid tokens or no tokens
- 00:05:34 being present and this is how you
- 00:05:35 typically authenticate with a single
- 00:05:38 page application and the API in the
- 00:05:40 background now next I will move on to do
- 00:05:43 the same for view chairs of course feel
- 00:05:46 free to improve this app to add better
- 00:05:47 error handling improve the styling a
- 00:05:50 little bit to make it look nicer or
- 00:05:51 whatever you wanna do but these are the
- 00:05:54 basics which should get you started I'll
- 00:05:56 see you in the next videos bye
