So I’ve got a fully functioning app and a login system - the next feature I want to add to it is an email confirmation system.

How do I do that?

In this article, I’ll be summarizing the main points for implementing such a system based on this website.

FRONT END

  1. App.js containing routes So, within their App.js, the basic logic is this: if the path points to /, then we go to login landing.

If it points to confirm/:id, it’ll bring us to the confirm component. ID here refers to the unique id the database creates and is available on ’this.props’ inside the component at this.props.match.params.id

  1. Landing Landing is the user login page. The main job of this page is to submit the email as post request to the backend server.

  2. Confirm Confirm.js is the component loaded by React Router when user clicked on the unique link sent to the email.

The link in the email will look something like this: http://localhost:3000/confirm/5c40d7607d259400989a9d42

This is basically a request sent to express server, where :id is the unique id created by Mongo. THen, we send a get request to: /email/confirm/${id}, and display the response data.

  1. Adding a spinner button that’s v useful

BACKEND

  1. Create a new gmail account
  2. Add the gmail credentials into the server’s .env file.
  3. Have a user model ready - with a ‘confirmed’ field

const fields = { email: { type: String }, confirmed: { type: Boolean, default: false } }

  1. In your App.js, add these two endpoints:

app.post(’/email’, emailController.collectEmail)

app.get(’/email/confirm/:id’, emailController.confirmEmail)

  1. Email Controller: .collectEmail() when email is sent to this /email endpoint, Email controller finds the user by email. if User is not found, create user, and send Email to user, using the sendEmail() service. Else, if user is found and not confirmed, resend email.

Else, if user found, and email confirmed, then send message: already confirmed.

.confirmEmail This function is for when the user clicks on the confirmation link in their email. First, you find the user by ID. If user found and user.confirmed is not true, then update to user.confirmed.

Else, send already confirmed.

  1. Create a email.msgs.js to send messages.

  2. The sendEmail() service is created using email.send.js

  3. Email Templates - creates the templates for the email.

That’s about all of the concepts for this. I’ll now need to figure out how to implement this in this specific instance of my site.