src > app > api > users > login > route.ts

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

connect();

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

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

        // check password
        const validPassword = await bcryptjs.compare(password, user.password);
        if(!validPassword){
            return NextResponse.json({error: 'Password not valid'}, {status: 400});
        }

        // create token data
        const tokenData = {
            id: user._id,
            username: user.username,
            email: user.email
        }

        // create json token
        const token = await jwt.sign(tokenData, process.env.TOKEN_SECRET!, {expiresIn: "1h"});
        const response = NextResponse.json({
            message: 'Login successfull',
            success: true
        })
        response.cookies.set('token', token, {
            httpOnly: true
        })
        return response;
    } catch (error: any) {
        return NextResponse.json({error: error.message}, {status: 500});
    }
}

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

src > app > login > 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 LoginPage(){
    const router = useRouter();
    const [user, setUser] = React.useState({
        email: '',
        password: ''
    })

    const loginUser = async () => {
        try {
            const response = await axios.post("/api/users/login", user);
            router.push('/profile');
        } catch (error) {
            console.log(error);
        }
    }
    return(
        <div>
            <h1 className="page-hd">Login</h1>
            <form>
                <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={loginUser} />
            </form>
            <Link className="link" href="/signup">Back to Sign up</Link>
        </div>
    )
}