Implementing Sign-Up and Login in Latest Next.js with TypeScript

Introduction

In this post, we’ll walk through how to implement a simple sign-up and login system using the latest version of Next.js with TypeScript. We’ll leverage Next.js’s App Router, MSSQL, and bcryptjs for securely managing passwords. This system will allow users to sign up and log in using their email, and we'll use stored procedures in MSSQL to interact with the database.

1. Environment Setup

Create a .env.local file to store your database connection settings.

DB_USER=your_db_user
DB_PASSWORD=your_db_password
DB_SERVER=your_db_server
DB_DATABASE=your_db_name

2. Database and Stored Procedure Setup

We will create a Users table to store user information and write stored procedures to handle sign-up and login processes.

Creating the Users Table

CREATE TABLE [dbo].[Users] (
    UserID INT IDENTITY(1,1) PRIMARY KEY,
    Email VARCHAR(100) NOT NULL UNIQUE,
    PasswordHash NVARCHAR(200) NOT NULL,
    CreatedAt DATETIME DEFAULT GETDATE()
);

Sign-Up Stored Procedure (usp_Signup_User)

This stored procedure checks if the email already exists and then registers a new…