DEV Community: Noel Ethan Chiwamba

The Untold Story of Form Submissions in React 18

Noel Ethan Chiwamba — Thu, 28 Dec 2023 10:45:22 +0000

In this article you will discover and learn how OnSubmit and action props work together. You will also learn how you can perform other actions before and after invoking a server action in a form element of a React component.

Introduction

In traditional React apps, the common props for handling forms are onChange and onSubmit props. These props enables a developer to handle and track users as they interact with the forms. The onChange prop enables tracking of user entry on a form field. The onSubmit prop allows the developer to specify a function that will be executed when the form is submitted. This function can perform actions such as validating the input, sending data to a server, or displaying a message to the user.

Understanding the `onSubmit` prop

The onSubmit prop is passed to the form element as an attribute, and it expects a function as its value.

//line

<form onSubmit={handleSubmit}>
//form content
</form>

In a basic form, the function can take one parameter value. The value's parameter contains the data entered by the user in the form fields. The function can perform actions such as:

Validating the input.
Sending data to a server.
Displaying a message to the user.

The following code snippet provides a list of possible actions, that can be carried out by an onSubmit handler in a form that prompts a name and email of user:

// handle the submit event of the form
const handleSubmit = (event) => {
  // prevent the default browser behavior
  event.preventDefault();
  // validate the input and submit the form
  if (name && email && message) {
    // reset the form fields to their initial values
    // store the input data in the local storage or a database
    // send an email or a notification to the user or someone else
    // update the state or the UI of the app based on the input data
    // call an API or a web service with the input data
    // redirect the user to another page or URL
  } else {
    alert('Please fill all the fields');
  }
};

From the code snippet above, you can perform several actions after form submission, including:

Sending emails.
Notifying user.
Updating the UI
Redirecting user to another URL.

However, with the coming in of React Server Components, the form submission process in React has taken a turn by the introduction of the action prop to submit form data.

Using the `action` Prop to Submit Forms in React

Just like the onSubmit prop , the action prop allows form submission by passing an ordinary function or Next.js' server action to it as a value . Since React 18, you can make use of the action prop to submit forms in both React server and client components.

The action prop does not replace the onSubmit prop but rather it integrates with it. The action prop allows you to invoke a server action on a <form> element, which can perform server-side data mutations or actions without creating separate API routes.

The onSubmit prop allows you to specify a function that will be executed after the server action is completed, and receive the value returned by the server action as a parameter. The action prop and the onSubmit prop work together to provide a seamless and performant experience for form submissions and data mutations in Next.js applications.

import { SubmitButton } from '@/app/submit-button'
import { createItem } from '@/app/actions'

// Server Component
export default async function Home() {
  return (
    <form action={createItem}>
      <input type="text" name="field-name" />
      <SubmitButton />
    </form>
  )
}

In the code above, the createItem can be an ordinary function or a server action which is an async function. However any function specified in the action, receives a formData value as submitted from the form.

If createItem is a simple function, it can do the some of the following logic:

// define an ordinary function to create an item
function createItem(formData) {
  // use the formData value to get the input data
  // perform any validation or processing on the input data
  // send the data to an API
  // return a value or an error
}

If createItem was a server action then it may perform some of the following logic:

// define an async function to create an item
async function createItem(formData) {
  // use the formData value to get the input data
  // perform any validation or processing on the input data
  // use await to send the data to a server or a database
  // send the data to an API
  // return a value or an error
}

Integrating `onSubmit` and `action` props on the form element.

Out of curiosity, one may ask: Is it possible to use both onSubmit and the action prop together in a form component?

Yes, you can use the onSubmit and action prop together on a <form> element in Next.js 14. The action prop allows you to invoke a server action, which is an async function that can perform server-side data mutations or actions without creating separate API routes. The onSubmit prop allows you to specify a function that will be executed after the server action is completed, and receive the value returned by the server action as a parameter.

The logic and the experience of using the onSubmit and action prop together are as follows:

When the user submits the form, the action prop invokes the server action with the form data as an argument.
The server action performs the desired action on the server, such as sending data to a database, calling an API, or validating the input. The server action can also return a value or an error.
The onSubmit prop receives the value or the error returned by the server action, and executes the function specified by the onSubmit prop. The function can perform actions such as displaying a message to the user, redirecting the user to another page, or updating the state or the UI of the app based on the value or the error.
The user sees the result of the form submission and the server action, and can interact with the app accordingly.

