Update all dependencies. (vercel#48)

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

@@ -1,21 +1,12 @@
-<p align="center">
-  <a href="https://nextjs-postgres-auth.vercel.app/">
-    <img src="/public/logo.png" height="96">
-    <h3 align="center">Next.js Prisma PostgreSQL Auth Starter</h3>
-  </a>
-</p>
+# Next.js + PostgreSQL Auth Starter
 
-<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>
-
-<br/>
+This is a [Next.js](https://nextjs.org/) starter kit that uses [NextAuth.js](https://next-auth.js.org/) for simple email + password login, [Drizzle](https://orm.drizzle.team) as the ORM, and a [Neon Postgres](https://vercel.com/postgres) database to persist the data.
 
 ## 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 +21,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 @@
-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';

app/api/auth/register/route.ts

@@ -0,0 +1,26 @@
+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 } }) {
+      let isLoggedIn = !!auth?.user;
+      let 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,24 @@
+import NextAuth from 'next-auth';
+import Credentials from 'next-auth/providers/credentials';
+import { compare } from 'bcrypt-ts';
+import { getUser } from 'app/db';
+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 getUser(email);
+        if (user.length === 0) return null;
+        let passwordsMatch = await compare(password, user[0].password!);
+        if (passwordsMatch) return user[0] as any;
+      },
+    }),
+  ],
+});

app/auth.ts

@@ -0,0 +1,28 @@
+import { drizzle } from 'drizzle-orm/postgres-js';
+import { pgTable, serial, varchar } from 'drizzle-orm/pg-core';
+import { eq } from 'drizzle-orm';
+import postgres from 'postgres';
+import { genSaltSync, hashSync } from 'bcrypt-ts';
+
+// Optionally, if not using email/pass login, you can
+// use the Drizzle adapter for Auth.js / NextAuth
+// https://authjs.dev/reference/adapter/drizzle
+let client = postgres(`${process.env.POSTGRES_URL!}?sslmode=require`);
+let db = drizzle(client);
+
+let users = pgTable('User', {
+  id: serial('id').primaryKey(),
+  email: varchar('email', { length: 64 }),
+  password: varchar('password', { length: 64 }),
+});
+
+export async function getUser(email: string) {
+  return await db.select().from(users).where(eq(users.email, email));
+}
+
+export async function createUser(email: string, password: string) {
+  let salt = genSaltSync(10);
+  let hash = hashSync(password, salt);
+
+  return await db.insert(users).values({ email, password: hash });
+}

app/db.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,47 +1,30 @@
-// 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 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.";
+let title = 'Next.js + Postgres Auth Starter';
+let description =
+  '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({
+export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   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,37 @@
-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';
+import { SubmitButton } from 'app/submit-button';
 
 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,
+            });
+          }}
+        >
+          <SubmitButton>Sign in</SubmitButton>
+          <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>
   );