Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,120 --> 00:00:04,860
Registering and logging a user in is one major part of the application.
2
00:00:04,890 --> 00:00:07,920
Another major part is to log the user out.
3
00:00:07,950 --> 00:00:12,350
Currently, the user will stay logged in until their token expires.
4
00:00:12,360 --> 00:00:16,980
The user may want to log out earlier so we should give them an option to do so.
5
00:00:17,250 --> 00:00:21,570
The template I provided you comes with a primary navigation menu.
6
00:00:21,600 --> 00:00:24,990
On the left we have the log in and register links.
7
00:00:24,990 --> 00:00:28,430
If the user is logged in, we'll want to hide this link.
8
00:00:28,440 --> 00:00:33,870
There's another link called Manage which will want to render if the user is logged in.
9
00:00:34,140 --> 00:00:38,400
As for the log out link, we'll add it in when the user is logged in.
10
00:00:38,430 --> 00:00:40,800
Accomplishing this won't be difficult.
11
00:00:40,830 --> 00:00:44,550
The If directive will help us perform this task.
12
00:00:44,580 --> 00:00:47,970
Before we get started, let's make one minor adjustment.
13
00:00:47,970 --> 00:00:49,860
We're going to refresh the page.
14
00:00:49,860 --> 00:00:55,860
If the user successfully logs in, there's no point in having the authentication modal around once the
15
00:00:55,860 --> 00:00:57,170
user is logged in.
16
00:00:57,180 --> 00:01:03,540
In addition, it'll help us verify that the authentication state persists across page refreshes.
17
00:01:03,750 --> 00:01:06,840
We'll start with the register form component.
18
00:01:06,870 --> 00:01:08,490
Open it in your editor.
19
00:01:08,490 --> 00:01:14,490
At the end of the Register method, we're going to access the window location object.
20
00:01:16,830 --> 00:01:21,630
This object is a global JavaScript object that's not specific to view.
21
00:01:21,660 --> 00:01:23,360
The browser defines it.
22
00:01:23,370 --> 00:01:27,150
It comes with a method called reload that will want to call.
23
00:01:29,520 --> 00:01:32,470
The reload method will refresh the page.
24
00:01:32,490 --> 00:01:35,790
We'll do the same inside the log and form component.
25
00:01:35,820 --> 00:01:37,830
Open it in your editor next.
26
00:01:39,840 --> 00:01:45,660
Call the window location reload function at the end of the login method.
27
00:01:47,830 --> 00:01:49,640
Let's give things a test.
28
00:01:49,660 --> 00:01:53,770
If you're already logged in, clear the storage, then log in.
29
00:01:58,240 --> 00:02:05,440
After successfully logging in the page will refresh check the view developer tools to check the state.
30
00:02:07,790 --> 00:02:12,260
Distinct property was mutated, indicating the user was logged in.
31
00:02:12,650 --> 00:02:13,310
All right.
32
00:02:13,310 --> 00:02:15,750
Let's move on to logging the user out.
33
00:02:15,770 --> 00:02:20,940
We're going to modify the navigation menu to add a link for logging the user out.
34
00:02:20,960 --> 00:02:24,440
We'll open the header component file in our editor.
35
00:02:26,760 --> 00:02:30,300
This component is where we placed the navigation menu.
36
00:02:30,330 --> 00:02:34,290
We'll search for the links by looking for an unordered list element.
37
00:02:34,320 --> 00:02:37,860
There's a comment above them that says Primary navigation.
38
00:02:40,500 --> 00:02:43,980
We want to hide the login link if the user is logged in.
39
00:02:44,010 --> 00:02:49,230
We're going to apply the if directive to the list element surrounding the link.
40
00:02:51,610 --> 00:02:55,200
We're going to check if the user is authenticated in the state.
41
00:02:55,210 --> 00:02:58,030
We don't have access to this state at the moment.
42
00:02:58,060 --> 00:03:01,430
We'll need to import the appropriate mapping functions.
43
00:03:01,450 --> 00:03:03,100
Scroll down to the script.
44
00:03:03,100 --> 00:03:05,590
BLOCK We're already importing the map.
45
00:03:05,590 --> 00:03:08,110
Stores function from the Linea package.
46
00:03:08,140 --> 00:03:11,270
This function is not limited to mapping a single store.
47
00:03:11,290 --> 00:03:13,480
We can map multiple stores.
48
00:03:13,480 --> 00:03:15,790
Let's import the user store.
49
00:03:17,900 --> 00:03:22,550
Next inside the map stores function pass in the user store.
50
00:03:24,710 --> 00:03:32,240
Scroll back to the link in the template inside the VRF directive we'll pass in the user logged in state
51
00:03:32,240 --> 00:03:34,190
property for the condition.
52
00:03:36,640 --> 00:03:40,450
We're going to add the not operator before the condition.
53
00:03:40,450 --> 00:03:43,540
We want to check if this evaluates to false.
54
00:03:43,570 --> 00:03:48,340
If it does, we'll render the login link, otherwise it'll be hidden.
55
00:03:48,340 --> 00:03:51,580
The link next to this one is the managed link.
56
00:03:51,580 --> 00:03:57,970
We'll render it if the user is logged in, will attach the the else directive to the next list item
57
00:03:57,970 --> 00:03:59,290
to get this effect.
58
00:04:01,570 --> 00:04:06,980
The Manage link will redirect users to a page that will allow them to manage their songs.
59
00:04:07,000 --> 00:04:10,120
We haven't created that page, but we will soon.
60
00:04:10,150 --> 00:04:13,570
For now, toggling its visibility will suffice.
61
00:04:13,720 --> 00:04:15,970
There's one more link we'll want to add.
62
00:04:16,000 --> 00:04:18,160
However, we face one issue.
63
00:04:18,190 --> 00:04:22,000
We can't apply the directive multiple times.
64
00:04:22,029 --> 00:04:25,560
Luckily, there's a simple solution for getting around this.
65
00:04:25,570 --> 00:04:31,150
We'll surround the list item element for the manage link with the template tag.
66
00:04:33,210 --> 00:04:39,300
Next we can move the director from the list item elements to the template tag.
67
00:04:41,470 --> 00:04:46,600
By wrapping it with the template tags, we'll be able to render multiple list items.
68
00:04:46,600 --> 00:04:50,320
We'll copy the list item element for the manage link.
69
00:04:50,320 --> 00:04:53,530
We'll change the inner text to say Log out.
70
00:04:55,840 --> 00:04:57,590
Let's check if this works.
71
00:04:57,610 --> 00:05:02,860
If you're logged in, you will see the manage and log out links in the navigation menu.
72
00:05:02,890 --> 00:05:05,200
The log in link is hidden from view.
73
00:05:05,230 --> 00:05:06,790
So far so good.
74
00:05:06,970 --> 00:05:10,180
The next step is to make the log out link functional.
75
00:05:10,210 --> 00:05:14,140
Firebase offers a simple method for logging the user out.
76
00:05:14,170 --> 00:05:17,950
First, we'll open the store file in our editors.
77
00:05:20,190 --> 00:05:26,640
Since we're writing logic that will affect the state will place the code in an action inside the actions
78
00:05:26,640 --> 00:05:27,300
object.
79
00:05:27,300 --> 00:05:29,370
Add a function called sign out.
80
00:05:31,580 --> 00:05:35,810
Be sure to add the async keyword before the function definition.
81
00:05:35,810 --> 00:05:38,890
Signing the user out is an asynchronous task.
82
00:05:38,900 --> 00:05:45,110
Inside the function, we're going to call the following method a weight off dot sign out.
83
00:05:47,390 --> 00:05:52,580
Firebase provides a method called Sign Out, which will sign the user out of the system.
84
00:05:52,580 --> 00:05:55,710
It's going to clear the credentials from the storage.
85
00:05:55,730 --> 00:06:01,310
Firebase will revoke the token that stored internally if the user attempts to hang on to it.
86
00:06:01,340 --> 00:06:05,690
This single method will take care of everything on the client and server.
87
00:06:05,780 --> 00:06:12,890
After logging out from Firebase, we can update the state after the sign out function set the this dot
88
00:06:12,890 --> 00:06:15,860
user logged in state property to false.
89
00:06:17,950 --> 00:06:19,750
The action function is ready.
90
00:06:19,750 --> 00:06:22,210
Let's call it from the header component.
91
00:06:22,240 --> 00:06:23,980
We'll head on over to it.
92
00:06:23,980 --> 00:06:27,280
The very last step is to call the sign out function.
93
00:06:27,280 --> 00:06:33,970
If the logout link is clicked, scroll to the template block on the anchor element for the logout link.
94
00:06:33,970 --> 00:06:37,510
Listen for the click event with the Prevent Modifier.
95
00:06:39,810 --> 00:06:43,260
The Prevent modifier will stop the default behavior.
96
00:06:43,260 --> 00:06:47,820
If this event is triggered, we'll want to call the sign out method we mapped.
97
00:06:50,110 --> 00:06:52,690
This will complete the logout functionality.
98
00:06:52,720 --> 00:06:55,040
It's a very straightforward process.
99
00:06:55,060 --> 00:06:58,810
Let's test the logout functionality in the browser.
100
00:07:01,190 --> 00:07:06,800
If I were to press the logout link, we would almost immediately see the login link again.
101
00:07:09,170 --> 00:07:12,310
Let's check if things are clear in the developer tools.
102
00:07:12,320 --> 00:07:14,720
First, we'll check with the state.
103
00:07:17,040 --> 00:07:22,140
As you can see, the user logged in state property has been set to false.
104
00:07:22,260 --> 00:07:22,980
All right.
105
00:07:22,980 --> 00:07:24,790
Let's check the storage next.
106
00:07:24,810 --> 00:07:29,540
We want to make sure Firebase deleted the user's token and their information.
107
00:07:29,550 --> 00:07:36,600
We'll navigate to the application panel on the sidebar, inspect the storage under indexed DB.
108
00:07:36,630 --> 00:07:40,380
We'll find that the values stored by Firebase are gone.
109
00:07:40,410 --> 00:07:46,130
The sign out method we called in the action will clear the storage for us just to make sure.
110
00:07:46,140 --> 00:07:48,240
Let's try refreshing the page.
111
00:07:50,500 --> 00:07:54,420
Despite refreshing the page, the application won't log us in.
112
00:07:54,430 --> 00:07:58,040
We'll continue to see the login links like we did before.
113
00:07:58,060 --> 00:07:58,910
Perfect.
114
00:07:58,930 --> 00:08:02,680
We've successfully logged the user out of the application.
10739
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.