refactor: colocate auth stuff and bump some stuff (#1136)

* chore: bump dep and remove unstable

* refactor auth setup

* fixy

* whoops

* fix

* use new recommended way to setup prisma

* rm async/await ref #1129

* docs

cli/package.json

@@ -50,18 +50,18 @@
     "sort-package-json": "^2.0.0"
   },
   "devDependencies": {
-    "@prisma/client": "^4.8.0",
+    "@prisma/client": "^4.9.0",
     "@tanstack/react-query": "^4.20.4",
-    "@trpc/client": "^10.7.0",
-    "@trpc/next": "^10.7.0",
-    "@trpc/react-query": "^10.7.0",
-    "@trpc/server": "^10.7.0",
+    "@trpc/client": "^10.9.0",
+    "@trpc/next": "^10.9.0",
+    "@trpc/react-query": "^10.9.0",
+    "@trpc/server": "^10.9.0",
     "@types/fs-extra": "^9.0.13",
     "@types/gradient-string": "^1.1.2",
     "@types/inquirer": "^9.0.2",
     "@types/node": "^18.8.0",
-    "next": "^13.1.1",
-    "next-auth": "^4.18.7",
+    "next": "^13.1.6",
+    "next-auth": "^4.19.0",
     "prettier": "^2.8.0",
     "prettier-plugin-tailwindcss": "^0.2.0",
     "prisma": "^4.8.0",

cli/src/installers/dependencyVersionMap.ts

@@ -4,12 +4,12 @@
  */
 export const dependencyVersionMap = {
   // NextAuth.js
-  "next-auth": "^4.18.7",
+  "next-auth": "^4.19.0",
   "@next-auth/prisma-adapter": "^1.0.5",
 
   // Prisma
-  prisma: "^4.8.0",
-  "@prisma/client": "^4.8.0",
+  prisma: "^4.9.0",
+  "@prisma/client": "^4.9.0",
 
   // TailwindCSS
   tailwindcss: "^3.2.0",
@@ -20,10 +20,10 @@ export const dependencyVersionMap = {
   "@types/prettier": "^2.7.2",
 
   // tRPC
-  "@trpc/client": "^10.8.1",
-  "@trpc/server": "^10.8.1",
-  "@trpc/react-query": "^10.8.1",
-  "@trpc/next": "^10.8.1",
+  "@trpc/client": "^10.9.0",
+  "@trpc/server": "^10.9.0",
+  "@trpc/react-query": "^10.9.0",
+  "@trpc/next": "^10.9.0",
   "@tanstack/react-query": "^4.20.0",
   superjson: "1.9.1",
 } as const;

cli/src/installers/nextAuth.ts

@@ -6,8 +6,9 @@ import { PKG_ROOT } from "~/consts.js";
 import { addPackageDependency } from "~/utils/addPackageDependency.js";
 
 export const nextAuthInstaller: Installer = ({ projectDir, packages }) => {
+  const usingPrisma = packages?.prisma.inUse;
   const deps: AvailableDependencies[] = ["next-auth"];
-  if (packages?.prisma.inUse) deps.push("@next-auth/prisma-adapter");
+  if (usingPrisma) deps.push("@next-auth/prisma-adapter");
 
   addPackageDependency({
     projectDir,
@@ -17,23 +18,17 @@ export const nextAuthInstaller: Installer = ({ projectDir, packages }) => {
 
   const extrasDir = path.join(PKG_ROOT, "template/extras");
 
-  const apiHandlerSrc = path.join(
+  const apiHandlerFile = "src/pages/api/auth/[...nextauth].ts";
+  const apiHandlerSrc = path.join(extrasDir, apiHandlerFile);
+  const apiHandlerDest = path.join(projectDir, apiHandlerFile);
+
+  const authConfigSrc = path.join(
     extrasDir,
-    "src/pages/api/auth/[...nextauth]",
-    packages?.prisma.inUse ? "with-prisma.ts" : "base.ts",
-  );
-  const apiHandlerDest = path.join(
-    projectDir,
-    "src/pages/api/auth/[...nextauth].ts",
+    "src/server/auth",
+    usingPrisma ? "with-prisma.ts" : "base.ts",
   );
-
-  const getServerAuthSessionSrc = path.join(extrasDir, "src/server/auth.ts");
-  const getServerAuthSessionDest = path.join(projectDir, "src/server/auth.ts");
-
-  const nextAuthDTSSrc = path.join(extrasDir, "src/types/next-auth.d.ts");
-  const nextAuthDTSDest = path.join(projectDir, "src/types/next-auth.d.ts");
+  const authConfigDest = path.join(projectDir, "src/server/auth.ts");
 
   fs.copySync(apiHandlerSrc, apiHandlerDest);
-  fs.copySync(getServerAuthSessionSrc, getServerAuthSessionDest);
-  fs.copySync(nextAuthDTSSrc, nextAuthDTSDest);
+  fs.copySync(authConfigSrc, authConfigDest);
 };

cli/template/base/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "13.1.2",
+    "next": "13.1.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "zod": "^3.20.2"
@@ -21,7 +21,7 @@
     "@typescript-eslint/eslint-plugin": "^5.47.1",
     "@typescript-eslint/parser": "^5.47.1",
     "eslint": "^8.30.0",
-    "eslint-config-next": "13.1.2",
+    "eslint-config-next": "13.1.6",
     "typescript": "^4.9.4"
   }
 }

cli/template/extras/src/pages/api/auth/[...nextauth].ts

@@ -0,0 +1,4 @@
+import NextAuth from "next-auth";
+import { authOptions } from "../../../server/auth";
+
+export default NextAuth(authOptions);

cli/template/extras/src/server/auth/base.ts

@@ -0,0 +1,73 @@
+import type { GetServerSidePropsContext } from "next";
+import {
+  getServerSession,
+  type NextAuthOptions,
+  type DefaultSession,
+} from "next-auth";
+import DiscordProvider from "next-auth/providers/discord";
+import { env } from "../env/server.mjs";
+
+/**
+ * Module augmentation for `next-auth` types
+ * Allows us to add custom properties to the `session` object
+ * and keep type safety
+ * @see https://next-auth.js.org/getting-started/typescript#module-augmentation
+ **/
+declare module "next-auth" {
+  interface Session extends DefaultSession {
+    user: {
+      id: string;
+      // ...other properties
+      // role: UserRole;
+    } & DefaultSession["user"];
+  }
+
+  // interface User {
+  //   // ...other properties
+  //   // role: UserRole;
+  // }
+}
+
+/**
+ * Options for NextAuth.js used to configure
+ * adapters, providers, callbacks, etc.
+ * @see https://next-auth.js.org/configuration/options
+ **/
+export const authOptions: NextAuthOptions = {
+  callbacks: {
+    session({ session, user }) {
+      if (session.user) {
+        session.user.id = user.id;
+        // session.user.role = user.role; <-- put other properties on the session here
+      }
+      return session;
+    },
+  },
+  providers: [
+    DiscordProvider({
+      clientId: env.DISCORD_CLIENT_ID,
+      clientSecret: env.DISCORD_CLIENT_SECRET,
+    }),
+    /**
+     * ...add more providers here
+     *
+     * Most other providers require a bit more work than the Discord provider.
+     * For example, the GitHub provider requires you to add the
+     * `refresh_token_expires_in` field to the Account model. Refer to the
+     * NextAuth.js docs for the provider you want to use. Example:
+     * @see https://next-auth.js.org/providers/github
+     **/
+  ],
+};
+
+/**
+ * Wrapper for getServerSession so that you don't need
+ * to import the authOptions in every file.
+ * @see https://next-auth.js.org/configuration/nextjs
+ **/
+export const getServerAuthSession = (ctx: {
+  req: GetServerSidePropsContext["req"];
+  res: GetServerSidePropsContext["res"];
+}) => {
+  return getServerSession(ctx.req, ctx.res, authOptions);
+};

cli/template/extras/src/server/auth/with-prisma.ts

@@ -0,0 +1,76 @@
+import type { GetServerSidePropsContext } from "next";
+import {
+  getServerSession,
+  type NextAuthOptions,
+  type DefaultSession,
+} from "next-auth";
+import DiscordProvider from "next-auth/providers/discord";
+import { PrismaAdapter } from "@next-auth/prisma-adapter";
+import { env } from "../env/server.mjs";
+import { prisma } from "./db";
+
+/**
+ * Module augmentation for `next-auth` types
+ * Allows us to add custom properties to the `session` object
+ * and keep type safety
+ * @see https://next-auth.js.org/getting-started/typescript#module-augmentation
+ **/
+declare module "next-auth" {
+  interface Session extends DefaultSession {
+    user: {
+      id: string;
+      // ...other properties
+      // role: UserRole;
+    } & DefaultSession["user"];
+  }
+
+  // interface User {
+  //   // ...other properties
+  //   // role: UserRole;
+  // }
+}
+
+/**
+ * Options for NextAuth.js used to configure
+ * adapters, providers, callbacks, etc.
+ * @see https://next-auth.js.org/configuration/options
+ **/
+export const authOptions: NextAuthOptions = {
+  callbacks: {
+    session({ session, user }) {
+      if (session.user) {
+        session.user.id = user.id;
+        // session.user.role = user.role; <-- put other properties on the session here
+      }
+      return session;
+    },
+  },
+  adapter: PrismaAdapter(prisma),
+  providers: [
+    DiscordProvider({
+      clientId: env.DISCORD_CLIENT_ID,
+      clientSecret: env.DISCORD_CLIENT_SECRET,
+    }),
+    /**
+     * ...add more providers here
+     *
+     * Most other providers require a bit more work than the Discord provider.
+     * For example, the GitHub provider requires you to add the
+     * `refresh_token_expires_in` field to the Account model. Refer to the
+     * NextAuth.js docs for the provider you want to use. Example:
+     * @see https://next-auth.js.org/providers/github
+     **/
+  ],
+};
+
+/**
+ * Wrapper for getServerSession so that you don't need
+ * to import the authOptions in every file.
+ * @see https://next-auth.js.org/configuration/nextjs
+ **/
+export const getServerAuthSession = (ctx: {
+  req: GetServerSidePropsContext["req"];
+  res: GetServerSidePropsContext["res"];
+}) => {
+  return getServerSession(ctx.req, ctx.res, authOptions);
+};

cli/template/extras/src/server/db.ts

@@ -2,18 +2,13 @@ import { PrismaClient } from "@prisma/client";
 
 import { env } from "../env/server.mjs";
 
-declare global {
-  // eslint-disable-next-line no-var
-  var prisma: PrismaClient | undefined;
-}
+const globalForPrisma = globalThis as unknown as { prisma: PrismaClient };
 
 export const prisma =
-  global.prisma ||
+  globalForPrisma.prisma ||
   new PrismaClient({
     log:
       env.NODE_ENV === "development" ? ["query", "error", "warn"] : ["error"],
   });
 
-if (env.NODE_ENV !== "production") {
-  global.prisma = prisma;
-}
+if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;