fix(ts): adjust properties on default interfaces (#1794)

* fix(ts): adjust properties on default interfaces

* fix(ts): make expires also optional

* fix(ts): don't require default session/jwt fields

* fix(ts): make all default fields optional

.github/workflows/release.yml

@@ -2,14 +2,14 @@ name: Release
 on:
   push:
     branches:
-      - 'main'
-      - 'beta'
-      - 'next'
-      - '3.x'
+      - "main"
+      - "beta"
+      - "next"
+      - "3.x"
   pull_request:
 jobs:
   release:
-    name: 'Release'
+    name: "Release"
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -20,7 +20,6 @@ jobs:
           node-version: 14
       - name: Install dependencies
         uses: bahmutov/npm-install@v1
-      - run: npm run build
       - run: npx semantic-release@17
         env:
           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.gitignore

@@ -28,6 +28,23 @@ node_modules
 .next
 www/providers.json
 src/providers/index.js
+internals
+adapters.d.ts
+adapters.js
+client.d.ts
+client.js
+index.d.ts
+index.js
+jwt.d.ts
+jwt.js
+providers.d.ts
+providers.js
+
+# Development app
+app/next-auth
+app/dist/css
+app/package-lock.json
+app/yarn.lock
 
 # VS
 /.vs/slnx.sqlite-journal
@@ -40,4 +57,4 @@ src/providers/index.js
 /_work
 
 # Prisma migrations
-/prisma/migrations
+/prisma/migrations

CONTRIBUTING.md

@@ -32,15 +32,15 @@ cd next-auth
 
 2. Install packages:
 ```sh
-npm i
+npm i && npm dev:setup
 ```
 
 3. Populate `.env.local`:
    
-    Copy `.env.local.example` to `.env.local`, and add your env variables for each provider you want to test.
+    Copy `app/.env.local.example` to `app/.env.local`, and add your env variables for each provider you want to test.
 
 > NOTE: You can add any environment variables to .env.local that you would like to use in your dev app.
-> You can find the next-auth config under`pages/api/auth/[...nextauth].js`.
+> You can find the next-auth config under`app/pages/api/auth/[...nextauth].js`.
 
 1. Start the dev application/server:
 ```sh
@@ -57,7 +57,9 @@ If you need an example project to link to, you can use [next-auth-example](https
 
 When running `npm run dev`, you start a Next.js dev server on `http://localhost:3000`, which includes hot reloading out of the box. Make changes on any of the files in `src` and see the changes immediately.
 
->NOTE: When working on CSS, you will need to manually refresh the page after changes. (Improving this through a PR is very welcome!)
+> NOTE: When working on CSS, you will have to manually refresh the page after changes. The reason for this is our pages using CSS are server-side rendered. (Improving this through a PR is very welcome!)
+
+> NOTE: The setup is as follows: The development application lives inside the `app` folder, and whenever you make a change to the `src` folder in the root (where next-auth is), it gets copied into `app` every time (gitignored), so Next.js can pick them up and apply hot reloading. This is to avoid some annoying issues with how symlinks are working with different React builds, and also to provide a super-fast feedback loop while developing core features.
 
 #### Providers
 
@@ -71,7 +73,7 @@ You can look at the existing built-in providers for inspiration.
 
 #### Databases
 
-Included is a Docker Compose file that starts up MySQL, Postgres, and MongoDB databases on localhost.
+Included is a Docker Compose file that starts up MySQL, PostgreSQL, and MongoDB databases on localhost.
 
 It will use port `3306`, `5432`, and `27017` on localhost respectively; please make sure those ports are not used by other services on localhost.
 

app/README.md

@@ -0,0 +1,6 @@
+# NextAuth.js Development App
+
+This folder contains a Next.js app using NextAuth.js for local development. See the following section on how to start:
+
+[Setting up local environment
+](https://github.com/nextauthjs/next-auth/blob/main/CONTRIBUTING.md#setting-up-local-environment)

app/jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "baseUrl": "."
+  }
+}

app/next.config.js

@@ -0,0 +1,19 @@
+const path = require("path")
+
+module.exports = {
+  webpack(config) {
+    config.resolve = {
+      ...config.resolve,
+      alias: {
+        ...config.resolve.alias,
+        "next-auth$": path.join(process.cwd(), "next-auth/server"),
+        "next-auth/client$": path.join(process.cwd(), "next-auth/client"),
+        "next-auth/jwt$": path.join(process.cwd(), "next-auth/lib/jwt"),
+        "next-auth/adapters": path.join(process.cwd(), "next-auth/adapters"),
+        "next-auth/providers": path.join(process.cwd(), "next-auth/providers"),
+      },
+    }
+
+    return config
+  },
+}

