1
00:00:00,710 --> 00:00:06,140
In this video we're going to create a new page that will allow a user to sign out the application as

2
00:00:06,140 --> 00:00:07,970
a quick reminder in order to sign out.

3
00:00:07,970 --> 00:00:10,670
We need to make a request to our off service.

4
00:00:10,670 --> 00:00:13,140
We've got a sign out root handler.

5
00:00:13,220 --> 00:00:18,500
It's all we really have to do is make a POST request to API users sign out and I will sign our user

6
00:00:18,500 --> 00:00:24,680
out there's something else really important I want to mention the request to sign out must be coming

7
00:00:24,680 --> 00:00:28,940
from inside of our components or inside of some components.

8
00:00:29,120 --> 00:00:33,800
If we try to make the sign out request from inside of a get initial props that request is going to be

9
00:00:33,800 --> 00:00:39,590
issued by the server and the server doesn't really care or doesn't really know what to do with any cookies.

10
00:00:39,680 --> 00:00:45,620
When we try to sign a user out back inside of that sign out root handler remember we are resetting the

11
00:00:45,620 --> 00:00:50,720
user session and so we're going to send back a cookie whenever we make a request from get initial props

12
00:00:50,720 --> 00:00:51,490
on the server.

13
00:00:51,560 --> 00:00:55,760
If any cookie gets returned to us we're not really doing anything with it whatsoever.

14
00:00:55,760 --> 00:01:00,230
So we need to make sure that these requests always comes from the user's browser in order to sign out

15
00:01:00,230 --> 00:01:05,180
correctly and that means that we need to make a request from a component as opposed to from a get initial

16
00:01:05,180 --> 00:01:05,580
props.

17
00:01:05,600 --> 00:01:14,570
Function OK so let's create a new page inside of our auth directory called sign out dodging us inside

18
00:01:14,570 --> 00:01:14,910
of here.

19
00:01:14,930 --> 00:01:21,020
We're going to get our user request joke and we're also going to get the use effect function from react

20
00:01:21,850 --> 00:01:33,440
so I gonna get use effect from react and I'll get user request from up to directories books use request

21
00:01:34,670 --> 00:01:36,100
I'll then export a component

22
00:01:39,680 --> 00:01:44,060
so inside of here whenever this component is displayed I want to just return a message to the user and

23
00:01:44,060 --> 00:01:51,770
say something like signing you out or then going to immediately as soon as this component is rendered.

24
00:01:51,770 --> 00:01:55,910
We're going to use the use effect took to try to make a request to sign the user out.

25
00:01:56,180 --> 00:02:00,790
Once the user is signed out by making use of user request right here or then going to navigate the user

26
00:02:00,800 --> 00:02:03,290
back to our main landing page.

27
00:02:03,290 --> 00:02:04,250
So that's the general idea.

28
00:02:04,280 --> 00:02:11,140
That's how we're going to accomplish this so I'm going to first set up a request function or a request

29
00:02:11,140 --> 00:02:13,610
function by using user request.

30
00:02:13,610 --> 00:02:21,500
So remember we get back a do request function whenever we call use the request and to use request we

31
00:02:21,500 --> 00:02:23,770
have to provide a couple of different arguments.

32
00:02:23,930 --> 00:02:29,840
We have to provide that your URL the method and a body upon is required and then we can optionally also

33
00:02:29,840 --> 00:02:34,930
provide on success if we want to have the ability to respond to a successful request.

34
00:02:35,000 --> 00:02:43,500
So in our case are you URL we'll be API users sign out the method we'll be post.

35
00:02:43,800 --> 00:02:45,970
The body is gonna be an empty object.

36
00:02:45,970 --> 00:02:50,970
It really really wasn't maybe the best idea to have sign out be tied to a post request but that's how

37
00:02:50,970 --> 00:02:51,570
we ended up.

38
00:02:51,570 --> 00:02:59,420
So it's what we're doing and we'll define an on success now as we saw previously.

39
00:02:59,420 --> 00:03:03,140
Back over inside of sign in and sign up inside of on success.

40
00:03:03,170 --> 00:03:07,110
As soon as we successfully make this request we want to navigate the user owns the route route.

41
00:03:07,160 --> 00:03:08,300
So we're gonna do something very similar.

42
00:03:08,300 --> 00:03:13,130
Bakari to what we did back over instead of sign in and sign up do you want to Colorado or not push and

43
00:03:13,130 --> 00:03:16,500
navigate to our route route tobacco over here.

44
00:03:16,500 --> 00:03:18,910
I'll do a route or not push our route route.

45
00:03:18,990 --> 00:03:25,410
After we successfully sign out and I'll make sure that I also imports router from next router at the

46
00:03:25,410 --> 00:03:34,050
top then finally we need to make sure we call do request at some point time so I'm going to set up use

47
00:03:34,110 --> 00:03:37,160
effect.

48
00:03:37,260 --> 00:03:41,670
I only want to run the thing at one time so I gonna put in an array or see it a second argument of an

49
00:03:41,670 --> 00:03:50,540
array and inside of here I will call do request and that should be at.

50
00:03:50,630 --> 00:03:55,810
I'm gonna save this flip back over I'm going to refresh the page.

51
00:03:55,810 --> 00:04:01,930
And now in theory if I take a look at my application inside of chrome console and I see my cookie right

52
00:04:01,930 --> 00:04:07,360
there I should be able to click on sign out get navigate it over it automatically redirected to the

53
00:04:07,360 --> 00:04:11,920
landing page I should see that I'm not signed in anymore and the cookie cookies should be cleared as

54
00:04:11,920 --> 00:04:12,440
well.

55
00:04:12,580 --> 00:04:20,190
It looks like that is exactly what occurred Nashville to sign up again just to test this once more I'll

56
00:04:20,200 --> 00:04:21,430
sign up.

57
00:04:21,430 --> 00:04:23,450
Sign out cookies reset.

58
00:04:23,470 --> 00:04:26,550
I got redirected to the landing page and I no longer signed it.

59
00:04:26,740 --> 00:04:28,410
Perfect.

60
00:04:28,560 --> 00:04:28,790
All right.

61
00:04:28,800 --> 00:04:33,190
Well I think that's it for the authentication aspects of this client site application.

62
00:04:33,340 --> 00:04:36,180
So let's take a quick pause right here and continue in just a moment.