You can also watch the YouTube video: [Next JS Tutorial #4 | JWT Authentication](https://www.youtube.com/watch?v=A5OPkIrBs8Q) ### Installing Required Dependencies ```bash yarn add jsonwebtoken bcrypt cookies-next ``` ### API Route for User Registration Let’s create an API route for user registration. This will allow users to sign up by providing their email and password. In the `app/api/auth/sign-up` directory, create a file `route.js`: ```js import { PrismaClient } from "@prisma/client"; import { NextResponse } from "next/server"; import bcrypt from "bcrypt"; const prisma = new PrismaClient(); export async function POST(request) { const body = await request.json(); const { email, password } = body; if (!email || !password) { return NextResponse.json( { error: "Email and password are required" }, { status: 200 } ); } try { const isUserCreatedBefore = await prisma.user.findUnique({ where: { email, }, }); if (isUserCreatedBefore) { return NextResponse.json( { error: "The email address has been used before!" }, { status: 200 } ); } const hash = await bcrypt.hash(password, 10); const user = await prisma.user.create({ data: { email: email.toLowerCase(), password: hash, }, }); if (!user) { return NextResponse.json( { error: "An error occurred, please try again later!" }, { status: 200 } ); } return NextResponse.json(user, { status: 200 }); } catch (error) { return NextResponse.json( { error: "An error occurred, please try again later!" }, { status: 500 } ); } finally { await prisma.$disconnect(); } } ``` ### API Route for User Login Let’s create an API route for user login. This will allow users to sign in by providing their email and password. In the `app/api/auth/sign-in` directory, create a file `route.js`: ```js import { PrismaClient } from "@prisma/client"; import bcrypt from "bcrypt"; import jwt from "jsonwebtoken"; import { cookies } from "next/headers"; import { NextResponse } from "next/server"; const prisma = new PrismaClient(); export async function POST(request) { const body = await request.json(); const { email, password } = body; if (!email || !password) { return NextResponse.json( { error: "Email and password are required" }, { status: 200 } ); } try { const user = await prisma.user.findFirst({ where: { email: email.toLowerCase() }, }); if (!user) { return NextResponse.json( { error: "Invalid credentials!" }, { status: 200 } ); } const validPassword = await bcrypt.compare(password, user.password); if (!validPassword) { return NextResponse.json( { error: "Invalid credentials!" }, { status: 200 } ); } const token = jwt.sign({ id: user.id }, "appSecret"); (await cookies()).set("token", token); return NextResponse.json(user, { status: 200 }); } catch (error) { console.log(error); return NextResponse.json( { error: "An error occurred, please try again later!" }, { status: 500 } ); } finally { await prisma.$disconnect(); } } ``` ### API Route for Getting Current User Let’s create an API route for getting current user. This will allow us to see if the visitor is a user or not. In the `app/api/auth/current-user` directory, create a file `route.js`: ```js import { PrismaClient } from "@prisma/client"; import { NextResponse } from "next/server"; import jwt from "jsonwebtoken"; import { cookies } from "next/headers"; const prisma = new PrismaClient(); export async function GET() { try { const tokenCookie = await cookies(); const getToken = tokenCookie.get("token"); if (getToken) { const token = jwt.verify(getToken.value, "appSecret"); const userId = token.id; if (!userId) { return NextResponse.json( { error: "Unauthorized request!" }, { status: 200 } ); } const user = await prisma.user.findUnique({ where: { id: userId }, }); if (!user) { return NextResponse.json( { error: "An error occurred!" }, { status: 200 } ); } return NextResponse.json(user, { status: 200 }); } else { return NextResponse.json(null, { status: 200 }); } } catch (error) { console.log(error); return NextResponse.json( { error: "An error occurred, please try again later!" }, { status: 500 } ); } finally { await prisma.$disconnect(); } } ``` ### Creating CurrentUserContext to get currentUser from everywhere. This context will help us to figure it out the visitor is user or not. We can also get visitors user information if the visitor signed in. Create `CurrentUserContext.js` file in `contexts` folder: ```js "use client"; import React, { createContext, useContext, useState, useEffect } from "react"; const CurrentUserContext = createContext(); export const CurrentUserProvider = ({ children }) => { const [currentUser, setCurrentUser] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { // Fetch current user from the API const fetchCurrentUser = async () => { try { const response = await fetch("/api/auth/current-user"); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const user = await response.json(); setCurrentUser(user); } catch (error) { console.error("Failed to fetch current user:", error); setCurrentUser(null); } finally { setLoading(false); } }; fetchCurrentUser(); }, []); return ( {children} ); }; export const useCurrentUser = () => { const context = useContext(CurrentUserContext); if (!context) { throw new Error("useCurrentUser must be used within a CurrentUserProvider"); } return context; }; ``` Let's edit `app/layout.js` to use our context: ```js import localFont from "next/font/local"; import "./globals.css"; import Header from "./components/Header"; import { CurrentUserProvider } from "./contexts/CurrentUserContext"; const geistSans = localFont({ src: "./fonts/GeistVF.woff", variable: "--font-geist-sans", weight: "100 900", }); const geistMono = localFont({ src: "./fonts/GeistMonoVF.woff", variable: "--font-geist-mono", weight: "100 900", }); export const metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children }) { return (

{children} ); } ``` Let's edit `Header.jsx` component inside the `app/components/` folder: ```js "use client"; import nextDark from "@/public/next-dark.svg"; import nextLight from "@/public/next-light.svg"; import { useTheme } from "next-themes"; import Image from "next/image"; import { deleteCookie, getCookie } from "cookies-next/client"; import Link from "next/link"; import ThemeSwitcherDropdown from "./ThemeSwitcherDropdown"; import { Button } from "./ui/button"; import { useEffect, useState } from "react"; import SidenavSheet from "./SidenavSheet"; import { User } from "lucide-react"; import { useCurrentUser } from "../contexts/CurrentUserContext"; const Header = () => { const [mounted, setMounted] = useState(false); const { systemTheme, theme } = useTheme(); const currentTheme = theme === "system" ? systemTheme : theme; const { currentUser } = useCurrentUser(); useEffect(() => { setMounted(true); }, []); if (!mounted) return null; return (

{currentUser ? (

{ deleteCookie("token"); window.location.reload(); }} className="p-1 bg-gray-300 shadow rounded-full cursor-pointer" >

) : ( )}

Home
Create Product
Admin

); }; export default Header; ``` Create the `app/sign-in/page.js` page: ```js "use client"; import { useEffect, useState } from "react"; import { useRouter } from "next/navigation"; import { useCurrentUser } from "@/contexts/CurrentUserContext"; import Link from "next/link"; const SignIn = () => { const { currentUser } = useCurrentUser(); const router = useRouter(); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [loading, setLoading] = useState(false); const [errorMsg, setErrorMsg] = useState(""); const [successMsg, setSuccessMsg] = useState(""); useEffect(() => { if (currentUser) { router.push("/"); } }, [currentUser]); const handleSignIn = async () => { try { setLoading(true); const response = await fetch("/api/auth/sign-in", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ email, password, }), }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); if (data.error) { setErrorMsg(data.error); setTimeout(() => { setErrorMsg(""); }, 4000); } else { setSuccessMsg("You signed in successfully!"); setTimeout(() => { window.location.reload(); }, 4000); } setLoading(false); return data; } catch (error) { setLoading(false); console.error("There was a problem with the fetch operation:", error); } }; return (

Sign In

{errorMsg ? (

Error: {errorMsg}

) : undefined} {successMsg ? (

{successMsg}

) : undefined}

Email setEmail(event.target.value)} className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Email" required />

