1
00:00:00,810 --> 00:00:03,240
Our whole authentication flow is pretty rock solid.

2
00:00:03,240 --> 00:00:06,690
The very last thing we have to do is take care of that account screen and make sure that we have the

3
00:00:06,690 --> 00:00:09,570
ability to actually sign out of our application.

4
00:00:09,570 --> 00:00:11,610
So signing out should be really easy.

5
00:00:11,700 --> 00:00:16,920
In order to sign out of our app all we have to do is remove that token out of our async storage and

6
00:00:16,920 --> 00:00:23,010
remove it out of our off context state object as well by essentially unsettling or forgetting that token

7
00:00:23,280 --> 00:00:25,730
we effectively log our user out.

8
00:00:25,770 --> 00:00:30,750
Now this is a very different idea of sign out than a typical Web application where we might have some

9
00:00:30,750 --> 00:00:35,520
like cookie or something like that and we would need to reset that cookie to essentially log a user

10
00:00:35,520 --> 00:00:38,460
out so again because we're using it just on a Web token.

11
00:00:38,460 --> 00:00:43,350
As long as we just forget the token we effectively are logged out because we can no longer prove who

12
00:00:43,350 --> 00:00:47,130
we are that we are who we say we are to our API.

13
00:00:47,130 --> 00:00:52,630
So let's start working on the account screen so inside my screen structure we will find account screen

14
00:00:53,380 --> 00:00:57,280
inside of here we're probably going to need to show some button or something like that that user can

15
00:00:57,280 --> 00:01:06,610
tap on so at the very top I'm gonna make sure that I get a import or button from react native elements.

16
00:01:06,700 --> 00:01:10,390
Remember once again we're using a button from React Native elements just because there's a little bit

17
00:01:10,390 --> 00:01:12,910
more customization around it.

18
00:01:12,940 --> 00:01:21,930
I'm also going to import that space or component we created from components spacer and then finally

19
00:01:21,960 --> 00:01:27,180
in order to make sure that we actually kind of unset our token from our state well we're probably going

20
00:01:27,180 --> 00:01:31,410
to need to make sure that we call a action function from our off context file.

21
00:01:31,410 --> 00:01:33,380
We don't have anything inside of here just yet.

22
00:01:33,390 --> 00:01:35,220
Around signing out.

23
00:01:35,220 --> 00:01:39,180
So while we do have the stub right there but we don't actually have that wired up to anything.

24
00:01:39,210 --> 00:01:43,920
So we need to make sure that we can call that function from account screen whenever user taps on the

25
00:01:43,920 --> 00:01:45,450
button that we're going to show.

26
00:01:45,540 --> 00:01:50,960
So in order to call that function as usual we need to get our use context took from react.

27
00:01:50,970 --> 00:01:58,300
We also need to import our context as off context.

28
00:01:59,320 --> 00:02:02,050
From context of context.

29
00:02:03,150 --> 00:02:03,360
OK.

30
00:02:03,430 --> 00:02:08,430
So now inside of account screen I'm going to wrap that text element inside of a fragment.

31
00:02:08,500 --> 00:02:14,160
I'm going to make sure I clean up that semicolon there at the very end and then underneath that piece

32
00:02:14,160 --> 00:02:25,550
of text I'll show a button with a title of about sign out and an on press let's make sure that we get

33
00:02:25,580 --> 00:02:30,220
our sign out action function side if you're really quickly so going to leave on press just blank for

34
00:02:30,230 --> 00:02:37,250
right now and then we'll do a concert we'll get sine out and that's going to coming from use context

35
00:02:37,910 --> 00:02:40,130
context.

36
00:02:40,210 --> 00:02:45,700
So now whenever user taps on that button or presses it we'll call the sine out function and that should

37
00:02:45,700 --> 00:02:47,070
pretty much be it.

38
00:02:47,140 --> 00:02:50,620
Let's make sure that we also wrap that button element right there with the spacer just to make sure

39
00:02:50,620 --> 00:02:54,720
that we've got a little bit of spacing against the text that's going to be shown right above it.

40
00:02:54,790 --> 00:02:57,130
It's going to wrap button with spacer

41
00:03:02,110 --> 00:03:02,380
okay.

42
00:03:02,410 --> 00:03:05,340
Let's say this.

43
00:03:05,410 --> 00:03:10,360
Now I can go to my account screen which remembers the third button over here on the tab bar and we've

44
00:03:10,360 --> 00:03:12,180
got the sign up button.

45
00:03:12,350 --> 00:03:16,610
Now we can tap it and that does call these sign out function but right now our sign up function doesn't

46
00:03:16,610 --> 00:03:17,560
really do anything.

47
00:03:17,990 --> 00:03:23,720
So let's go back over to our auth context and make sure that we unset or remove that item that token

48
00:03:23,750 --> 00:03:25,370
out of our async storage.

49
00:03:25,670 --> 00:03:31,930
Remove it out of our state object as well and navigate our user back to our authentication flow so inside

50
00:03:31,930 --> 00:03:33,270
of context.

51
00:03:33,430 --> 00:03:36,090
Once again remember we've got this stub for sign out right here.

52
00:03:37,000 --> 00:03:41,960
I'm going to first begin by kind of reformatting the sine out function into the more compact VAX fashion

53
00:03:41,960 --> 00:03:43,550
that we've been using inside of here.

