1
00:00:00,180 --> 00:00:05,940
Once we understand how strapping handles authentication well then we can start working on our front

2
00:00:05,940 --> 00:00:09,780
end and I guess we're gonna start by registering the user.

3
00:00:09,870 --> 00:00:16,220
So again we have two options we can either log into user or registered user and sends for the logging

4
00:00:16,230 --> 00:00:20,020
user I guess we would need to set up first our user in a strategy.

5
00:00:20,100 --> 00:00:23,700
We might as well register first and we have our function.

6
00:00:23,700 --> 00:00:28,520
So I'm importing right now a empty string and let me just double check.

7
00:00:28,530 --> 00:00:33,480
So we have registered user like I said we have nothing here and it's not even empty string.

8
00:00:33,480 --> 00:00:35,240
In fact it is a comment.

9
00:00:35,490 --> 00:00:40,590
And then within a log and Page Well I would want to run it and I would want to run it.

10
00:00:40,740 --> 00:00:49,230
If the member is not true meaning if the user hasn't registered so I'm going to sign my variable response

11
00:00:49,530 --> 00:00:50,610
to a wait.

12
00:00:50,630 --> 00:00:54,000
Again it's gonna be a synchronous function and registry user.

13
00:00:54,000 --> 00:00:55,620
So let me comment this.

14
00:00:55,620 --> 00:01:01,410
And within this function we're gonna pass in the object with three values with all three state values

15
00:01:01,500 --> 00:01:04,410
email password as well as user name.

16
00:01:04,410 --> 00:01:08,520
Can you parse the arguments one by one without passing it as an object.

17
00:01:08,520 --> 00:01:09,180
Of course you can.

18
00:01:09,570 --> 00:01:14,550
The reason why I like passing in as an object because that way I don't need to worry about the order

19
00:01:14,790 --> 00:01:15,970
of my arguments.

20
00:01:16,050 --> 00:01:23,760
So we're gonna pass here the email then we're gonna pass the password like so and then we're also going

21
00:01:23,760 --> 00:01:25,290
to have a user name.

22
00:01:25,560 --> 00:01:30,240
And then if the response is gonna be successful legit console log something.

23
00:01:30,240 --> 00:01:36,210
Now there's also gonna be a console log of course with our error if there's going to be an error but

24
00:01:36,210 --> 00:01:42,750
for success we're gonna go console log and let's just write success like so.

25
00:01:42,870 --> 00:01:48,660
And also you know what we can right away maybe console log our actual response so let's go with log

26
00:01:48,940 --> 00:01:53,850
and response and you're gonna see our object our user object with our token.

27
00:01:53,880 --> 00:02:00,510
Now we have everything in place in a log and user we're ready to start registering the user but of course

28
00:02:00,510 --> 00:02:05,880
we need to set up the function and then within the register user function that is located within the

29
00:02:05,880 --> 00:02:11,220
strappy we're gonna import first year things we're going to import axioms and so we're going to use

30
00:02:11,470 --> 00:02:20,730
axioms to set up our ATP requests so we import CEOs from and then let's look for Axis library and then

31
00:02:20,730 --> 00:02:27,150
also I'd want to import your URL again why we need the URL because once we deploy our application our

32
00:02:27,150 --> 00:02:28,690
domain is gonna change.

33
00:02:28,710 --> 00:02:35,160
So again the path is going to be still forward slash all local and register but the actual domain is

34
00:02:35,160 --> 00:02:35,730
gonna change.

35
00:02:35,730 --> 00:02:39,910
So I'm going to go with the URL it is coming from the hotels.

36
00:02:40,050 --> 00:02:43,330
So let's find new tools and then let's look for the URL.

37
00:02:43,350 --> 00:02:44,930
So those are our imports.

38
00:02:44,990 --> 00:02:49,170
Now let's set up our function and this is gonna be a synchronous function.

39
00:02:49,170 --> 00:02:53,050
So let's write async then we're gonna have function.

40
00:02:53,250 --> 00:03:00,300
Then let's do register user register user and then since we passed thirty three arguments I know I need

41
00:03:00,300 --> 00:03:01,920
to set up three parameters.

42
00:03:01,920 --> 00:03:09,780
I'm going to be looking for email password as well as a user name and then within a function body for