Here is an example of using the onSubmit and action prop together on a <form> element in Next.js 14:

// app/actions.js
'use server'
export async function createItem(formData) {
  // perform server-side data mutation or action
  // return a value or an error
}



// app/client-component.jsx
'use client'
import { createItem } from './actions'
export default function ClientComponent() {
  // define a function to handle the onSubmit event
  const handleSubmit = (value, error) => {
    // perform actions based on the value or the error
    // such as displaying a message, redirecting, or updating the UI
  }
  return (
    // use the action prop to invoke the createItem server action
    // use the onSubmit prop to handle the value or the error returned by the createItem server action
    <form action={createItem} onSubmit={handleSubmit}>
      <input type="text" name="name" />
      <button type="submit">Create Item</button>
    </form>
  )
}

Performing Actions Before and After Invoking a Server Action Using the Action Prop.

When using server components, you may want to perform some actions before or after a server action is invoked. For example, you may want to show a loading indicator, validate the input, or display a success or error message. You can use the action prop to pass a simple function that can perform these actions and invoke the server action. The function can take one parameter: formData.

The formData parameter contains the data entered by the user in the form fields. The function can use the await keyword to invoke the server action and wait for its completion. The function can also return a value or an error that will be passed to the onSubmit prop of the form, if it is defined.

Here is an example of using the action prop to pass a simple function that performs actions before and after invoking a server action:

// app/server-component.jsx
export default function ServerComponent() {
  // define a server action that sends a message
  async function send(message) {
    'use server'
    // perform server-side data mutation or action
    // return a value or an error
  }

  // define a function that adds an optimistic message to the UI
  function addOptimisticMessage(message) {
    // update the UI with the message
  }

  // define a function that shows a toast notification
  function showToast(message, type) {
    // show a toast notification with the message and the type (success or error)
  }

  // define a function that redirects the user to another page
  function redirect(url) {
    // redirect the user to the url
  }

  return (
    // use the action prop to pass a simple function that performs actions before and after the server action
    <form
      action={async (formData: FormData) => {
        // get the message from the formData
        const message = formData.get('message');
        // add an optimistic message to the UI
        addOptimisticMessage(message);
        // invoke the server action and wait for its completion
        try {
          const value = await send(message);
          // show a success toast notification
          showToast('Message sent successfully', 'success');
          // redirect the user to another page
          redirect('/thank-you');
          // return the value to the onSubmit prop
          return value;
        } catch (error) {
          // show an error toast notification
          showToast('Message sending failed', 'error');
          // return the error to the onSubmit prop
          return error;
        }
      }}
    >
      <label>Message:</label>
      <input type="text" name="message" />
      <button type="submit">Send</button>
    </form>
  );
}

Conclusion

This article has covered how forms are submitted in traditional React apps, the props used to handle forms and how the value of the props. The article has also covered the how to integrate the action and onSubmit props to create a progressive form with a better user experience. Finally, it has also covered the how you can perform other logic before and after you have invoked a server action in Next.js 14 and above. If you may have any questions please feel free to ask in the comment box or reach out to me via twitter a.k.a X.(You can check for my handles in my profile)

How To Create Modals with Unique Routes in Next.js: A Guide to Intercepting Routes

Noel Ethan Chiwamba — Wed, 20 Dec 2023 07:37:33 +0000

This article provides an in-depth guide on how to create modals with unique routes using intercepting routes in Next.js. Discover how to render multiple pages within the same layout and display content without changing the context.

In this guide you'll learn the following:

What is a Modal?
Significance of a modal to users' experience.
What are Intercepting Routes?
How to create a modal in Next.js using intercepting routes.

What is a Modal?

A modal, often called a modal dialogue or just a modal window, is an interactive window that appears on a web page to display a message or prompt a user to perfom an action. A modal can be displayed in response to a user's action such as clicking a button or a link. However, sometimes a modal can be displayed just to capture the attention of a user to a specific information on a site without any interaction at all.

How Modals Improve Users' Experience within an Application.

Modals improve the users' experience in many ways. Modals capture the attention of users and establish a feeling of flow and continuity in the users' mind. A user can access information or complete a task using modals without ever leaving the main screen or context. This greatly helps in maintaining the user's mental picture and initial orientation of the page while reducing the number of page navigations.

