DEV Community: Zul Ikram Musaddik Rayat

Email Verification with Better-Auth (Basics Tutorial, Ep. 2)

Zul Ikram Musaddik Rayat — Sun, 21 Sep 2025 16:27:58 +0000

Welcome back to the Better-Auth Basics series! 🚀

In Episode 1, we set up Better-Auth with Drizzle ORM and implemented sign-up and login functionality. It worked great… but there’s a big flaw:

👉 Anyone can sign up with any random email — even one they don’t own.

That’s obviously not safe for production. So in this post, we’ll fix that by adding Email Verification with Better-Auth.

❌ The Problem Without Verification

Right now, a user can type any email address on the registration page, and the server will happily accept it.

That means fake accounts, spam signups, and security risks. We need a way to make sure the person actually owns the email they’re registering with.

✅ Email Verification with Better-Auth

The good news? Better-Auth already has email verification built in for email/password authentication. We just need to configure it. Let’s go step by step.

🛠 Step 1: Configure an Email Provider

For sending verification emails, I used Resend.

Create a Resend account
Add your custom domain
Generate an API key
Save it in your .env file:

RESEND_API_KEY=your-api-key

🛠 Step 2: Create Email Templates

Inside Resend, configure simple templates for your verification emails.
This is the message your users will see in their inbox with the verification link.

🛠 Step 3: Enable Email Verification in Better-Auth

In your Better-Auth configuration, enable the verification features:

import { betterAuth } from "better-auth/server";
import { schema } from "../db/schema";

export const auth = betterAuth({
  schema,
  emailAndPassword: {
    enabled: true,
    requireEmailVerification: true,
  },
  emailVerification: {
    sendOnSignUp: true,
    autoSignInAfterVerification: true,
    async sendVerificationEmail({ user, url, token }, request) {
      await sendVerificationEmail({ email: user.email, url, token });
    },
  },
});

🛠 Step 4: Send Verification Email on Sign Up

Better-Auth will now automatically send a verification email when a new user registers.

After sign-up, redirect the user to a verify page in your app.
Tell them to check their inbox for the verification link.

// app/verify/page.tsx
export default function VerifyPage() {
  return (
    <div>
      <h1>Verify Your Email</h1>
      <p>
        We’ve sent you a link. Please check your inbox and click it to activate your account.
      </p>
    </div>
  );
}

🛠 Step 5: Testing the Flow

Register with a real email address
Check your inbox → you’ll see the verification email
Click the link → the server validates it
You’re automatically signed in and redirected to the homepage 🎉

Here’s what the successful response looks like:

{
  "status": 200,
  "message": "Email verified and user signed in"
}

🎉 And That’s It!

With just a few lines of configuration, we added secure email verification to our Better-Auth setup.

Now:

Users must prove they own their email
Fake signups are blocked
Onboarding is safer and more production-ready

📌 What’s Next?

This was Episode 2 of Better-Auth Basics.
In future episodes, we’ll cover:

👥 Role-based authentication
⚡ Rate limiting
🛡 Middleware for protecting routes Stay tuned — we’re just getting started.

🔗 Stay Connected

📽️ Youtube: code_unhinged
🐦 Twitter (X): zul_rayat
💻 GitHub: devrayat000
💼 LinkedIn: zim-rayat
📷 Instagram: rayatttttttt
📘 Facebook: rayat.ass

💬 Got questions? Drop them in the comments — I reply to every one!
👍 Don’t forget to like, share, and subscribe for more dev content.

Authentication Using Better-Auth (Basics Tutorial)

Zul Ikram Musaddik Rayat — Wed, 17 Sep 2025 00:04:40 +0000

What’s up, devs! 👋
In this post, I’ll walk you through setting up authentication in a Node.js/Next.js project using Better-Auth — a powerful new authentication library. This is based on the first episode of my YouTube playlist Better-Auth Basics.

Better-Auth makes it really easy to implement secure authentication with features like:

✅ Email + Password authentication
✅ Social sign-ins
✅ Built-in rate limiting
✅ Automatic database management & adapters
✅ Two-factor authentication support
✅ Simple client API for frontend integrations

