Original post is here.

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.

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

https://gist.github.com/mrron313/09ace0d4b9efed5c67f2dfb9fe3632cc#file-email_sent_django-py

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.

https://gist.github.com/mrron313/0d7d1fac4aca0505d8eb247c7526ffc9#file-email_verify_component-js

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

https://gist.github.com/mrron313/cb348ddabc0d44251e604aeeb64d0d48#file-validate_email_token-py

The above function is responsible for validating tokens and giving responses to the front-end application.

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

Happy Learning