When a modal is displayed, it overlays the existing content on the web page. The content on the rest of the page is partially darkened or blurred hence driving the user's attention to the information or instructions displayed on the modal.

For example, in ChatGPT 3.5, when a logged-in user clicks the Upgrade Plan button that is found on the bottom of the left-side NavBar, a modal pops up displaying the tiers offered by Open AI. A user can interact with the modal by upgrading the plan or closing the Modal.

In the above screenshot, the modal has a unique URL as observed in the browser search bar input on the top. This URL can be copied, shared or bookmarked for easy access. If you login to chatGPT, you can paste this link https://chat.openai.com/#pricing in any browser tab and it will take you straight to the Modal.

How to Create A Modal In Next.js.

There are several scenarios in which developing an application in Next.js or any other framework out there can require you to employ a modal. A few of the scenarios include:

Login page: You can use a modal to display a login form that pops up when the user clicks on a button or a link, without leaving the current page. This can improve the user experience and reduce the loading time.
Image gallery: You can use a modal to show a larger version of an image that the user selects from a grid or a list, with some additional information or options. This can create a more immersive and interactive experience for the user.
Confirmation dialog: You can use a modal to ask the user to confirm an important or irreversible action, such as deleting an item, submitting a form, or logging out. This can prevent accidental mistakes and provide feedback to the user.

Logically, each of the examples above, will need to have its own special route. For example, the login modal will require a special route that will display without leaving the main page. Having a unique route for the login modal will allow users who may have the login link for your application to simply paste the link in their browser's search bar and be taken to the login page instead of having to navigate to the main page first and click the login button or link to display the login modal. In the same way as you did with the ChatGPT 3.5 pricing link above.

In Next.js this can be created and achieved by using and Intercepting routes. Let's explore these advanced routing patterns in greater detail.

How to Create Intercepting Routes in Next.js

Intercepting routes allows you to load a route from another part of your application within the current layout. Intercepting routes enables you to display the content of another segment without user switching the context.

A segment is a part of a route that corresponds to a folder in your file system. For example, the route /blog/post has two segments: blog and post.

Just as the name suggests, intercepting routes intercept an already existing route that has its own context or layout. The Intercepting route then renders within another context or layout. For example you may have a login page that renders on it's own context and layout, however you want the same login page to render within Home page layout as a modal, hence you create a login intercepting route within the Home page layout.

To load a route from another part of your application within another layout, you define the intercepting route with (..) convention. This symbol signifies that this route is intercepting a segment one level above it.

You can use:

(.) to match segment on the same level
(..) to match segment one level above
(..)(..) to match segment two levels above
(...) to match segment from the root app directory

Implementing Intercepting Routes In Next.js

To gain greater understanding of Intercepting routes, lets build an application that allows users to add and share inspiring and motivational quotes. The home page will render a list of quotes, and a button that prompts users to add a new quote to the site. When user clicks on this button a Modal containing a form will display, to enable the user to add and share a new motivational quote.

In essence, this is one of the project that I built, using Next.js 14, Shadcn UI and Firebase. You can view the application and share your motivational quotes too by clicking here^.

Step 1. Getting Started

a. Creating a New Project

To create a Next.js app, open your terminal, cd
into the folder you'd like to keep your project, and run the following command:

npx create-next-app@latest nextjs-modal --use-npm --example "https://github.com/NoelEthanC/say-a-qoute-app/tree/starter-project"

_Note:

This command uses create-next-app, a Command Line Interface (CLI) tool that sets up a Next.js application for you. In the command above, you're also using the --example flag with the starter example template for this article._

b. Exploring the project.

After installation, open the project in your code editor and navigate to nextjs-modal.

cd nextjs-modal

c. Folder Structure

You'll notice that the project has the following folder struture as it uses the app router.

nextjs-modal/
├── node_modules
├── public
├── src/
│   ├── app/
│   │   ├── add-quote/
│   │   │   └── page.tsx
│   │   ├── default.tsx
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components
│   ├── lib
│   └── providers
├── package.json
└── ...

Here is a brief explanation of some of the files and folders you will use in this tutorial:

