signup

src > dbConfig > dbConfig.ts

import mongoose from "mongoose";

export async function connect(){
    try {
        mongoose.connect(process.env.MONGO_URI!);
        const connection = mongoose.connection;
        connection.on('connected', () => {
            console.log("Mongo DB connected");
        });
        connection.on('error', () => {
            console.log("Mongo DB connection error");
            process.exit();
        })
    } catch (error) {
        console.log(error);
    }
}

----------------------------------------------------------------

src > models > userModel.js

import mongoose from "mongoose";

const userSchema = new mongoose.Schema({
    username:{
        type: String,
        required: [true, 'Please provide username'],
        unique: true
    },
    email: {
        type: String,
        required: [true, 'Please provide email'],
        unique: true
    },
    password:{
        type: String,
        required: [true, 'Please provide password']
    },
    isVerified:{
        type: Boolean,
        default: false
    },
    isAdmin:{
        type: Boolean,
        default: false
    },
    forgotPasswordToken: String,
    forgotPasswordTokenExpiry: Date,
    verifyToken: String,
    verifyTokenExpiry: Date
})

const Users = mongoose.models.users || mongoose.model('users', userSchema);

export default Users;

----------------------------------------------------------------

src > app > api > signup > route.ts

import {connect} from '@/dbConfig/dbConfig';
import Users from '@/models/userModel';
import { NextRequest, NextResponse } from 'next/server';
import bcryptjs from 'bcryptjs';

connect()

export async function POST(request: NextRequest){
    try {
        const reqBody = await request.json();
        const {username, email, password} = reqBody;

        // check if user email exists
        const user = await Users.findOne({email});  
        if(user){
            return NextResponse.json({error: 'User already exists'}, {status: 400});
        }

        // hash the password
        const salt = await bcryptjs.genSalt(10);
        const hashedPassword = await bcryptjs.hash(password, salt);

        // save user
        const newUser = new Users({
            username,
            email,
            password: hashedPassword
        })

        const savedUser = newUser.save();

        return NextResponse.json({
            message: 'User saved successfully',
            success: true,
            savedUser
        })

    } catch (error: any) {
        console.log(error);
        return NextResponse.json({error: error.message}, {status: 500});
    }
}

----------------------------------------------------------------

src > app > signup > page.tsx

"use client";
import React from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import axios from "axios";

export default function Signup() {
  const router = useRouter();
  const [user, setUser] = React.useState({
    username: "",
    email: "",
    password: "",
  });

  const signupUser = async () => {
    try {
        const response = axios.post('/api/users/signup', user);
        console.log(response);
        router.push('/login');
    } catch (error) {
        console.log(error);
    }
  };
  return (
    <div>
      <h1 className="page-hd">Sign up</h1>
      <form>
        <input type="text" placeholder="name" value={user.username} className="form-input" onChange={(e) => setUser({ ...user, username: e.target.value })} />
        <br />
        <input type="text" placeholder="email" value={user.email} className="form-input" onChange={(e) => setUser({ ...user, email: e.target.value })} />
        <br />
        <input type="password" placeholder="password" value={user.password} className="form-input" onChange={(e) => setUser({ ...user, password: e.target.value })}
        />
        <br />
        <input type="button" value="Submit" className="btn" onClick={signupUser} />
      </form>
      <Link className="link" href="/login">
        Back to login
      </Link>
    </div>
  );
}