Sounds exciting? Let’s dive in! 🚀

🛠 Project Setup

For this tutorial, I’m working on my personal project — a ride-sharing app.
We’ll integrate Better-Auth into it step by step.

1. Install Dependencies

We’ll need Better-Auth, Drizzle ORM, and Postgres.

bun add better-auth drizzle-orm postgres

2. Environment Variables

Generate a secret key and add it to your .env file:

BETTER_AUTH_SECRET=your-secret-key
BETTER_AUTH_URL=http://localhost:3000 # Base URL of your app
DATABASE_URL=postgresql://user:password@localhost:5432/dbname

⚙️ Database Setup with Drizzle

Better-Auth ships with ready-to-use schemas.
We’ll copy those into our project and run migrations.

1. Generate Schema

bunx @better-auth/cli generate # create better-auth schema

2. Run Migrations

bunx drizzle-kit generate # generate migration files
bunx drizzle-kit migrate

Once done, your database will have all the required tables.

🔑 Enable Email/Password Authentication

Inside your Better-Auth server setup, enable email/password auth:

// lib/auth.ts
import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";
import { db } from "@/db"; // your drizzle instance
import * as schema from "@/db/schema"; // your drizzle schema

export const auth = betterAuth({
  database: drizzleAdapter(db, {
    provider: "pg", // or "mysql", "sqlite"
    schema,
  }),
  emailAndPassword: {
    enabled: true,
  },
});

🖥 Setting Up the Client

Better-Auth provides a client utility to make frontend integration simple.

// lib/auth-client.ts
import { createAuthClient } from "better-auth/react";

export const authClient = createAuthClient({
  /** The base URL of the server (optional if you're using the same domain) */
  baseURL: "http://localhost:3000",
});

📡 Next.js API Routes

Now, let’s connect it with Next.js routes.

// app/api/auth/[...all]/route.ts
import { auth } from "@/lib/auth";
import { toNextJsHandler } from "better-auth/next-js";

export const { GET, POST } = toNextJsHandler(auth.handler);

This route will handle all sign-in, sign-up, and session management APIs.

👤 Implement Sign-Up

On your register page, use the client:

async function handleRegister(e) {
  e.preventDefault();
  try {
    await authClient.signUp.email({
      name: form.name,
      email: form.email,
      password: form.password,
      callbackUrl: "/",
    });
  } catch (err) {
    console.error(err);
  }
}

🔐 Implement Sign-In

Similarly, on your login page:

async function handleLogin(e) {
  e.preventDefault();
  try {
    await authClient.signIn.email({
      email: form.email,
      password: form.password,
      callbackUrl: "/",
    });
  } catch (err) {
    console.error(err);
  }
}

🎉 Testing It Out

Tried signing up → User was created successfully ✅
Tried logging in → Redirected to homepage with 200 response ✅

That’s it! We now have a working authentication flow with Better-Auth.

📌 What’s Next?

This tutorial only covers the basics:

Setting up Better-Auth
Running database migrations with Drizzle
Implementing Sign-In & Sign-Up

In upcoming posts/videos, I’ll cover:

🔑 Authorization & Role-Based Access
⚡ Rate Limiting
🔒 Two-Factor Authentication
🔗 Social Logins

Stay tuned!

🔗 Connect With Me

🐦 Facebook
💻 GitHub
💼 LinkedIn
📽️ Youtube

👉 If you found this useful, drop a comment and let me know what you’re building with Better-Auth.
And don’t forget to follow me here on DEV.to + subscribe on YouTube for more tutorials.

Happy coding! ✨

🍳 Recipe Generator – What’s in Your Pantry?

Zul Ikram Musaddik Rayat — Sun, 14 Sep 2025 20:33:41 +0000

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

Have a few random ingredients lying around but no idea what to cook?
Recipe Generator helps you turn everyday pantry items into delicious meals.

Simply type or select ingredients you already have, and the app instantly generates recipe ideas — complete with images, instructions, and serving tips.

This makes meal planning fun, reduces food waste, and gives home cooks an easy way to experiment with new dishes.

Demo