nextjs-modal/: The root folder of the application.
public/: The folder that serves static files such as images, fonts, etc.
src/: The folder that contains the source code of the application.
app/: The folder that contains the pages and layouts of the application.
add-quote/: The route that contains the page for adding a new quote to the application.
default.tsx: The file that exports the default component for the app layout. This component will render the main content of the application, such as the list of quotes.
layout.tsx: The file that exports the layout component for the app. This component will render the common elements of the application, such as the header and the footer. It will also accept the modal slot as a prop and render it if it exists.
components/: The folder that contains the reusable components of the application, such as the quote card, the modal, etc.
Config Files: You'll also notice config files such as next.config.js, firebase.ts and .env.local at the root of your application. Most of these files were created and configured when building the project. Feel free to add your own firebase credentials and have the application up and running.

Note: Typescript

You may also notice most files have a .ts or .tsx suffix. This is because the project is written in TypeScript. My goal was to make a tutorial that is reflective of the state of the web today.

Don't worry, If you are unfamiliar with TypeScript, I'll provide you the typescript snippets of code as needed.

d. Running the development server

Run npm i to install the project's packages.
Followed by npm run dev to start the development server.

The npm run dev command, starts your Next.js development server on port 3000. Let's check to see if it's working. Open http://localhost:3000
on your browser. Your home page should look like this:

Step 2. Creating intercepting routes.

In this section, you will create an intercepting route for the add-quote route so that it should be rendered without leaving Home page context.

The folder structure for this section will look like this:


nextjs-modal/
├── node_modules
├── public
├── src/
│   ├── app/
│   │   ├── @modal/   // slot
│   │   │   ├── (.)add-quote/ //intercepting route
│   │   │   │   └── page.tsx
│   │   │   └── default.tsx
│   │   ├── add-quote/
│   │   │   └── page.tsx
│   │   ├── default.tsx
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components
│   ├── lib
│   └── providers
├── package.json
└── ...

To create an intercepting route, do the following:

Firstly, define a slot called @modal inside the app folder. A slot is defined as a folder that begins with the @ symbol.
Inside the @modal folder , do the following:

Create a file called default.tsx. Add the following code in the default.tsx :

export default function Default() {
  return null;
}

Create a folder with the following name (.)add-quote . This folder represents an intercepting route for the add-quote route.
Inside the (.)add-quote folder, create a file called page.tsx and add the following code.

"use client";
import { Dialog, DialogContent } from "@/components/ui/dialog";
import { useRouter } from "next/navigation";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import AddQuoteFormModal from "@/components/general/AddQuoteFormModal";

const AddQuoteModal = () => {
  const router = useRouter();
  return (
    <Dialog open={true} onOpenChange={() => router.back()}>
      <DialogContent className="lg:w-[700px] bg-transparent border-0 text-transparent ">
        <Card className="bg-light-gray-800 dark:bg-dark-gray-800 border border-light-gray-700 dark:border-dark-gray-700 lg:w-[550px]">
          <CardHeader className="text-2xl">
            <CardTitle className="text-4xl">Add A Quote</CardTitle>
            <CardDescription className="text-xl">
              Add a quote to our list of quotes with one click.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <AddQuoteFormModal />
          </CardContent>
        </Card>
      </DialogContent>
    </Dialog>
  );
};

export default AddQuoteModal;

The code above uses components from a UI library called Shadcn UI. To display a modal, a Dialog component has been used and has been set to always open. You can customize the modal component in any way using tailwind css .

The component above, renders a form component called AddQuoteFormModal that will enable a user to add a quote. You can view this component by opening /src/components/general/AddQuoteFormModal.tsx file.

Step 3. Integrating the Intercepting Route in the Home Layout

After creating the intercepting route within the application. It is important to add it to the Layout component that needs to display the route.

To add the route, use a slot add the intercepting route to the layout. this will signify Next.js to know that it will receive another route in it's Layout and it should render that route seamlessly.

To enable the layout to render the modal, do the following:

Replace the code inside the src/app/layout.tsx file with the following code:


import type { Metadata } from "next";
import "./globals.css";
import { playfair } from "@/lib/fonts";
import { NextUIProviders } from "@/providers/NextUIprovider";
import { ThemeProvider } from "@/providers/ThemeProvider";
import GhostVerticalText from "@/components/general/GhostVerticalText";
import { NextJSBlob, SaqGreenBlob } from "@/components/general/GlowingBlobs";
import { ModeToggle } from "@/components/general/ThemeToggle";
import { Toaster } from "@/components/ui/toaster";
import clsx from "clsx";

export const metadata: Metadata = {
  title: "Say a Qoute",
  description: "Generated by create next app",
};

