Javatpoint Logo
Javatpoint Logo

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.

Connecting angular login and signup form with backend in MEAN Stack

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.


Connecting angular login and signup form with backend in MEAN Stack

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.


Connecting angular login and signup form with backend in MEAN Stack

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.


Connecting angular login and signup form with backend in MEAN Stack

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.


Connecting angular login and signup form with backend in MEAN Stack

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

Connecting angular login and signup form with backend in MEAN Stack

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.


Connecting angular login and signup form with backend in MEAN Stack

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.


Connecting angular login and signup form with backend in MEAN Stack

9) Now, we will also get back to the result or the response. We will send back the response in the following way:


Connecting angular login and signup form with backend in MEAN Stack

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.


Connecting angular login and signup form with backend in MEAN Stack

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:


Connecting angular login and signup form with backend in MEAN Stack

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.

Connecting angular login and signup form with backend in MEAN Stack

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.


Next TopicSPA Authentication




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA