Coding

SIGNING IN WITH VUE.JS | Laravel + Angular 2 / Vue.js 2

  • 00:00:01 welcome back to this series where we're
  • 00:00:04 connecting letter well on the back end
  • 00:00:06 with view chairs or angular on the front
  • 00:00:09 end
  • 00:00:10 throughout serious we already achieved a
  • 00:00:12 lot we set up our back-end and we added
  • 00:00:15 authentication to it and we also
  • 00:00:18 finished our angular front-end allowing
  • 00:00:21 a user to sign up and then sign in and
  • 00:00:24 use that sign-in token the back-end
  • 00:00:27 issues to authenticate with subsequent
  • 00:00:30 requests hence being able to fetch
  • 00:00:33 quotes and create new quotes now we
  • 00:00:36 still have to do the same thing for view
  • 00:00:38 chairs and in the last video of this
  • 00:00:40 series we added the signup functionality
  • 00:00:43 now it's time to allow the user to also
  • 00:00:46 sign in otherwise a signup functionality
  • 00:00:49 isn't that much use is it and then we
  • 00:00:52 want to store the token the back and
  • 00:00:54 issues to be able to send it with future
  • 00:00:56 requests and get access to the protected
  • 00:00:58 features of our backend therefore in
  • 00:01:01 this video let's start with implementing
  • 00:01:03 these sign and functionality now for
  • 00:01:06 this I'm already back in my view chairs
  • 00:01:08 project and I already got it running
  • 00:01:10 here in the browser as mentioned we
  • 00:01:12 already are able to sign up and we did
  • 00:01:14 so in the last video so I already do
  • 00:01:16 have a user on the backend and with that
  • 00:01:20 I now want to add a new component to
  • 00:01:22 this project sign-in components so a
  • 00:01:26 sign-in dot view file now in this file I
  • 00:01:29 want to add a sign-in form and therefore
  • 00:01:32 I will go to the signup page do you sign
  • 00:01:35 up view component and I will copy the
  • 00:01:37 code from there though of course you
  • 00:01:38 will adjust this now on the form
  • 00:01:41 I don't need to username anymore for
  • 00:01:44 just signing in I only want to have a
  • 00:01:46 mail and password field I will leave it
  • 00:01:48 like this though I will leave the
  • 00:01:50 v-model binding and so on because I
  • 00:01:52 still need to get this information this
  • 00:01:54 data now with that in place I will go
  • 00:01:58 down to my script file to go to my
  • 00:02:01 script code down there I already import
  • 00:02:04 access we will need this to Santa sign
  • 00:02:07 and request and I will change the method
  • 00:02:09 name here to sign in because that is
  • 00:02:11 what we do this of course means that in
  • 00:02:13 my template code in my
  • 00:02:15 HTML code here on the click list sir I
  • 00:02:18 will also target this sign-in method and
  • 00:02:21 I will remove or rename this button to
  • 00:02:24 say sign in instead of sign up now with
  • 00:02:27 that in place let's go to our back-end
  • 00:02:29 we created and let's have a look at our
  • 00:02:31 routes and see what's route we need to
  • 00:02:34 target it's down here this users sign in
  • 00:02:37 route at the bottom here this is to
  • 00:02:40 route allowing us to sign a user in
  • 00:02:42 there for this to route you should
  • 00:02:43 target with our view code so here I'm
  • 00:02:47 right now targeting just slash user so
  • 00:02:50 this should be slash user slash sign in
  • 00:02:53 because again this is the route we were
  • 00:02:55 targeting here now with this in place I
  • 00:02:58 still need to send almost the same data
  • 00:03:01 though there is no need for the name
  • 00:03:03 anymore we don't need to name since in
  • 00:03:05 the backend if we have a look at our app
  • 00:03:07 HTTP controllers folder and then user
  • 00:03:11 controller we see that for signing in we
  • 00:03:14 only validate email and password of
  • 00:03:16 course because we don't care about the
  • 00:03:17 user name at this point now with this in
  • 00:03:20 place I'm sending all the data we need
  • 00:03:22 important make sure you are sending this
  • 00:03:24 header here because you want to send
  • 00:03:26 information that this is sent through an
  • 00:03:29 ajax request and then well I can catch
  • 00:03:33 both response and error
  • 00:03:34 and see what happens so I'll save this
  • 00:03:37 and go back to my page and I would be
  • 00:03:40 nice to be able to go to the sign in
  • 00:03:42 page so for this we need to register
  • 00:03:45 near out and I will do it as new main
  • 00:03:47 dot JS file where all the other routes
  • 00:03:49 are registered and this new route should
  • 00:03:52 have a path of slash sign and let's say
  • 00:03:54 and of course I want to load my sign in
  • 00:03:57 component which I therefore need to
  • 00:04:00 import so I'll add this import at the
  • 00:04:02 top pointing to the sign in dot view
  • 00:04:05 file now with this route setup I can go
  • 00:04:08 to my app dot view file where I do have
  • 00:04:10 all my route links and I will add a pipe
  • 00:04:12 symbol after the latest loud route and
  • 00:04:14 add a new router link pointing to slash
  • 00:04:18 sign in soju this newly created route we
  • 00:04:21 just added and give it a caption off
  • 00:04:23 sign in since well this is where this
  • 00:04:25 will lead us now with this in place we
  • 00:04:27 can
  • 00:04:28 go to the sign in page and let's open up
  • 00:04:30 the console to see if everything works
  • 00:04:32 as it should and I will use the
  • 00:04:34 credentials I created in the last video
  • 00:04:37 of this series choose sign in' and this
  • 00:04:40 looks pretty good
  • 00:04:41 i get back an object with status text
  • 00:04:43 okay and code 200 and then they either
  • 00:04:47 field here I get my token so with this
  • 00:04:50 we do have to token now we need to store
  • 00:04:54 it to be able to send it with future
  • 00:04:56 requests and let's also have a look into
  • 00:04:58 this token now do you have such a look
  • 00:05:01 into token I already explained logic we
  • 00:05:04 can use in the angular video you can
  • 00:05:07 basically either install a JavaScript
  • 00:05:09 package decrypting or güell and
  • 00:05:12 packaging this token for you since it's
  • 00:05:14 base64 encoded or you write the code on
  • 00:05:17 your own so I will do the latter
  • 00:05:19 approach here and you sign in dot view
  • 00:05:21 file here in D then lock where I handle
  • 00:05:25 this response here I want to retrieve
  • 00:05:28 the token so the first step is to get
  • 00:05:30 the token here and I can simply get it
  • 00:05:33 from my response and there from the data
  • 00:05:36 object and there it's in the token field
  • 00:05:39 remember this is where where we can find
  • 00:05:43 it here object data token so this will
  • 00:05:46 be the encrypted token now I want you
  • 00:05:49 decrypted or kind of split it up so
  • 00:05:52 let's create a helper variable base64
  • 00:05:55 URL which is this token and then I will
  • 00:05:59 split it by the dots because the token
  • 00:06:02 continued contains free parts separated
  • 00:06:04 with dots in this string so I will split
  • 00:06:08 it up like this and I'm interested in
  • 00:06:10 the second one therefore with the index
  • 00:06:12 one this is which this is the part which
  • 00:06:15 contains the payload of the token now
  • 00:06:18 with that the last step is to get the
  • 00:06:21 base64 value or get it decoded value you
  • 00:06:25 could say so here I want to use my
  • 00:06:31 base64 URL I retrieved here in the
  • 00:06:34 second part and replace all my minuses
  • 00:06:40 with plus signs
  • 00:06:42 and replace all my underscores with
  • 00:06:47 slashes now with this this is formatted
  • 00:06:50 in a way that it is a base64 values and
  • 00:06:53 now we can finally well decrypt it or
  • 00:06:58 turn it into a normal string I could say
  • 00:07:00 so to do this I can simply call the
  • 00:07:05 window a top method that's a built-in
  • 00:07:08 method javascript offers and here we
  • 00:07:10 pass a base64 value and we will get back
  • 00:07:13 a normal string so let's log to the
  • 00:07:17 console to see if this works as it
  • 00:07:19 should so I will clean this up and sign
  • 00:07:24 up again and here we get our string
  • 00:07:29 token decoded so this looks alright of
  • 00:07:33 course it is Jason so let's parse the
  • 00:07:36 tips not here though let's parse what we
  • 00:07:39 get here to get a JavaScript object to
  • 00:07:42 work with so this is the last step with
  • 00:07:45 this in place let's quickly reoffending
  • 00:07:48 kate and here's our javascript object
  • 00:07:50 with the token information nice so with
  • 00:07:53 that we got a decoded but that was
  • 00:07:55 really just an exercise of practice here
  • 00:07:57 to see what's inside it and to well
  • 00:08:00 understand that you can decode it in the
  • 00:08:02 browser we can't verify it here though
  • 00:08:05 this can only be done on the server
  • 00:08:06 because this is where we keep our secret
  • 00:08:08 which was used for encoding the token
  • 00:08:11 but if we want to have a look inside of
  • 00:08:13 the token and use some information from
  • 00:08:15 there this is how we would do it now
  • 00:08:17 with this in place I want you stored the
  • 00:08:22 token in the local storage so whilst it
  • 00:08:26 is nice to have a look inside of the
  • 00:08:27 token and I will still print it here the
  • 00:08:30 more important part is to access the
  • 00:08:32 local storage
  • 00:08:33 javascript object we can use here and
  • 00:08:37 set a new item set the token because you
  • 00:08:40 want to store the token to send it with
  • 00:08:42 future requests so here I will store it
  • 00:08:45 as the second argument to this method
  • 00:08:48 which is the value of that key were
  • 00:08:50 creating here in the local storage and
  • 00:08:52 this will simply be my token
  • 00:08:55 the unencrypted not the unpackaged token
  • 00:08:59 but instead the Aurora token we get back
  • 00:09:01 from the server this one here so this
  • 00:09:04 now gets stored in the local storage and
  • 00:09:07 with that we can access it in the future
  • 00:09:09 to send it to the backend whenever we
  • 00:09:12 need to get access to them protect the
  • 00:09:14 data there we will do this in the next
  • 00:09:17 with you off this serious see you there
  • 00:09:19 bye