Forem: Hadiza Mohammed

How to Generate and Verify OTPs in Next.js

Hadiza Mohammed — Thu, 24 Oct 2024 10:58:39 +0000

When building modern web applications, One-Time Passwords (OTPs) are critical in two-factor authentication and user verification workflows. This guide will teach us how to generate, send, and verify OTPs using Next.js and a mock email service. By the end, you’ll understand how OTPs can enhance security and improve user experience.

What is an OTP?

An OTP (One-Time Password) is a temporary password used for a single login or transaction. It expires after a short time, providing additional security beyond regular passwords.

Common use cases:

Account Registration
Password Resets
Two-factor Authentication (2FA)

How OTP Generation Works

The general workflow for OTP generation and verification is:

Generate a random OTP.
Send the OTP to the user via email (or SMS).
Verify the OTP when the user submits it.
Activate or proceed with the next action only if OTP is correct.

Project Setup

To demonstrate OTP generation and verification, we’ll build:

A backend API route to generate OTPs.
A Redis store to temporarily save OTPs.
An API route to verify OTPs.

Prerequisites:

1- Next.js project initialized:

 npx create-next-app@latest otp-nextjs-demo
 cd otp-nextjs-demo

2- Install necessary dependencies:

 npm install redis nodemailer crypto

Step 1: Set Up Redis

We’ll use Redis to temporarily store the OTP. For this guide, we’ll use Upstash, a serverless Redis service.

Create a free Upstash Redis instance at https://upstash.com.
Copy your Redis connection string and set it in your .env.local:

REDIS_URL=<your-upstash-redis-url>
EMAIL_USER=<your-email>
EMAIL_PASS=<your-email-password>

Step 2: Create the OTP Generation API

Next, let’s create an API route to generate and send OTPs.


// /pages/api/generateOTP.ts
import { NextApiRequest, NextApiResponse } from 'next';
import Redis from 'ioredis';
import crypto from 'crypto';
import nodemailer from 'nodemailer';

// Initialize Redis
const redis = new Redis(process.env.REDIS_URL!);

// Configure Nodemailer for sending emails
const transporter = nodemailer.createTransport({
  service: 'gmail', // Use your preferred email service
  auth: {
    user: process.env.EMAIL_USER,
    pass: process.env.EMAIL_PASS,
  },
});

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const { email } = req.body;

  if (!email) {
    return res.status(400).json({ message: 'Email is required' });
  }

  try {
    // Generate a 6-digit OTP
    const otp = crypto.randomInt(100000, 999999).toString();

    // Store OTP in Redis for 5 minutes
    await redis.setex(email, 300, otp);

    // Send OTP to user's email
    await transporter.sendMail({
      from: process.env.EMAIL_USER,
      to: email,
      subject: 'Your OTP Code',
      text: `Your OTP is ${otp}. It will expire in 5 minutes.`,
    });

    return res.status(200).json({ message: 'OTP sent to email' });
  } catch (error) {
    console.error('Error generating OTP:', error);
    return res.status(500).json({ message: 'Error generating OTP' });
  }
}

How This Code Works:

Redis Setup: We connect to Redis to store OTPs with a 5-minute expiration.
OTP Generation: We use the crypto module to generate a random 6-digit OTP.
Sending OTP via Email: Nodemailer is used to send the OTP to the user’s email.

Step 3: Verify OTP API

Now, let’s create the OTP verification endpoint.


// /pages/api/verifyOTP.ts
import { NextApiRequest, NextApiResponse } from 'next';
import Redis from 'ioredis';

// Initialize Redis
const redis = new Redis(process.env.REDIS_URL!);

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const { email, otp } = req.body;

  if (!email || !otp) {
    return res.status(400).json({ message: 'Email and OTP are required' });
  }

  try {
    // Retrieve OTP from Redis
    const storedOtp = await redis.get(email);

    if (!storedOtp) {
      return res.status(400).json({ message: 'OTP expired or not found' });
    }

    if (storedOtp !== otp) {
      return res.status(400).json({ message: 'Invalid OTP' });
    }

    // OTP is valid; proceed with registration or action
    await redis.del(email); // Remove OTP after successful verification

    return res.status(200).json({ message: 'OTP verified successfully' });
  } catch (error) {
    console.error('Error verifying OTP:', error);
    return res.status(500).json({ message: 'Error verifying OTP' });
  }
}