54
00:03:43,670 --> 00:03:50,150
So I'm going to delete the curly braces around the outer function and delete the return statement and

55
00:03:50,150 --> 00:03:51,920
put the inner function on the same line.

56
00:03:54,300 --> 00:03:54,620
Okay.

57
00:03:54,630 --> 00:04:01,740
So then inside of here we want to unset that token piece of authentication state so we can make sure

58
00:04:02,330 --> 00:04:03,720
that we call async storage.

59
00:04:03,750 --> 00:04:08,400
We're gonna dispatch an action to like sign out and we're going to navigate back to our authentication

60
00:04:08,400 --> 00:04:08,940
flow.

61
00:04:08,970 --> 00:04:09,690
That's pretty much it.

62
00:04:10,710 --> 00:04:18,080
So I'll first begin by doing and await async storage then to remove an item out of async storage or

63
00:04:18,080 --> 00:04:24,260
essentially forget it we can call remove item and we'll specify which item we want to forget.

64
00:04:24,270 --> 00:04:30,650
So forget the token well then dispatch an action of type sign out.

65
00:04:30,680 --> 00:04:34,060
Now we don't actually have any case inside of our reducer to handle that.

66
00:04:34,100 --> 00:04:36,680
So let's make sure that we take care that very quickly.

67
00:04:36,680 --> 00:04:45,940
So up inside of my reducer I will add a new case of sign out so anytime we see that we're going to want

68
00:04:45,940 --> 00:04:49,830
to return a token property of null.

69
00:04:49,870 --> 00:04:52,260
So no longer do we have a token there's no token here.

70
00:04:52,330 --> 00:04:57,460
We don't have any token to use to indicate that we're signed in and then optionally we could also decide

71
00:04:57,460 --> 00:05:01,490
to reset our error message property not supercritical.

72
00:05:01,510 --> 00:05:03,810
Nonetheless I'll do it anyways.

73
00:05:03,990 --> 00:05:04,430
It's all set.

74
00:05:04,440 --> 00:05:09,040
Error Message 2 empty string.

75
00:05:09,370 --> 00:05:14,290
Okay so then back down inside of sine out the very last thing that I'll do inside of here will make

76
00:05:14,290 --> 00:05:16,970
sure that we navigate back to our authentication flow.

77
00:05:17,370 --> 00:05:24,890
So that will be a navigate to call to our log and flow so I'll do navigate log in.

78
00:05:24,930 --> 00:05:25,290
Flow

79
00:05:28,550 --> 00:05:28,800
okay.

80
00:05:28,820 --> 00:05:29,920
So that should be it.

81
00:05:29,930 --> 00:05:30,950
So let's save this.

82
00:05:31,000 --> 00:05:36,950
We could do a quick test once again forgot that async keyword we make sure I get that on the inner function

83
00:05:36,950 --> 00:05:37,640
right there.

84
00:05:38,860 --> 00:05:40,360
Save it one more time.

85
00:05:41,380 --> 00:05:41,670
Okay.

86
00:05:41,700 --> 00:05:42,210
So here we go.

87
00:05:42,210 --> 00:05:46,020
We're back at our tracklist screen because we have a token inside of async storage.

88
00:05:46,230 --> 00:05:47,670
So go to account.

89
00:05:47,670 --> 00:05:53,300
I'm gonna sign out and I get kicked back to my log and flow if I now refresh my application.

90
00:05:53,400 --> 00:05:59,190
I'm still back inside the log and flow because we no longer have a token piece of data inside of async

91
00:05:59,190 --> 00:06:00,420
storage.

92
00:06:00,540 --> 00:06:08,760
So if I go to sign in I can sign in with a legitimate email and password and I'm back to my trackless

93
00:06:08,790 --> 00:06:09,700
screen.

94
00:06:09,900 --> 00:06:14,940
If I now refresh I still come back to the trackless screen once again because we've got that token inside

95
00:06:14,940 --> 00:06:16,830
of async storage.

96
00:06:16,830 --> 00:06:18,890
All right that looks pretty good.

97
00:06:18,940 --> 00:06:20,620
I'll do a quick test on Android as well.

98
00:06:20,680 --> 00:06:22,660
It's gonna make sure that I can actually sign out.

99
00:06:23,200 --> 00:06:23,960
Yep.

100
00:06:24,150 --> 00:06:25,720
Going to make sure they can sign back in

101
00:06:30,200 --> 00:06:35,830
and I can go back to account I can refresh as well.

102
00:06:36,050 --> 00:06:39,480
There's the refresh I can go back to account and sign out once again.

103
00:06:39,590 --> 00:06:39,830
All right.

104
00:06:39,830 --> 00:06:41,000
Very good.

105
00:06:41,000 --> 00:06:44,150
It's not the last thing I think we need to take care of on this account screen.

106
00:06:44,240 --> 00:06:48,710
As usual we've got all this context or this text right here that's gonna smushed up against the very

107
00:06:48,710 --> 00:06:49,460
top.

108
00:06:49,460 --> 00:06:51,920
So we need to figure out some way to deal with that.

109
00:06:51,920 --> 00:06:55,520
Turns out that when we're making use of React navigation there's actually a nice little helper that

110
00:06:55,520 --> 00:06:56,920
we can use to solve this issue.

111
00:06:57,170 --> 00:07:00,540
So let's take a quick pause right here and figure out exactly what it is.