Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,000 --> 00:00:04,050
[Maximilian Schwarzmuller] Now for this course module,
2
00:00:04,050 --> 00:00:06,810
I will again use Firebase.
3
00:00:06,810 --> 00:00:10,030
I used Firebase as a dummy backend before,
4
00:00:10,030 --> 00:00:13,920
for sending Http requests and storing data,
5
00:00:13,920 --> 00:00:17,160
and now I will use it for authentication.
6
00:00:17,160 --> 00:00:20,540
Because if you have a Firebase project
7
00:00:20,540 --> 00:00:25,180
then you can also use the Firebase Authentication REST API,
8
00:00:25,180 --> 00:00:30,180
which you can find if you Google for Firebase Auth REST API.
9
00:00:30,470 --> 00:00:34,903
There you should find these Firebase Auth REST API docs.
10
00:00:35,760 --> 00:00:38,900
And here you can learn to which API endpoints
11
00:00:38,900 --> 00:00:43,900
you need to send requests to create a user, log a user in
12
00:00:44,490 --> 00:00:47,820
or get access to some protected resource.
13
00:00:47,820 --> 00:00:51,540
And I'm simply using Firebase as a dummy backend here
14
00:00:51,540 --> 00:00:54,230
because I don't wanna write my own backend code
15
00:00:54,230 --> 00:00:57,690
because that will have nothing to do with React.
16
00:00:57,690 --> 00:00:59,730
If you wanna see that as well,
17
00:00:59,730 --> 00:01:02,490
both React and a custom backend
18
00:01:02,490 --> 00:01:05,239
and writing all that custom backend code,
19
00:01:05,239 --> 00:01:07,780
you can check out my Mern course,
20
00:01:07,780 --> 00:01:11,510
where we combine React and MongoDB and Node and Express
21
00:01:11,510 --> 00:01:13,850
into one big project.
22
00:01:13,850 --> 00:01:18,130
Then you see both sides built from scratch by us.
23
00:01:18,130 --> 00:01:20,140
Here, this is a React course
24
00:01:20,140 --> 00:01:22,883
and therefore we will use this dummy backend.
25
00:01:24,080 --> 00:01:27,120
Now here for this Firebase Auth REST API,
26
00:01:27,120 --> 00:01:31,030
on the right, you will find endpoints for signing up,
27
00:01:31,030 --> 00:01:34,280
so for creating a user with email and password,
28
00:01:34,280 --> 00:01:37,930
and you see the URL to which you need to send the request
29
00:01:37,930 --> 00:01:40,720
and you see which kind of data needs to be added
30
00:01:40,720 --> 00:01:42,340
to that request.
31
00:01:42,340 --> 00:01:46,200
And we're going to do that together throughout this module.
32
00:01:46,200 --> 00:01:50,193
You find a endpoint for signing in, so for logging in,
33
00:01:51,220 --> 00:01:53,880
and you will also find an endpoint
34
00:01:53,880 --> 00:01:56,820
for changing the password.
35
00:01:56,820 --> 00:01:59,860
And we'll need that for this profile page
36
00:01:59,860 --> 00:02:03,720
where users should be able to change their password.
37
00:02:03,720 --> 00:02:07,460
And this actually will be a protected resource,
38
00:02:07,460 --> 00:02:09,729
which we're accessing here, because, of course,
39
00:02:09,729 --> 00:02:12,480
you should only be able to change your password
40
00:02:12,480 --> 00:02:14,233
if you are logged in.
41
00:02:15,120 --> 00:02:19,810
That's why this API endpoint also wants an ID token
42
00:02:19,810 --> 00:02:22,400
as part of the request payload.
43
00:02:22,400 --> 00:02:24,900
So, as part of the request data
44
00:02:24,900 --> 00:02:27,430
and that will be exactly such a token
45
00:02:27,430 --> 00:02:30,023
as I described it a couple of minutes ago.
46
00:02:31,160 --> 00:02:35,770
So that's the API with which will work, as a dummy backend,
47
00:02:35,770 --> 00:02:38,660
and that's the dummy project which we'll use
48
00:02:38,660 --> 00:02:41,250
for this section here.
49
00:02:41,250 --> 00:02:44,700
And this project, this project snapshot can now
50
00:02:44,700 --> 00:02:47,523
also be found attached to this lecture.
51
00:02:48,380 --> 00:02:51,660
There you'll find the starting code which we'll use
52
00:02:51,660 --> 00:02:55,690
and it's a very straightforward React project in the end.
53
00:02:55,690 --> 00:02:59,460
We got a couple of pages where all those Page Components
54
00:02:59,460 --> 00:03:02,000
are super lean, and in the end,
55
00:03:02,000 --> 00:03:04,510
just include some other Components.
56
00:03:04,510 --> 00:03:09,030
And those Components also are quite straightforward.
57
00:03:09,030 --> 00:03:11,890
There, I haven't added much logic yet.
58
00:03:11,890 --> 00:03:14,110
The only logic I did add is
59
00:03:14,110 --> 00:03:16,340
that we have this navigation here
60
00:03:16,340 --> 00:03:18,460
and that on the login page,
61
00:03:18,460 --> 00:03:21,440
we can switch between sign up and log in
62
00:03:21,440 --> 00:03:24,270
with help of useState here.
63
00:03:24,270 --> 00:03:27,200
That's this code in the AuthForm Component,
64
00:03:27,200 --> 00:03:28,600
but that's about it.
65
00:03:28,600 --> 00:03:30,390
We're not handling form submission,
66
00:03:30,390 --> 00:03:33,430
we're not sending any Http requests yet
67
00:03:33,430 --> 00:03:35,530
or anything like that.
68
00:03:35,530 --> 00:03:38,730
So you can simply download this starting project,
69
00:03:38,730 --> 00:03:42,200
briefly look through the code I'm providing to you
70
00:03:42,200 --> 00:03:45,010
to get accustomed to it.
71
00:03:45,010 --> 00:03:47,070
But then in the next lecture,
72
00:03:47,070 --> 00:03:50,810
we're going to start working on this code together
73
00:03:50,810 --> 00:03:54,620
to add, sign up and log in and log out
74
00:03:54,620 --> 00:03:58,010
and to send requests to protected resources
75
00:03:58,010 --> 00:04:02,650
and also to lock down access to certain pages
76
00:04:02,650 --> 00:04:04,740
of this application.
77
00:04:04,740 --> 00:04:06,150
So that, for example,
78
00:04:06,150 --> 00:04:09,100
you're not able to visit this profile page,
79
00:04:09,100 --> 00:04:12,030
if you are not logged in.
80
00:04:12,030 --> 00:04:14,210
We're going to have a look at all of that,
81
00:04:14,210 --> 00:04:16,339
throughout this course section.
82
00:04:16,339 --> 00:04:17,880
For this as a last step
83
00:04:17,880 --> 00:04:21,560
just make sure you do have a Firebase account
84
00:04:21,560 --> 00:04:25,180
and make sure you have a project created there.
85
00:04:25,180 --> 00:04:27,990
You don't need to use the Realtime Database.
86
00:04:27,990 --> 00:04:29,910
We don't need to use stats.
87
00:04:29,910 --> 00:04:33,020
You can clear any data which you have in there.
88
00:04:33,020 --> 00:04:37,390
Instead, we will work with the Authentication part here
89
00:04:37,390 --> 00:04:40,220
and I'm going to explain how we use that
90
00:04:40,220 --> 00:04:41,410
in the next lectures.
91
00:04:41,410 --> 00:04:43,810
And we're then going to write the code for that.
7216
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.