How This Code Works:

OTP Retrieval: We retrieve the OTP from Redis using the provided email.
OTP Validation: If the OTP matches, we delete it from Redis and return a successful response. If not, we return an error message.

Step 4: Frontend Form to Request OTP

Create a simple form to request an OTP.


// /pages/index.tsx
'use client';

import { useState } from 'react';

export default function Home() {
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    const res = await fetch('/api/generateOTP', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email }),
    });

    const data = await res.json();
    setMessage(data.message);
  };

  return (
    <div>
      <h1>Request OTP</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          placeholder="Enter your email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
        <button type="submit">Get OTP</button>
      </form>
      <p>{message}</p>
    </div>
  );
}

Step 5: Frontend Form to Verify OTP

Create another form to verify the OTP.


// /pages/verify.tsx
'use client';

import { useState } from 'react';

export default function Verify() {
  const [email, setEmail] = useState('');
  const [otp, setOtp] = useState('');
  const [message, setMessage] = useState('');

  const handleVerify = async (e: React.FormEvent) => {
    e.preventDefault();

    const res = await fetch('/api/verifyOTP', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, otp }),
    });

    const data = await res.json();
    setMessage(data.message);
  };

  return (
    <div>
      <h1>Verify OTP</h1>
      <form onSubmit={handleVerify}>
        <input
          type="email"
          placeholder="Enter your email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
        <input
          type="text"
          placeholder="Enter OTP"
          value={otp}
          onChange={(e) => setOtp(e.target.value)}
          required
        />
        <button type="submit">Verify OTP</button>
      </form>
      <p>{message}</p>
    </div>
  );
}

Conclusion

In this guide, we built a complete OTP generation and verification flow in Next.js. We used:

Redis to store OTPs temporarily.
Nodemailer to send OTPs via email.
API routes to generate and verify OTPs.

This workflow ensures that your application can securely verify users during registration or password resets. You can expand this by integrating OTP with two-factor authentication (2FA) for even better security.

Setting up Redis in a Next.js Application

Hadiza Mohammed — Wed, 23 Oct 2024 11:14:14 +0000

In modern web development, performance matters. Users expect pages to load instantly and real-time features to work seamlessly. This is where Redis comes in an in-memory data store known for blazing-fast performance and scalability. Redis is perfect for use cases like caching, session management, rate limiting, and storing temporary data such as OTP codes or pending appointments.

In this article, we’ll walk you through how to integrate Redis into a Next.js application, covering both server-side logic and practical use cases like caching and session storage. We’ll be using Upstash Redis, a serverless Redis service that works perfectly with Vercel and other platforms.

Why Use Redis in a Next.js App?

Here are some key scenarios where Redis can boost the performance of your Next.js application:

Session Management: Store and retrieve user sessions, including access tokens.
Caching: Speed up page loading by caching frequently requested data.
Rate Limiting: Prevent abuse by limiting the number of API requests from a user.
Temporary Data: Store OTPs, appointment statuses, or tokens with expiration times.
Real-time Data: Use Redis’s Pub/Sub feature to send real-time updates to users.

Getting Started

Step 1: Set up a Next.js Application
If you don’t already have a Next.js project, let’s create one:

npx create-next-app@latest redis-next-app cd redis-next-app

Step 2: Install the Redis Client for Upstash
We’ll use the Upstash Redis package, a serverless Redis solution designed for serverless platforms.

npm install @upstash/redis

Step 3: Get Redis Credentials from Upstash

Go to Upstash and create an account.
Create a new Redis database.
Copy the Redis URL and Access Token from the dashboard.

Step 4: Store Redis Credentials in Environment Variables
Create a .env.local file in your project root and add the following:

REDIS_URL=<your-redis-url> REDIS_TOKEN=<your-redis-token>

Make sure to never hardcode credentials in your code—using environment variables keeps them secure.

Setting Up Redis in Your Next.js App

Let’s create a Redis client that can be reused across the entire application.


// lib/redis.ts
import { Redis } from '@upstash/redis';

// Initialize Redis using credentials from environment variables
const redis = new Redis({
  url: process.env.REDIS_URL!,
  token: process.env.REDIS_TOKEN!,
});

export default redis;

Now we can import this Redis client in our API routes or server components.

Use Case 1: Caching API Responses
Imagine you’re fetching data from a slow external API. Let’s use Redis to cache the API response and speed things up for future requests.

