Setting up Frontend for Identity
In this lesson, we're going to set up frontend for user's identity
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the The newline Guide to Fullstack ASP.NET Core and React course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The newline Guide to Fullstack ASP.NET Core and React with a single-time purchase.
[00:00 - 00:11] We can now access the endpoint for registering and login the user. We also saw that the tokens are being generated from our server and also we can use them to authorize the user.
[00:12 - 00:22] We just have to work on the front end now. So what we can do is we can go to the agent.ts file and we will create a new object for users.
[00:23 - 00:31] So on top I can create a new object and let's call it users. We will have two endpoints for now.
[00:32 - 00:35] Login and for register. Let's start with login.
[00:36 - 00:46] So I will write login and here we will have some values as body. These values will be email and password.
[00:47 - 00:55] So what we can do is we can go inside models and create two more models. One for login and another one for register.
[00:56 - 01:06] So here let's make a new file user.ts and we will make two models. Let's start with login.
[01:07 - 01:28] Here we will have email of type string and password of type string as well. Now we need one more for register so I can copy it and make it register.
[01:29 - 01:42] We need to have one more property here for username which will be a string as well. Now coming back to the agent.ts file our values for login will be login.
[01:43 - 01:58] We can import it from the model. Now this request will call requests.post and here the endpoint is users/login and the body is values.
[01:59 - 02:23] We can copy it one more time for the register call because we don't have to change a lot of things. Here it should be register and the name should be register as well and the endpoint will be users/register.
[02:24 - 02:33] Finally we can export this user subject here. It's now ready to be used.
[02:34 - 02:40] Well this is what we need to do inside our agent.ts file. We can now start building our login page.
[02:41 - 02:49] I'm thinking of having an individual page for both login and register. We can create two different components and show them conditionally.
[02:50 - 02:50] So let's start doing that from the next lesson.