Coding

LARAVEL API + SPA SIGNIN| Laravel + Angular 2 / Vue.js 2

  • 00:00:01 welcome back in the last video we
  • 00:00:04 successfully created a user we added the
  • 00:00:07 functionality so that we can sign a user
  • 00:00:08 app and we tested it with postman in
  • 00:00:11 this video we will do the same for
  • 00:00:13 signing in a user and this really
  • 00:00:15 differs to the sign-in process as you
  • 00:00:18 probably know from level because we're
  • 00:00:19 not going to use the session based
  • 00:00:21 approach but as shown in the
  • 00:00:22 authentication theory video earlier in
  • 00:00:25 this video series in this playlist here
  • 00:00:26 we're going to send back a token a JSON
  • 00:00:30 web token now let's see how we can
  • 00:00:32 create such a token and send it in this
  • 00:00:34 lecture in this video now creating such
  • 00:00:37 a token is not super simple but there
  • 00:00:39 are packages which do it for us for
  • 00:00:41 example JWT off by a time and designs
  • 00:00:44 you can simply google for level kwt off
  • 00:00:47 or just JWT and you will find this
  • 00:00:49 cadaver repository there you will also
  • 00:00:52 find a link to the wiki which explains
  • 00:00:55 how to install it so let's check this it
  • 00:00:57 tells us that we should grab this code
  • 00:01:00 here this version number and go back to
  • 00:01:03 our level project and in there in the
  • 00:01:06 composer touch JSON file composer is the
  • 00:01:09 Bayeux PHP package manager which manages
  • 00:01:12 the dependencies of our project in this
  • 00:01:15 file here we configure which
  • 00:01:16 dependencies you want to use and here
  • 00:01:18 under require I'm going to add this
  • 00:01:21 entry at just copied so that we require
  • 00:01:24 this package version 0.5 which is needed
  • 00:01:27 for level 5 if you are using level 4 use
  • 00:01:30 version 0.4 so this version here and now
  • 00:01:35 with that we're telling our project kind
  • 00:01:37 of that we want to have this now in
  • 00:01:41 order to download it because this
  • 00:01:43 edition here alone doesn't do the trick
  • 00:01:45 we have to go back to D terminal
  • 00:01:48 navigate into our project folder and run
  • 00:01:50 composer whoops update which will update
  • 00:01:53 our dependencies and fetch any
  • 00:01:55 dependencies we haven't downloaded and
  • 00:01:57 we did add this one dependency so this
  • 00:01:59 is now getting downloaded and added to
  • 00:02:01 our project this is how we add for party
  • 00:02:03 packages to a level project so let's
  • 00:02:06 wait a couple of seconds until this is
  • 00:02:08 done
  • 00:02:08 and then I'll be back so the setup
  • 00:02:11 process finished and it also updated a
  • 00:02:13 couple of our
  • 00:02:14 which is here in my project but this is
  • 00:02:16 the important one year which we added
  • 00:02:18 now whether it install we can go through
  • 00:02:20 the other instructions and now we added
  • 00:02:23 the package to our PHP project but
  • 00:02:25 letter will still isn't aware of it
  • 00:02:26 would you make it aware by copying this
  • 00:02:29 entry here which is by kind of two paths
  • 00:02:31 to this newly installed package D
  • 00:02:33 namespace and in our level project we go
  • 00:02:37 to the conflicts folder and then to the
  • 00:02:39 apt of PHP file and down there if we
  • 00:02:42 scroll down we get a providers array now
  • 00:02:45 providers are basically packages level
  • 00:02:47 users it will kind of boot them whenever
  • 00:02:50 we create when we start the level F
  • 00:02:53 which is the case for every request we
  • 00:02:54 send to it so here we can add our own
  • 00:02:58 service providers or the third-party
  • 00:03:01 package service providers so here we add
  • 00:03:03 this namespace important though at colon
  • 00:03:07 colon class at the end and a comma so
  • 00:03:10 this will point to this package we just
  • 00:03:12 download it and this package also helps
  • 00:03:15 to ship with by hand for hand easier to
  • 00:03:17 say we can use so let's copy this assay
  • 00:03:19 to and back in the apt of PHP file in
  • 00:03:22 the context folder down there under
  • 00:03:24 aliases we can register our own to
  • 00:03:26 Said's
  • 00:03:27 and here we were just ready to say we
  • 00:03:29 just copied now the documentation is not
  • 00:03:32 correct on this one this shouldn't be a
  • 00:03:34 string here as the value and see this
  • 00:03:36 instead it should be the path to the
  • 00:03:38 class so with colon colon class again as
  • 00:03:40 we had to add at forward II service
  • 00:03:42 provider with this we now add at the
  • 00:03:45 package which we download it also to our
  • 00:03:48 lateral application and we created this
  • 00:03:50 alias this to say we can now use and now
  • 00:03:53 with it added we can go back to the
  • 00:03:55 terminal to run one additional command
  • 00:03:58 here and that is PHP artisan vendor
  • 00:04:02 publish this will kind of get a config
  • 00:04:06 file this package to shadow UT package
  • 00:04:08 ships with and put it in our route
  • 00:04:10 config file so that we can easily edit
  • 00:04:12 the configuration of this package not
  • 00:04:15 every third party package has to have
  • 00:04:17 such a configuration but this one
  • 00:04:19 happened to have one for just to work we
  • 00:04:22 should then also add dash dash provider
  • 00:04:24 equals and now simply in a
  • 00:04:28 in a string so in quotation marks so
  • 00:04:30 going back to this documentation you can
  • 00:04:33 also scroll down to see this command
  • 00:04:34 here it's this pause so let's add it
  • 00:04:38 between equation marks and hit enter and
  • 00:04:40 this will now give us this configuration
  • 00:04:42 file if we go to this configuration file
  • 00:04:46 it has been added to our config folder
  • 00:04:47 here under JWT we can now configure this
  • 00:04:51 package now the default should be fine
  • 00:04:54 but you can adjust things like how long
  • 00:04:55 should such a token be valid here under
  • 00:04:57 time-to-live then how long are you able
  • 00:05:00 to refresh a token so you can cut and
  • 00:05:03 kind of send a request which sends the
  • 00:05:04 existing token and requests a new one
  • 00:05:06 because the old one is about to expire
  • 00:05:08 maybe and so on now again the most
  • 00:05:12 settings should be fine important here
  • 00:05:14 point to the model you're using for your
  • 00:05:16 user and we're using the app slash user
  • 00:05:19 model in this file here so we're fine
  • 00:05:22 but if you use a different file a
  • 00:05:23 different model different class may make
  • 00:05:25 sure to adjust this setting here but one
  • 00:05:28 thing we definitely need to change it's
  • 00:05:29 a secret now again the secret is what
  • 00:05:32 we're encoding the token with and we
  • 00:05:35 need the secret to validate a token
  • 00:05:37 later on doesn't do one thing which
  • 00:05:39 ensures that we're not getting sent
  • 00:05:40 random strings by the user so that we
  • 00:05:43 always know if the token is valid or not
  • 00:05:46 now the package we install ships with a
  • 00:05:49 convenience method this one your piece
  • 00:05:51 peer Justin JW to generate which
  • 00:05:54 generates such a such a secret so let's
  • 00:05:56 run it and you now you see that this
  • 00:05:59 file has been populated with this secret
  • 00:06:01 which is now used to sign our token now
  • 00:06:04 with this in place we can start creating
  • 00:06:07 tokens and validating users or signing
  • 00:06:11 users in now we do so in the user
  • 00:06:13 controller I'll add a new method public
  • 00:06:15 function sign-in like this and I know
  • 00:06:19 that I get the request object here and
  • 00:06:21 then well I first want to validate the
  • 00:06:25 data I don't have to check if the email
  • 00:06:27 address is unique though because I'm not
  • 00:06:29 storing it in the database I'm just
  • 00:06:31 seeing if I do have one and if it is a
  • 00:06:33 valid email address and with this in
  • 00:06:36 place we can now well find user in for
  • 00:06:40 this
  • 00:06:41 I'm going to try some things I'm using a
  • 00:06:44 try/catch block here I'm catching a JWT
  • 00:06:48 exception
  • 00:06:49 make sure to import it from time and
  • 00:06:52 flashback /title UT off backslash
  • 00:06:55 exceptions so I would catch this
  • 00:06:59 exception your if it fails and what I'm
  • 00:07:01 trying in here is I try to create a
  • 00:07:04 token so here in the if block I'll see
  • 00:07:08 if I'm successful if I don't create a
  • 00:07:10 token here I try to store it in a token
  • 00:07:13 variable load with TJ WT off to sate and
  • 00:07:16 make sure to use JWT off here does this
  • 00:07:20 be important you to add so with the
  • 00:07:23 state I'm calling the attempt method and
  • 00:07:26 this is kind of like the same method on
  • 00:07:28 the knodel level authentication
  • 00:07:30 it's called attempt for a reason because
  • 00:07:32 you attempt to you signed user in and
  • 00:07:35 here we have to pass the credentials now
  • 00:07:38 we can retrieve them and store them in a
  • 00:07:40 let's say credentials some variable here
  • 00:07:43 by reaching out your request and with
  • 00:07:46 the only method we can get the data
  • 00:07:49 we're interested in and I'm only
  • 00:07:51 interested in a field named email and
  • 00:07:53 password so in these two data pieces
  • 00:07:55 which is stored as an array in
  • 00:07:57 credentials and then I pass credentials
  • 00:07:59 here whoops credentials like this so if
  • 00:08:02 this I'm passing credentials to the
  • 00:08:04 attempt method and I try to create such
  • 00:08:06 a token now if this fails here then it
  • 00:08:10 fails so if this if check fails I should
  • 00:08:13 say that if this try block is triggered
  • 00:08:15 but if this if check fails that is the
  • 00:08:18 case because the credentials are not
  • 00:08:19 valid and here of course the type of
  • 00:08:22 credentials so makes let's make sure to
  • 00:08:25 spell it like this so that it is correct
  • 00:08:29 so credentials if this fails then I will
  • 00:08:32 return a response JSON response of
  • 00:08:36 course with the error code 401 four
  • 00:08:40 unauthenticated and I will send error
  • 00:08:44 field in this JavaScript object and
  • 00:08:47 basically sending back where I say in
  • 00:08:49 valid credentials like this now this is
  • 00:08:54 a
  • 00:08:55 fails if this whole block fails so this
  • 00:08:58 happens because we somehow fails
  • 00:09:00 creating such a token so here I then
  • 00:09:03 want to return a response JSON response
  • 00:09:06 of course 500 would be an appropriate
  • 00:09:09 state of code and also with the error
  • 00:09:12 field and here I say could not create
  • 00:09:16 token so something went wrong during the
  • 00:09:19 token creation to you the token package
  • 00:09:23 here basically failed now if all that is
  • 00:09:27 successful though then I can return
  • 00:09:29 another response and in this response
  • 00:09:33 here I simply return the token so status
  • 00:09:36 code 200 let's say and then in the
  • 00:09:39 JavaScript object kind of what it will
  • 00:09:41 be in the end I have let's say a token
  • 00:09:43 field and in this token field I
  • 00:09:45 basically store the token so here my
  • 00:09:50 token variable which is here set which I
  • 00:09:53 only reach if this was successful
  • 00:09:55 so since I'm sending back the token if
  • 00:09:57 we successfully sign-in now we need to
  • 00:10:00 add a route in the API dot PHP folder
  • 00:10:02 and copying the post route here and I'll
  • 00:10:05 limit user slash sign-in linking to the
  • 00:10:08 sign-in method in the user controller
  • 00:10:10 and what's the place let's go back to
  • 00:10:12 postman and there let's go to slash
  • 00:10:15 sign-in these are valid signing
  • 00:10:17 credentials here of course let's its end
  • 00:10:20 and we get back a token here so this is
  • 00:10:23 your token which you can now store to
  • 00:10:26 send it with subsequent requests we make
  • 00:10:28 to all two protected resources to get
  • 00:10:30 access to those resources now I will
  • 00:10:32 show you how to store the token and
  • 00:10:33 angle to application once we reach that
  • 00:10:35 front end building part again but we
  • 00:10:38 will use this token for getting in the
  • 00:10:40 next section in the next video I should
  • 00:10:42 say when we start sending it via postman
  • 00:10:44 to get access to protect resources
  • 00:10:46 before in that so before doing that
  • 00:10:48 though let's see what happens if I send
  • 00:10:50 in valid credentials like an email
  • 00:10:52 address which doesn't exist now I get
  • 00:10:54 invalid credentials and if I send
  • 00:10:57 something which is only in email address
  • 00:10:59 we get the email must be a valid email
  • 00:11:02 address so this is all working on we go
  • 00:11:04 to the next video when we will use the
  • 00:11:06 token to get access to protected
  • 00:11:08 resources see you there
  • 00:11:09 bye