🔗 Live Demo Link

Screenshots

How I Used Google AI Studio

Built the app on Google AI Studio, deployed via Cloud Run.
Used Gemini’s multimodal capabilities for:
- Text understanding: Parsing ingredient inputs.
- Image generation: Producing realistic dish images that match the recipe.
- Recipe generation: Turning ingredient lists into step-by-step cooking instructions.

Multimodal Features

Ingredient → Recipe (Text): Natural language input is converted into structured recipes.
Recipe → Image (Visual): Each generated recipe is paired with a dish image for inspiration.
Instructional Output: Clear step-by-step cooking instructions with serving notes.

Why This Matters

Practical impact: Helps reduce food waste by suggesting meals from what you already own.
User delight: A fun, interactive way to explore cooking ideas.
Strong multimodal showcase: Combines text understanding, recipe creation, and visual generation in a single workflow.

Team

Solo submission by @devrayat000

Hairstyle AI Try-On ✂️🤖

Zul Ikram Musaddik Rayat — Sun, 14 Sep 2025 19:55:25 +0000

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

What if, before getting a haircut, you could actually see how you’d look?
Hairstyle AI Try-On lets you upload your photo and instantly preview multiple hairstyles, complete with AI-generated ratings to help you find your perfect match.

This app solves a very real problem: most of us take a risk when we try a new hairstyle. By using multimodal AI, you can confidently test different styles virtually before visiting the barber.

Demo

🔗 Live Demo Link

Screenshots

Initial State (upload your photo):

AI-Generated Hairstyles:

How I Used Google AI Studio

I built and deployed the entire experience on Google AI Studio.
The backend runs on Cloud Run, making it scalable and easy to deploy.
Gemini was used for image understanding (detecting the face and aligning hairstyles) and content generation (evaluating & scoring hairstyles).

Multimodal Features

Image Understanding: The uploaded photo is analyzed to detect face features and properly overlay hairstyles.
Image Generation/Transformation: Hairstyles are applied virtually, with realistic blending to match lighting and head shape.
Text + Scoring Output: Gemini provides natural-language feedback and a numerical “style score” (e.g. 8.5/10 for Curly Fringe).

This mix of visual + evaluative output makes the experience both fun and practical.

Why This Matters

Delightful user experience: Try on hairstyles virtually, no risk.
Practical application: Helps people make confident styling decisions.
Shows multimodal power: Combines vision, generation, and evaluation in one workflow.

Team

Solo submission by @devrayat000

Closing Thoughts

This project demonstrates how Gemini’s multimodal capabilities can power consumer-friendly, real-world experiences. It’s fun, engaging, and practical — all in one.

Highlighting Image Text

Zul Ikram Musaddik Rayat — Tue, 30 Apr 2024 22:10:00 +0000

Image processing and data extraction has become one of the most powerful features of Machine Learning now. But doing it from scratch is a pain in the a**. The one thing programming taught me that no one else did is not to reinvent the wheel every time and to prioritize getting the job done. Keeping that in mind, I have come across an easy solution for the problem at hand.

The Problem At Hand

For simplicity's sake, let us consider this to be a page from a book. We want to highlight the word comment wherever it occurs. This could be an intuitive feature for image search engines to direct the users' attention to their desired content.

Solution

We are going to be using an OCR (Optical Character Recognition) engine called Tesseract for the image-to-text recognition part. It is free software, released under the Apache License. Install the engine for your desired OS from their official website. I'm using Windows for this. Add the installation path to your environment variables.

Create a python project with a virtual environment set up on it. Install the necessary packages.

pip install opencv-python # for image processing
pip install pytesseract # to use the ocr engine in your project
pip install pandas # to conduct search queries

In your main.py import the necessary libraries and define the necessary variables. Read the image from the source using the imread method. Make a copy of the original image for the overlay. Extract text information from the image. It is important to set the output_type to be a pandas Dataframe object which will ease the filtering process.

import cv2
from pytesseract import pytesseract, Output

ALPHA = 0.4

filename = "devto.png"
query = "comment"

img = cv2.imread(filename)
# make a copy of the original image for the highlight overlay
overlay = img.copy()

