7auth: Building an Authentication System and What I Learned

As part of my journey to become a web developer, I recently built my first project with Next.js named ‘7auth’ that enhanced my understanding of authentication, developing this project has been a fantastic learning experience.

App Features:
– User Authentication: Sign-up and sign-in with email/password and social logins (Google, Github and Facebook)
– Email Verification: Ensures the authenticity of user email addresses.
– Password Recovery: Allows users to reset their password securely.
– Two-Factor Authentication (2FA): Adds an extra layer of security for user accounts

Technologies Used:
– Next.js
– Prisma
– PostgreSQL
– Next-Auth

What I Learned and Experienced

Building a user interface with Tailwind CSS and ShadCN was highly educational. Utilizing ShadCN components saved time and effort. By using the cn function, I could style ShadCN components exactly how I wanted.

Connecting Next-Auth with third-party providers like Facebook, Google, Discord, and GitHub was straightforward, thanks to the comprehensive Next-Auth documentation. For credential-based login, the app required email and password from users. I learned to use Next.js server actions to handle user interactions and store data in the database. Authentication features like email verification, password recovery, and two-factor authentication were managed using tokens generated by the app.

By generating tokens for email verification, password recovery, and 2FA codes, I learned to use the built-in crypto module, which does not require installing any external dependencies.

# Create 2FA code 6-digit numbers
const token = crypto.randomInt(100000, 1000000).toString();

# Create Token for verification and forgot password
const token = crypto.randomUUID();

For email sending, I use Resend, integrating easily by following the documentation of ‘Next.js Quickstart’. Sending email with React is very simple.

import { Resend } from 'resend';
const resend = new Resend(process.env.RESEND_API_KEY!);
const domain = process.env.DOMAIN_URL;


export async function sendVerificationEmail(email: string, token: string) {
  const verificationLink = `${domain}/auth/verify-email?token=${token}`;
  const { data, error } = await resend.emails.send({
    from: 'no-reply@7auth.nuttanan.com',
    to: email,
    subject: '7authOTP - Activate your account',
    html: `
      <p>Click the link below to activate your account</p>
      <a href="${verificationLink}">Activate account</a>
    `,
  });
  if (error) return console.log(error);
  if (data) return data;
}

I also learned to create my PostgreSQL database with NeonDB and connect it with Prisma. Following the documentation from both NeonDB and Prisma helped me configure and establish the necessary connections, including the driver adapter for ORM/library. Before reading the documentation, I encountered challenges with the Edge runtime when deploying the application with Vercel.

NeonDB generous free plan allows unlimited database creation with a maximum of 0.5 GiB storage, a compute size of 0.25 vCPU, and 1 GB RAM. I think this is a good choice for a new learner like me to have a database on a serverless platform that helps me learn and build applications without getting charged.

Building ‘7auth’ has been an invaluable experience, allowing me to deepen my understanding of authentication and security in web applications. Upon finishing and deploying, I feel like “this is just a starting point one more step in my journey towards tackling even more complex challenges in web development.”

I am excited to continue exploring and learning more about full-stack web development and I think I will use my ‘7auth’ as a boilerplate for my upcoming projects so I don’t have to repeat myself when dealing with authentication, my next steps regarding authentication are to learn about Clerk or how to send a magic link to sign in.

Thank you for taking the time to read about my first project ‘7auth’.

Link: https://hi.nuttanan.com/web7auth
Github: https://github.com/mist3rW/7authOTP