Connecting angular login and signup form with backend in MEAN Stack
In our previous section, we successfully created the user upon the request. Now, we need to connect our angular forms with the backend routes. We will use the following steps to connect our forms with the backend:
1) We will go back to our signup component, and we now want to send a request to the backend to create a new user. For that, we will create a separate service.ts file in the auth folder.
2) In this file, we will export a class, i.e., AuthService, and before that, we will add @Injectable, which we have to import from the angular package. In this @Injectable, we will set providedIn to true as we did in the service.ts file.
3) In the AuthService class, we will create a new method, i.e., CreateUser. This method will accept an email, which will be a string and a password, which will also be a string.
4) In this method, we will send a HTTP request and for that we need to inject our http client using client as we did for the post.
5) We successfully injected the http client, and now in the CreateUser() method, we will send the request. We will use the http client to send a post request because we accept the post request on the backend.
6) We also need to append some data to that request. For that, we will create a new model, so we will create a new file auth-data.model.ts
7) In this file, we will export an interface to define how our authentication data should look like. We will name this interface AuthData, and our auth data will be an email that will be of type string and a password, which will also be a string.
We could also create a user model, but a user should not have the password all the time attached to it on the front-end. We don’t want to store the password on the front-end anywhere for too long. Therefore, we will use that AuthData to submit the data to the backend, and if we later need a user, which we do, we will add a separate model.
8) For the AuthService, we can now create a new object based on that AuthData model. So, we will create a new constant, authData, which will be of type AuthData and create a new object, and that object needs to have an email and password. Now, we append that authData to the request.
9) Now, we will also get back to the result or the response. We will send back the response in the following way:
10) Now, the last thing is to connect that auth service to our signup component. We have already provided it on a root level, so all that is left to be done is needed to be injected that here. We will add the constructor to the signup component, bind it to a public property authService of type AuthService.
11) Now, in the onSignup() method, we will send that request. First of all, we want to make sure that we got an email and password, so if the form is invalid, we will simply write the return statement; otherwise, we will run the CreateUser() method of our authService class and pass the email and password value to the function like this:
Now, we will save all the files and go back to our angular application. If we try to signup the user, we will see the email and the hash password in the console.
Everything is working well. Now, we have got a way of creating new users, and the next step is to take advantage of this and being able to log users in and enable them to create posts and on the other hand, we want to make sure they can’t delete that post which is not created by that user. We will do all the things in the next section.