Password setPassword(event.target.value)} className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Password" required />

Don't have an account?{" "} Sign Up

); }; export default SignIn; ``` Create the `app/sign-up/page.js` page: ```js "use client"; import { useRouter } from "next/navigation"; import { useEffect, useState } from "react"; import { useCurrentUser } from "@/contexts/CurrentUserContext"; const SignUp = () => { const { currentUser } = useCurrentUser(); const router = useRouter(); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [loading, setLoading] = useState(false); const [errorMsg, setErrorMsg] = useState(""); const [successMsg, setSuccessMsg] = useState(""); useEffect(() => { if (currentUser) { router.push("/"); } }, [currentUser]); const handleSignUp = async () => { try { setLoading(true); const response = await fetch("/api/auth/sign-up", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ email, password, }), }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); if (data.error) { setErrorMsg(data.error); setTimeout(() => { setErrorMsg(""); }, 4000); } else { setSuccessMsg("You signed up successfully!"); setTimeout(() => { setSuccessMsg(""); }, 4000); } setLoading(false); return data; } catch (error) { setLoading(false); console.error("There was a problem with the fetch operation:", error); } }; return (

Sign Up

{errorMsg ? (

Error: {errorMsg}

) : undefined} {successMsg ? (

{successMsg}

) : undefined}

); }; export default SignUp; ``` That's it for this tutorial, we created sign in, sign up page and api routes to sign in, sign up and get the current user. Next tutorial we'll start designing our admin dashboard.