// pages/api/cache-example.ts
import { NextApiRequest, NextApiResponse } from 'next';
import redis from '@/lib/redis';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const cacheKey = 'myApiData';

  // Try to retrieve data from Redis cache
  const cachedData = await redis.get(cacheKey);
  if (cachedData) {
    console.log('Serving from cache');
    return res.status(200).json(JSON.parse(cachedData));
  }

  // If not in cache, fetch from an external API (simulate with static data)
  const data = { message: 'Hello from an external API' };

  // Store the result in Redis with a TTL (time-to-live) of 1 hour
  await redis.setex(cacheKey, 3600, JSON.stringify(data));

  res.status(200).json(data);
}

Try hitting the endpoint:

http://localhost:3000/api/cache-example

On the first request, data will be fetched from the API. On subsequent requests, Redis will serve the cached version.

Use Case 2: Storing and Validating OTP Codes
Let’s say we want to store OTP codes for user authentication. Redis is perfect because it supports data expiration.

// pages/api/sendOtp.ts
import redis from '@/lib/redis';
import { randomBytes } from 'crypto';

export default async function handler(req, res) {
  const { email } = req.body;

  // Generate a random OTP
  const otp = randomBytes(3).toString('hex'); // e.g., 'f1a2b3'

  // Store OTP in Redis with a 5-minute expiration
  await redis.setex(`otp:${email}`, 300, otp);

  // Simulate sending OTP via email (just log it for now)
  console.log(`Sending OTP ${otp} to ${email}`);

  res.status(200).json({ message: 'OTP sent' });
}

Validate the OTP:

// pages/api/verifyOtp.ts
import redis from '@/lib/redis';

export default async function handler(req, res) {
  const { email, otp } = req.body;

  // Retrieve OTP from Redis
  const storedOtp = await redis.get(`otp:${email}`);

  if (storedOtp === otp) {
    return res.status(200).json({ message: 'OTP verified' });
  }

  res.status(400).json({ message: 'Invalid OTP' });
}

Use Case 3: Rate Limiting API Requests
To prevent abuse, let’s build a rate limiter that restricts each user to 10 API requests per minute.


// middleware/rateLimiter.ts
import redis from '@/lib/redis';
import { NextRequest, NextResponse } from 'next/server';

export default async function middleware(req: NextRequest) {
  const ip = req.ip ?? 'unknown';

  const requests = await redis.incr(ip); // Increment request count
  if (requests === 1) {
    await redis.expire(ip, 60); // Set expiration to 1 minute
  }

  if (requests > 10) {
    return NextResponse.json({ message: 'Rate limit exceeded' }, { status: 429 });
  }

  return NextResponse.next(); // Proceed if within the limit
}

Add this middleware to specific routes using the Next.js config.

Conclusion

Integrating Redis with Next.js can drastically improve your app's performance by caching data, managing sessions, and storing temporary information. In this guide, we explored:

How to set up Redis in a Next.js project.
Using Redis for caching, OTP management and rate limiting.
Happy coding! 🚀

How to Set Up MongoDB with Next.js

Hadiza Mohammed — Fri, 04 Oct 2024 10:36:14 +0000

In this tutorial, we’ll walk through the process of connecting MongoDB to a Next.js application. We’ll cover how to set up MongoDB using Mongoose, connect to MongoDB Atlas, and ensure efficient database connections in your Next.js API routes.

Prerequisites

Basic understanding of JavaScript and Next.js.
Installed MongoDB locally or an active MongoDB Atlas account.
Basic knowledge of Node.js and npm.

Step 1: Install MongoDB and Mongoose

First, you need to install mongoose, the popular Node.js library for MongoDB, in your Next.js project.

npm install mongoose
Mongoose provides an elegant solution for managing MongoDB connections and defining schemas for data models.

Step 2: Set Up MongoDB Atlas

If you don’t have MongoDB installed locally, you can use MongoDB Atlas, a cloud-hosted MongoDB service.

Sign up at MongoDB Atlas.
Create a new project and cluster.
Get the connection string by clicking "Connect" in the cluster dashboard.

Format:
mongodb+srv://<username>:<password>@cluster0.mongodb.net/<dbname>?retryWrites=true&w=majority

Replace <username>, <password>, and <dbname> with your actual credentials.

Step 3: Create a .env File
In the root of your Next.js project, create a file named .env.local. This file will hold your environment variables securely.

