Create simple POS with React, Node and MongoDB #3: setup E-mail pipeline with add activate on SignUp

Create simple POS with React, Node and MongoDB #3: setup E-mail pipeline with add activate on SignUp

Create simple POS with React, Node and MongoDB #3: setup E-mail pipeline with add activate on SignUp

Defenition: POS – “Point of Sale”. At the point of sale, the merchant calculates the amount owed by the customer, indicates that amount, may prepare an invoice for the customer (which may be a cash register printout), and indicates the options for the customer to make payment.

Previous article: Auth state, Logout, Update Profile

This is the third chapter of our series of developing a POS with React, Node, and MongoDB. In this chapter, we are going to set up an email service that can be used for multiple purposes such as sending daily revenue reports, notifications, and so on. As the first usage, we will set up sending account activation emails to newly registered users.

Activate Account

After a user successfully registering to the system, a notification will inform the user to activate the account through an activation link sent to the user’s email account. The activation link redirects the user to the login page after activating the user account. A newly registered user’s account will be frozen until the activation is completed.

Block Login

We have to add status and token fields to the user schema of the database to differentiate the user’s current account status.

Register a new user to create a user record with the new user fields.

In the backend, update the login function to ensure that only the users who have activated the account can log in to the account. If the user status is not activated, logging in is denied.

Here is the result.

login page

Login page

Now, we will implement the activation process.

Set up Token using JWT

We use jsonwebtoken package to handle the creation and verification of the token, and SendGrid as the email provider.

First, we will set up SendGrid.

Sign into SendGrid and then select the option of API_KEY.

API_KEY

API_KEY

Create a new API key.

Create a new API Key

Create a new API Key

Install the sendgrid package to the project using yarn.

Import the package and add set the API key using the generated API key.

Add the following code changes to the register route in your backend.

Let’s review the changes made to the above route.

  1. Extract first_name, last_name and email from the request body.
  2. Generate a token from the user data. Here, the used JWT_ACCOUNT_ACTIVATION environment variable will be added to the project’s .env file in an upcoming tutorial. Adding any string as the secret for JWT generation is enough for now. Set up the expiration time of the token to 365 days.
  3. Set up the email body.
  4. Add the generated token to the body and also save it to the database.
  5. Finally, send the email.

Let’s try out registering into the system now.

Registering into the system

Registering into the system

You will see that the email has been sent to your email account.

Email about resetting password

Email about resetting password

Activated Account

Now, we will implement the activation route to activate the account through the sent activation link.

Retrieve the token from the URL and use jsonwentoken to verify the token. If the token cannot be verified, redirect the user back to the login page.

If the token is successfully verified, update the user status and redirect to the login page with the status attached to an optional parameter named notify.

Update the login route to add the optional parameter.

Add Sweetalert to login.js to notify whether the activation was successful or not when the user is redirected to the login page.

When you click the activation URL from the email and try to log in, you will see an alert on the activation status.

account activation success

Account activation success

Password Forgot and Password Reset

Next, we generate two new components to handle password reset and forgot password action.

Generating components

Generating components

Add the two new components to the Router

Activate the routes.

Now, we will implement Passwordforgot feature which prompts the user email to continue the password resetting process.

We can reuse the code from the register page after some changes as you can see here.

The resulting page looks like this.

Implementing password forgot feature

Implementing password forgot feature

Now, we have to implement the backend functions to send emails when the user wants to reset the password.

Add a new field to the user schema to store the reset token.

Implement the new password reset function.

  1. Find the user by the submitted email.
  2. Generate a token from the user data.
  3. Attach the token to the email body and add some content with password reset information.
  4. Add the token to the database and send the email. Send an alert to inform that an email was sent to the user.

You can see the sent email in your inbox.

email inbox

Email inbox

Now, we will implement the page for setting a new password.

We can reuse the code from the Passwordforgot page with some minor changes.

Retrieve the token from the URL and add it to the form as a hidden input named resetPasswordToken. Change the axios request to a put request.

Password reset page now looks like this.

Password reset page

Password reset page

Now, implement the backend function for resetting the password as follows.

This is what we did inside the above function.

  1. Take the resetPasswordToken from the query string and the password from the request body.
  2. Verify the token is using jsonwebtoken.
  3. Encrypt the password before saving it to the database.
  4. If the token is verified, update the user password and send a message back to the frontend.
Password resetting process

Password resetting process

The password resetting process will result in this.

Conclusion

Today we completed the final step of user management in our application. As the next step, we will improve our application architecture and add redux to the project. We will also restructure the backend to follow the best coding practices. and here GitHub repo for this chapter

Previous lessons:

Create a Simple POS with React, Node and MongoDB #0: Initial Setup Frontend and Backend
Create a simple POS with React, Node and MongoDB #1: Register and Login with JWT
Create simple POS with React, Node and MongoDB #2: Auth state, Logout, Update Profile

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

Create simple POS with React.js, Node.js, and MongoDB #11: CRUD with Relation

In this chapter, we are going to continue to implement CRUD operation for the Relation data and assign the POS machine to ...

Create simple POS with React.js, Node.js, and MongoDB #10: CRUD Supplier

In this chapter, we are going to continue to implement CRUD operation for the Supplier information of a grocery ...

Create simple POS with React.js, Node.js, and MongoDB #9: CRUD Branch

In this chapter, we are going to continue to implement CRUD operation for the general information of a grocery store. This is going to include the ...

No comments yet

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy