upstash · moinulmoin · Oct 24, 2024
diff --git a/examples/nextauth-upstash-redis/.eslintrc.json b/examples/nextauth-upstash-redis/.eslintrc.json
@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "next/typescript"]
 }
diff --git a/examples/nextauth-upstash-redis/.gitignore b/examples/nextauth-upstash-redis/.gitignore
@@ -3,7 +3,16 @@
 # dependencies
 /node_modules
 /.pnp
+<<<<<<< HEAD
 .pnp.js
+=======
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+>>>>>>> upgrade-nextjs15
 
 # testing
 /coverage
@@ -24,8 +33,13 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+<<<<<<< HEAD
 # local env files
 .env*.local
+=======
+# env files (can opt-in for commiting if needed)
+.env*
+>>>>>>> upgrade-nextjs15
 
 # vercel
 .vercel

diff --git a/examples/nextauth-upstash-redis/README.md b/examples/nextauth-upstash-redis/README.md
@@ -8,32 +8,4 @@ preview_url: "https://upstash-redis-with-nextauth.vercel.app"
 author: "moinulmoin"
 ---
 
-This is an example of how to do [Next.js](https://nextjs.org/) Authentication with [NextAuth.js](https://next-auth.js.org/) and [Serverless Redis by Upstash](https://upstash.com/).
-
-## Getting Started
-
-- Download or Clone this repository
-
-- Install all dependencies
-
-```bash
-npm install
-# or
-yarn install
-# or
-pnpm install
-```
-
-- Copy `.env.example` to `.env.local` and check the `.env.example` file to fill in the environment variables
-
-- Run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) to see the app.
+Source code of the [Next.js Authentication with Auth.js and Upstash Redis](https://moinulmoin.com/blog/nextjs-authentication-with-nextauth-and-upstash-redis) article.
diff --git a/examples/nextauth-upstash-redis/app/api/auth/[...nextauth]/route.ts b/examples/nextauth-upstash-redis/app/api/auth/[...nextauth]/route.ts
@@ -1,6 +1,2 @@
-import NextAuth from "next-auth";
-import { authOptions } from "@/lib/auth";
-
-const handler = NextAuth(authOptions);
-
-export { handler as GET, handler as POST };
+import { handlers } from "@/lib/auth";
+export const { GET, POST } = handlers;
diff --git a/examples/nextauth-upstash-redis/app/components/do-auth.tsx b/examples/nextauth-upstash-redis/app/components/do-auth.tsx
diff --git a/examples/nextauth-upstash-redis/app/fonts/GeistMonoVF.woff b/examples/nextauth-upstash-redis/app/fonts/GeistMonoVF.woff
diff --git a/examples/nextauth-upstash-redis/app/fonts/GeistVF.woff b/examples/nextauth-upstash-redis/app/fonts/GeistVF.woff
diff --git a/examples/nextauth-upstash-redis/app/globals.css b/examples/nextauth-upstash-redis/app/globals.css
@@ -1,3 +1,21 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}
diff --git a/examples/nextauth-upstash-redis/app/layout.tsx b/examples/nextauth-upstash-redis/app/layout.tsx
@@ -1,18 +1,35 @@
-import "./globals.css";
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import localFont from "next/font/local";
+import "./globals.css";
 
-const inter = Inter({ subsets: ["latin"] });
+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: Metadata = {
-	title: "NextAuth.js + Serverless Redis by Upstash",
-	description: "Next.js Authentication with NextAuth.js + Serverless Redis by Upstash",
+  title: "Create Next App",
+  description: "Generated by create next app",
 };
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-	return (
-		<html lang="en">
-			<body className={inter.className}>{children}</body>
-		</html>
-	);
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
 }
diff --git a/examples/nextauth-upstash-redis/app/page.tsx b/examples/nextauth-upstash-redis/app/page.tsx
@@ -1,26 +1,71 @@
-import { getServerSession } from "next-auth";
-import { DoAuth } from "./components/do-auth";
-import { authOptions } from "@/lib/auth";
+import { auth, signIn, signOut } from "@/lib/auth";
+import Form from "next/form";
 
 export default async function Home() {
-	const session = await getServerSession(authOptions);
-	return (
-		<main className="flex min-h-screen flex-col items-center bg-slate-900 text-gray-100 gap-y-20 p-24">
-			<h1 className="md:leading-snug text-3xl max-w-[1000px] md:text-5xl  [&>a]:text-green-500 font-bold text-center">
-				<a href="https://nextjs.org" target="_blank">
-					Next.js
-				</a>{" "}
-				Authentication with{" "}
-				<a href="https://next-auth.js.org/" target="_blank">
-					NextAuth.js{" "}
-				</a>{" "}
-				+{" "}
-				<a href="https://upstash.com/" target="_blank">
-					Serverless Redis by Upstash
-				</a>
-			</h1>
+  const session = await auth();
+  return (
+    <main className="flex min-h-screen flex-col items-center bg-slate-900 text-gray-100 gap-y-20 p-24">
+      <h1 className="md:leading-snug text-3xl max-w-[1000px] md:text-5xl  [&>a]:text-green-500 font-bold text-center">
+        <a href="https://nextjs.org" target="_blank">
+          Next.js
+        </a>{" "}
+        Authentication with{" "}
+        <a href="https://authjs.dev/" target="_blank">
+          Auth.js{" "}
+        </a>{" "}
+        +{" "}
+        <a href="https://upstash.com/" target="_blank">
+          Upstash Redis
+        </a>
+      </h1>
 
-			<DoAuth session={session} />
-		</main>
-	);
+      {session ? (
+        <div className="space-y-4">
+          <div className="flex flex-col items-center gap-y-2">
+            <span className="text-xl font-bold">{session.user?.name}</span>
+            <span className="text-gray-400">{session.user?.email}</span>
+          </div>
+          <SignOutButton />
+        </div>
+      ) : (
+        <SignInButton />
+      )}
+    </main>
+  );
+}
+
+function SignOutButton() {
+  return (
+    <Form
+      action={async () => {
+        "use server";
+        await signOut();
+      }}
+    >
+      <button
+        className="bg-slate-800 w-full hover:bg-slate-700 text-gray-100 font-bold py-2 px-4 rounded"
+        type="submit"
+      >
+        Sign out
+      </button>
+    </Form>
+  );
+}
+
+function SignInButton() {
+  return (
+    <Form
+      action={async () => {
+        "use server";
+        await signIn("github", { redirectTo: "/" });
+      }}
+    >
+      <button
+        className="bg-slate-800 hover:bg-slate-700 text-gray-100 font-bold py-2 px-4 rounded"
+        type="submit"
+      >
+        Sign in with GitHub
+      </button>
+    </Form>
+  );
 }