43
00:03:09,780 --> 00:03:10,620
the time being.

44
00:03:10,770 --> 00:03:17,550
Let's just leave it blank and before we write anything else largest export as well so let's write export

45
00:03:18,330 --> 00:03:24,810
default and then we're going to write a register user register user so that way of course within the

46
00:03:24,810 --> 00:03:27,220
logon page now we can access it.

47
00:03:27,540 --> 00:03:34,260
And the way it's going to work is we're gonna have another response variable so cost response and that

48
00:03:34,260 --> 00:03:36,410
is gonna be equal to a weight.

49
00:03:36,420 --> 00:03:42,590
So again we're gonna wait till our promises settle because again act use is going to return a promise.

50
00:03:42,690 --> 00:03:49,150
So we're gonna go with ax heroes then in order to set up a post request we need to type dot post.

51
00:03:49,230 --> 00:03:52,260
So that is the method and then we're looking for the URL.

52
00:03:52,440 --> 00:03:58,340
Again your URL is gonna be domain and then whatever we have all local register.

53
00:03:58,380 --> 00:04:03,930
So I'm going to set up a template string first I'm going to access the You are all variable which gives

54
00:04:03,930 --> 00:04:05,460
me my local host.

55
00:04:05,460 --> 00:04:11,820
Then we're gonna have all then we have forwards lush local and then we're gonna have forwards the cash

56
00:04:12,180 --> 00:04:13,680
register.

57
00:04:13,680 --> 00:04:15,050
Once we set this up.

58
00:04:15,150 --> 00:04:18,600
The second thing is we need to pass in our data.

59
00:04:18,600 --> 00:04:20,840
So essentially we need to pass in the fields.

60
00:04:20,880 --> 00:04:28,740
Remember when we checked strappy the user had fields it had a user name email and password and those

61
00:04:28,740 --> 00:04:30,230
data they were passing in.

62
00:04:30,390 --> 00:04:37,410
So we're gonna go with user name because that is our parameter and we're going to have email as well

63
00:04:37,410 --> 00:04:38,510
as the password.

64
00:04:38,910 --> 00:04:44,570
And since our quest returns a promise we can right away a chain that catch.

65
00:04:44,580 --> 00:04:50,740
So we're gonna go catch on we're gonna say error and in our case we're just gonna console log there

66
00:04:51,130 --> 00:04:56,820
let's console log the error and then keep in mind this is a synchronous function so it's going to happen

67
00:04:57,090 --> 00:05:04,390
by default it is going to return a that's not the reason why within the logging we set our handle submit

68
00:05:04,690 --> 00:05:06,460
also as asynchronous.

69
00:05:06,520 --> 00:05:12,100
But what we would like to return from register function is in fact our response.

70
00:05:12,100 --> 00:05:19,120
So I'm gonna say Here return response whatever the response is either it's gonna be undefined or we're

71
00:05:19,120 --> 00:05:25,200
gonna get our object but again since it is a single function it is going to return a promise.

72
00:05:25,240 --> 00:05:29,030
Now let's save it and let's take it out for a test drive.

73
00:05:29,080 --> 00:05:35,740
So when I click on toggling as I would like to of course register now currently it says please fill

74
00:05:35,740 --> 00:05:37,560
out all the form fields.

75
00:05:37,690 --> 00:05:41,170
That is correct because of course our is empty is true.

76
00:05:41,560 --> 00:05:43,560
And now I'm just going to set up some emails.

77
00:05:43,570 --> 00:05:47,420
I'm gonna go John G mail dot com.

78
00:05:47,620 --> 00:05:49,350
As far as the password.

79
00:05:49,430 --> 00:05:51,630
I'm just gonna go it's something really simple.

80
00:05:51,760 --> 00:05:53,190
And then we have the user name.

81
00:05:53,380 --> 00:05:59,910
So let me type in John as you notice once I type in the value now I'm able to submit and again I'm going

82
00:05:59,900 --> 00:06:05,620
to have two options either my response is gonna be success essentially I'm just gonna get my user object

83
00:06:06,000 --> 00:06:07,470
or it's gonna be undefined.

84
00:06:07,720 --> 00:06:08,500
Let's try it out.

85
00:06:08,770 --> 00:06:10,210
Let's try to submit.

