Send email confirmation in Strapi v4

I have spent 1 hour to search internet for this feature but encountered a few obstacles. So I write this tutorial, hope it helps someone 😄

First, you need a SMTP mail server to send verification email. Luckily, Sendgrid provide this. In this tutorial, I will guide you to send email from your domain email, using Sendgrid as a mail server.

1. Verify your domain on Sendgrid

Go to Sender authentication page, then click Authenticate Your Domain to start the process, they will ask you to add some DNS record to your domain. The result should look like this:

Next, go to Setting -> API Keys and create a new API Key for this email.

2. Config SMTP on strapi

In .env file in your strapi project, add

URL=http://localhost:1337

config strapi url:

// /config/server.js

module.exports = ({env}) => {
    ...
    url: env("URL", "http://localhost:1337"),
})

Install email plugin using this command:

yarn add @strapi/provider-email-nodemailer

Add SMTP config to your .env file

SMTP_HOST=smtp.sendgrid.net
SMTP_PORT=465
SMTP_USERNAME=apikey
SMTP_PASSWORD=<your api key from step 1>

Create a file name plugins.js in config folder

// /config/plugin.js

module.exports = ({ env }) => ({
  email: {
    config: {
      provider: 'nodemailer',
      providerOptions: {
        host: env('SMTP_HOST', 'smtp.sendgrid.net'),
        port: env('SMTP_PORT', 465),
        auth: {
          user: env('SMTP_USERNAME'),
          pass: env('SMTP_PASSWORD'),
        },
      },
      settings: {
        defaultFrom: '[e-mail]', 
        defaultReplyTo: '[e-mail]',
      },
    },
  },
});

The defaultFrom and defaultReplyTo are email from your domain, it can be any email such as [e-mail], [e-mail],...

yarn build
yarn develop --watch-admin

3. Test send mail

Now go to admin dashboard on http://localhost:8000, navigate to Settings -> Email plugin -> Configuration, enter your email and Send test email, if everything is setup correctly, you should receive an email 😎

4. Send verification email

You are almost done, now navigate to Settings -> Advanced setting, turn on the Enable email confirmation. Next, enter the Redirection url below, it should be a page on your site to display the text Congratulation! You have successfully confirmed your email

Don't hesitate to ask me if you have any question 😁 @huylvz