Coding

SIGNIN IN ANGULAR APP | Laravel + Angular 2 / Vue.js 2

  • 00:00:01 welcome back in the last videos we added
  • 00:00:05 the backend authentication and also a
  • 00:00:07 way for us to sign users up to create
  • 00:00:09 new users in our angular 2 application
  • 00:00:11 now I want to sign users in and store
  • 00:00:15 the token which we're getting so let's
  • 00:00:17 work on the sign-in page in our
  • 00:00:19 front-end app I will copy the form from
  • 00:00:21 this signup component added in 2-11
  • 00:00:24 component I theoretically don't need to
  • 00:00:27 user name but we still use this on the
  • 00:00:29 users on the backend we require it there
  • 00:00:31 in the validation and we could remove it
  • 00:00:34 there because we're not really using it
  • 00:00:36 right so let's quickly go to the user
  • 00:00:39 controller and on sign-in I'll remove
  • 00:00:42 this name validation rule here because
  • 00:00:44 we're not using the name anywhere you're
  • 00:00:46 gonna sign in so that is really just
  • 00:00:48 kind of a relict we don't need it so
  • 00:00:51 what's that removed we can also remove
  • 00:00:53 this user name form in the sign-in form
  • 00:00:56 the rest is the same though so that all
  • 00:00:59 should work and with that I will only
  • 00:01:02 rename this method to on sign-in and
  • 00:01:05 this button to have a sign in caption
  • 00:01:07 and of course you could think about
  • 00:01:09 clever ways of using only one component
  • 00:01:11 for sign up and sign in but again this
  • 00:01:14 is not really what I want to focus on
  • 00:01:16 and using choko two components is
  • 00:01:18 totally fine I will add the on sign-in
  • 00:01:22 method in the typescript file off this
  • 00:01:24 sign and component of course I also will
  • 00:01:27 inject the off service here because I
  • 00:01:31 want to append occator user I want to
  • 00:01:33 sign user in make sure to add the import
  • 00:01:36 but any off service we have no method
  • 00:01:38 for signing a user in so let's quickly
  • 00:01:41 add a sign-in method here we know we
  • 00:01:44 will get an email and we will need a
  • 00:01:46 password so these are the two arguments
  • 00:01:48 this method will receive and in there I
  • 00:01:51 now again want to reach out to my
  • 00:01:53 back-end and I'll copy that code from
  • 00:01:56 the signup method the URL changes though
  • 00:01:59 to users slash sign-in this is the URL
  • 00:02:02 we created on our back-end use of course
  • 00:02:05 your URL if you have a different one we
  • 00:02:08 don't need to pass the name we only pass
  • 00:02:10 email and passwords but the rest is
  • 00:02:12 exactly the same so this is still
  • 00:02:14 the same the same header and email and
  • 00:02:17 password we send to the server so if
  • 00:02:19 that we get the assign and method and
  • 00:02:21 with the sign and method well in on sign
  • 00:02:25 in I can reach out to my off service
  • 00:02:27 sign the user in I know that here in the
  • 00:02:30 ons on the method I will receive the
  • 00:02:32 form which is of type ng form make sure
  • 00:02:35 to add this import from add angular form
  • 00:02:38 and then here I want to pass for value
  • 00:02:42 email and whoops forum value password
  • 00:02:47 cutest request and this will return an
  • 00:02:51 observable so let's subscribe as always
  • 00:02:53 and simply print the response and also
  • 00:03:00 print any potential error or we might
  • 00:03:03 get so super simple at the end now let's
  • 00:03:07 go back to our running application to
  • 00:03:11 the sign in page enter a valid email
  • 00:03:13 address and the appropriate password
  • 00:03:16 open up the console to see if it works
  • 00:03:18 and hits sign in and invalid credentials
  • 00:03:22 itself let me use a different one here I
  • 00:03:26 should have the correct credentials and
  • 00:03:28 I view so here you can see the token is
  • 00:03:32 returned in the body of course now would
  • 00:03:35 be interesting to have a look into this
  • 00:03:37 token because we can it's not encrypted
  • 00:03:40 in a way that we couldn't decrypt it we
  • 00:03:43 can't validate it here on the front end
  • 00:03:45 because our a secret which was used for
  • 00:03:47 assigning it was stored on the server so
  • 00:03:49 it can only be validated on the server
  • 00:03:51 but we can't have a look into the token
  • 00:03:53 on the front end this will work and for
  • 00:03:55 this we can simply create our own little
  • 00:03:57 script so in the off service I will add
  • 00:04:01 the map method here like this and for
  • 00:04:06 this operator to work I need to unlock
  • 00:04:08 it by importing our XJS rx like this and
  • 00:04:13 here I know that I will receive the
  • 00:04:16 response which is a type response of
  • 00:04:19 course and first of all I want to
  • 00:04:22 extract token so I will call response
  • 00:04:25 Jason which is this JavaScript option
  • 00:04:28 which will have a token property holding
  • 00:04:30 the token so if dad I got the extracted
  • 00:04:32 token now I want to want to decode to
  • 00:04:35 token and we could actually write the
  • 00:04:36 code for that on our own I already
  • 00:04:39 prepared this code and we'll copied in
  • 00:04:40 here and of course you can find it
  • 00:04:41 attached to this video in the video
  • 00:04:43 description where you can find a link to
  • 00:04:44 get up which contains this finished code
  • 00:04:48 so this basically shows the splits up to
  • 00:04:51 token in its free pieces such as JSON
  • 00:04:53 web token has and then since it is a 64
  • 00:04:57 encoded decodes it so in the sign in
  • 00:05:00 component we now know that this will
  • 00:05:02 actually be the decoder token of course
  • 00:05:04 renaming it here doesn't really matter
  • 00:05:06 but it's clearer what we're getting and
  • 00:05:08 what Dad let's reload here let's open up
  • 00:05:11 the developer tools to see the console
  • 00:05:13 and let's try signing in again and here
  • 00:05:17 this is our decoded token this is what
  • 00:05:20 it actually contains you see the issuer
  • 00:05:22 which is our back-end and a couple of
  • 00:05:25 other things like the expiration time
  • 00:05:27 and yes there is this is what our token
  • 00:05:31 consists of what we have in our token we
  • 00:05:34 could change this on the backend we
  • 00:05:35 could add other things to the token but
  • 00:05:38 this is our base token and if you need
  • 00:05:40 any information from the token wealth
  • 00:05:42 this is how you can get it more
  • 00:05:44 importantly we receive the token in
  • 00:05:47 general and decoding it to have a look
  • 00:05:49 is nice but not the end of the road here
  • 00:05:52 I want to store that token so my goal is
  • 00:05:56 to store it in our app so that we can
  • 00:05:58 send it with subsequent requests and I
  • 00:06:01 will do it as in the off service queue
  • 00:06:03 here in the map that's where I decode
  • 00:06:05 token I will return not just be decoded
  • 00:06:08 token instead here I will return the
  • 00:06:11 decoded token but I will also return the
  • 00:06:15 original token like this so that we also
  • 00:06:18 still have the well token as we had it
  • 00:06:21 before and it's signing component
  • 00:06:23 therefore this will simply be my choke
  • 00:06:25 and data let's name it so last time we
  • 00:06:27 renamed it no worries and what's that we
  • 00:06:30 get access to both the token as a string
  • 00:06:32 as the decoded object and then I will
  • 00:06:36 add another operator here it's the do
  • 00:06:38 operator do is simply execute it on
  • 00:06:41 every well every time subscribe virus
  • 00:06:44 every time we receive new data you could
  • 00:06:46 say then do comes in and that something
  • 00:06:48 allows us to do something here we also
  • 00:06:50 get to token data so we get to transform
  • 00:06:53 data here too and the thing I want to
  • 00:06:56 deal with the data is I want to store
  • 00:06:57 the token so what I will do is I will
  • 00:07:00 reach out to my local storage and there
  • 00:07:03 I will set item name it token and store
  • 00:07:07 my token theta token so this string
  • 00:07:10 token in the local storage and I choose
  • 00:07:13 the local local storage here because I
  • 00:07:15 want to have to soak and persist even if
  • 00:07:18 we reload the application let's have a
  • 00:07:21 look if I go back to the app and let it
  • 00:07:24 recompile and reload here and we sign in
  • 00:07:27 one more time
  • 00:07:29 see we got the UT token here but more
  • 00:07:33 interesting than this if you go to
  • 00:07:35 application on the chrome developer
  • 00:07:36 tools to local storage you see that here
  • 00:07:40 we get this token key and if I reload
  • 00:07:43 the page you see it's still there so
  • 00:07:46 this persists even if we restart the app
  • 00:07:48 which I did when reloading the page so
  • 00:07:51 now we can always reach out to the local
  • 00:07:53 storage to get our token and send it to
  • 00:07:55 the server now of course you could also
  • 00:07:58 store the expiration date to make sure
  • 00:08:01 that you automatically force the user to
  • 00:08:03 re-authenticate if the token has expired
  • 00:08:05 I won't do this for now you saw how to
  • 00:08:08 get the expiration date though we
  • 00:08:09 decoded the token and there it was
  • 00:08:11 stored so that would be possible but I'd
  • 00:08:14 say enough of the authentication of the
  • 00:08:16 signing in let's next have a look at
  • 00:08:18 using this token to send it with request
  • 00:08:21 to authenticate user to successfully
  • 00:08:24 create new quotes because right now if I
  • 00:08:26 try to create a new quote here let's go
  • 00:08:30 back to the console and hit submit we
  • 00:08:32 get an error because we don't provide a
  • 00:08:35 token because we configured our back-end
  • 00:08:37 to require a token so let's work on this
  • 00:08:39 next so that we are able to create toka
  • 00:08:43 quotes again see you in the next video
  • 00:08:45 bye