export default function RootLayout(props: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body
        className={clsx(
          playfair.className,
          "bg-light-gray-700  dark:bg-dark-gray-900 "
        )}
      >
        <ThemeProvider attribute="class" defaultTheme="dark">
          <NextUIProviders>
            <ModeToggle />
            <GhostVerticalText />
            <NextJSBlob />
            <SaqGreenBlob />
            <>
              <Toaster />
              {props.children}
            </>
          </NextUIProviders>
        </ThemeProvider>
      </body>
    </html>
  );
}

Save the file and refresh the browser.

Step 4. Rendering the Modal

After refreshing the browser, Click the green button, on the Home page which says Add a Quote and see the modal pop up. When the modal pops up check the URL in the search bar and you will see this link: localhost:3000/add-quote . This means that the modal has a unique route and you can navigate to it easily by typing in the link.

Here is how the modal is supposed to look like in the project:

You may also check it by going to the live application via this link:
say-a-qoute.vercel.app

NOTE: In Next.js if you enter the link manually, the modal does not show hence the actual route is displayed. You can test this by manually entering the route in the browser's search bar and see the actual add-quote route.

5. Conclusion.

Congratulations! I hope that by creating and displaying an intercepting route, you have been able to grasp the idea of intercepting routes in more depth. This article has discussed modals and how they enhance an application's user experience. It has also gone into great detail to describe how to create modals with shareable, unique links in Next.js. Please feel free to ask any questions you may have in the comments section below or by contacting me on LinkedIn or Twitter (see my profile for the handles).

The React Secret Weapon: A Next.js 13 beginners Simple Explanation

Noel Ethan Chiwamba — Mon, 17 Jul 2023 18:06:30 +0000

The release of Next.js 13 has sent shockwaves through the web development community, leaving developers buzzing with excitement. Platforms like YouTube, forums, and podcasts are abuzz with discussions and tutorials about this groundbreaking framework. As a beginner in the world of react you may be asking, But what exactly is all the hype about? A'int this plane react I have already learned enough? Well come with me to discover some hidden React treasure. In this short article, we'll explore the significance of Next.js 13 and dive into the expectations and excitement surrounding it.

Next.js 13 the secret weapon

Next.js 13 introduces a set of secret weapons that are poised to revolutionize web development as we know it.

Next.js 13 represents a major leap forward for the React community. By building upon the strengths of React that you possibly already know, this version takes web development to new heights, making it easier than ever to create exceptional web experiences. With its enhanced capabilities, Next.js 13 streamlines development workflows, boosts performance, and introduces exciting new features that will propel web projects into the future.

One of the most eagerly anticipated features of Next.js 13 is the introduction of React Server Components. These components are like magical building blocks that not only operate on the client side but also execute on the server before being sent to the user's browser. The result? Developers can now create dynamic and interactive elements that update in real-time, all while maintaining high performance and a smooth user experience. Imagine building a chat application where messages appear instantly for all users as they are sent – React Server Components make this possible.

Next.js 13 also harnesses the power of Server-Side Rendering (SSR), another game-changing technique. SSR generates the HTML of a web page on the server, delivering a fully rendered page to the user's browser. The advantages are numerous: faster initial page loads, improved search engine optimization, and an enhanced user experience. With Next.js 13, implementing SSR becomes a seamless process, unlocking its benefits with ease.

Do I Have to Learn Next.js?

With the buzz surrounding Next.js 13 and its powerful features, you might be wondering if learning Next.js is necessary for your web development journey. The answer depends on your specific goals and the nature of your projects. Let's explore some factors to consider when deciding whether to dive into Next.js.

React Foundation: Next.js builds upon React, so having a solid understanding of React is crucial. If you're already familiar with React or have been using it in your projects, learning Next.js can be a natural progression to enhance your skills and take advantage of its advanced features. However, if you're completely new to React, it's recommended to first grasp the fundamentals of React before jumping into Next.js.
Project Requirements: Next.js shines in certain scenarios, particularly when you need server-side rendering, dynamic routing, or built-in API routes. If your project involves these requirements or demands high performance with real-time updates, Next.js can be a valuable tool in your toolkit. Evaluate the specific needs of your project and consider whether Next.js aligns with those needs.