86
00:06:10,210 --> 00:06:14,020
Now we're just gonna wait a little bit and I can see that I have success.

87
00:06:14,020 --> 00:06:21,110
So if I head over to a log page I a console log the success and that is going to be my response.

88
00:06:21,160 --> 00:06:28,120
So essentially I'm just gonna get back my data and what we're going to be looking for is this J WTI.

89
00:06:28,330 --> 00:06:34,180
So Jason Webb token and if we're gonna head over right now to our strappy application you're going to

90
00:06:34,180 --> 00:06:38,440
notice that if we refresh There you go we have a new user.

91
00:06:38,440 --> 00:06:42,380
Of course I'm showing you still the input but there is there is our user.

92
00:06:42,430 --> 00:06:46,370
And like I said since your ad I mean you can do whatever you want you want to delete John.

93
00:06:46,540 --> 00:06:48,670
You can go ahead and delete John.

94
00:06:48,700 --> 00:06:55,240
Now I also want to show you how we're gonna have a error because think about it we already registered

95
00:06:55,240 --> 00:06:55,880
user.

96
00:06:55,990 --> 00:07:01,540
However of course we haven't done anything in our front and we still have the values and everything.

97
00:07:01,570 --> 00:07:07,480
So what do you think is going to happen if I'm going to try to register one more time with the same

98
00:07:07,480 --> 00:07:08,470
user.

99
00:07:08,500 --> 00:07:09,320
Think about it.

100
00:07:09,340 --> 00:07:12,820
Well we already have the user ID so we should have the user.

101
00:07:12,880 --> 00:07:15,340
Now you can clear the console you can leave the object.

102
00:07:15,340 --> 00:07:16,120
It's up to you.

103
00:07:16,240 --> 00:07:21,400
I think in my case since we're gonna do it quite a few times essentially looking at the user object

104
00:07:21,700 --> 00:07:27,430
I'm just in the clear for now and we should get an error and we do we have a bad request.

105
00:07:27,430 --> 00:07:32,320
So essentially we cannot of course register with the same values.

106
00:07:32,320 --> 00:07:40,000
And what's interesting is that with strappy sense when we're signing in we can use either a log in or

107
00:07:40,090 --> 00:07:44,620
user name Marcus or a email when we're signing up.

108
00:07:44,620 --> 00:07:49,320
Even if my email is gonna be different but my user name is gonna be exactly the same.

109
00:07:49,600 --> 00:07:50,920
I'm not going to be able to register.

110
00:07:51,610 --> 00:07:58,120
So let's test it out let's say I'm going gonna try to register with email of Peter but still gonna keep

111
00:07:58,120 --> 00:07:58,960
the same user name.

112
00:07:59,290 --> 00:08:02,660
If I'm going to try to do that again I'm gonna get an error.

113
00:08:02,720 --> 00:08:06,110
I'm getting the error because user name is exactly the same.

114
00:08:06,130 --> 00:08:08,860
That's the reason when you're trying to sign in.

115
00:08:08,980 --> 00:08:13,010
You can use either the email or the user name.

116
00:08:13,120 --> 00:08:17,830
And the reason why I didn't do that because I didn't want to overcomplicate things but in general please

117
00:08:17,830 --> 00:08:20,270
keep in mind that is always your option.

118
00:08:20,290 --> 00:08:25,790
So that's the reason when we were registering also the user name needs to be unique.

119
00:08:26,140 --> 00:08:32,200
So let's say if I'm trying to register Peter in this case I'm gonna wipe out and my console if I'm working

120
00:08:32,200 --> 00:08:38,500
and go with Peter username and if we're going to try to submit it then of course we're gonna have again

121
00:08:38,590 --> 00:08:40,410
our data our user data.

122
00:08:40,420 --> 00:08:47,260
So that was successful and not only that if we're going to head over again to our shop application refresh.

123
00:08:47,290 --> 00:08:50,190
Now I have two users I have John and Peter.

124
00:08:50,260 --> 00:08:54,200
And just to show you that we rule the world just let's delete.

125
00:08:54,220 --> 00:08:57,050
Peter there's no point for him being there.

126
00:08:57,040 --> 00:08:58,570
Let's confirm Yep.

127
00:08:58,630 --> 00:09:00,760
Now Peter has been deleted.