1
00:00:00,780 --> 00:00:01,613
-: In the last section,

2
00:00:01,613 --> 00:00:03,630
we put together a sign out component.

3
00:00:03,630 --> 00:00:05,040
Again, notice how we're kind of

4
00:00:05,040 --> 00:00:07,140
taking an interesting approach here where when

5
00:00:07,140 --> 00:00:08,880
a user tries to sign out we're actually

6
00:00:08,880 --> 00:00:11,790
going to send them to a very distinct route

7
00:00:11,790 --> 00:00:13,050
inside our application

8
00:00:13,050 --> 00:00:14,820
and show them some content.

9
00:00:14,820 --> 00:00:16,379
This is definitely slightly at odds

10
00:00:16,379 --> 00:00:17,580
perhaps with some other types

11
00:00:17,580 --> 00:00:19,219
of applications where you might just say

12
00:00:19,219 --> 00:00:21,180
Log out a user and send them back

13
00:00:21,180 --> 00:00:23,070
to the root route, or something like that.

14
00:00:23,070 --> 00:00:24,420
Again, I really like this pattern

15
00:00:24,420 --> 00:00:26,370
because it gives us the ability to show some type

16
00:00:26,370 --> 00:00:27,955
of custom message to the user, something to kind

17
00:00:27,955 --> 00:00:29,730
of keep them on the hook

18
00:00:29,730 --> 00:00:31,380
or come back again in the future.

19
00:00:32,729 --> 00:00:33,960
Our component right now,

20
00:00:33,960 --> 00:00:35,730
although it does show some content

21
00:00:35,730 --> 00:00:38,280
and it is in theory hooked up to our router

22
00:00:38,280 --> 00:00:40,710
we don't have a action creator just yet to

23
00:00:40,710 --> 00:00:42,330
actually sign the user out.

24
00:00:42,330 --> 00:00:43,163
So we're assuming

25
00:00:43,163 --> 00:00:44,820
that this action creator right here exists.

26
00:00:44,820 --> 00:00:47,100
But again, we haven't made it just yet.

27
00:00:47,100 --> 00:00:47,933
Let's flip over

28
00:00:47,933 --> 00:00:51,090
to our types file where it looks like in the past

29
00:00:51,090 --> 00:00:53,820
we already set up the action type

30
00:00:53,820 --> 00:00:56,010
to unauthenticated user.

31
00:00:56,010 --> 00:00:58,680
All we have to do is import this unauth user type

32
00:00:58,680 --> 00:01:00,420
into our Action creator's file

33
00:01:00,420 --> 00:01:03,123
and then we can create the actual action creator.

34
00:01:03,960 --> 00:01:06,120
So up at the top in the import statement

35
00:01:06,120 --> 00:01:08,490
inside of my Action Creator's file

36
00:01:08,490 --> 00:01:12,780
I'm gonna pull in the action type unauth user.

37
00:01:12,780 --> 00:01:14,430
And again, if you wanna go with deauth,

38
00:01:14,430 --> 00:01:16,110
which certainly makes more sense,

39
00:01:16,110 --> 00:01:19,703
but I just can't stand how it looks like Death user.

40
00:01:19,703 --> 00:01:21,682
[Laughing]

41
00:01:21,682 --> 00:01:23,130
Too creepy for me.

42
00:01:23,130 --> 00:01:25,983
So I like Unauth user just a little bit more.

43
00:01:27,570 --> 00:01:30,300
All right, let's make our action creator.

44
00:01:30,300 --> 00:01:34,080
I'm going to export a function called

45
00:01:34,080 --> 00:01:35,823
sign out user.

46
00:01:37,860 --> 00:01:38,760
And inside of here,

47
00:01:38,760 --> 00:01:40,980
we really wanna accomplish two things.

48
00:01:40,980 --> 00:01:42,450
Not only do we want to return

49
00:01:42,450 --> 00:01:46,080
an action of type Unauth user,

50
00:01:46,080 --> 00:01:48,930
and if you recall, the purpose of this action is

51
00:01:48,930 --> 00:01:50,490
I'm gonna flip over really quick here

52
00:01:50,490 --> 00:01:52,290
to our authentication reducer.

53
00:01:52,290 --> 00:01:54,660
The purpose of that type is to catch this case

54
00:01:54,660 --> 00:01:55,980
over here that we had already set up.

55
00:01:55,980 --> 00:01:58,680
So we already set up this Unauth user case where

56
00:01:58,680 --> 00:02:01,230
it flips the authenticated flag over to false

57
00:02:01,230 --> 00:02:03,240
so the rest of our application knows,

58
00:02:03,240 --> 00:02:05,430
Hey this user is no longer authenticated.

59
00:02:05,430 --> 00:02:07,680
Don't show them, you know, anything, any links

60
00:02:07,680 --> 00:02:08,520
or anything like that

61
00:02:08,520 --> 00:02:10,370
associated with them being logged in.

62
00:02:11,670 --> 00:02:12,503
The other thing that we need

63
00:02:12,503 --> 00:02:13,470
to do inside of here though

64
00:02:13,470 --> 00:02:15,570
is we need to get rid of

65
00:02:15,570 --> 00:02:17,220
the token that we've saved.

66
00:02:17,220 --> 00:02:19,620
So presumably whenever a user signs out

67
00:02:19,620 --> 00:02:22,020
of our application, that means I don't want to

68
00:02:22,020 --> 00:02:24,390
be able to access this application anymore

