Update all dependencies.

Author: leerob

.env.example

@@ -2,10 +2,6 @@
 POSTGRES_URL=
 POSTGRES_PRISMA_URL=
 POSTGRES_URL_NON_POOLING=
-POSTGRES_USER=
-POSTGRES_HOST=
-POSTGRES_PASSWORD=
-POSTGRES_DATABASE=
 
 # Generate one here: https://generate-secret.vercel.app/32 (only required for localhost)
-NEXTAUTH_SECRET=
+AUTH_SECRET=

.gitignore

@@ -34,3 +34,4 @@ yarn-error.log*
 
 # vercel
 .vercel
+.env*.local

README.md

@@ -7,15 +7,15 @@
 
 <p align="center">
 This is a <a href="https://nextjs.org/">Next.js</a> starter kit that uses <a href="https://next-auth.js.org/">Next-Auth</a> for simple email + password login<br/>
-<a href="https://www.prisma.io/">Prisma</a> as the ORM, and a <a href="https://vercel.com/postgres">Vercel Postgres</a> database to persist the data.</p>
+<a href="https://www.prisma.io/">Prisma</a> as the ORM, and a <a href="https://vercel.com/postgres">Neon Postgres</a> database to persist the data.</p>
 
 <br/>
 
 ## Deploy Your Own
 
 You can clone & deploy it to Vercel with one click:
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?demo-title=Next.js%20Prisma%20PostgreSQL%20Auth%20Starter&demo-description=Simple%20Next.js%2013%20starter%20kit%20that%20uses%20Next-Auth%20for%20auth%20and%20Prisma%20PostgreSQL%20as%20a%20database.&demo-url=https%3A%2F%2Fnextjs-postgres-auth.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F7rsVQ1ZBSiWe9JGO6FUeZZ%2F210cba91036ca912b2770e0bd5d6cc5d%2Fthumbnail.png&project-name=Next.js%%20Prisma%20PostgreSQL%20Auth%20Starter&repository-name=nextjs-postgres-auth-starter&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnextjs-postgres-auth-starter&from=templates&skippable-integrations=1&env=NEXTAUTH_SECRET&envDescription=Generate%20a%20random%20secret%3A&envLink=https://generate-secret.vercel.app/&stores=%5B%7B"type"%3A"postgres"%7D%5D)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?demo-title=Next.js%20Prisma%20PostgreSQL%20Auth%20Starter&demo-description=Simple%20Next.js%2013%20starter%20kit%20that%20uses%20Next-Auth%20for%20auth%20and%20Prisma%20PostgreSQL%20as%20a%20database.&demo-url=https%3A%2F%2Fnextjs-postgres-auth.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F7rsVQ1ZBSiWe9JGO6FUeZZ%2F210cba91036ca912b2770e0bd5d6cc5d%2Fthumbnail.png&project-name=Next.js%%20Prisma%20PostgreSQL%20Auth%20Starter&repository-name=nextjs-postgres-auth-starter&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnextjs-postgres-auth-starter&from=templates&skippable-integrations=1&env=AUTH_SECRET&envDescription=Generate%20a%20random%20secret%3A&envLink=https://generate-secret.vercel.app/&stores=%5B%7B"type"%3A"postgres"%7D%5D)
 
 ## Developing Locally
 