Ultimately, the decision to learn Next.js boils down to your specific circumstances. Assess your project requirements, consider the benefits Next.js offers, and evaluate your familiarity with React. If Next.js aligns with your goals and enhances your ability to build powerful web experiences, investing time in learning it can be highly beneficial.

Conclusion

Remember that web development is an ever-evolving field, and staying open to learning new technologies and frameworks can broaden your skillset and provide you with a competitive edge. Whether you choose to learn Next.js or explore other frameworks, the key is to continuously learn and adapt to the evolving landscape of web development.

How to Easily update an Object that's in state in React

Noel Ethan Chiwamba — Tue, 17 Jan 2023 03:12:29 +0000

Liquid syntax error: 'raw' tag was never closed

How to Develop an Email-Verification API using Django Rest Framework

Noel Ethan Chiwamba — Sat, 24 Dec 2022 09:23:37 +0000

Introduction

An email is often times if not always an integral part of the credentials that a user is required to submit when signing up for a particular system or site. Many sites prompts their users to submit their emails on signup for various purposes since emails are fast , efficient and simple.

Many sites also use an email for user authentication and originality so it is important to verify user emails or in other words to check if the email submitted by the user is legally valid and functional before the user starts to access any functionality of your site.

Verifying user emails has many advantages, for example:

It helps your site to have real users
It eases communication with your system users
It eases the process of password reset and password change

SECTION 1

Prerequisites

In this article I expect you to have basic knowledge on
Django and Django Rest Framework and you're able to set up the environment using the python pip or pipenv.

Installing Dependencies

I assume you have a Django project that's already set and now we can **install **the following dependencies to have our project ready for our main functionality of email verification.

Therefore using your terminal to install the following

1-Django rest framework



$pip install djangorestframework

This will help develop a rest API that can be consumed by a site or a mobile app

2-Django rest framework simple JWT



pip install djangorestframework-simplejwt

This package provides JSON Web Token Authentication support for Django REST framework. It will help us by generating tokens for every signed in client in the form of encoded JSON.

3-Django Rest SWagger Generator



$pip install -U drf-yasg

This package will provide us with a user interface that will help us to interact with our email verification API

After installing these dependencies, if you already have a project with the user accounts application already created then you may go to the application models else if you don't have the user model already set may now create a django application in your project for users using the command python manage.py startapp <app name> in our case our app name will be accounts

Let's begin our coding....

Adding dependencies to `Settings.py`

Navigate to your project settings an add all the dependencies and the application we just created in our project in the python installed_apps



...
INSTALLED_APPS = [
     ...
    'rest_framework',
    'rest_framework_simplejwt',
    'drf_yasg',
    'accounts',
]
...

User Model

If you already have a project its possible you have already defined your user model hence you may just add this field in the already existing user model or table then makemigrations and migrate your database



   ...
    #other user model fields
    is_verified = models.BooleanField(default=False)
   ...

Else if you don't have a user model already defined you can define one by adding this code to your accounts/models.py



from django.db import models
from django.contrib.auth.models import AbstractUser
from rest_framework_simplejwt.tokens import RefreshToken

class User(AbstractUser):
    phone_number = models.IntegerField(blank=True, null=True)
    email = models.EmailField(unique=True, blank=False, null=False)
    is_verified = models.BooleanField(default=False)

    USERNAME_FIELD = 'email'
    REQUIRED_FIELDS = ['username']

    def tokens(self):
        refresh = RefreshToken.for_user(self)
        return({
            'refresh': str(refresh),
            'refresh': str(refresh.access_token),
        })

Code Explanation

Our User model is inheriting from the AbstractUser class which is a built in user model that contains all relevant fields for a user including username field, last_name, first_name, etc fields. For more info about the class AbstractUser click here

We also have overwritten the email field, (the field is already in the model) inorder for it to be unique by placing a unique=True attribute and added new field is_verified and phone_number

The tokens function is generating and returning tokens for any user that has been created.

After this then configure the model to the settings.py, then makemigrations and migrate your database.

SECTION 2

Creating Serializers

As a tradition in Django Rest Framework create a serializers.py file in your application in this case our accounts application.
The serializer will help us to convert the data objects available in our database into json objects that are easily consumable and transported by the web.

We will declare the fields that we want to serialize and also we will make the password a write only instance since a password is a very sensitive piece of data.



from rest_framework import serializers
from .models import User

