Original subtitles

[Maximilian Schwarzmuller] Now for this course module,

I will again use Firebase.

I used Firebase as a dummy backend before,

for sending Http requests and storing data,

and now I will use it for authentication.

Because if you have a Firebase project

then you can also use the Firebase Authentication REST API,

which you can find if you Google for Firebase Auth REST API.

There you should find these Firebase Auth REST API docs.

And here you can learn to which API endpoints

you need to send requests to create a user, log a user in

or get access to some protected resource.

And I'm simply using Firebase as a dummy backend here

because I don't wanna write my own backend code

because that will have nothing to do with React.

If you wanna see that as well,

both React and a custom backend

and writing all that custom backend code,

you can check out my Mern course,

where we combine React and MongoDB and Node and Express

into one big project.

Then you see both sides built from scratch by us.

Here, this is a React course

and therefore we will use this dummy backend.

Now here for this Firebase Auth REST API,

on the right, you will find endpoints for signing up,

so for creating a user with email and password,

and you see the URL to which you need to send the request

and you see which kind of data needs to be added

to that request.

And we're going to do that together throughout this module.

You find a endpoint for signing in, so for logging in,

and you will also find an endpoint

for changing the password.

And we'll need that for this profile page

where users should be able to change their password.

And this actually will be a protected resource,

which we're accessing here, because, of course,

you should only be able to change your password

if you are logged in.

That's why this API endpoint also wants an ID token

as part of the request payload.

So, as part of the request data

and that will be exactly such a token

as I described it a couple of minutes ago.

So that's the API with which will work, as a dummy backend,

and that's the dummy project which we'll use

for this section here.

And this project, this project snapshot can now

also be found attached to this lecture.

There you'll find the starting code which we'll use

and it's a very straightforward React project in the end.

We got a couple of pages where all those Page Components

are super lean, and in the end,

just include some other Components.

And those Components also are quite straightforward.

There, I haven't added much logic yet.

The only logic I did add is

that we have this navigation here

and that on the login page,

we can switch between sign up and log in

with help of useState here.

That's this code in the AuthForm Component,

but that's about it.

We're not handling form submission,

we're not sending any Http requests yet

or anything like that.

So you can simply download this starting project,

briefly look through the code I'm providing to you

to get accustomed to it.

But then in the next lecture,

we're going to start working on this code together

to add, sign up and log in and log out

and to send requests to protected resources

and also to lock down access to certain pages

of this application.

So that, for example,

you're not able to visit this profile page,

if you are not logged in.

We're going to have a look at all of that,

throughout this course section.

For this as a last step

just make sure you do have a Firebase account

and make sure you have a project created there.

You don't need to use the Realtime Database.

We don't need to use stats.

You can clear any data which you have in there.

Instead, we will work with the Authentication part here

and I'm going to explain how we use that

in the next lectures.

And we're then going to write the code for that.