Add Adjust The Shape Of The User Type as a NextAuth TIL

README.md

@@ -10,7 +10,7 @@ pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://crafty-builder-6996.ck.page/e169c61186).
 
-_1354 TILs and counting..._
+_1355 TILs and counting..._
 
 ---
 
@@ -43,6 +43,7 @@ _1354 TILs and counting..._
 * [MySQL](#mysql)
 * [Neovim](#neovim)
 * [Netlify](#netlify)
+* [NextAuth.js](#next-auth)
 * [Next.js](#nextjs)
 * [Phoenix](#phoenix)
 * [Planetscale](#planetscale)
@@ -580,6 +581,10 @@ _1354 TILs and counting..._
 
 - [Override The Default Yarn Version](netlify/override-the-default-yarn-version.md)
 
+### NextAuth.js
+
+- [Adjust The Shape Of The User Type](next-auth/adjust-the-shape-of-the-user-type.md)
+
 ### Next.js
 
 - [Create Files And Directories For Dynamic Routes](nextjs/create-files-and-directories-for-dynamic-routes.md)

next-auth/adjust-the-shape-of-the-user-type.md

@@ -0,0 +1,40 @@
+# Adjust The Shape Of The User Type
+
+Let's say we want extra attributes on our `user` object that gets passed around
+as part of authentication with [NextAuth.js](https://next-auth.js.org/). If
+we're using a database adapter, it's because we have added columns to the
+`User` table. Or it may be that we are adding extra attributes to the body of
+the JWT token.
+
+Either way, we need the underlying `User` type (rather, interface) to reflect
+that.
+
+Within a `declare module` block for NextAuth, we can define a `User` interface
+with any additional properties that we want.
+
+This adds `roles` as a required `string` type.
+
+```typescript
+declare module "next-auth" {
+  interface User {
+    // ...other properties
+    roles: string;
+  }
+}
+```
+
+Some natural places to add this declaration are in the auth file itself (e.g.
+`src/server/auth.ts`). Or we can put it in a dedicated top-level
+`next-auth.d.ts` file as long as we tell our `tsconfig.json` to include it:
+
+```json
+{
+  ...
+  "include": [
+    "src/**/*",
+    "process.d.ts",
+    "next-auth.d.ts"
+  ],
+  ...
+}
+```