MONGODB_URI=mongodb+srv://<username>:<password>@cluster0.mongodb.net/<dbname>?retryWrites=true&w=majority

Make sure to replace the placeholders with your actual MongoDB connection string. This allows you to access the URI using process.env.MONGODB_URI in your code.

Step 4: Create a Database Connection Utility
Create a utility file to manage the connection between your Next.js app and MongoDB. This file ensures that MongoDB connects efficiently, especially when handling multiple requests in a serverless environment.

/lib/db.ts

import mongoose from 'mongoose';

const MONGODB_URI = process.env.MONGODB_URI;

if (!MONGODB_URI) {
  throw new Error('Please define the MONGODB_URI environment variable');
}

let cached = global.mongoose;

if (!cached) {
  cached = global.mongoose = { conn: null, promise: null };
}

async function dbConnect() {
  if (cached.conn) {
    return cached.conn;
  }

  if (!cached.promise) {
    const opts = {
      bufferCommands: false,
    };

    cached.promise = mongoose.connect(MONGODB_URI, opts).then((mongoose) => {
      return mongoose;
    });
  }

  cached.conn = await cached.promise;
  return cached.conn;
}

export default dbConnect;

Explanation:

We define a dbConnect function that ensures MongoDB connects once and reuses the connection for subsequent requests. This helps optimize performance in serverless environments like Vercel.
If there’s already a connection (cached.conn), it reuses it instead of reconnecting.

Step 5: Use the Connection in API Routes

Now that we have the connection utility, let’s use it in an API route. Create a simple route that connects to MongoDB and returns all users.

/pages/api/users.ts

import { NextApiRequest, NextApiResponse } from 'next';
import dbConnect from '@/lib/db';
import User from '@/lib/models/User';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  await dbConnect();

  const users = await User.find({});

  res.status(200).json({ success: true, data: users });
}

Explanation:

This API route connects to MongoDB and retrieves all users from the User model.
The connection is established using dbConnect, ensuring MongoDB is connected before any database operations are performed.

Step 6: Define Mongoose Schema

Let’s define a simple schema for User using Mongoose. Create a User model under the lib/models directory.

/lib/models/User.ts

import mongoose, { Schema, Document } from 'mongoose';

export interface IUser extends Document {
  name: string;
  email: string;
  password: string;
}

const UserSchema: Schema = new mongoose.Schema({
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true },
});

const User = mongoose.models.User || mongoose.model<IUser>('User', UserSchema);

export default User;

Explanation:

This defines the structure of a User document in MongoDB.
The schema ensures that each user has a name, email, and password, with validation to require all fields.

Conclusion
In this guide, we demonstrated how to connect MongoDB to a Next.js application using Mongoose, how to set up MongoDB Atlas, and how to efficiently manage database connections in API routes.

By following these steps, you can build scalable Next.js applications that work seamlessly with MongoDB.

Mobile Development

Hadiza Mohammed — Tue, 02 Jul 2024 08:18:38 +0000

Hey there! Ever thought about creating cool apps for your phone? Here's your chance! Mobile development is an exciting space. Today, I want to share some insights about mobile development platforms, common software architecture patterns, and why I'm excited to join the HNG internship. Let's dive in and have some fun!

Mobile Development Platforms

React Native

Have you ever considered building an app that works on iOS and Android without writing separate code for each? That’s where React Native comes in. Based on JavaScript and React, it allows you to develop cross-platform apps, by reusing a single codebase. If you’re familiar with React for web apps, it’s a smooth transition. However, achieving that perfect native feel sometimes requires extra effort and custom modules.

Flutter

Let’s talk about Flutter, a framework created by Google. It uses a widget-based architecture, making it easy to design user interfaces. Flutter compiles directly to ARM, so it runs fast. Learning Dart can be challenging, but once mastered, it makes Flutter a powerful tool in your toolkit.

Xamarin

Xamarin, developed by Microsoft, allows you to create apps using C#. If you're a fan of.NET, you'll feel right at home with Xamarin. It supports cross-platform development, enabling you to share a significant amount of code across iOS, Android, and Windows. Integrated with Visual Studio, it offers a dependable development environment. However, it may occasionally be slow to support the most recent platform features, and the apps created using Xamarin may be larger compared to native ones.

Common Software Architecture Patterns