69
00:02:24,390 --> 00:02:26,850
from this browser or on this machine.

70
00:02:26,850 --> 00:02:30,150
So the expectation from the user here is

71
00:02:30,150 --> 00:02:32,430
that when they sign out, they are really signed

72
00:02:32,430 --> 00:02:34,080
out and they cannot make any more

73
00:02:34,080 --> 00:02:35,790
authenticated requests.

74
00:02:35,790 --> 00:02:37,710
So the other thing that we have to do inside of

75
00:02:37,710 --> 00:02:40,830
this Sign Out Action creator that we've created,

76
00:02:40,830 --> 00:02:42,840
is we need to make sure that we get rid of this

77
00:02:42,840 --> 00:02:45,453
token that we set inside of local state.

78
00:02:46,830 --> 00:02:47,940
To do so,

79
00:02:47,940 --> 00:02:50,580
pretty straightforward on the local storage side

80
00:02:50,580 --> 00:02:53,206
we can just call local storage,

81
00:02:53,206 --> 00:02:58,020
remove item token like so.

82
00:02:58,020 --> 00:03:00,330
So this will find some key inside of local

83
00:03:00,330 --> 00:03:01,530
state called Token

84
00:03:01,530 --> 00:03:03,840
and if there's any data associated with it.

85
00:03:03,840 --> 00:03:05,610
Poof. It just gets nuked.

86
00:03:05,610 --> 00:03:06,443
That's all.

87
00:03:07,350 --> 00:03:08,183
All right,

88
00:03:08,183 --> 00:03:09,900
I think we're now ready for a shot

89
00:03:09,900 --> 00:03:11,070
inside the browser.

90
00:03:11,070 --> 00:03:13,680
We should now have the ability to both sign in

91
00:03:13,680 --> 00:03:16,170
and sign out for our application.

92
00:03:16,170 --> 00:03:18,030
It looks like I immediately have an error,

93
00:03:18,030 --> 00:03:20,970
cannot find module off, sign out.

94
00:03:20,970 --> 00:03:23,070
Probably means I've got it typo somewhere.

95
00:03:24,300 --> 00:03:26,250
So I'm gonna check inside of Node.

96
00:03:26,250 --> 00:03:29,070
Yep. Looks like I've got a oh,

97
00:03:29,070 --> 00:03:31,950
import star as actions to.

98
00:03:31,950 --> 00:03:33,090
Well, it looks like I was kind of going with

99
00:03:33,090 --> 00:03:34,585
the from and to there.

100
00:03:34,585 --> 00:03:36,565
[Laughing]

101
00:03:36,565 --> 00:03:37,980
Oh man.

102
00:03:37,980 --> 00:03:39,810
I'm sure this is the kind of thing where as

103
00:03:39,810 --> 00:03:40,890
you're watching the video

104
00:03:40,890 --> 00:03:41,820
you're just sitting there watching

105
00:03:41,820 --> 00:03:43,384
me write to right here and you're saying,

106
00:03:43,384 --> 00:03:45,240
Why in the world did he put to there?

107
00:03:45,240 --> 00:03:46,925
I've never seen to before.

108
00:03:46,925 --> 00:03:48,600
I apologize for that.

109
00:03:48,600 --> 00:03:50,050
It should definitely be from.

110
00:03:52,320 --> 00:03:53,880
And it looks like we're valid again.

111
00:03:53,880 --> 00:03:55,143
So let's give it a shot.

112
00:03:56,070 --> 00:03:57,933
I'm going to go back to sign in.

113
00:03:59,520 --> 00:04:01,260
Here's our form.

114
00:04:01,260 --> 00:04:03,300
Test 1, 2, 3.

115
00:04:03,300 --> 00:04:04,623
Put in my password.

116
00:04:06,000 --> 00:04:07,650
And sweet.

117
00:04:07,650 --> 00:04:09,300
I'm still at feature, which is not good

118
00:04:09,300 --> 00:04:11,070
but I should now be able to go to sign out.

119
00:04:11,070 --> 00:04:12,690
I click on sign out.

120
00:04:12,690 --> 00:04:13,740
I see my message.

121
00:04:13,740 --> 00:04:15,030
Sorry to see you go.

122
00:04:15,030 --> 00:04:16,620
And I see my links at the top.

123
00:04:16,620 --> 00:04:19,290
Once again, go to sign in and sign up.

124
00:04:19,290 --> 00:04:20,910
So I can now go back to sign in

125
00:04:20,910 --> 00:04:24,843
and if I so chose, I can sign in again.

126
00:04:25,740 --> 00:04:27,900
All right, so this is looking pretty darn good.

127
00:04:27,900 --> 00:04:29,520
I can also go back to my root route,

128
00:04:29,520 --> 00:04:30,360
if I so chose,

129
00:04:30,360 --> 00:04:31,860
but we don't have any content here right now

130
00:04:31,860 --> 00:04:33,303
but we'll get to that.

131
00:04:34,650 --> 00:04:35,580
This is looking pretty good.

132
00:04:35,580 --> 00:04:36,960
Looks like our sign out route

133
00:04:36,960 --> 00:04:38,730
is working successfully.

134
00:04:38,730 --> 00:04:40,980
Definitely in the next logical place to go to

135
00:04:40,980 --> 00:04:42,900
I think is gonna be our signup component.

136
00:04:42,900 --> 00:04:45,250
So let's take care of that in the next section.