Email Verification in Django and React

If you are here, I assume that you are tired of searching email verification through Django API and React in Google.

Welcome!

You will get your answer here. Please go through the whole post for a better understanding. However, don’t forget to press 👏 as much as you can so that others can reach it. Your claps will be appreciated!.

So, I will show how you can make a custom email verification mechanism using Django API and React as front-end. For your information, you can follow the same techniques for forgot password. Below steps need to be followed.

  1. Click submit button in the register form
  2. After creating the user in Database, a verification mail is sent to the user email address. The verification email link contains a random token. The token will expire after a fixed amount of time.
  3. User click the verify button in his/her email message
  4. The back-end checks the token validity and sends a response to the front-end

Sending Verification Email To User

At first, getting front-end URL from .env file (.env file = where all constant values of the application are stored). Then, generating a token by get_random_string.

Both the front-end URL and the token combine to create the verification email link. This link is attached to the email template. Finally, the email is sent to the registered user.

In my case, the email is looked like below

Verification Email

Look at the link in the above image. It follows the below format.

<frontend-url>/email-verify/<random-token>

The back-end part is done till now by sending the verification email to the front-end.

Now the front-end part comes into the play.

Front-end

When the user clicks the Verify button or the link showing in the above image. It will open a page in the front-end.

After the EmailVerify component is mounted, immediately it hits the back-end API (<backend-url>/users/validate-email-token) with the attached token as a parameter. Django API will validate the user by the token. Based on the response, the user will get the message like below.

Email Verification Success
Email Verification Failed (if the token is invalid or the user is already verified)

Token Validation in Back-end

Above function is responsible for validating token and giving response to the front-end application.

So, I guess you have solved your email verification part by going through this post.

Happy Learning

Software Engineer | Professional Scrum Master | Research Enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store