class SignUpSerializer(serializers.ModelSerializer):
    password = serializers.CharField(write_only =True  )
    # tokens = serializers.SerializerMethodField()
    class Meta:
        model = User
        fields = ['id', 'first_name', 'last_name',
                  'username', 'email', 'password', 'phone_number','tokens']
        read_only_fields= ['id',]

Utils Class for Sending Email in Django

Lets create a file that will have a class that will help us in sending an email in our application. This file will be called utils.py and will use the django EmailMessage class to send the email.

Ofcourse right now the emails cannot be sent , we have one more configuration to go through, we will look at it at the end of the article.



from django.core.mail import EmailMessage
import threading

class EmailThread(threading.Thread):

    def __init__(self, email):
        self.email = email
        threading.Thread.__init__(self)

    def run(self):
        self.email.send()

class Util:
    @staticmethod
    def send_email(data):
        email = EmailMessage(
            subject=data['email_subject'], body=data['email_body'], to=[data['to_email']])
        EmailThread(email).start()

Creating Views

Here in the views we will work on the post request which is a sign up request. The view will receive and validate all the data the user has submitted including the password and email and save the data into the User database table and send an email to the user confirming the sign up.

The email will also have a link that will take the user back to the API's verification view. The link will have a token that will be used to authenticate the user.

Remember the utils.py file created above will be imported here and data will be passed to the EmailMessage class to send the email to the just signed up user for verification.



# /views.py
from rest_framework.generics import ListAPIView, GenericAPIView
from rest_framework import response,status
from . import serializers, models
from rest_framework_simplejwt.tokens import RefreshToken
from django.contrib.sites.shortcuts import get_current_site
from django.urls import reverse
import jwt
from .utils import Util


class SignUp(GenericAPIView):

    serializer_class = serializers.SignUpSerializer

    def post(self, request):
        data = request.data
        serializer = self.serializer_class(data=data)
        serializer.is_valid(raise_exception=True)
        serializer.save()
        user = serializer.data

        # getting tokens
        user_email = models.User.objects.get(email=user['email'])
        tokens = RefreshToken.for_user(user_email).access_token
        # send email for user verification
        current_site = get_current_site(request).domain
        relative_link = reverse('email-verify')
        absurl = 'http://'+current_site+relative_link+"?token="+str(tokens)
        email_body = 'Hi '+user['username'] + \
            ' Use the link below to verify your email \n' + absurl
        data = {'email_body': email_body, 'to_email': user['email'],
                'email_subject': 'Verify your email'}

        Util.send_email(data=data)

        return response.Response({'user_data': user, 'access_token' : str(tokens)}, status=status.HTTP_201_CREATED)

From the above code, the user data have been saved and an access token is generated and concatenated to the API's url which has also been programmatically retrieved using the get_current_site(request).domain function that return the current site's URL. Altogether this data is sent to the email using the the Utils class that we created earlier.

The relative link is being assigned to a function reverse(email-verify). The reverse function will redirect the user to this 'email-verify' URL if the user successfully receives the email and clicks the link.

Email Verification

After the sign up and email processing, We need a view that will help us to verify the user's email after he clicks on the link that will be sent through the email.

but before that lets head to the serilaizers.py file and create a serializer for this view.



class SignUpSerializer(serializers.ModelSerializer):
 ... 
#already created!

class EmailVerificationSerializer(serializers.ModelSerializer):
    token = serializers.CharField(max_length=555)
    class Meta:
        model = User
        fields = ['token']

After the serializers then we can head on to the views and verify the email.



... #other imports
from django.conf import settings
from drf_yasg import openapi
from drf_yasg.utils import swagger_auto_schema

class VerifyEmail(GenericAPIView ):
    serializer_class = serializers.EmailVerificationSerializer

    token_param_config = openapi.Parameter(
        'token', in_=openapi.IN_QUERY, description='Description', type=openapi.TYPE_STRING)

    @swagger_auto_schema(manual_parameters=[token_param_config])
    def get(self, request):
        token = request.GET.get('token')
        try:
            payload = jwt.decode(token, options={"verify_signature": False})
            print(payload)
            user = models.User.objects.get(id=payload['user_id'])
            if not user.is_verified:
                user.is_verified = True
                user.save()
            return response.Response({'email': 'Successfully activated'}, status=status.HTTP_200_OK)
        except jwt.ExpiredSignatureError as identifier:
            return response.Response({'error': 'Activation Expired'}, status=status.HTTP_400_BAD_REQUEST)
        except jwt.exceptions.DecodeError as identifier:
            return response.Response({'error': 'Invalid token'}, status=status.HTTP_400_BAD_REQUEST)

