Skip to content

masfahru/nextjs-dashboard-example-with-authentication

Repository files navigation

Next.js 14 App Router Example with Authentication

This is a modified result after following Next.js learning course

Tech-stack:

Requirements

  • Nodejs v20
  • Package Manager (npm, yarn, or bun)
  • PostgreSQL server (if you want to use local database server)

Development

  • Clone this project to local
  • Install dependencies: npm i
  • Copy .env.example to .env
  • Modify .env as per the requirement
  • Run database seed (just for once): npm run seed
  • run npm run dev

Build

  • run npm run build

Start

  • run npm run start after successful build.

The changes

There are some differences between the original result of the course and this repository, which are:

Database driver

Using Postgres.js instead of @vercel/postgres, both of them have a similiar syntax.

for example:

const [result] = sql``;

Authentication

Implement a simple session manager, so we can force log-out other sessions by deleting their session id from the database.

Credentials:

{
  "email": "[email protected]",
  "password": "123456"
}

Web Endpoints

  • Signin http://localhost:3000/login
  • Dashboard http://localhost:3000/dashboard

RestAPI Endpoints

Signin POST http://localhost:3000/api/auth/callback/credentials

payload:

{
  "email": "[email protected]",
  "password": "123456",
  "callbackUrl": "/api/auth/session"
}

callbackUrl can be changed to any pathname to redirect after successful sign-in

Signout POST http://localhost:3000/api/auth/signout

payload:

{
  "callbackUrl": "/api/auth/providers"
}

callbackUrl can be changed to any pathname to redirect after successful sign-out

About

Next.js learn but using Postgres.js instead of @vercel/postgres

Topics

Resources

License

Stars

Watchers

Forks