app/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "next-auth-app",
+  "version": "1.0.0",
+  "description": "NextAuth.js Developer app",
+  "private": true,
+  "scripts": {
+    "dev": "npm-run-all --parallel copy:app dev:css dev:next",
+    "dev:next": "next dev",
+    "copy:app": "cpx \"../src/**/*\" next-auth --watch",
+    "copy:css": "cpx \"../dist/css/**/*\" dist/css --watch",
+    "watch:css": "cd .. && npm run watch:css",
+    "dev:css": "npm-run-all --parallel watch:css copy:css",
+    "start": "next start"
+  },
+  "license": "ISC",
+  "dependencies": {
+    "next": "^10.1.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "cpx": "^1.5.0",
+    "npm-run-all": "^4.1.5"
+  }
+}

app/pages/_app.js

@@ -1,9 +1,9 @@
-import { Provider } from 'next-auth/client'
-import './styles.css'
+import { Provider } from "next-auth/client"
+import "./styles.css"
 
 // Use the <Provider> to improve performance and allow components that call
 // `useSession()` anywhere in your application to access the `session` object.
-export default function App ({ Component, pageProps }) {
+export default function App({ Component, pageProps }) {
   return (
     <Provider
       // Provider options are not required but can be useful in situations where
@@ -21,7 +21,7 @@ export default function App ({ Component, pageProps }) {
         //
         // Note: If a session has expired when keep alive is triggered, all open
         // windows / tabs will be updated to reflect the user is signed out.
-        keepAlive: 0
+        keepAlive: 0,
       }}
       session={pageProps.session}
     >

config/build.js

@@ -52,7 +52,9 @@ TYPES_TARGETS.forEach((target) => {
 
 const providersDir = path.join(process.cwd(), "/src/providers")
 
-const files = fs.readdirSync(providersDir, "utf8")
+const files = fs
+  .readdirSync(providersDir, "utf8")
+  .filter((file) => file !== "index.js")
 
 let importLines = ""
 let exportLines = `export default {\n`

package.json

@@ -6,12 +6,22 @@
   "repository": "https://github.com/nextauthjs/next-auth.git",
   "author": "Iain Collins <me@iaincollins.com>",
   "main": "index.js",
+  "types": "./index.d.ts",
+  "keywords": ["react", "nodejs", "oauth", "jwt", "oauth2", "authentication", "nextjs", "csrf", "oidc", "nextauth"],
+  "exports": {
+    ".": "./dist/server/index.js",
+    "./jwt": "./dist/lib/jwt.js",
+    "./adapters": "./dist/adapters/index.js",
+    "./client": "./dist/client/index.js",
+    "./providers": "./dist/providers/index.js",
+    "./providers/*": "./dist/providers/*.js"
+  },
   "scripts": {
     "build": "npm run build:js && npm run build:css",
     "build:js": "node ./config/build.js && babel --config-file ./config/babel.config.json src --out-dir dist",
     "build:css": "postcss --config config/postcss.config.js src/**/*.css --base src --dir dist && node config/wrap-css.js",
-    "dev:with-css": "next | npm run watch:css",
-    "dev": "next",
+    "dev:setup": "npm run build:css && cd app && npm i",
+    "dev": "cd app && npm run dev",
     "watch": "npm run watch:js | npm run watch:css",
     "watch:js": "babel --config-file ./config/babel.config.json --watch src --out-dir dist",
     "watch:css": "postcss --config config/postcss.config.js --watch src/**/*.css --base src --dir dist",
@@ -143,6 +153,14 @@
       "fetch": "readonly"
     }
   },
+  "release": {
+    "branches": [
+      "+([0-9])?(.{+([0-9]),x}).x",
+      "main",
+      { "name": "beta", "prerelease": true },
+      { "name": "next", "prerelease": true }
+    ]
+  },
   "funding": [
     {
       "type": "github",

release.config.js

@@ -1,8 +0,0 @@
-module.exports = {
-  branches: [
-    '+([0-9])?(.{+([0-9]),x}).x',
-    'main',
-    { name: 'beta', prerelease: true },
-    { name: 'next', prerelease: true }
-  ]
-}

src/client/index.js

@@ -145,7 +145,7 @@ export async function getSession (ctx) {
   return session
 }
 
-async function getCsrfToken (ctx) {
+export async function getCsrfToken (ctx) {
   return (await _fetchData('csrf', ctx))?.csrfToken
 }
 

types/index.d.ts

@@ -364,6 +364,15 @@ export interface PagesOptions {
   newUser?: string
 }
 
+export interface DefaultSession extends Record<string, unknown> {
+  user?: {
+    name?: string | null
+    email?: string | null
+    image?: string | null
+  }
+  expires?: string
+}
+
 /**
  * Returned by `useSession`, `getSession`, returned by the `session` callback
  * and also the shape received as a prop on the `Provider` React Context
@@ -373,11 +382,7 @@ export interface PagesOptions {
  * [`Provider`](https://next-auth.js.org/getting-started/client#provider) |
  * [`session` callback](https://next-auth.js.org/configuration/callbacks#jwt-callback)
  */
-export interface Session extends Record<string, unknown> {
-  user?: User
-  accessToken?: string
-  expires: string
-}
+export interface Session extends Record<string, unknown>, DefaultSession {}
 
 /** [Documentation](https://next-auth.js.org/configuration/options#session) */
 export interface SessionOptions {

types/jwt.d.ts

@@ -1,16 +1,19 @@
 import { JWT as JoseJWT, JWE } from "jose"
 import { NextApiRequest } from "./internals/utils"
 
+export interface DefaultJWT extends Record<string, unknown> {
+  name?: string | null
+  email?: string | null
+  picture?: string | null
+  sub?: string
+}
+
 /**
  * Returned by the `jwt` callback and `getToken`, when using JWT sessions
  *
  * [`jwt` callback](https://next-auth.js.org/configuration/callbacks#jwt-callback) | [`getToken`](https://next-auth.js.org/tutorials/securing-pages-and-api-routes#using-gettoken)
  */
-export interface JWT extends Record<string, unknown> {
-  name?: string | null
-  email?: string | null
-  picture?: string | null
-}
+export interface JWT extends Record<string, unknown>, DefaultJWT {}
 
 export interface JWTEncodeParams {
   token?: JWT

www/docs/getting-started/typescript.md

@@ -5,16 +5,21 @@ title: TypeScript
 
 NextAuth.js comes with its own type definitions, so you can safely use it in your TypeScript projects. Even if you don't use TypeScript, IDEs like VSCode will pick this up, to provide you with a better developer experience. While you are typing, you will get suggestions about how certain objects/functions look like, and sometimes also links to documentation, examples and other useful resources.
 
+Check out the example repository showcasing how to use `next-auth` on a Next.js application with TypeScript:  
+https://github.com/nextauthjs/next-auth-typescript-example
+
 :::warning
- The types at [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped) under the name of `@types/next-auth` are now deprecated, and not maintained anymore.
+The types at [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped) under the name of `@types/next-auth` are now deprecated, and not maintained anymore.
 :::
 
-***
+---
+
 ## Module Augmentation
 
 `next-auth` comes with certain types/interfaces, that are shared across submodules. Good examples are `Session` and `JWT`. Ideally, you should only need to create these types at a single place, and TS should pick them up in every location where they are referenced. Luckily, this is exactly what Module Augmentation can do for us. Define your shared interfaces in a single location, and get type-safety across your application, when you use `next-auth` (or one of its submodules).
 
 ### Main module
+
 Let's look at `Session`:
 
 ```ts title="pages/api/[...nextauth].ts"
@@ -24,8 +29,8 @@ export default NextAuth({
   callbacks: {
     session(session, token) {
       return session // The type here should match the one returned in `useSession()`
-    }
-  }
+    },
+  },
 })
 ```
 
@@ -34,7 +39,7 @@ import { useSession } from "next-auth/client"
 
 export default function IndexPage() {
   // `session` should match `callbacks.session()` in `NextAuth()`
-  const [session] = useSession() 
+  const [session] = useSession()
 
   return (
     // Your component
@@ -59,33 +64,36 @@ declare module "next-auth" {
   }
 }
 ```
+
 #### Popular interfaces to augment
 
 Although you can augment almost anything, here are some of the more common interfaces that you might want to override in the `next-auth` module:
+
 ```ts
-  /**
-   * The shape of the user object returned in the OAuth providers' `profile` callback,
-   * or the second parameter of the `session` callback, when using a database.
-   */
-  interface User {} 
-  /**
-   * Usually contains information about the provider being used
-   * and also extends `TokenSet`, which is different tokens returned by OAuth Providers.
-   */
-  interface Account {}
-  /** The OAuth profile returned from your provider */
-  interface Profile {}
+/**
+ * The shape of the user object returned in the OAuth providers' `profile` callback,
+ * or the second parameter of the `session` callback, when using a database.
+ */
+interface User {}
+/**
+ * Usually contains information about the provider being used
+ * and also extends `TokenSet`, which is different tokens returned by OAuth Providers.
+ */
+interface Account {}
+/** The OAuth profile returned from your provider */
+interface Profile {}
 ```
 
 Make sure that the `types` folder is added to [`typeRoots`](https://www.typescriptlang.org/tsconfig/#typeRoots) in your project's `tsconfig.json` file.
 
 ### Submodules
+
 The `JWT` interface can be found in the `next-auth/jwt` submodule:
 
 ```ts title="types/next-auth.d.ts"
 declare module "next-auth/jwt" {
   /** Returned by the `jwt` callback and `getToken`, when using JWT sessions */
-  interface JWT { 
+  interface JWT {
     /** OpenID ID Token */
     idToken?: string
   }
@@ -93,6 +101,7 @@ declare module "next-auth/jwt" {
 ```
 
 ### Useful links
+
 1. [TypeScript documentation: Module Augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation)
 2. [Digital Ocean: Module Augmentation in TypeScript](https://www.digitalocean.com/community/tutorials/typescript-module-augmentation)
 
@@ -102,4 +111,4 @@ Contributions of any kind are always welcome, especially for TypeScript. Please
 
 :::note
 When contributing to TypeScript, if the actual JavaScript user API does not change in a breaking manner, we reserve the right to push any TypeScript change in a minor release. This is to ensure that we can keep us on a faster release cycle.
-:::
+:::