diff --git a/examples/nextauth-upstash-redis/.env.example → examples/nextauth-upstash-redis/example.env b/examples/nextauth-upstash-redis/.env.example → examples/nextauth-upstash-redis/example.env
@@ -1,13 +1,10 @@
 # create github oauth app and get the client id and secret https://github.com/settings/developers
-GITHUB_CLIENT_ID="GITHUB_CLIENT_ID"
-GITHUB_CLIENT_SECRET="GITHUB_CLIENT_SECRET"
+AUTH_GITHUB_ID="GITHUB_CLIENT_ID"
+AUTH_GITHUB_SECRET="GITHUB_CLIENT_SECRET"
 
 # create acount on https://upstash.com/ and create a redis database and get the url and token from @upstash/redis tab
 UPSTASH_REDIS_REST_URL="UPSTASH_REDIS_URL"
 UPSTASH_REDIS_REST_TOKEN="UPSTASH_REDIS_TOKEN"
 
-# generate one here: https://generate-secret.vercel.app/32
-NEXTAUTH_SECRET="YOUR_SECRET"
-
-# Site URL
-NEXTAUTH_URL="SITE_URL"
+# You can add it by using `npx auth secret`. Read more: https://cli.authjs.dev
+AUTH_SECRET=""
diff --git a/examples/nextauth-upstash-redis/lib/auth.ts b/examples/nextauth-upstash-redis/lib/auth.ts
@@ -1,16 +1,11 @@
-import GithubProvider from "next-auth/providers/github";
 import { UpstashRedisAdapter } from "@auth/upstash-redis-adapter";
 import { Redis } from "@upstash/redis";
-import { type Adapter } from "next-auth/adapters";
+import NextAuth from "next-auth";
+import GitHub from "next-auth/providers/github";
 
 const redis = Redis.fromEnv();
 
-export const authOptions = {
-	adapter: UpstashRedisAdapter(redis) as Adapter,
-	providers: [
-		GithubProvider({
-			clientId: process.env.GITHUB_CLIENT_ID as string,
-			clientSecret: process.env.GITHUB_CLIENT_SECRET as string,
-		}),
-	],
-};
+export const { handlers, signIn, signOut, auth } = NextAuth({
+  adapter: UpstashRedisAdapter(redis),
+  providers: [GitHub],
+});
diff --git a/examples/nextauth-upstash-redis/middleware.ts b/examples/nextauth-upstash-redis/middleware.ts
@@ -0,0 +1,2 @@
+export { auth as middleware } from "@/lib/auth";
+
diff --git a/examples/nextauth-upstash-redis/next.config.js b/examples/nextauth-upstash-redis/next.config.js
diff --git a/examples/nextauth-upstash-redis/next.config.ts b/examples/nextauth-upstash-redis/next.config.ts
@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;
diff --git a/examples/nextauth-upstash-redis/package.json b/examples/nextauth-upstash-redis/package.json
@@ -9,20 +9,21 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@auth/upstash-redis-adapter": "^1.0.0",
-    "@types/node": "20.4.9",
-    "@types/react": "18.2.20",
-    "@types/react-dom": "18.2.7",
-    "@upstash/redis": "^1.22.0",
-    "autoprefixer": "10.4.14",
-    "eslint": "8.46.0",
-    "eslint-config-next": "13.4.13",
-    "next": "13.4.13",
-    "next-auth": "^4.22.5",
-    "postcss": "8.4.27",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "tailwindcss": "3.3.3",
-    "typescript": "5.1.6"
+    "@auth/upstash-redis-adapter": "^2.7.2",
+    "@upstash/redis": "^1.34.3",
+    "next": "15.0.1",
+    "next-auth": "5.0.0-beta.25",
+    "react": "19.0.0-rc-69d4b800-20241021",
+    "react-dom": "19.0.0-rc-69d4b800-20241021"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.1",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
   }
-}
+}
diff --git a/examples/nextauth-upstash-redis/postcss.config.js b/examples/nextauth-upstash-redis/postcss.config.js
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { auth as middleware } from "@/lib/auth";