Coding

LARAVEL PARSE JWT | Laravel + Angular 2 / Vue.js 2

  • 00:00:01 welcome back to the serious about
  • 00:00:03 angular2 view chest and level we already
  • 00:00:07 covered a lot of ground and we hooked up
  • 00:00:09 UJ s or angular 2 level and right now
  • 00:00:12 we're working on the authentication we
  • 00:00:14 already implemented ways for users to
  • 00:00:16 sign up and Q sign-in and now we're
  • 00:00:19 getting back this jwg token or this JSON
  • 00:00:22 web token and we want to use the token Q
  • 00:00:25 make sure that we can control which user
  • 00:00:29 is able to access which resource so if
  • 00:00:32 we have a look at our back-end at the
  • 00:00:34 quote controller this is where we
  • 00:00:36 basically allow the user to create
  • 00:00:38 quotes get quotes update them and so on
  • 00:00:40 we probably don't want to allow access
  • 00:00:43 to all those actions for every user only
  • 00:00:45 authenticated users should be able to
  • 00:00:47 create a new quote or to update quotes
  • 00:00:50 or to delete quotes I say so this is
  • 00:00:52 what I will work on in this video here I
  • 00:00:55 want to protect certain methods here so
  • 00:00:58 that users are only able to access them
  • 00:01:00 if they have a valid token let's work on
  • 00:01:03 this now in order to use that token make
  • 00:01:08 sure that we only allow access when we
  • 00:01:09 have a token I'll start here in the post
  • 00:01:12 quote method for trading a new quote
  • 00:01:13 here I want to check if a balla token is
  • 00:01:17 present and for this I can use the JWT
  • 00:01:20 of package we installed in the last
  • 00:01:22 videos which has a useful function or
  • 00:01:26 method for checking if the token is
  • 00:01:28 present at ballot so here in an if block
  • 00:01:31 I will check if not so I will check if
  • 00:01:35 something is not the case and the thing
  • 00:01:36 I want to check is if I can create a
  • 00:01:38 user can fetch a valid user for this
  • 00:01:41 I'll use teakettle Yuki off to Sade so
  • 00:01:44 make sure to use kwt off here at the top
  • 00:01:49 of your file and on this for Sade I will
  • 00:01:53 call the parse token method now as the
  • 00:01:56 name implies this method parses the
  • 00:01:59 token if any is present if note hooks is
  • 00:02:01 present well we get an error instantly
  • 00:02:04 so here on the parsed token which means
  • 00:02:08 basically extracted and decrypted or
  • 00:02:11 decoded to token I can now call the
  • 00:02:14 authenticate
  • 00:02:15 method a method also provided by this
  • 00:02:17 package this node tries to match the
  • 00:02:20 data encoded indeed token with the data
  • 00:02:23 on our well in our database on our in
  • 00:02:27 our application here on the server it
  • 00:02:28 will also check if the token is valid
  • 00:02:31 remember that in the config file for
  • 00:02:34 this package this JWT file in the config
  • 00:02:36 folder we had to set a secret and this
  • 00:02:39 secret is used to hash our tokens to
  • 00:02:43 kind of sign them now the package will
  • 00:02:45 automatically use the secret to not only
  • 00:02:47 parse to decode this token but also to
  • 00:02:50 check if the token was actually created
  • 00:02:53 by us then no one else created a token
  • 00:02:56 hash to them pass it to us so this is a
  • 00:02:58 two-step process and with that if this
  • 00:03:00 is successful we have a user so inside
  • 00:03:03 of the safe block since I check if this
  • 00:03:05 is not the case with the exclamation
  • 00:03:07 mark at the beginning here we know we
  • 00:03:09 don't have a user because we weren't
  • 00:03:11 able to parse or to extract user and
  • 00:03:13 authenticate the user so here I want to
  • 00:03:15 return a response I just will be of
  • 00:03:18 course a JSON response and here I want
  • 00:03:21 to have the error code 404 or you could
  • 00:03:25 argue for 401 because you're not
  • 00:03:27 offended but I'll say 404 and simply
  • 00:03:30 return a message where I say user not
  • 00:03:34 found score send any message you want
  • 00:03:36 this is to check I wanna implement here
  • 00:03:39 now this check can fail for a couple of
  • 00:03:43 reasons
  • 00:03:43 for example no token could be sent if
  • 00:03:46 you try to access this resource without
  • 00:03:48 providing a token and I will show you
  • 00:03:50 how to provide it soon well then this
  • 00:03:52 will fail and therefore it will throw an
  • 00:03:54 error so what we can do in such a case
  • 00:03:57 if this Despero an error we can use a
  • 00:04:00 try-catch block here or if you don't
  • 00:04:03 want you use to try catch block here and
  • 00:04:05 then again here or wherever wherever you
  • 00:04:07 try to parse the token you can set up a
  • 00:04:09 generic error handler in the exception
  • 00:04:12 handler dot PHP file in there we have
  • 00:04:15 this render method and this is called
  • 00:04:18 whenever Larry will detect an error here
  • 00:04:21 it is right now calling the parent
  • 00:04:24 render method which is a default
  • 00:04:26 built-in method of rendering our
  • 00:04:28 arrows and this is fine but before doing
  • 00:04:31 this I want to implement my own check
  • 00:04:33 and here I want to check if certain
  • 00:04:36 arrows occurred so in this if block here
  • 00:04:39 I will check if the exception I'm
  • 00:04:43 getting here as an argument if that is
  • 00:04:46 an instance of the token expired
  • 00:04:50 exception and you need to import this
  • 00:04:52 from the following namespace time and
  • 00:04:55 backslash – WTF – backslash exceptions
  • 00:04:58 backslash token expired exception so I'm
  • 00:05:01 checking if this exception is of this
  • 00:05:03 type in which case I want to return a
  • 00:05:07 response and for this I can use the
  • 00:05:09 response to sate just make sure to use
  • 00:05:13 response simply an alternative to
  • 00:05:15 response helper I showed you before in
  • 00:05:17 the code controller and so on so on this
  • 00:05:19 response of state I can all recall the
  • 00:05:21 jason method which is the same method as
  • 00:05:23 before and here on this jason method
  • 00:05:27 well i want to get the status code from
  • 00:05:30 my exception so here a can call the get
  • 00:05:33 status code method and i want to send
  • 00:05:36 whip send my own error message here so
  • 00:05:38 we could store it as an error object and
  • 00:05:41 then simply say token expired because
  • 00:05:45 this is what is the case here what is
  • 00:05:47 the problem you can also check for
  • 00:05:49 another exception and see if the
  • 00:05:51 exception is an instance of the token
  • 00:05:54 invalid exception here this also needs
  • 00:05:57 to be imported at the top same path as
  • 00:05:59 before but ending with token and valid
  • 00:06:01 exception this exception will be raised
  • 00:06:04 whenever well we gather token it's not
  • 00:06:07 expired but it's not using our secret
  • 00:06:09 somewhere it's not valid this of course
  • 00:06:11 is important check – and in this case i
  • 00:06:14 also want to return my JSON response
  • 00:06:16 here but I will say token invalid as a
  • 00:06:20 message here so that is another on yeah
  • 00:06:24 error I can handle and the last check I
  • 00:06:27 want to do is if the exception is of
  • 00:06:30 type JWT exception in general so if none
  • 00:06:34 of these specific exceptions from the
  • 00:06:36 for matches I will catch this generic
  • 00:06:38 exception and then all the returns I'm
  • 00:06:41 Jason here
  • 00:06:42 where I say token or let's think to
  • 00:06:46 either air or fetching token something
  • 00:06:50 like this so this is my error message in
  • 00:06:52 this case and what that I'm checking all
  • 00:06:54 the token specific arrows which can be
  • 00:06:56 thrown if I get any other error
  • 00:06:59 I still use the default method here
  • 00:07:01 which ever site or you could also
  • 00:07:03 convert to send it F Jason maybe so that
  • 00:07:07 would be something you could do I'll
  • 00:07:09 leave it for now though and I now handle
  • 00:07:12 all the JWT of specific errors so
  • 00:07:17 instead we get the error handler we get
  • 00:07:19 the check here if we are able to extract
  • 00:07:21 the user well if we did extract the user
  • 00:07:24 successfully and we know that therefore
  • 00:07:26 the user is authenticated executing this
  • 00:07:29 code here is fine because in this case
  • 00:07:31 well I know that the user is a finnegan
  • 00:07:34 and here we could even match and connect
  • 00:07:36 user and quote that's something we
  • 00:07:38 haven't done here we well we we store
  • 00:07:41 quotes in a generic way we don't assign
  • 00:07:43 to users so that would be something you
  • 00:07:45 can do here I'll leave it out for now I
  • 00:07:46 just want to see if this check works if
  • 00:07:49 we are able to protect our route here
  • 00:07:52 doing it like this so what does in place
  • 00:07:54 let's now see if it works
  • 00:07:56 I already signed in get my token here so
  • 00:07:59 let's simply copy this token it's pretty
  • 00:08:02 long as you can see and now let's try to
  • 00:08:05 target our route for creating a new
  • 00:08:09 quote so let's quickly have a look at it
  • 00:08:11 we will need to pass some content there
  • 00:08:14 and the route whips which we need is
  • 00:08:16 here this post / quote route so the path
  • 00:08:21 therefore is slash API slash quote and
  • 00:08:24 all we need to provide here is the
  • 00:08:26 content so some quote content like this
  • 00:08:31 and if I now send this request and I
  • 00:08:34 copy the token before if you didn't do
  • 00:08:36 this make sure to sign user and again to
  • 00:08:38 have a token in your clipboard you see I
  • 00:08:41 guess error fetching token which makes
  • 00:08:43 sense because no token is present now
  • 00:08:46 how do we send a token we can simply add
  • 00:08:49 a query parameter which is simply called
  • 00:08:51 token like this and then pass the token
  • 00:08:54 now if it has anything here which
  • 00:08:56 not the ballot token and I click send
  • 00:08:58 again now I get token invalid which
  • 00:09:00 makes sense
  • 00:09:01 now let's pass the valid token one to
  • 00:09:05 the C string I copied and now you'll see
  • 00:09:08 that indeed we created this quote and we
  • 00:09:11 can also check this in the database if
  • 00:09:13 we have a look at our clothes table you
  • 00:09:15 see a new quote was created there and
  • 00:09:18 then now we can use the token to protect
  • 00:09:20 our resources now I could of course
  • 00:09:23 quickly copy all the code here and add
  • 00:09:29 it to any function any action you want
  • 00:09:31 to protect to put it into the put quote
  • 00:09:33 method and the elite quote method I
  • 00:09:35 could do that but I don't want to do
  • 00:09:38 that because it's not only the best
  • 00:09:40 practice to simply copy that code it's
  • 00:09:42 easy to forget it somewhere and if you
  • 00:09:44 make a change you need to make this
  • 00:09:45 change everywhere so to make this a bit
  • 00:09:48 easier the package here JWT all ships
  • 00:09:52 with some middleware we can use so let's
  • 00:09:54 have a look at the middleware in the
  • 00:09:55 next video