WEBVTT

1
00:00:00.320 --> 00:00:01.900
Hi and welcome back.

2
00:00:01.920 --> 00:00:04.932
Today I want to speak to you about how we

3
00:00:05.132 --> 00:00:08.090
can log out the users from our application.

4
00:00:08.120 --> 00:00:11.517
We could use the reset to initial state

5
00:00:11.717 --> 00:00:14.740
function given here to reset the user

6
00:00:14.760 --> 00:00:15.758
to its initial state,

7
00:00:15.958 --> 00:00:17.660
where they're not going to be logged in.

8
00:00:17.690 --> 00:00:20.194
They're only going to have a profile image

9
00:00:20.394 --> 00:00:22.460
had before and their token and display

10
00:00:22.490 --> 00:00:24.035
name and all that information

11
00:00:24.235 --> 00:00:25.420
that we were fetching from

12
00:00:25.450 --> 00:00:27.860
firebase is going to be deleted.

13
00:00:27.890 --> 00:00:29.518
So let's do that.

14
00:00:29.718 --> 00:00:30.380
Right now

15
00:00:30.400 --> 00:00:33.605
we're going to be going to our home page,

16
00:00:33.805 --> 00:00:36.420
and what we want to do here is place

17
00:00:36.450 --> 00:00:39.454
a logout button somewhere, maybe right

18
00:00:39.654 --> 00:00:42.220
below the profile image given here.

19
00:00:42.250 --> 00:00:43.740
Could be a good place.

20
00:00:43.770 --> 00:00:50.180
So let's put this in a view container
and then once we do that let's make sure

21
00:00:50.210 --> 00:00:56.020
that here everything is
vertically centered and it is and then

22
00:00:56.050 --> 00:01:02.820
what we want to do here is create
a pressable and on press we're going to be

23
00:01:02.850 --> 00:01:12.540
dispatching reset to initial state
from the user JS file in our reducers.

24
00:01:12.570 --> 00:01:17.490
So let's import this and make sure
that we put some kind of text here.

25
00:01:17.520 --> 00:01:22.210
We could use our header component
for that and let's say that the type is

26
00:01:22.240 --> 00:01:27.820
the smallest one which is three
and the title is going to be log out.

27
00:01:27.840 --> 00:01:29.930
Let's make sure that it
looks like a button.

28
00:01:29.960 --> 00:01:35.260
Maybe we could give it the blue color that
we have used on our couple of headers.

29
00:01:35.290 --> 00:01:37.912
So let me search for the header components

30
00:01:38.112 --> 00:01:40.160
that we have used and I'm just going

31
00:01:40.190 --> 00:01:42.689
to copy this color and I'm

32
00:01:42.889 --> 00:01:44.900
going to place it here.

33
00:01:44.920 --> 00:01:46.540
And one more thing that I want to make

34
00:01:46.570 --> 00:01:52.460
sure that we do here is that we log out
the user from the firebase as well.

35
00:01:52.490 --> 00:01:58.160
And to do that we're going to have to put
this in one more set of braces so

36
00:01:58.190 --> 00:02:04.180
that we're able to do more than one action
and we can make this an Asynchronous

37
00:02:04.210 --> 00:02:11.500
function and we're going to have to await
logout.

38
00:02:11.530 --> 00:02:20.100
So let's create this function in our user
JS API file so let's call it export const

39
00:02:20.130 --> 00:02:25.220
logout and all that it's going to do

40
00:02:25.250 --> 00:02:34.450
is await the auth sign out.

41
00:02:34.480 --> 00:02:43.170
Okay, so let's use this here
by importing the logout.

42
00:02:43.200 --> 00:02:47.500
And if we press on here,
what is going to happen is that all our

43
00:02:47.530 --> 00:02:51.540
users data is going to be wiped
and reset to initial state.

44
00:02:51.570 --> 00:02:57.940
And because that is going to happen
and because we have our non authenticated

45
00:02:57.970 --> 00:03:04.900
and authenticated flow that is dependent
on is logged in state in our redux,

46
00:03:04.930 --> 00:03:09.340
our application is just going to go
back directly to the login page.

47
00:03:09.370 --> 00:03:10.840
So let's see this in action.

48
00:03:10.870 --> 00:03:13.740
I'm about to click on this
button and here we go.

49
00:03:13.770 --> 00:03:16.380
We are back to our login page and if we

50
00:03:16.410 --> 00:03:21.020
want to log in again we're going
to have to enter our credentials again.

51
00:03:21.050 --> 00:03:23.420
So that's it for logging the users out.

52
00:03:23.450 --> 00:03:26.820
In the next video we're going
to be talking more about Tokens.

53
00:03:26.850 --> 00:03:29.360
So I'll see you there.
Thanks so much for watching.