@@ -30,9 +30,7 @@ npx create-next-app nextjs-typescript-starter --example "https://github.com/verc
 First, run the development server:
 
 ```bash
-npm run dev
-# or
-yarn dev
+pnpm dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

app/api/auth/[...nextauth]/route.ts

@@ -1,35 +1,2 @@
-import NextAuth, { type NextAuthOptions } from "next-auth";
-import CredentialsProvider from "next-auth/providers/credentials";
-import prisma from "@/lib/prisma";
-import { compare } from "bcrypt";
-
-export const authOptions: NextAuthOptions = {
-  providers: [
-    CredentialsProvider({
-      credentials: {
-        email: { label: "Email", type: "email" },
-        password: { label: "Password", type: "password" }
-      },
-      async authorize(credentials) {
-        const { email, password } = credentials ?? {}
-        if (!email || !password) {
-          throw new Error("Missing username or password");
-        }
-        const user = await prisma.user.findUnique({
-          where: {
-            email,
-          },
-        });
-        // if user doesn't exist or password doesn't match
-        if (!user || !(await compare(password, user.password))) {
-          throw new Error("Invalid username or password");
-        }
-        return user;
-      },
-    }),
-  ],
-};
-
-const handler = NextAuth(authOptions);
-
-export { handler as GET, handler as POST };
+export { GET, POST } from 'app/auth';
+export const runtime = 'edge';

app/api/auth/register/route.ts

@@ -0,0 +1,24 @@
+import { NextAuthConfig } from 'next-auth';
+
+export const authConfig = {
+  pages: {
+    signIn: '/login',
+  },
+  providers: [
+    // added later in auth.ts since it requires bcrypt which is only compatible with Node.js
+    // while this file is also used in non-Node.js environments
+  ],
+  callbacks: {
+    authorized({ auth, request: { nextUrl } }) {
+      const isLoggedIn = !!auth?.user;
+      const isOnDashboard = nextUrl.pathname.startsWith('/protected');
+      if (isOnDashboard) {
+        if (isLoggedIn) return true;
+        return false; // Redirect unauthenticated users to login page
+      } else if (isLoggedIn) {
+        return Response.redirect(new URL('/protected', nextUrl));
+      }
+      return true;
+    },
+  },
+} satisfies NextAuthConfig;

app/auth.config.ts

@@ -0,0 +1,29 @@
+import NextAuth from 'next-auth';
+import Credentials from 'next-auth/providers/credentials';
+import bcrypt from 'bcrypt';
+import prisma from 'app/prisma';
+import { authConfig } from 'app/auth.config';
+
+export const {
+  handlers: { GET, POST },
+  auth,
+  signIn,
+  signOut,
+} = NextAuth({
+  ...authConfig,
+  providers: [
+    Credentials({
+      async authorize({ email, password }: any) {
+        let user = await prisma.user.findUnique({
+          where: {
+            email,
+          },
+        });
+
+        if (!user) return null;
+        let passwordsMatch = await bcrypt.compare(password, user.password);
+        if (passwordsMatch) return user as any;
+      },
+    }),
+  ],
+});

app/auth.ts

@@ -0,0 +1,48 @@
+export function Form({
+  action,
+  children,
+}: {
+  action: any;
+  children: React.ReactNode;
+}) {
+  return (
+    <form
+      action={action}
+      className="flex flex-col space-y-4 bg-gray-50 px-4 py-8 sm:px-16"
+    >
+      <div>
+        <label
+          htmlFor="email"
+          className="block text-xs text-gray-600 uppercase"
+        >
+          Email Address
+        </label>
+        <input
+          id="email"
+          name="email"
+          type="email"
+          placeholder="[email protected]"
+          autoComplete="email"
+          required
+          className="mt-1 block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-black focus:outline-none focus:ring-black sm:text-sm"
+        />
+      </div>
+      <div>
+        <label
+          htmlFor="password"
+          className="block text-xs text-gray-600 uppercase"
+        >
+          Password
+        </label>
+        <input
+          id="password"
+          name="password"
+          type="password"
+          required
+          className="mt-1 block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-black focus:outline-none focus:ring-black sm:text-sm"
+        />
+      </div>
+      {children}
+    </form>
+  );
+}

app/form.tsx

@@ -1,30 +1,20 @@
-// These styles apply to every route in the application
-import "@/styles/globals.css";
-import { Metadata } from "next";
-import { Inter } from "next/font/google";
-import { Toaster } from "react-hot-toast";
-import AuthStatus from "@/components/auth-status";
-import { Suspense } from "react";
+import './globals.css';
 
-const inter = Inter({
-  variable: "--font-inter",
-  subsets: ["latin"],
-});
+import { GeistSans } from 'geist/font/sans';
 
-const title = "Next.js Prisma Postgres Auth Starter";
+const title = 'Next.js Prisma Postgres Auth Starter';
 const description =
-  "This is a Next.js starter kit that uses Next-Auth for simple email + password login and a Postgres database to persist the data.";
+  'This is a Next.js starter kit that uses NextAuth.js for simple email + password login and a Postgres database to persist the data.';
 
-export const metadata: Metadata = {
+export const metadata = {
   title,
   description,
   twitter: {
-    card: "summary_large_image",
+    card: 'summary_large_image',
     title,
     description,
   },
-  metadataBase: new URL("https://nextjs-postgres-auth.vercel.app"),
-  themeColor: "#FFF",
+  metadataBase: new URL('https://nextjs-postgres-auth.vercel.app'),
 };
 
 export default async function RootLayout({
@@ -34,14 +24,7 @@ export default async function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.variable}>
-        <Toaster />
-        <Suspense fallback="Loading...">
-          {/* @ts-expect-error Async Server Component */}
-          <AuthStatus />
-        </Suspense>
-        {children}
-      </body>
+      <body className={GeistSans.variable}>{children}</body>
     </html>
   );
 }

styles/globals.css app/globals.css

@@ -1,28 +1,41 @@
-import Image from "next/image";
-import Form from "@/components/form";
-import Link from "next/link";
+import Link from 'next/link';
+import { Form } from 'app/form';
+import { signIn } from 'app/auth';
 
 export default function Login() {
   return (
     <div className="flex h-screen w-screen items-center justify-center bg-gray-50">
       <div className="z-10 w-full max-w-md overflow-hidden rounded-2xl border border-gray-100 shadow-xl">
         <div className="flex flex-col items-center justify-center space-y-3 border-b border-gray-200 bg-white px-4 py-6 pt-8 text-center sm:px-16">
-          <Link href="/">
-            <Image
-              src="/logo.png"
-              priority
-              alt="Logo"
-              className="h-10 w-10 rounded-full"
-              width={20}
-              height={20}
-            />
-          </Link>
           <h3 className="text-xl font-semibold">Sign In</h3>
           <p className="text-sm text-gray-500">
             Use your email and password to sign in
           </p>
         </div>
-        <Form type="login" />
+        <Form
+          action={async (formData: FormData) => {
+            'use server';
+            await signIn('credentials', {
+              redirectTo: '/protected',
+              email: formData.get('email') as string,
+              password: formData.get('password') as string,
+            });
+          }}
+        >
+          <button
+            type="submit"
+            className="flex h-10 w-full items-center justify-center rounded-md border text-sm transition-all focus:outline-none"
+          >
+            Sign In
+          </button>
+          <p className="text-center text-sm text-gray-600">
+            {"Don't have an account? "}
+            <Link href="/register" className="font-semibold text-gray-800">
+              Sign up
+            </Link>
+            {' for free.'}
+          </p>
+        </Form>
       </div>
     </div>
   );