Part 127: Implementing User Authentication with Database Integration

[App] Authentication User Database

[App] Authentication User Database

Welcome back to our series on building a robust authentication system for your web application. In this installment, we will transition from using placeholder logic for user authentication to storing user data in a database, providing a more secure and scalable solution. This is a crucial step in ensuring that your application can handle user authentication in a real-world scenario.

Setting Up the Database for User Storage

Moving Beyond Placeholder Authentication

Previously, our application used a basic sign-in mechanism that authenticated any user with an email from "example.com" and a password of "test." While this was sufficient for initial testing, it's time to implement a real authentication system that stores user emails and passwords securely.

Creating the User Model

We are leveraging a database managed by Prisma, which currently houses a Comment model. To store user data, we will introduce a new User model in our Prisma schema:

// File path: prisma/schema.prisma

model Comment {
  id       String   @id @default(uuid())
  message  String
  postedAt DateTime @default(now())
}

model User {
  id       String   @id @default(uuid())
  email    String   @unique
  name     String
  password String   // FIXME never store passwords as clear text!!!
}

Key Fields in the User Model:

• id: A unique identifier for each user, autogenerated as a UUID.

• email: A string that must be unique, ensuring no two users can register with the same email.

• name: A display name that can be shown in the app, such as in comments.

• password: Stored temporarily in clear text, but this is only a placeholder. Proper password hashing will be addressed later for security.

Updating the Database Schema

After defining the User model, we need to update the database schema to reflect these changes. This is done using Prisma's prisma db push command, which synchronizes the database with the updated schema. You can verify the changes by inspecting the schema with SQLite:

# push the DB
npx prisma db push
# Command to view the database schema
sqlite3 dev.db ".schema"

You'll see the newly created User table alongside the existing Comment table, complete with a unique index on the email column.

Creating User Registration Functionality

Implementing User Creation

Now that we have our database ready, the next step is to enable user registration. This involves creating a new page where users can sign up and storing their details in the database. We'll write a function to handle this data insertion.

// File path: lib/users.js

import { db } from './db';

export async function createUser({ email, name, password }) {
  return await db.user.create({
    data: { email, name, password },
  });
}

Explanation:

• createUser Function: This function takes an object with email, name, and password properties and uses the Prisma client to insert a new user into the database. Note that the id is not manually set as it is auto-generated.

Preparing for User Registration

With the createUser function in place, we are set to build a "Sign Up" page that will allow new users to register. The form will capture user inputs and call createUser to store the information in the database.

Conclusion

In this post, we have taken significant steps toward implementing a full-fledged authentication system by introducing a database-backed user model. This sets the foundation for secure user management and paves the way for further enhancements, such as password hashing and implementing a user-friendly registration page.

Stay tuned for the next update, where we'll delve into creating the "Sign Up" page and securing user passwords. As always, remember to test your application thoroughly as you implement these changes.