# extract text data from the image as a pandas Dataframe object
boxes = pytesseract.image_to_data(img, lang="ben+eng", output_type=Output.DATAFRAME)

The dataframe object returned has the following structure:

level	page_num	block_num	par_num	line_num	word_num	left	top	width	height	conf	text
5	1	5	1	1	4	169	537	99	14	96.276794	comments

We are only interested in the text, left, top, width, and height columns. We need to prepare the dataframe for this specific job by applying various filters. Drop the rows that have NaN or empty string in the text column to make our data error-proof and the computations more efficient. The text column usually contains single words. We can iterate through each row to find out if any of them matches our query string.

# drop rows that have NaN values in the text column
boxes = boxes.dropna(subset=["text"])
# remove empty text rows
boxes = boxes[boxes["text"].str.len() > 1]
# Search through the text column for matching words
boxes[boxes["text"].str.contains(query.strip(), case=False)]

Now we can get started with the highlighting part. We will draw rectangular highlight boxes around the matched positions.

for _, box in boxes.iterrows():
    left = box["left"]
    top = box["top"]
    width = box["width"]
    height = box["height"]

    # draw a yellow rectangle around the matched text
    cv2.rectangle(
        overlay,
        (left, top),
        (left + width, top + height),
        (0, 255, 255),
        -1,
    )

# Add the overlay on the original image
img_new = cv2.addWeighted(overlay, ALPHA, img, 1 - ALPHA, 0)
# Some more image processing to make the highlights more realistic
r = 1000.0 / img_new.shape[1]
dim = (1000, int(img_new.shape[0] * r))
resized = cv2.resize(img_new, dim, interpolation=cv2.INTER_AREA)

Show the modified image using opencv's imshow method.

cv2.imshow("Highlighted", resized)
cv2.waitKey(0)
cv2.destroyAllWindows()

The result is this modified image with every occurring comment highlighted in yellow.

Bonus Tip

The search-through mechanism in this process can only detect and highlight a single word or full sentence with exact matches. If we want to highlight words that are not in a single sentence, we just need to filter the dataframe with a little bit of pandas magic.

+ from pandas import concat

- boxes[boxes["text"].str.contains(query.strip(), case=False)]
+ boxes = concat(
        [
            boxes[boxes["text"].str.contains(word.strip(), case=False)]
            for word in query.split()
        ]
  )

With this, the user can query "essential comments" and it will highlight essential and comments even though they are not together.

Hash routing in Remix!

Zul Ikram Musaddik Rayat — Fri, 29 Jul 2022 15:09:58 +0000

Remix is the newest hottest full-stack React framework. Remix supports file-based routing which uses react-router-dom under the hood which is a popular react routing library.

Because Remix users react-router's BrowserRouter internally, you can't actually do Hash Routing (id based routing that triggers scrolling) with it.

For example, if you create a link like this,

<Link to="#footer">
    Go to bottom
</Link>

it will surely change the browser URL, but won't scroll down to the element with an id of footer.

Of course, there's an easier way to achieve this behavior.

Turning off Client-Side Routing

We can add a reloadDocument prop to the specialized Link component and it will start acting like a normal anchor tag.

<Link to="#footer" reloadDocument>
    Go to bottom
</Link>

This in turns, turns off client-side routing and lets the browser handle the transition, as mentioned here

This is fine until you want both client-side routing and scroll behavior on hash routing.

Manual Scrolling via Side-Effect

The workaround this is to catch the side-effect created by the route change inside a useEffect and handle the scrolling manually.

In the root (root.jsx file) of our projects, we have to get the location object from the useLocation hook provided by remix. Then, we have to create a useEffect which depends on that location object. The location object has a property called hash which provides us with the hash portion of the URL e.g. #footer if the URL is www.example.com/#footer. Then we can look up the element containing that id and manually scroll down to it using the scrollIntoView method.

const location = useLocation();

useEffect(() => {
  if (location.hash) {
    const el = document.querySelector(location.hash);
    if (el) {
      el.scrollIntoView();
    }
  }
}, [location]);