Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,180 --> 00:00:04,410
In this lecture, we're going to discuss how authentication works.
2
00:00:04,530 --> 00:00:10,210
The next step for our application is to authenticate the user after they've registered an account.
3
00:00:10,230 --> 00:00:12,350
This step is entirely optional.
4
00:00:12,360 --> 00:00:15,820
It entirely depends on the needs of your project.
5
00:00:15,840 --> 00:00:20,970
However, you'll find that most apps will log you in after creating an account.
6
00:00:21,000 --> 00:00:23,140
It's a common user experience.
7
00:00:23,160 --> 00:00:26,660
We're going to implement this experience for our users.
8
00:00:26,670 --> 00:00:31,970
Before we get into that, let's understand how authentication works behind the scenes.
9
00:00:31,980 --> 00:00:37,170
First things first we have to view our project as two different applications.
10
00:00:37,170 --> 00:00:43,860
We have the view application we're building and then we have Firebase Authentication is mostly handled
11
00:00:43,860 --> 00:00:44,760
on the server.
12
00:00:44,760 --> 00:00:47,400
In our case, this would be Firebase.
13
00:00:47,400 --> 00:00:53,400
Firebase can take care of hashing the password, sending a confirmation email or storing the user's
14
00:00:53,400 --> 00:00:54,000
data.
15
00:00:54,030 --> 00:00:58,590
As frontend developers, we don't have to worry about these kinds of things.
16
00:00:58,590 --> 00:01:01,560
The role of the front end is relatively simple.
17
00:01:01,560 --> 00:01:08,010
We send the login data to the server, the server responds with a token and then we store that token.
18
00:01:08,010 --> 00:01:10,170
There's not much else for us to do.
19
00:01:10,530 --> 00:01:14,760
Authentication tends to be the same across many back end solutions.
20
00:01:14,760 --> 00:01:20,730
Even though we're using Firebase as our server, you can apply this process to almost any back end,
21
00:01:20,730 --> 00:01:25,530
regardless if it's a PHP node or some other programming language.
22
00:01:25,560 --> 00:01:28,110
Let's break down the authentication process.
23
00:01:28,110 --> 00:01:29,310
Step by step.
24
00:01:29,310 --> 00:01:33,780
The Vue application will send the user's login data to Firebase.
25
00:01:33,780 --> 00:01:35,820
We're already familiar with this step.
26
00:01:35,820 --> 00:01:38,400
We performed it at the start of this section.
27
00:01:38,730 --> 00:01:42,180
Firebase will take care of authenticating the user.
28
00:01:42,180 --> 00:01:46,290
It'll check if a user exists with the credentials we sent over.
29
00:01:46,290 --> 00:01:50,760
If the authentication is successful, Firebase will generate a token.
30
00:01:50,790 --> 00:01:57,840
The token is what's sent back as the response tokens typically come in the form of a unique string.
31
00:01:58,200 --> 00:02:00,540
It's essential we store this token.
32
00:02:00,540 --> 00:02:03,150
There are various methods at our disposal.
33
00:02:03,150 --> 00:02:06,600
The method will be going with is local storage.
34
00:02:06,600 --> 00:02:11,220
Local storage is a web API that comes with your browser by default.
35
00:02:11,250 --> 00:02:13,230
It's not specific to view.
36
00:02:13,560 --> 00:02:20,430
Once we've stored the token, we can send it to Firebase whenever we want to store or update data related
37
00:02:20,430 --> 00:02:26,160
to the currently authenticated user, the token will be used to verify the user.
38
00:02:26,160 --> 00:02:32,040
Since tokens are unique, we won't have to worry about a user's data being manipulated without their
39
00:02:32,040 --> 00:02:32,820
permission.
40
00:02:33,120 --> 00:02:36,600
We don't need to resend the authentication info again.
41
00:02:36,630 --> 00:02:38,490
The token will suffice.
42
00:02:38,610 --> 00:02:41,640
This is just an overview of how things work.
43
00:02:41,640 --> 00:02:44,700
I'll get into specifics later in this section.
44
00:02:44,700 --> 00:02:50,730
It may seem like a lot to do, but it's rather simple and easy to implement once you see how it's done.
45
00:02:51,090 --> 00:02:55,820
The overall process I'm talking about is called stateless authentication.
46
00:02:55,830 --> 00:02:58,080
You may have heard of this before.
47
00:02:58,080 --> 00:02:59,970
If not, that's fine.
48
00:02:59,970 --> 00:03:06,390
In the case of traditional applications, something called sessions is used to keep track of who's logged
49
00:03:06,390 --> 00:03:06,840
in.
50
00:03:07,170 --> 00:03:09,270
Sessions are stored on the server.
51
00:03:09,270 --> 00:03:14,190
The server actually knows who was logged in when the server keeps track of this.
52
00:03:14,190 --> 00:03:17,220
This is what's called stateful authentication.
53
00:03:17,220 --> 00:03:22,230
However, in our case, Firebase will not keep track of who's logged in.
54
00:03:22,470 --> 00:03:28,410
Instead, we're going to use tokens to verify the user for every request we send.
55
00:03:28,410 --> 00:03:30,570
We will also send the token.
56
00:03:30,570 --> 00:03:36,990
The token will be used by Firebase to confirm that the user is who they say they are because the server
57
00:03:36,990 --> 00:03:39,210
doesn't keep track of who's logged in.
58
00:03:39,210 --> 00:03:42,030
This is what's called stateless authentication.
59
00:03:42,180 --> 00:03:47,670
It's very common to implement stateless authentication for single page applications.
60
00:03:47,670 --> 00:03:52,590
While sessions are still practical, it's much easier to work with tokens.
61
00:03:54,120 --> 00:03:59,220
We'll need to make a minor modification to the security rules before we move forward.
62
00:03:59,250 --> 00:04:03,750
Currently, I'm in the rules section for the Firestone database.
63
00:04:03,780 --> 00:04:07,110
Pause the video if you need to navigate to this page.
64
00:04:07,290 --> 00:04:11,390
As it stands, anyone is allowed to interact with the database.
65
00:04:11,400 --> 00:04:14,770
They can even delete the entire database if they wish.
66
00:04:14,790 --> 00:04:17,490
We don't need to keep the same rules anymore.
67
00:04:17,519 --> 00:04:23,790
It's dangerous to allow anyone to have this much power we want to restrict who can read and write to
68
00:04:23,790 --> 00:04:27,150
the database nested deeply inside the rules.
69
00:04:27,180 --> 00:04:30,960
The same condition is being used for read and write permissions.
70
00:04:30,960 --> 00:04:34,170
We'll want to have different conditions for reading and writing.
71
00:04:34,170 --> 00:04:35,100
For reading.
72
00:04:35,100 --> 00:04:42,420
We'll allow anyone to view the data for writing will restrict permissions to authenticated users only
73
00:04:42,660 --> 00:04:45,120
we'll empty out the block completely.
74
00:04:47,370 --> 00:04:50,730
Add the following allow read if true.
75
00:04:52,920 --> 00:04:59,550
Allow write if request off uuid exclamation point equals null.
76
00:05:01,780 --> 00:05:05,160
The first line will allow anyone to read the database.
77
00:05:05,170 --> 00:05:08,900
We aren't going to store sensitive data such as passwords.
78
00:05:08,920 --> 00:05:11,230
It's all right if the data is accessible.
79
00:05:11,530 --> 00:05:16,210
As for the writing permission, we're using an object called request.
80
00:05:16,240 --> 00:05:18,970
Firebase will define this object for you.
81
00:05:19,180 --> 00:05:21,890
We don't have to do anything to receive it.
82
00:05:21,910 --> 00:05:26,630
We can use it to learn more about the user who's trying to access the database.
83
00:05:26,650 --> 00:05:32,710
If we have the authentication service turned on, we'll be able to access information about the user
84
00:05:32,710 --> 00:05:37,090
who's currently logged in in the resource section of this lecture.
85
00:05:37,120 --> 00:05:39,970
I provide a link to the authentication object.
86
00:05:42,260 --> 00:05:49,390
According to the documentation, every authentication object will come with a UID and token property.
87
00:05:49,400 --> 00:05:52,070
The one we're using is called UID.
88
00:05:52,100 --> 00:05:55,940
If the user is not authenticated, this will be set to null.
89
00:05:55,970 --> 00:05:57,590
Back on the rules page.
90
00:05:57,590 --> 00:06:01,590
We're checking if the UID property is not equal to null.
91
00:06:01,610 --> 00:06:06,770
If this condition returns true, then the user will be able to write to the database.
92
00:06:06,770 --> 00:06:09,470
Otherwise they'll be denied access.
93
00:06:09,650 --> 00:06:12,980
We're going to publish the rules before doing so.
94
00:06:12,980 --> 00:06:15,350
Make sure your rules match mine.
95
00:06:17,620 --> 00:06:20,090
We're finished with modifying the rules.
96
00:06:20,110 --> 00:06:24,790
In the next lecture, we'll begin authenticating the user into the application.
9294
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.