Code explanation

When the user clicks on the Link sent to his email he will be redirected to this view and this view will get the token which is part of the URL. The token is decoded using the jwt.decode(token..). The user_id is retrieved from the decoded payload and theverified if he is in the database. If the user is in the database, the is_verified instance is checked if its false and the set to True and saved and a message is sent to the user that the user has beedn succefully verified and this means the email is functional.

Creating application URLs



from django.urls import path
from . import views

urlpatterns = [
    path('', views.SignUp.as_view() , name='signup' ),
    path('email-verify/', views.VerifyEmail.as_view(), name="email-verify"),  
]

Creating Project Level URLs

These URLs will have a swagger schema since we installed the swagger generator to help us organize our API



from rest_framework import permissions
from drf_yasg.views import get_schema_view
from drf_yasg import openapi
from django.contrib import admin
from django.urls import path, include
from .swagger import BothHttpAndHttpsSchemaGenerator
import json

schema_view = get_schema_view(
   openapi.Info(
      title="Email-Verify API",
      default_version='v1',
      description="An API that will allow users to send sign up and the API will verify there emails by sending the emails usung the email submitted on sign up  ",

      terms_of_service="https://www.google.com/policies/terms/",
      contact=openapi.Contact(email="user@email.com"),
      license=openapi.License(name="BSD License"),
   ),

   permission_classes=[permissions.AllowAny],
)

urlpatterns = [
    path('admin/', admin.site.urls),
   path('', schema_view.with_ui('swagger', cache_timeout=0), name='schema-swagger-ui'),
    path('accounts/', include('accounts.urls'))
]

SECTION 3

This section will cover the configuration of our API to be able to send emails our API to. We will use the google mail service. (gmail)

Configuring the settings.py

For us to be able to send the email we need to configure the settings.py with the below code and credentials for our gmail account.



EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_USE_TLS = True
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_PORT = 587
EMAIL_HOST_USER = ******@gmail.com
EMAIL_HOST_PASSWORD = *********

Finally we may run the server for our API python manage.py runserver and see something like this:

When you click accounts and click the try it out button on email you can put any active email that you want try out the API.

and click the execute button and listen to check your email inbox

Here is an email that I received from the API to the email that i used

LINKS

You may also find the code and the project on:
Github using this link - https://github.com/NoelEthanC/Email-Verify-APIs

You may view the API on raleway and try it out
Raleway Link: https://email-verify-api.up.railway.app/

DEV Community: Noel Ethan Chiwamba

The Untold Story of Form Submissions in React 18

Introduction

Understanding the onSubmit prop

Using the action Prop to Submit Forms in React

Integrating onSubmit and action props on the form element.

Performing Actions Before and After Invoking a Server Action Using the Action Prop.

Conclusion

How To Create Modals with Unique Routes in Next.js: A Guide to Intercepting Routes

What is a Modal?

How Modals Improve Users' Experience within an Application.

How to Create A Modal In Next.js.

How to Create Intercepting Routes in Next.js

Implementing Intercepting Routes In Next.js

Step 1. Getting Started

a. Creating a New Project

b. Exploring the project.

c. Folder Structure

d. Running the development server

Step 2. Creating intercepting routes.

Step 3. Integrating the Intercepting Route in the Home Layout

Step 4. Rendering the Modal

5. Conclusion.

The React Secret Weapon: A Next.js 13 beginners Simple Explanation

Next.js 13 the secret weapon

Do I Have to Learn Next.js?

Conclusion

How to Easily update an Object that's in state in React

How to Develop an Email-Verification API using Django Rest Framework

Introduction

SECTION 1

Prerequisites

Installing Dependencies

1-Django rest framework

2-Django rest framework simple JWT

3-Django Rest SWagger Generator

Adding dependencies to Settings.py

User Model

Code Explanation

SECTION 2

Creating Serializers

Utils Class for Sending Email in Django

Creating Views

Email Verification

Code explanation

Creating application URLs

Creating Project Level URLs

SECTION 3

Configuring the settings.py

LINKS

Understanding the `onSubmit` prop

Using the `action` Prop to Submit Forms in React

Integrating `onSubmit` and `action` props on the form element.

Adding dependencies to `Settings.py`