MVC stands for Model-View-Controller. It's a way to organize apps. Imagine your app as a theater play: the Model is the script, the View is the stage, and the Controller is the director. It helps keep everything organized, but sometimes the controller can get overwhelmed, like a stressed-out director managing too many actors.

MVVM (Model-View-Model) helps manage data and keep the view clean. It's great for maintainability and testability but can be challenging to learn.

Clean architecture focuses on keeping code clean, modular, and manageable. It enforces separation of concerns and scalability for large projects, requiring a strong understanding of design principles.

I'm excited to share that I've started the HNG Internship, which provides great learning opportunities with experienced developers, real-world projects, and skill enhancement. I'm looking forward to focusing on mobile development, collaborating with fellow interns, and learning from industry experts. The structured learning and practical experience will help me improve my skills. Being part of this community is very rewarding. If you're interested in the HNG Internship, check out their official website and explore the premium section for more information.

Thanks for reading! I’d love to hear your thoughts and experiences, so feel free to drop a comment below. Let’s connect and support each other on this amazing journey!

A difficult backend problem I had to solve

Hadiza Mohammed — Mon, 01 Jul 2024 11:55:55 +0000

Hey everyone! I recently faced a challenging backend problem while working on a project for my FreeCodeCamp certification. I want to share how I tackled it and why I'm excited about joining the HNG Internship.

The Challenge: Associating Exercises with Users

I was building an API that lets users create accounts, add exercises, and view their exercise logs. The tricky part was ensuring each exercise was correctly linked to the right user without creating duplicate data.

The Solution

1. Designing the Database Schema

I used MongoDB with Mongoose, creating separate schemas for users and exercises. The exercise schema included a reference to the user's ID, establishing a relationship between them.

const userSchema = new mongoose.Schema({
  username: { type: String, required: true, unique: true }
});

const exerciseSchema = new mongoose.Schema({
  userId: { type: mongoose.Schema.Types.ObjectId, ref: 'User', required: true },
  description: { type: String, required: true },
  duration: { type: Number, required: true },
  date: { type: Date, required: true }
});

2. Implementing the Endpoint

Next, I created an endpoint to add exercises. It checked if the user existed, then added the exercise, linking it to the user.

app.post('/api/users/:_id/exercises', (req, res) => {
  const userId = req.params._id;
  const { description, duration, date } = req.body;
  const exerciseDate = date ? new Date(date) : new Date();

  User.findById(userId, (err, user) => {
    if (err || !user) {
      return res.status(404).json({ error: 'User not found' });
    }

    const newExercise = new Exercise({
      userId: user._id,
      description,
      duration,
      date: exerciseDate
    });

    newExercise.save((err, exercise) => {
      if (err) {
        return res.status(500).json({ error: 'Failed to add exercise' });
      }

      res.json({
        username: user.username,
        description: exercise.description,
        duration: exercise.duration,
        date: exercise.date.toDateString(),
        _id: user._id
      });
    });
  });
});

Reflecting on the Experience

This project taught me a lot about managing database relationships and handling asynchronous operations in NodeJS. It was a challenging but rewarding experience that boosted my confidence as a backend developer.

Joining the HNG Internship

I’m super excited about the HNG Internship. It’s a fantastic opportunity to work on real-world projects, learn from experienced developers, and improve my skills. If you’re curious about the program, check out the internship page and their premium offerings.

Conclusion

Backend development can be tough, but solving these problems is incredibly fulfilling. I can’t wait to continue this journey with the HNG Internship and tackle even more exciting challenges. Thanks for reading, and I hope my experience inspires you to embrace the challenges you face in your development journey!

Turing Machine: Foundation of Computation

Hadiza Mohammed — Fri, 21 Jun 2024 09:39:52 +0000

This is a submission for DEV Computer Science Challenge v24.06.12: One Byte Explainer.

Explainer

The Turing Machine is a crucial and fundamental model of computation. It consists of an infinite tape and a read-and-write head for symbol manipulation. This powerful theoretical construct can simulate any algorithm, essential for understanding computability and complexity theory.

Additional Context

The concept of Turing Machines was introduced by Alan Turing in 1936 to formalize the notion of algorithmic computation. Its simplicity and universality laid the groundwork for the theory of computability, influencing the development of modern computers and algorithms.

https://plato.stanford.edu/entries/turing-machine/
https://en.wikipedia.org/wiki/Turing_machine