fix(build): trigger re-release

Co-authored-by: Joseph Chen <jchen@dogomedia.com>

.gitignore

@@ -27,6 +27,7 @@ node_modules
 .cache-loader
 .next
 www/providers.json
+src/providers/index.js
 
 # VS
 /.vs/slnx.sqlite-journal

CONTRIBUTING.md

@@ -59,9 +59,19 @@ When running `npm run dev`, you start a Next.js dev server on `http://localhost:
 
 >NOTE: When working on CSS, you will need to manually refresh the page after changes. (Improving this through a PR is very welcome!)
 
+#### Providers
+
+If you think your custom provider might be useful to others, we encourage you to open a PR and add it to the built-in list so others can discover it much more easily! You only need to add two changes:
+1. Add your config: [`src/providers/{provider}.js`](https://github.com/nextauthjs/next-auth/tree/main/src/providers) (Make sure you use a named default export, like `export default function YourProvider`!)
+2. Add provider documentation: [`www/docs/providers/{provider}.md`](https://github.com/nextauthjs/next-auth/tree/main/www/docs/providers)
+
+That's it! 🎉 Others will be able to discover this provider much more easily now!
+
+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.
 

config/build.js

@@ -9,6 +9,8 @@ const MODULE_ENTRIES = {
   JWT: "jwt",
 }
 
+// Building submodule entries
+
 const BUILD_TARGETS = {
   [`${MODULE_ENTRIES.SERVER}.js`]: "module.exports = require('./dist/server').default\n",
   [`${MODULE_ENTRIES.CLIENT}.js`]: "module.exports = require('./dist/client').default\n",
@@ -24,6 +26,8 @@ Object.entries(BUILD_TARGETS).forEach(([target, content]) => {
   })
 })
 
+// Building types
+
 const TYPES_TARGETS = [
   `${MODULE_ENTRIES.SERVER}.d.ts`,
   `${MODULE_ENTRIES.CLIENT}.d.ts`,
@@ -43,3 +47,40 @@ TYPES_TARGETS.forEach((target) => {
     }
   )
 })
+
+// Building providers
+
+const providersDir = path.join(process.cwd(), "/src/providers")
+
+const files = fs.readdirSync(providersDir, "utf8")
+
+let importLines = ""
+let exportLines = `export default {\n`
+files.forEach((file) => {
+  const provider = fs.readFileSync(path.join(providersDir, file), "utf8")
+  try {
+    // NOTE: If this fails, the default export probably wasn't a named function.
+    // Always use a named function as default export.
+    // Eg.: export default function YourProvider ...
+    const { functionName } = provider.match(
+      /export default function (?<functionName>.+)\s?\(/
+    ).groups
+
+    importLines += `import ${functionName} from "./${file}"\n`
+    exportLines += `  ${functionName},\n`
+  } catch (error) {
+    console.error(
+      [
+        `\nThe provider file '${file}' should have a single named default export`,
+        "Example: 'export default function YourProvider'\n\n",
+      ].join("\n")
+    )
+    process.exit(1)
+  }
+})
+exportLines += `}\n`
+
+fs.writeFile(
+  path.join(process.cwd(), "src/providers/index.js"),
+  [importLines, exportLines].join("\n")
+)

package-lock.json

@@ -6074,6 +6074,12 @@
           "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
           "dev": true
         },
+        "y18n": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+          "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+          "dev": true
+        },
         "yargs": {
           "version": "15.4.1",
           "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
@@ -8431,9 +8437,9 @@
       }
     },
     "jose": {
-      "version": "1.28.0",
-      "resolved": "https://registry.npmjs.org/jose/-/jose-1.28.0.tgz",
-      "integrity": "sha512-JmfDRzt/HSj8ipd9TsDtEHoLUnLYavG+7e8F6s1mx2jfVSfXOTaFQsJUydbjJpTnTDHP1+yKL9Ke7ktS/a0Eiw==",
+      "version": "1.28.1",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-1.28.1.tgz",
+      "integrity": "sha512-6JK28rFu5ENp/yxMwM+iN7YeaInnY9B9Bggjkz5fuwLiJhbVrl2O4SJr65bdNBPl9y27fdC3Mymh+FVCvozLIg==",
       "requires": {
         "@panva/asn1.js": "^1.0.0"
       }

package.json

@@ -8,7 +8,7 @@
   "main": "index.js",
   "scripts": {
     "build": "npm run build:js && npm run build:css",
-    "build:js": "babel --config-file ./config/babel.config.json src --out-dir dist && node ./config/build.js",
+    "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",

src/lib/logger.js

@@ -1,26 +1,23 @@
 /** @type {import("types").LoggerInstance} */
 const _logger = {
-  error (code, ...message) {
+  error(code, ...message) {
     console.error(
       `[next-auth][error][${code.toLowerCase()}]`,
       `\nhttps://next-auth.js.org/errors#${code.toLowerCase()}`,
       ...message
     )
   },
-  warn (code, ...message) {
+  warn(code, ...message) {
     console.warn(
       `[next-auth][warn][${code.toLowerCase()}]`,
       `\nhttps://next-auth.js.org/warnings#${code.toLowerCase()}`,
       ...message
     )
   },
-  debug (code, ...message) {
+  debug(code, ...message) {
     if (!process?.env?._NEXTAUTH_DEBUG) return
-    console.log(
-      `[next-auth][debug][${code.toLowerCase()}]`,
-      ...message
-    )
-  }
+    console.log(`[next-auth][debug][${code.toLowerCase()}]`, ...message)
+  },
 }
 
 /**
@@ -28,7 +25,7 @@ const _logger = {
  * Any `undefined` level will use the default logger.
  * @param {Partial<import("types").LoggerInstance>} newLogger
  */
-export function setLogger (newLogger = {}) {
+export function setLogger(newLogger = {}) {
   if (newLogger.error) _logger.error = newLogger.error
   if (newLogger.warn) _logger.warn = newLogger.warn
   if (newLogger.debug) _logger.debug = newLogger.debug
@@ -42,13 +39,13 @@ export default _logger
  * @param {string} basePath
  * @return {import("types").LoggerInstance}
  */
-export function proxyLogger (logger = _logger, basePath) {
+export function proxyLogger(logger = _logger, basePath) {
   try {
-    if (typeof window === 'undefined') {
+    if (typeof window === "undefined") {
       return logger
     }
 
-    const clientLogger = console
+    const clientLogger = {}
     for (const level in logger) {
       clientLogger[level] = (code, ...message) => {
         _logger[level](code, ...message) // Log on client as usual
@@ -57,21 +54,23 @@ export function proxyLogger (logger = _logger, basePath) {
         const body = new URLSearchParams({
           level,
           code,
-          message: JSON.stringify(message.map(m => {
-            if (m instanceof Error) {
-              // Serializing errors: https://iaincollins.medium.com/error-handling-in-javascript-a6172ccdf9af
-              return { name: m.name, message: m.message, stack: m.stack }
-            }
-            return m
-          }))
+          message: JSON.stringify(
+            message.map((m) => {
+              if (m instanceof Error) {
+                // Serializing errors: https://iaincollins.medium.com/error-handling-in-javascript-a6172ccdf9af
+                return { name: m.name, message: m.message, stack: m.stack }
+              }
+              return m
+            })
+          ),
         })
         if (navigator.sendBeacon) {
           return navigator.sendBeacon(url, body)
         }
         return fetch(url, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body,
         })
       }
     }

src/providers/apple.js

@@ -1,30 +1,34 @@
-export default (options) => {
+export default function Apple(options) {
   return {
-    id: 'apple',
-    name: 'Apple',
-    type: 'oauth',
-    version: '2.0',
-    scope: 'name email',
-    params: { grant_type: 'authorization_code' },
-    accessTokenUrl: 'https://appleid.apple.com/auth/token',
-    authorizationUrl: 'https://appleid.apple.com/auth/authorize?response_type=code&id_token&response_mode=form_post',
+    id: "apple",
+    name: "Apple",
+    type: "oauth",
+    version: "2.0",
+    scope: "name email",
+    params: { grant_type: "authorization_code" },
+    accessTokenUrl: "https://appleid.apple.com/auth/token",
+    authorizationUrl:
+      "https://appleid.apple.com/auth/authorize?response_type=code&id_token&response_mode=form_post",
     profileUrl: null,
     idToken: true,
-    profile: (profile) => {
+    profile(profile) {
       // The name of the user will only return on first login
       return {
         id: profile.sub,
-        name: profile.user != null ? profile.user.name.firstName + ' ' + profile.user.name.lastName : null,
-        email: profile.email
+        name:
+          profile.user != null
+            ? profile.user.name.firstName + " " + profile.user.name.lastName
+            : null,
+        email: profile.email,
       }
     },
     clientId: null,
     clientSecret: {
       teamId: null,
       privateKey: null,
-      keyId: null
+      keyId: null,
     },
-    protection: 'none', // REVIEW: Apple does not support state, as far as I know. Can we use "pkce" then?
-    ...options
+    protection: "none", // REVIEW: Apple does not support state, as far as I know. Can we use "pkce" then?
+    ...options,
   }
 }

src/providers/atlassian.js

@@ -1,24 +1,24 @@
-export default (options) => {
+export default function Atlassian(options) {
   return {
-    id: 'atlassian',
-    name: 'Atlassian',
-    type: 'oauth',
-    version: '2.0',
+    id: "atlassian",
+    name: "Atlassian",
+    type: "oauth",
+    version: "2.0",
     params: {
-      grant_type: 'authorization_code'
+      grant_type: "authorization_code",
     },
-    accessTokenUrl: 'https://auth.atlassian.com/oauth/token',
+    accessTokenUrl: "https://auth.atlassian.com/oauth/token",
     authorizationUrl:
-      'https://auth.atlassian.com/authorize?audience=api.atlassian.com&response_type=code&prompt=consent',
-    profileUrl: 'https://api.atlassian.com/me',
-    profile: (profile) => {
+      "https://auth.atlassian.com/authorize?audience=api.atlassian.com&response_type=code&prompt=consent",
+    profileUrl: "https://api.atlassian.com/me",
+    profile(profile) {
       return {
         id: profile.account_id,
         name: profile.name,
         email: profile.email,
-        image: profile.picture
+        image: profile.picture,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/auth0.js

@@ -1,22 +1,22 @@
-export default (options) => {
+export default function Auth0(options) {
   return {
-    id: 'auth0',
-    name: 'Auth0',
-    type: 'oauth',
-    version: '2.0',
-    params: { grant_type: 'authorization_code' },
-    scope: 'openid email profile',
+    id: "auth0",
+    name: "Auth0",
+    type: "oauth",
+    version: "2.0",
+    params: { grant_type: "authorization_code" },
+    scope: "openid email profile",
     accessTokenUrl: `https://${options.domain}/oauth/token`,
     authorizationUrl: `https://${options.domain}/authorize?response_type=code`,
     profileUrl: `https://${options.domain}/userinfo`,
-    profile: (profile) => {
+    profile(profile) {
       return {
         id: profile.sub,
         name: profile.nickname,
         email: profile.email,
-        image: profile.picture
+        image: profile.picture,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/azure-ad-b2c.js

@@ -1,24 +1,24 @@
-export default (options) => {
-  const tenant = options.tenantId ? options.tenantId : 'common'
+export default function AzureADB2C(options) {
+  const tenant = options.tenantId ? options.tenantId : "common"
 
   return {
-    id: 'azure-ad-b2c',
-    name: 'Azure Active Directory B2C',
-    type: 'oauth',
-    version: '2.0',
+    id: "azure-ad-b2c",
+    name: "Azure Active Directory B2C",
+    type: "oauth",
+    version: "2.0",
     params: {
-      grant_type: 'authorization_code'
+      grant_type: "authorization_code",
     },
     accessTokenUrl: `https://login.microsoftonline.com/${tenant}/oauth2/v2.0/token`,
     authorizationUrl: `https://login.microsoftonline.com/${tenant}/oauth2/v2.0/authorize?response_type=code&response_mode=query`,
-    profileUrl: 'https://graph.microsoft.com/v1.0/me/',
-    profile: (profile) => {
+    profileUrl: "https://graph.microsoft.com/v1.0/me/",
+    profile(profile) {
       return {
         id: profile.id,
         name: profile.displayName,
-        email: profile.userPrincipalName
+        email: profile.userPrincipalName,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/basecamp.js

@@ -1,20 +1,22 @@
-export default (options) => {
+export default function Basecamp(options) {
   return {
-    id: 'basecamp',
-    name: 'Basecamp',
-    type: 'oauth',
-    version: '2.0',
-    accessTokenUrl: 'https://launchpad.37signals.com/authorization/token?type=web_server',
-    authorizationUrl: 'https://launchpad.37signals.com/authorization/new?type=web_server',
-    profileUrl: 'https://launchpad.37signals.com/authorization.json',
-    profile: (profile) => {
+    id: "basecamp",
+    name: "Basecamp",
+    type: "oauth",
+    version: "2.0",
+    accessTokenUrl:
+      "https://launchpad.37signals.com/authorization/token?type=web_server",
+    authorizationUrl:
+      "https://launchpad.37signals.com/authorization/new?type=web_server",
+    profileUrl: "https://launchpad.37signals.com/authorization.json",
+    profile(profile) {
       return {
         id: profile.identity.id,
         name: `${profile.identity.first_name} ${profile.identity.last_name}`,
         email: profile.identity.email_address,
-        image: null
+        image: null,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/battlenet.js

@@ -1,29 +1,29 @@
-export default (options) => {
+export default function BattleNet(options) {
   const { region } = options
   return {
-    id: 'battlenet',
-    name: 'Battle.net',
-    type: 'oauth',
-    version: '2.0',
-    scope: 'openid',
-    params: { grant_type: 'authorization_code' },
+    id: "battlenet",
+    name: "Battle.net",
+    type: "oauth",
+    version: "2.0",
+    scope: "openid",
+    params: { grant_type: "authorization_code" },
     accessTokenUrl:
-      region === 'CN'
-        ? 'https://www.battlenet.com.cn/oauth/token'
+      region === "CN"
+        ? "https://www.battlenet.com.cn/oauth/token"
         : `https://${region}.battle.net/oauth/token`,
     authorizationUrl:
-      region === 'CN'
-        ? 'https://www.battlenet.com.cn/oauth/authorize?response_type=code'
+      region === "CN"
+        ? "https://www.battlenet.com.cn/oauth/authorize?response_type=code"
         : `https://${region}.battle.net/oauth/authorize?response_type=code`,
-    profileUrl: 'https://us.battle.net/oauth/userinfo',
-    profile: (profile) => {
+    profileUrl: "https://us.battle.net/oauth/userinfo",
+    profile(profile) {
       return {
         id: profile.id,
         name: profile.battletag,
         email: null,
-        image: null
+        image: null,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/box.js

@@ -1,22 +1,23 @@
-export default (options) => {
+export default function Box(options) {
   return {
-    id: 'box',
-    name: 'Box',
-    type: 'oauth',
-    version: '2.0',
-    scope: '',
-    params: { grant_type: 'authorization_code' },
-    accessTokenUrl: 'https://api.box.com/oauth2/token',
-    authorizationUrl: 'https://account.box.com/api/oauth2/authorize?response_type=code',
-    profileUrl: 'https://api.box.com/2.0/users/me',
-    profile: (profile) => {
+    id: "box",
+    name: "Box",
+    type: "oauth",
+    version: "2.0",
+    scope: "",
+    params: { grant_type: "authorization_code" },
+    accessTokenUrl: "https://api.box.com/oauth2/token",
+    authorizationUrl:
+      "https://account.box.com/api/oauth2/authorize?response_type=code",
+    profileUrl: "https://api.box.com/2.0/users/me",
+    profile(profile) {
       return {
         id: profile.id,
         name: profile.name,
         email: profile.login,
-        image: profile.avatar_url
+        image: profile.avatar_url,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/bungie.js

@@ -1,30 +1,34 @@
-export default (options) => {
+export default function Bungie(options) {
   return {
-    id: 'bungie',
-    name: 'Bungie',
-    type: 'oauth',
-    version: '2.0',
-    scope: '',
-    params: { reauth: 'true', grant_type: 'authorization_code' },
-    accessTokenUrl: 'https://www.bungie.net/platform/app/oauth/token/',
-    requestTokenUrl: 'https://www.bungie.net/platform/app/oauth/token/',
-    authorizationUrl: 'https://www.bungie.net/en/OAuth/Authorize?response_type=code',
-    profileUrl: 'https://www.bungie.net/platform/User/GetBungieAccount/{membershipId}/254/',
-    profile: (profile) => {
+    id: "bungie",
+    name: "Bungie",
+    type: "oauth",
+    version: "2.0",
+    scope: "",
+    params: { reauth: "true", grant_type: "authorization_code" },
+    accessTokenUrl: "https://www.bungie.net/platform/app/oauth/token/",
+    requestTokenUrl: "https://www.bungie.net/platform/app/oauth/token/",
+    authorizationUrl:
+      "https://www.bungie.net/en/OAuth/Authorize?response_type=code",
+    profileUrl:
+      "https://www.bungie.net/platform/User/GetBungieAccount/{membershipId}/254/",
+    profile(profile) {
       const { bungieNetUser: user } = profile.Response
 
       return {
         id: user.membershipId,
         name: user.displayName,
-        image: `https://www.bungie.net${user.profilePicturePath.startsWith('/') ? '' : '/'}${user.profilePicturePath}`,
-        email: null
+        image: `https://www.bungie.net${
+          user.profilePicturePath.startsWith("/") ? "" : "/"
+        }${user.profilePicturePath}`,
+        email: null,
       }
     },
     headers: {
-      'X-API-Key': null
+      "X-API-Key": null,
     },
     clientId: null,
     clientSecret: null,
-    ...options
+    ...options,
   }
 }

src/providers/cognito.js

@@ -1,23 +1,23 @@
-export default (options) => {
+export default function Cognito(options) {
   const { domain } = options
   return {
-    id: 'cognito',
-    name: 'Cognito',
-    type: 'oauth',
-    version: '2.0',
-    scope: 'openid profile email',
-    params: { grant_type: 'authorization_code' },
+    id: "cognito",
+    name: "Cognito",
+    type: "oauth",
+    version: "2.0",
+    scope: "openid profile email",
+    params: { grant_type: "authorization_code" },
     accessTokenUrl: `https://${domain}/oauth2/token`,
     authorizationUrl: `https://${domain}/oauth2/authorize?response_type=code`,
     profileUrl: `https://${domain}/oauth2/userInfo`,
-    profile: (profile) => {
+    profile(profile) {
       return {
         id: profile.sub,
         name: profile.username,
         email: profile.email,
-        image: null
+        image: null,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/credentials.js

@@ -1,10 +1,10 @@
-export default (options) => {
+export default function Credentials(options) {
   return {
-    id: 'credentials',
-    name: 'Credentials',
-    type: 'credentials',
+    id: "credentials",
+    name: "Credentials",
+    type: "credentials",
     authorize: null,
     credentials: null,
-    ...options
+    ...options,
   }
 }

src/providers/discord.js

@@ -1,29 +1,30 @@
-export default (options) => {
+export default function Discord(options) {
   return {
-    id: 'discord',
-    name: 'Discord',
-    type: 'oauth',
-    version: '2.0',
-    scope: 'identify email',
-    params: { grant_type: 'authorization_code' },
-    accessTokenUrl: 'https://discord.com/api/oauth2/token',
-    authorizationUrl: 'https://discord.com/api/oauth2/authorize?response_type=code&prompt=none',
-    profileUrl: 'https://discord.com/api/users/@me',
-    profile: (profile) => {
+    id: "discord",
+    name: "Discord",
+    type: "oauth",
+    version: "2.0",
+    scope: "identify email",
+    params: { grant_type: "authorization_code" },
+    accessTokenUrl: "https://discord.com/api/oauth2/token",
+    authorizationUrl:
+      "https://discord.com/api/oauth2/authorize?response_type=code&prompt=none",
+    profileUrl: "https://discord.com/api/users/@me",
+    profile(profile) {
       if (profile.avatar === null) {
         const defaultAvatarNumber = parseInt(profile.discriminator) % 5
         profile.image_url = `https://cdn.discordapp.com/embed/avatars/${defaultAvatarNumber}.png`
       } else {
-        const format = profile.avatar.startsWith('a_') ? 'gif' : 'png'
+        const format = profile.avatar.startsWith("a_") ? "gif" : "png"
         profile.image_url = `https://cdn.discordapp.com/avatars/${profile.id}/${profile.avatar}.${format}`
       }
       return {
         id: profile.id,
         name: profile.username,
         image: profile.image_url,
-        email: profile.email
+        email: profile.email,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/email.js

@@ -1,48 +1,54 @@
-import nodemailer from 'nodemailer'
-import logger from '../lib/logger'
+import nodemailer from "nodemailer"
+import logger from "../lib/logger"
 
-export default (options) => {
+export default function Email(options) {
   return {
-    id: 'email',
-    type: 'email',
-    name: 'Email',
+    id: "email",
+    type: "email",
+    name: "Email",
     // Server can be an SMTP connection string or a nodemailer config object
     server: {
-      host: 'localhost',
+      host: "localhost",
       port: 25,
       auth: {
-        user: '',
-        pass: ''
-      }
+        user: "",
+        pass: "",
+      },
     },
-    from: 'NextAuth <no-reply@example.com>',
-    maxAge: 24 * 60 * 60, // How long email links are valid for (default 24h)
+    from: "NextAuth <no-reply@example.com>",
+    maxAge: 24 * 60 * 60,
     sendVerificationRequest,
-    ...options
+    ...options,
   }
 }
 
-const sendVerificationRequest = ({ identifier: email, url, baseUrl, provider }) => {
+const sendVerificationRequest = ({
+  identifier: email,
+  url,
+  baseUrl,
+  provider,
+}) => {
   return new Promise((resolve, reject) => {
     const { server, from } = provider
     // Strip protocol from URL and use domain as site name
-    const site = baseUrl.replace(/^https?:\/\//, '')
+    const site = baseUrl.replace(/^https?:\/\//, "")
 
-    nodemailer
-      .createTransport(server)
-      .sendMail({
+    nodemailer.createTransport(server).sendMail(
+      {
         to: email,
         from,
         subject: `Sign in to ${site}`,
         text: text({ url, site, email }),
-        html: html({ url, site, email })
-      }, (error) => {
+        html: html({ url, site, email }),
+      },
+      (error) => {
         if (error) {
-          logger.error('SEND_VERIFICATION_EMAIL_ERROR', email, error)
-          return reject(new Error('SEND_VERIFICATION_EMAIL_ERROR', error))
+          logger.error("SEND_VERIFICATION_EMAIL_ERROR", email, error)
+          return reject(new Error("SEND_VERIFICATION_EMAIL_ERROR", error))
         }
         return resolve()
-      })
+      }
+    )
   })
 }
 
@@ -52,16 +58,16 @@ const html = ({ url, site, email }) => {
   // email address and the domain from being turned into a hyperlink by email
   // clients like Outlook and Apple mail, as this is confusing because it seems
   // like they are supposed to click on their email address to sign in.
-  const escapedEmail = `${email.replace(/\./g, '&#8203;.')}`
-  const escapedSite = `${site.replace(/\./g, '&#8203;.')}`
+  const escapedEmail = `${email.replace(/\./g, "&#8203;.")}`
+  const escapedSite = `${site.replace(/\./g, "&#8203;.")}`
 
   // Some simple styling options
-  const backgroundColor = '#f9f9f9'
-  const textColor = '#444444'
-  const mainBackgroundColor = '#ffffff'
-  const buttonBackgroundColor = '#346df1'
-  const buttonBorderColor = '#346df1'
-  const buttonTextColor = '#ffffff'
+  const backgroundColor = "#f9f9f9"
+  const textColor = "#444444"
+  const mainBackgroundColor = "#ffffff"
+  const buttonBackgroundColor = "#346df1"
+  const buttonBorderColor = "#346df1"
+  const buttonTextColor = "#ffffff"
 
   return `
 <body style="background: ${backgroundColor};">

src/providers/eveonline.js

@@ -1,21 +1,22 @@
-export default (options) => {
+export default function EVEOnline(options) {
   return {
-    id: 'eveonline',
-    name: 'EVE Online',
-    type: 'oauth',
-    version: '2.0',
-    params: { grant_type: 'authorization_code' },
-    accessTokenUrl: 'https://login.eveonline.com/oauth/token',
-    authorizationUrl: 'https://login.eveonline.com/oauth/authorize?response_type=code',
-    profileUrl: 'https://login.eveonline.com/oauth/verify',
-    profile: (profile) => {
+    id: "eveonline",
+    name: "EVE Online",
+    type: "oauth",
+    version: "2.0",
+    params: { grant_type: "authorization_code" },
+    accessTokenUrl: "https://login.eveonline.com/oauth/token",
+    authorizationUrl:
+      "https://login.eveonline.com/oauth/authorize?response_type=code",
+    profileUrl: "https://login.eveonline.com/oauth/verify",
+    profile(profile) {
       return {
         id: profile.CharacterID,
         name: profile.CharacterName,
         image: `https://image.eveonline.com/Character/${profile.CharacterID}_128.jpg`,
-        email: null
+        email: null,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/facebook.js

@@ -1,21 +1,22 @@
-export default (options) => {
+export default function Facebook(options) {
   return {
-    id: 'facebook',
-    name: 'Facebook',
-    type: 'oauth',
-    version: '2.0',
-    scope: 'email',
-    accessTokenUrl: 'https://graph.facebook.com/oauth/access_token',
-    authorizationUrl: 'https://www.facebook.com/v7.0/dialog/oauth?response_type=code',
-    profileUrl: 'https://graph.facebook.com/me?fields=email,name,picture',
-    profile: (profile) => {
+    id: "facebook",
+    name: "Facebook",
+    type: "oauth",
+    version: "2.0",
+    scope: "email",
+    accessTokenUrl: "https://graph.facebook.com/oauth/access_token",
+    authorizationUrl:
+      "https://www.facebook.com/v7.0/dialog/oauth?response_type=code",
+    profileUrl: "https://graph.facebook.com/me?fields=email,name,picture",
+    profile(profile) {
       return {
         id: profile.id,
         name: profile.name,
         email: profile.email,
-        image: profile.picture.data.url
+        image: profile.picture.data.url,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/faceit.js

@@ -1,25 +1,28 @@
-export default (options) => {
+export default function FACEIT(options) {
   return {
-    id: 'faceit',
-    name: 'FACEIT',
-    type: 'oauth',
-    version: '2.0',
-    params: { grant_type: 'authorization_code' },
+    id: "faceit",
+    name: "FACEIT",
+    type: "oauth",
+    version: "2.0",
+    params: { grant_type: "authorization_code" },
     headers: {
-      Authorization: `Basic ${Buffer.from(`${options.clientId}:${options.clientSecret}`).toString('base64')}`
+      Authorization: `Basic ${Buffer.from(
+        `${options.clientId}:${options.clientSecret}`
+      ).toString("base64")}`,
     },
-    accessTokenUrl: 'https://api.faceit.com/auth/v1/oauth/token',
-    authorizationUrl: 'https://accounts.faceit.com/accounts?redirect_popup=true&response_type=code',
-    profileUrl: 'https://api.faceit.com/auth/v1/resources/userinfo',
-    profile (profile) {
+    accessTokenUrl: "https://api.faceit.com/auth/v1/oauth/token",
+    authorizationUrl:
+      "https://accounts.faceit.com/accounts?redirect_popup=true&response_type=code",
+    profileUrl: "https://api.faceit.com/auth/v1/resources/userinfo",
+    profile(profile) {
       const { guid: id, nickname: name, email, picture: image } = profile
       return {
         id,
         name,
         email,
-        image
+        image,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/foursquare.js

@@ -1,22 +1,23 @@
-export default ({ apiVersion, ...options }) => {
+export default function Foursquare(options) {
+  const { apiVersion } = options
   return {
-    id: 'foursquare',
-    name: 'Foursquare',
-    type: 'oauth',
-    version: '2.0',
-    params: { grant_type: 'authorization_code' },
-    accessTokenUrl: 'https://foursquare.com/oauth2/access_token',
+    id: "foursquare",
+    name: "Foursquare",
+    type: "oauth",
+    version: "2.0",
+    params: { grant_type: "authorization_code" },
+    accessTokenUrl: "https://foursquare.com/oauth2/access_token",
     authorizationUrl:
-      'https://foursquare.com/oauth2/authenticate?response_type=code',
+      "https://foursquare.com/oauth2/authenticate?response_type=code",
     profileUrl: `https://api.foursquare.com/v2/users/self?v=${apiVersion}`,
-    profile: (profile) => {
+    profile(profile) {
       return {
         id: profile.id,
         name: `${profile.firstName} ${profile.lastName}`,
         image: `${profile.prefix}original${profile.suffix}`,
-        email: profile.contact.email
+        email: profile.contact.email,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/fusionauth.js

@@ -1,27 +1,27 @@
-export default (options) => {
+export default function FusionAuth(options) {
   let authorizationUrl = `https://${options.domain}/oauth2/authorize?response_type=code`
   if (options.tenantId) {
     authorizationUrl += `&tenantId=${options.tenantId}`
   }
 
   return {
-    id: 'fusionauth',
-    name: 'FusionAuth',
-    type: 'oauth',
-    version: '2.0',
-    scope: 'openid',
-    params: { grant_type: 'authorization_code' },
+    id: "fusionauth",
+    name: "FusionAuth",
+    type: "oauth",
+    version: "2.0",
+    scope: "openid",
+    params: { grant_type: "authorization_code" },
     accessTokenUrl: `https://${options.domain}/oauth2/token`,
     authorizationUrl,
     profileUrl: `https://${options.domain}/oauth2/userinfo`,
-    profile: (profile) => {
+    profile(profile) {
       return {
         id: profile.sub,
         name: profile.name,
         email: profile.email,
-        image: profile.picture
+        image: profile.picture,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/github.js

@@ -1,21 +1,21 @@
-export default (options) => {
+export default function GitHub(options) {
   return {
-    id: 'github',
-    name: 'GitHub',
-    type: 'oauth',
-    version: '2.0',
-    scope: 'user',
-    accessTokenUrl: 'https://github.com/login/oauth/access_token',
-    authorizationUrl: 'https://github.com/login/oauth/authorize',
-    profileUrl: 'https://api.github.com/user',
-    profile: (profile) => {
+    id: "github",
+    name: "GitHub",
+    type: "oauth",
+    version: "2.0",
+    scope: "user",
+    accessTokenUrl: "https://github.com/login/oauth/access_token",
+    authorizationUrl: "https://github.com/login/oauth/authorize",
+    profileUrl: "https://api.github.com/user",
+    profile(profile) {
       return {
         id: profile.id,
         name: profile.name || profile.login,
         email: profile.email,
-        image: profile.avatar_url
+        image: profile.avatar_url,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/gitlab.js

@@ -1,22 +1,22 @@
-export default (options) => {
+export default function GitLab(options) {
   return {
-    id: 'gitlab',
-    name: 'GitLab',
-    type: 'oauth',
-    version: '2.0',
-    scope: 'read_user',
-    params: { grant_type: 'authorization_code' },
-    accessTokenUrl: 'https://gitlab.com/oauth/token',
-    authorizationUrl: 'https://gitlab.com/oauth/authorize?response_type=code',
-    profileUrl: 'https://gitlab.com/api/v4/user',
-    profile: (profile) => {
+    id: "gitlab",
+    name: "GitLab",
+    type: "oauth",
+    version: "2.0",
+    scope: "read_user",
+    params: { grant_type: "authorization_code" },
+    accessTokenUrl: "https://gitlab.com/oauth/token",
+    authorizationUrl: "https://gitlab.com/oauth/authorize?response_type=code",
+    profileUrl: "https://gitlab.com/api/v4/user",
+    profile(profile) {
       return {
         id: profile.id,
         name: profile.username,
         email: profile.email,
-        image: profile.avatar_url
+        image: profile.avatar_url,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/google.js

@@ -1,23 +1,25 @@
-export default (options) => {
+export default function Google(options) {
   return {
-    id: 'google',
-    name: 'Google',
-    type: 'oauth',
-    version: '2.0',
-    scope: 'https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email',
-    params: { grant_type: 'authorization_code' },
-    accessTokenUrl: 'https://accounts.google.com/o/oauth2/token',
-    requestTokenUrl: 'https://accounts.google.com/o/oauth2/auth',
-    authorizationUrl: 'https://accounts.google.com/o/oauth2/auth?response_type=code',
-    profileUrl: 'https://www.googleapis.com/oauth2/v1/userinfo?alt=json',
-    profile: (profile) => {
+    id: "google",
+    name: "Google",
+    type: "oauth",
+    version: "2.0",
+    scope:
+      "https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email",
+    params: { grant_type: "authorization_code" },
+    accessTokenUrl: "https://accounts.google.com/o/oauth2/token",
+    requestTokenUrl: "https://accounts.google.com/o/oauth2/auth",
+    authorizationUrl:
+      "https://accounts.google.com/o/oauth2/auth?response_type=code",
+    profileUrl: "https://www.googleapis.com/oauth2/v1/userinfo?alt=json",
+    profile(profile) {
       return {
         id: profile.id,
         name: profile.name,
         email: profile.email,
-        image: profile.picture
+        image: profile.picture,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/identity-server4.js

@@ -1,17 +1,17 @@
-export default (options) => {
+export default function IdentityServer4(options) {
   return {
-    id: 'identity-server4',
-    name: 'IdentityServer4',
-    type: 'oauth',
-    version: '2.0',
-    scope: 'openid profile email',
-    params: { grant_type: 'authorization_code' },
+    id: "identity-server4",
+    name: "IdentityServer4",
+    type: "oauth",
+    version: "2.0",
+    scope: "openid profile email",
+    params: { grant_type: "authorization_code" },
     accessTokenUrl: `https://${options.domain}/connect/token`,
     authorizationUrl: `https://${options.domain}/connect/authorize?response_type=code`,
     profileUrl: `https://${options.domain}/connect/userinfo`,
-    profile: (profile) => {
+    profile(profile) {
       return { ...profile, id: profile.sub }
     },
-    ...options
+    ...options,
   }
 }

src/providers/index.js

@@ -1,83 +0,0 @@
-import Apple from './apple'
-import Atlassian from './atlassian'
-import Auth0 from './auth0'
-import AzureADB2C from './azure-ad-b2c'
-import Basecamp from './basecamp'
-import BattleNet from './battlenet'
-import Box from './box'
-import Bungie from './bungie'
-import Cognito from './cognito'
-import Credentials from './credentials'
-import Discord from './discord'
-import Email from './email'
-import EVEOnline from './eveonline'
-import Facebook from './facebook'
-import FACEIT from './faceit'
-import Foursquare from './foursquare'
-import FusionAuth from './fusionauth'
-import GitHub from './github'
-import GitLab from './gitlab'
-import Google from './google'
-import IdentityServer4 from './identity-server4'
-import Instagram from './instagram'
-import Kakao from './kakao'
-import LINE from './line'
-import LinkedIn from './linkedin'
-import MailRu from './mailru'
-import Medium from './medium'
-import Netlify from './netlify'
-import Okta from './okta'
-import Osso from './osso'
-import Reddit from './reddit'
-import Salesforce from './salesforce'
-import Slack from './slack'
-import Spotify from './spotify'
-import Strava from './strava'
-import Twitch from './twitch'
-import Twitter from './twitter'
-import VK from './vk'
-import Yandex from './yandex'
-import Zoho from './zoho'
-
-export default {
-  Apple,
-  Atlassian,
-  Auth0,
-  AzureADB2C,
-  Basecamp,
-  BattleNet,
-  Box,
-  Bungie,
-  Cognito,
-  Credentials,
-  Discord,
-  Email,
-  EVEOnline,
-  Facebook,
-  FACEIT,
-  Foursquare,
-  FusionAuth,
-  GitHub,
-  GitLab,
-  Google,
-  IdentityServer4,
-  Instagram,
-  Kakao,
-  LINE,
-  LinkedIn,
-  MailRu,
-  Medium,
-  Netlify,
-  Okta,
-  Osso,
-  Reddit,
-  Salesforce,
-  Slack,
-  Spotify,
-  Strava,
-  Twitch,
-  Twitter,
-  VK,
-  Yandex,
-  Zoho
-}

src/providers/kakao.js

@@ -1,21 +1,22 @@
-export default (options) => {
+export default function Kakao(options) {
   return {
-    id: 'kakao',
-    name: 'Kakao',
-    type: 'oauth',
-    version: '2.0',
-    params: { grant_type: 'authorization_code' },
-    accessTokenUrl: 'https://kauth.kakao.com/oauth/token',
-    authorizationUrl: 'https://kauth.kakao.com/oauth/authorize?response_type=code',
-    profileUrl: 'https://kapi.kakao.com/v2/user/me',
-    profile: (profile) => {
+    id: "kakao",
+    name: "Kakao",
+    type: "oauth",
+    version: "2.0",
+    params: { grant_type: "authorization_code" },
+    accessTokenUrl: "https://kauth.kakao.com/oauth/token",
+    authorizationUrl:
+      "https://kauth.kakao.com/oauth/authorize?response_type=code",
+    profileUrl: "https://kapi.kakao.com/v2/user/me",
+    profile(profile) {
       return {
         id: profile.id,
         name: profile.kakao_account?.profile.nickname,
         email: profile.kakao_account?.email,
-        image: profile.kakao_account?.profile.profile_image_url
+        image: profile.kakao_account?.profile.profile_image_url,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/line.js

@@ -1,22 +1,23 @@
-export default (options) => {
+export default function LINE(options) {
   return {
-    id: 'line',
-    name: 'LINE',
-    type: 'oauth',
-    version: '2.0',
-    scope: 'profile openid',
-    params: { grant_type: 'authorization_code' },
-    accessTokenUrl: 'https://api.line.me/oauth2/v2.1/token',
-    authorizationUrl: 'https://access.line.me/oauth2/v2.1/authorize?response_type=code',
-    profileUrl: 'https://api.line.me/v2/profile',
-    profile: (profile) => {
+    id: "line",
+    name: "LINE",
+    type: "oauth",
+    version: "2.0",
+    scope: "profile openid",
+    params: { grant_type: "authorization_code" },
+    accessTokenUrl: "https://api.line.me/oauth2/v2.1/token",
+    authorizationUrl:
+      "https://access.line.me/oauth2/v2.1/authorize?response_type=code",
+    profileUrl: "https://api.line.me/v2/profile",
+    profile(profile) {
       return {
         id: profile.userId,
         name: profile.displayName,
         email: null,
-        image: profile.pictureUrl
+        image: profile.pictureUrl,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/linkedin.js

@@ -1,26 +1,28 @@
-export default (options) => {
+export default function LinkedIn(options) {
   return {
-    id: 'linkedin',
-    name: 'LinkedIn',
-    type: 'oauth',
-    version: '2.0',
-    scope: 'r_liteprofile',
+    id: "linkedin",
+    name: "LinkedIn",
+    type: "oauth",
+    version: "2.0",
+    scope: "r_liteprofile",
     params: {
-      grant_type: 'authorization_code',
+      grant_type: "authorization_code",
       client_id: options.clientId,
-      client_secret: options.clientSecret
+      client_secret: options.clientSecret,
     },
-    accessTokenUrl: 'https://www.linkedin.com/oauth/v2/accessToken',
-    authorizationUrl: 'https://www.linkedin.com/oauth/v2/authorization?response_type=code',
-    profileUrl: 'https://api.linkedin.com/v2/me?projection=(id,localizedFirstName,localizedLastName)',
-    profile: (profile) => {
+    accessTokenUrl: "https://www.linkedin.com/oauth/v2/accessToken",
+    authorizationUrl:
+      "https://www.linkedin.com/oauth/v2/authorization?response_type=code",
+    profileUrl:
+      "https://api.linkedin.com/v2/me?projection=(id,localizedFirstName,localizedLastName)",
+    profile(profile) {
       return {
         id: profile.id,
-        name: profile.localizedFirstName + ' ' + profile.localizedLastName,
+        name: profile.localizedFirstName + " " + profile.localizedLastName,
         email: null,
-        image: null
+        image: null,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/mailru.js

@@ -1,25 +1,25 @@
-export default (options) => {
+export default function MailRu(options) {
   return {
-    id: 'mailru',
-    name: 'Mail.ru',
-    type: 'oauth',
-    version: '2.0',
-    scope: 'userinfo',
+    id: "mailru",
+    name: "Mail.ru",
+    type: "oauth",
+    version: "2.0",
+    scope: "userinfo",
     params: {
-      grant_type: 'authorization_code'
+      grant_type: "authorization_code",
     },
-    accessTokenUrl: 'https://oauth.mail.ru/token',
-    requestTokenUrl: 'https://oauth.mail.ru/token',
-    authorizationUrl: 'https://oauth.mail.ru/login?response_type=code',
-    profileUrl: 'https://oauth.mail.ru/userinfo',
-    profile: (profile) => {
+    accessTokenUrl: "https://oauth.mail.ru/token",
+    requestTokenUrl: "https://oauth.mail.ru/token",
+    authorizationUrl: "https://oauth.mail.ru/login?response_type=code",
+    profileUrl: "https://oauth.mail.ru/userinfo",
+    profile(profile) {
       return {
         id: profile.id,
         name: profile.name,
         email: profile.email,
-        image: profile.image
+        image: profile.image,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/medium.js

@@ -1,22 +1,22 @@
-export default (options) => {
+export default function Medium(options) {
   return {
-    id: 'medium',
-    name: 'Medium',
-    type: 'oauth',
-    version: '2.0',
-    scope: 'basicProfile',
-    params: { grant_type: 'authorization_code' },
-    accessTokenUrl: 'https://api.medium.com/v1/tokens',
-    authorizationUrl: 'https://medium.com/m/oauth/authorize?response_type=code',
-    profileUrl: 'https://api.medium.com/v1/me',
-    profile: (profile) => {
+    id: "medium",
+    name: "Medium",
+    type: "oauth",
+    version: "2.0",
+    scope: "basicProfile",
+    params: { grant_type: "authorization_code" },
+    accessTokenUrl: "https://api.medium.com/v1/tokens",
+    authorizationUrl: "https://medium.com/m/oauth/authorize?response_type=code",
+    profileUrl: "https://api.medium.com/v1/me",
+    profile(profile) {
       return {
         id: profile.data.id,
         name: profile.data.name,
         email: null,
-        image: profile.data.imageUrl
+        image: profile.data.imageUrl,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/netlify.js

@@ -1,21 +1,21 @@
-export default (options) => {
+export default function Netlify(options) {
   return {
-    id: 'netlify',
-    name: 'Netlify',
-    type: 'oauth',
-    version: '2.0',
-    params: { grant_type: 'authorization_code' },
-    accessTokenUrl: 'https://api.netlify.com/oauth/token',
-    authorizationUrl: 'https://app.netlify.com/authorize?response_type=code',
-    profileUrl: 'https://api.netlify.com/api/v1/user',
-    profile: (profile) => {
+    id: "netlify",
+    name: "Netlify",
+    type: "oauth",
+    version: "2.0",
+    params: { grant_type: "authorization_code" },
+    accessTokenUrl: "https://api.netlify.com/oauth/token",
+    authorizationUrl: "https://app.netlify.com/authorize?response_type=code",
+    profileUrl: "https://api.netlify.com/api/v1/user",
+    profile(profile) {
       return {
         id: profile.id,
         name: profile.full_name,
         email: profile.email,
-        image: profile.avatar_url
+        image: profile.avatar_url,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/okta.js

@@ -1,22 +1,22 @@
-export default (options) => {
+export default function Okta(options) {
   return {
-    id: 'okta',
-    name: 'Okta',
-    type: 'oauth',
-    version: '2.0',
-    scope: 'openid profile email',
+    id: "okta",
+    name: "Okta",
+    type: "oauth",
+    version: "2.0",
+    scope: "openid profile email",
     params: {
-      grant_type: 'authorization_code',
+      grant_type: "authorization_code",
       client_id: options.clientId,
-      client_secret: options.clientSecret
+      client_secret: options.clientSecret,
     },
     // These will be different depending on the Org.
     accessTokenUrl: `https://${options.domain}/v1/token`,
     authorizationUrl: `https://${options.domain}/v1/authorize/?response_type=code`,
     profileUrl: `https://${options.domain}/v1/userinfo/`,
-    profile: (profile) => {
+    profile(profile) {
       return { ...profile, id: profile.sub }
     },
-    ...options
+    ...options,
   }
 }

src/providers/osso.js

@@ -1,20 +1,20 @@
-export default (options) => {
+export default function Osso(options) {
   return {
-    id: 'osso',
-    name: 'SAML SSO',
-    type: 'oauth',
-    version: '2.0',
-    params: { grant_type: 'authorization_code' },
+    id: "osso",
+    name: "SAML SSO",
+    type: "oauth",
+    version: "2.0",
+    params: { grant_type: "authorization_code" },
     accessTokenUrl: `https://${options.domain}/oauth/token`,
     authorizationUrl: `https://${options.domain}/oauth/authorize?response_type=code`,
     profileUrl: `https://${options.domain}/oauth/me`,
-    profile: (profile) => {
+    profile(profile) {
       return {
         id: profile.id,
         name: profile.name || profile.email,
-        email: profile.email
+        email: profile.email,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/reddit.js

@@ -1,23 +1,23 @@
-export default (options) => {
+export default function Reddit(options) {
   return {
-    id: 'reddit',
-    name: 'Reddit',
-    type: 'oauth',
-    version: '2.0',
-    scope: 'identity',
-    params: { grant_type: 'authorization_code' },
-    accessTokenUrl: ' https://www.reddit.com/api/v1/access_token',
+    id: "reddit",
+    name: "Reddit",
+    type: "oauth",
+    version: "2.0",
+    scope: "identity",
+    params: { grant_type: "authorization_code" },
+    accessTokenUrl: " https://www.reddit.com/api/v1/access_token",
     authorizationUrl:
-      'https://www.reddit.com/api/v1/authorize?response_type=code',
-    profileUrl: 'https://oauth.reddit.com/api/v1/me',
-    profile: (profile) => {
+      "https://www.reddit.com/api/v1/authorize?response_type=code",
+    profileUrl: "https://oauth.reddit.com/api/v1/me",
+    profile(profile) {
       return {
         id: profile.id,
         name: profile.name,
         image: null,
-        email: null
+        email: null,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/salesforce.js

@@ -1,21 +1,22 @@
-export default (options) => {
+export default function Salesforce(options) {
   return {
-    id: 'salesforce',
-    name: 'Salesforce',
-    type: 'oauth',
-    version: '2.0',
-    params: { display: 'page', grant_type: 'authorization_code' },
-    accessTokenUrl: 'https://login.salesforce.com/services/oauth2/token',
-    authorizationUrl: 'https://login.salesforce.com/services/oauth2/authorize?response_type=code',
-    profileUrl: 'https://login.salesforce.com/services/oauth2/userinfo',
-    protection: 'none', // REVIEW: Can we use "pkce" ?
-    profile: (profile) => {
+    id: "salesforce",
+    name: "Salesforce",
+    type: "oauth",
+    version: "2.0",
+    params: { display: "page", grant_type: "authorization_code" },
+    accessTokenUrl: "https://login.salesforce.com/services/oauth2/token",
+    authorizationUrl:
+      "https://login.salesforce.com/services/oauth2/authorize?response_type=code",
+    profileUrl: "https://login.salesforce.com/services/oauth2/userinfo",
+    protection: "none",
+    profile(profile) {
       return {
         ...profile,
         id: profile.user_id,
-        image: profile.picture
+        image: profile.picture,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/slack.js

@@ -1,24 +1,26 @@
-export default (options) => {
+export default function Slack(options) {
   return {
-    id: 'slack',
-    name: 'Slack',
-    type: 'oauth',
-    version: '2.0',
+    id: "slack",
+    name: "Slack",
+    type: "oauth",
+    version: "2.0",
     scope: [],
-    params: { grant_type: 'authorization_code' },
-    accessTokenUrl: 'https://slack.com/api/oauth.v2.access',
-    authorizationUrl: 'https://slack.com/oauth/v2/authorize',
-    authorizationParams: { user_scope: 'identity.basic,identity.email,identity.avatar' },
-    profileUrl: 'https://slack.com/api/users.identity',
-    profile: (profile) => {
+    params: { grant_type: "authorization_code" },
+    accessTokenUrl: "https://slack.com/api/oauth.v2.access",
+    authorizationUrl: "https://slack.com/oauth/v2/authorize",
+    authorizationParams: {
+      user_scope: "identity.basic,identity.email,identity.avatar",
+    },
+    profileUrl: "https://slack.com/api/users.identity",
+    profile(profile) {
       const { user } = profile
       return {
         id: user.id,
         name: user.name,
         image: user.image_512,
-        email: user.email
+        email: user.email,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/spotify.js

@@ -1,23 +1,23 @@
-export default (options) => {
+export default function Spotify(options) {
   return {
-    id: 'spotify',
-    name: 'Spotify',
-    type: 'oauth',
-    version: '2.0',
-    scope: 'user-read-email',
-    params: { grant_type: 'authorization_code' },
-    accessTokenUrl: 'https://accounts.spotify.com/api/token',
+    id: "spotify",
+    name: "Spotify",
+    type: "oauth",
+    version: "2.0",
+    scope: "user-read-email",
+    params: { grant_type: "authorization_code" },
+    accessTokenUrl: "https://accounts.spotify.com/api/token",
     authorizationUrl:
-      'https://accounts.spotify.com/authorize?response_type=code',
-    profileUrl: 'https://api.spotify.com/v1/me',
-    profile: (profile) => {
+      "https://accounts.spotify.com/authorize?response_type=code",
+    profileUrl: "https://api.spotify.com/v1/me",
+    profile(profile) {
       return {
         id: profile.id,
         name: profile.display_name,
         email: profile.email,
-        image: profile.images?.[0]?.url
+        image: profile.images?.[0]?.url,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/strava.js

@@ -1,22 +1,22 @@
-export default (options) => {
+export default function Strava(options) {
   return {
-    id: 'strava',
-    name: 'Strava',
-    type: 'oauth',
-    version: '2.0',
-    scope: 'read',
-    params: { grant_type: 'authorization_code' },
-    accessTokenUrl: 'https://www.strava.com/api/v3/oauth/token',
+    id: "strava",
+    name: "Strava",
+    type: "oauth",
+    version: "2.0",
+    scope: "read",
+    params: { grant_type: "authorization_code" },
+    accessTokenUrl: "https://www.strava.com/api/v3/oauth/token",
     authorizationUrl:
-      'https://www.strava.com/api/v3/oauth/authorize?response_type=code',
-    profileUrl: 'https://www.strava.com/api/v3/athlete',
-    profile: (profile) => {
+      "https://www.strava.com/api/v3/oauth/authorize?response_type=code",
+    profileUrl: "https://www.strava.com/api/v3/athlete",
+    profile(profile) {
       return {
         id: profile.id,
         name: profile.firstname,
-        image: profile.profile
+        image: profile.profile,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/twitch.js

@@ -1,24 +1,24 @@
-export default (options) => {
+export default function Twitch(options) {
   return {
-    id: 'twitch',
-    name: 'Twitch',
-    type: 'oauth',
-    version: '2.0',
-    scope: 'user:read:email',
-    params: { grant_type: 'authorization_code' },
-    accessTokenUrl: 'https://id.twitch.tv/oauth2/token',
+    id: "twitch",
+    name: "Twitch",
+    type: "oauth",
+    version: "2.0",
+    scope: "user:read:email",
+    params: { grant_type: "authorization_code" },
+    accessTokenUrl: "https://id.twitch.tv/oauth2/token",
     authorizationUrl:
-      'https://id.twitch.tv/oauth2/authorize?response_type=code',
-    profileUrl: 'https://api.twitch.tv/helix/users',
-    profile: (profile) => {
+      "https://id.twitch.tv/oauth2/authorize?response_type=code",
+    profileUrl: "https://api.twitch.tv/helix/users",
+    profile(profile) {
       const data = profile.data[0]
       return {
         id: data.id,
         name: data.display_name,
         image: data.profile_image_url,
-        email: data.email
+        email: data.email,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/twitter.js

@@ -1,23 +1,23 @@
-export default (options) => {
+export default function Twitter(options) {
   return {
-    id: 'twitter',
-    name: 'Twitter',
-    type: 'oauth',
-    version: '1.0A',
-    scope: '',
-    accessTokenUrl: 'https://api.twitter.com/oauth/access_token',
-    requestTokenUrl: 'https://api.twitter.com/oauth/request_token',
-    authorizationUrl: 'https://api.twitter.com/oauth/authenticate',
+    id: "twitter",
+    name: "Twitter",
+    type: "oauth",
+    version: "1.0A",
+    scope: "",
+    accessTokenUrl: "https://api.twitter.com/oauth/access_token",
+    requestTokenUrl: "https://api.twitter.com/oauth/request_token",
+    authorizationUrl: "https://api.twitter.com/oauth/authenticate",
     profileUrl:
-      'https://api.twitter.com/1.1/account/verify_credentials.json?include_email=true',
-    profile: (profile) => {
+      "https://api.twitter.com/1.1/account/verify_credentials.json?include_email=true",
+    profile(profile) {
       return {
         id: profile.id_str,
         name: profile.name,
         email: profile.email,
-        image: profile.profile_image_url_https.replace(/_normal\.jpg$/, '.jpg')
+        image: profile.profile_image_url_https.replace(/_normal\.jpg$/, ".jpg"),
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/vk.js

@@ -1,30 +1,29 @@
-export default (options) => {
-  const apiVersion = '5.126' // https://vk.com/dev/versions
+export default function VK(options) {
+  const apiVersion = "5.126" // https://vk.com/dev/versions
 
   return {
-    id: 'vk',
-    name: 'VK',
-    type: 'oauth',
-    version: '2.0',
-    scope: 'email',
+    id: "vk",
+    name: "VK",
+    type: "oauth",
+    version: "2.0",
+    scope: "email",
     params: {
-      grant_type: 'authorization_code'
+      grant_type: "authorization_code",
     },
     accessTokenUrl: `https://oauth.vk.com/access_token?v=${apiVersion}`,
     requestTokenUrl: `https://oauth.vk.com/access_token?v=${apiVersion}`,
-    authorizationUrl:
-      `https://oauth.vk.com/authorize?response_type=code&v=${apiVersion}`,
+    authorizationUrl: `https://oauth.vk.com/authorize?response_type=code&v=${apiVersion}`,
     profileUrl: `https://api.vk.com/method/users.get?fields=photo_100&v=${apiVersion}`,
     profile: (result) => {
       const profile = result.response?.[0] ?? {}
 
       return {
         id: profile.id,
-        name: [profile.first_name, profile.last_name].filter(Boolean).join(' '),
+        name: [profile.first_name, profile.last_name].filter(Boolean).join(" "),
         email: profile.email,
-        image: profile.photo_100
+        image: profile.photo_100,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/yandex.js

@@ -1,23 +1,23 @@
-export default (options) => {
+export default function Yandex(options) {
   return {
-    id: 'yandex',
-    name: 'Yandex',
-    type: 'oauth',
-    version: '2.0',
-    scope: 'login:email login:info',
-    params: { grant_type: 'authorization_code' },
-    accessTokenUrl: 'https://oauth.yandex.ru/token',
-    requestTokenUrl: 'https://oauth.yandex.ru/token',
-    authorizationUrl: 'https://oauth.yandex.ru/authorize?response_type=code',
-    profileUrl: 'https://login.yandex.ru/info?format=json',
-    profile: (profile) => {
+    id: "yandex",
+    name: "Yandex",
+    type: "oauth",
+    version: "2.0",
+    scope: "login:email login:info",
+    params: { grant_type: "authorization_code" },
+    accessTokenUrl: "https://oauth.yandex.ru/token",
+    requestTokenUrl: "https://oauth.yandex.ru/token",
+    authorizationUrl: "https://oauth.yandex.ru/authorize?response_type=code",
+    profileUrl: "https://login.yandex.ru/info?format=json",
+    profile(profile) {
       return {
         id: profile.id,
         name: profile.real_name,
         email: profile.default_email,
-        image: null
+        image: null,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/zoho.js

@@ -1,22 +1,23 @@
-export default (options) => {
+export default function Zoho(options) {
   return {
-    id: 'zoho',
-    name: 'Zoho',
-    type: 'oauth',
-    version: '2.0',
-    scope: 'AaaServer.profile.Read',
-    params: { grant_type: 'authorization_code' },
-    accessTokenUrl: 'https://accounts.zoho.com/oauth/v2/token',
-    authorizationUrl: 'https://accounts.zoho.com/oauth/v2/auth?response_type=code',
-    profileUrl: 'https://accounts.zoho.com/oauth/user/info',
-    profile: (profile) => {
+    id: "zoho",
+    name: "Zoho",
+    type: "oauth",
+    version: "2.0",
+    scope: "AaaServer.profile.Read",
+    params: { grant_type: "authorization_code" },
+    accessTokenUrl: "https://accounts.zoho.com/oauth/v2/token",
+    authorizationUrl:
+      "https://accounts.zoho.com/oauth/v2/auth?response_type=code",
+    profileUrl: "https://accounts.zoho.com/oauth/user/info",
+    profile(profile) {
       return {
         id: profile.ZUID,
         name: `${profile.First_Name} ${profile.Last_Name}`,
         email: profile.Email,
-        image: null
+        image: null,
       }
     },
-    ...options
+    ...options,
   }
 }

src/server/index.d.ts

@@ -1,95 +0,0 @@
-import { NextApiHandler, NextApiRequest, NextApiResponse } from 'next'
-import { LoggerInstance } from 'src/lib/logger'
-import { CallbacksOptions } from './lib/callbacks'
-import { CookiesOptions } from './lib/cookie'
-import { EventsOptions } from './lib/events'
-
-export interface Provider {
-  id: string
-  name: string
-  type: string
-  version: string
-  params: Record<string, unknown>
-  scope: string
-  accessTokenUrl: string
-  authorizationUrl: string
-  profileUrl?: string
-  grant_type?: string
-  profile?: (profile: any) => Promise<any>
-}
-
-/** @docs https://next-auth.js.org/configuration/options */
-export interface NextAuthOptions {
-  /** @docs https://next-auth.js.org/configuration/options#theme */
-  theme?: 'auto' | 'dark' | 'light'
-  /** @docs https://next-auth.js.org/configuration/options#providers */
-  providers: Provider[]
-  /** @docs https://next-auth.js.org/configuration/options#database */
-  database?: any
-  /** @docs https://next-auth.js.org/configuration/options#secret */
-  secret?: any
-  /** @docs https://next-auth.js.org/configuration/options#session */
-  session?: any
-  /** @docs https://next-auth.js.org/configuration/options#jwt */
-  jwt?: any
-  /** @docs https://next-auth.js.org/configuration/options#pages */
-  pages?: {
-    signIn?: string
-    signOut?: string
-    /** Error code passed in query string as ?error= */
-    error?: string
-    verifyRequest?: string
-    /** If set, new users will be directed here on first sign in */
-    newUser?: string
-  }
-  /**
-   * Callbacks are asynchronous functions you can use to control what happens when an action is performed.
-   * Callbacks are extremely powerful, especially in scenarios involving JSON Web Tokens as
-   * they allow you to implement access controls without a database and
-   * to integrate with external databases or APIs.
-   * @docs https://next-auth.js.org/configuration/options#callbacks
-   */
-  callbacks?: CallbacksOptions
-  /** @docs https://next-auth.js.org/configuration/options#events */
-  events?: EventsOptions
-  /** @docs https://next-auth.js.org/configuration/options#adapter */
-  adapter?: any
-  /** @docs https://next-auth.js.org/configuration/options#debug */
-  debug?: boolean
-  /** @docs https://next-auth.js.org/configuration/options#usesecurecookies */
-  useSecureCookies?: boolean
-  /** @docs https://next-auth.js.org/configuration/options#cookies */
-  cookies?: CookiesOptions
-  /** @docs https://next-auth.js.org/configuration/options#logger */
-  logger: LoggerInstance
-}
-
-/** Options that are the same both in internal and user provided options. */
-export type NextAuthSharedOptions = 'pages' | 'jwt' | 'events' | 'callbacks' | 'cookies' | 'secret' | 'adapter' | 'theme' | 'debug' | 'logger'
-
-export interface NextAuthInternalOptions extends Pick<NextAuthOptions, NextAuthSharedOptions> {
-  pkce?: {
-    code_verifier?: string
-    /**
-     * Could be `"plain"`, but not recommended.
-     * We ignore it for now.
-     * @spec https://tools.ietf.org/html/rfc7636#section-4.2.
-     */
-    code_challenge_method?: 'S256'
-  }
-  provider?: Provider
-  baseUrl?: string
-  basePath?: string
-  action?: string
-  csrfToken?: string
-  csrfTokenVerified?: boolean
-}
-
-export interface NextAuthRequest extends NextApiRequest {
-  options: NextAuthInternalOptions
-}
-
-export interface NextAuthResponse extends NextApiResponse {}
-
-export declare function NextAuthHandler (req: NextAuthRequest, res: NextAuthResponse, options: NextAuthOptions): ReturnType<NextApiHandler>
-export declare function NextAuthHandler (options: NextAuthOptions): ReturnType<NextApiHandler>

src/server/routes/callback.js

@@ -262,7 +262,8 @@ export default async function callback (req, res) {
     const defaultJwtPayload = {
       name: user.name,
       email: user.email,
-      picture: user.image
+      picture: user.image,
+      sub: user.id?.toString()
     }
     const jwtPayload = await callbacks.jwt(defaultJwtPayload, user, account, userObjectReturnedFromAuthorizeHandler, false)
 

types/index.d.ts

@@ -264,9 +264,49 @@ export interface CallbacksOptions<
   P extends Record<string, unknown> = Profile,
   A extends Record<string, unknown> = Account
 > {
+  /**
+   * Use this callback to control if a user is allowed to sign in.
+   * Returning true will continue the sign-in flow.
+   * Throwing an error or returning a string will stop the flow, and redirect the user.
+   *
+   * [Documentation](https://next-auth.js.org/configuration/callbacks#sign-in-callback)
+   */
   signIn?(user: User, account: A, profile: P): Awaitable<string | boolean>
+  /**
+   * This callback is called anytime the user is redirected to a callback URL (e.g. on signin or signout).
+   * By default only URLs on the same URL as the site are allowed,
+   * you can use this callback to customise that behaviour.
+   *
+   * [Documentation](https://next-auth.js.org/configuration/callbacks#redirect-callback)
+   */
   redirect?(url: string, baseUrl: string): Awaitable<string>
+  /**
+   * This callback is called whenever a session is checked.
+   * (Eg.: invoking the `/api/session` endpoint, using `useSession` or `getSession`)
+   *
+   * - ⚠ By default, only a subset of the token is returned for increased security.
+   * If you want to make something available you added to the token through the `jwt` callback,
+   * you have to explicitely forward it here to make it available to the client.
+   *
+   * [Documentation](https://next-auth.js.org/configuration/callbacks#session-callback) |
+   * [`jwt` callback](https://next-auth.js.org/configuration/callbacks#jwt-callback) |
+   * [`useSession`](https://next-auth.js.org/getting-started/client#usesession) |
+   * [`getSession`](https://next-auth.js.org/getting-started/client#getsession) |
+   *
+   */
   session?(session: Session, userOrToken: JWT | User): Awaitable<Session>
+  /**
+   * This callback is called whenever a JSON Web Token is created (i.e. at sign in)
+   * or updated (i.e whenever a session is accessed in the client).
+   * Its content is forwarded to the `session` callback,
+   * where you can control what should be returned to the client.
+   * Anything else will be kept from your front-end.
+   *
+   * - ⚠ By default the JWT is signed, but not encrypted.
+   *
+   * [Documentation](https://next-auth.js.org/configuration/callbacks#jwt-callback) |
+   * [`session` callback](https://next-auth.js.org/configuration/callbacks#session-callback)
+   */
   jwt?(
     token: JWT,
     user?: User,

www/docs/configuration/providers.md

@@ -111,14 +111,7 @@ providers: [
 ...
 ```
 
-:::tip
-If you think your custom provider might be useful to others, we encourage you to open a PR and add it to the built-in list so others can discover it much more easily! You only need to add three changes:
-1. Add your config: [`src/providers/{provider}.js`](https://github.com/nextauthjs/next-auth/tree/main/src/providers)
-2. Re-export your config: at [`src/providers/index.js`](https://github.com/nextauthjs/next-auth/blob/main/src/providers/index.js)
-3. Add provider documentation: [`www/docs/providers/{provider}.md`](https://github.com/nextauthjs/next-auth/tree/main/www/docs/providers)
 
-You can look at the existing built-in providers for inspiration.
-:::
 
 
 ### OAuth provider options
@@ -230,3 +223,14 @@ export const Image = ({ children, src, alt = '' }) => (
     <img alt={alt} src={src} />
   </div>
  )
+
+
+## Adding a new built-in provider
+
+If you think your custom provider might be useful to others, we encourage you to open a PR and add it to the built-in list so others can discover it much more easily! You only need to add two changes:
+1. Add your config: [`src/providers/{provider}.js`](https://github.com/nextauthjs/next-auth/tree/main/src/providers) (Make sure you use a named default export, like `export default function YourProvider`!)
+2. Add provider documentation: [`www/docs/providers/{provider}.md`](https://github.com/nextauthjs/next-auth/tree/main/www/docs/providers)
+
+That's it! 🎉 Others will be able to discover this provider much more easily now!
+
+You can look at the existing built-in providers for inspiration.

www/docs/errors.md

@@ -76,6 +76,7 @@ In _most cases_ it does not make sense to specify a database in NextAuth.js opti
 The provider you tried to use failed when setting [PKCE or Proof Key for Code Exchange](https://tools.ietf.org/html/rfc7636#section-4.2).
 The `code_verifier` is saved in a cookie called (by default) `__Secure-next-auth.pkce.code_verifier` which expires after 15 minutes.
 Check if `cookies.pkceCodeVerifier` is configured correctly. The default `code_challenge_method` is `"S256"`. This is currently not configurable to `"plain"`, as it is not recommended, and in most cases it is only supported for backward compatibility.
+
 ---
 
 ### Session Handling

www/docs/faq.md

@@ -54,10 +54,15 @@ NextAuth.js does not currently support automatically signing into sites on diffe
 
 ### Can I use NextAuth.js with React Native?
 
-NextAuth.js is designed as a secure, confidental client and implements a server side authentication flow.
+NextAuth.js is designed as a secure, confidential client and implements a server side authentication flow.
 
 It is not intended to be used in native applications on desktop or mobile applications, which typically implement public clients (e.g. with client / secrets embedded in the application).
 
+
+### Is NextAuth.js supporting TypeScript?
+
+Yes! Check out the [TypeScript docs](/getting-started/typescript)
+
 ---
 
 ## Databases
@@ -70,7 +75,7 @@ It also provides an Adapter API which allows you to connect it to any database.
 
 ### What does NextAuth.js use databases for?
 
-Databases in NextAuth.js are used for persisting users, oauth accounts, email sign in tokens and sessions.
+Databases in NextAuth.js are used for persisting users, OAuth accounts, email sign in tokens and sessions.
 
 Specifying a database is optional if you don't need to persist user data or support email sign in. If you don't specify a database then JSON Web Tokens will be enabled for session storage and used to store session data.
 
@@ -126,7 +131,7 @@ When an email address is associated with an OAuth account it does not necessaril
 
 With automatic account linking on sign in, this can be exploited by bad actors to hijack accounts by creating an OAuth account associated with the email address of another user.
 
-For this reason it is not secure to automatically link accounts between abitrary providers on sign in, which is why this feature is generally not provided by authentication service and is not provided by NextAuth.js.
+For this reason it is not secure to automatically link accounts between arbitrary providers on sign in, which is why this feature is generally not provided by authentication service and is not provided by NextAuth.js.
 
 Automatic account linking is seen on some sites, sometimes insecurely. It can be technically possible to do automatic account linking securely if you trust all the providers involved to ensure they have securely verified the email address associated with the account, but requires placing trust (and transferring the risk) to those providers to handle the process securely.
 
@@ -169,7 +174,7 @@ NextAuth.js supports both database session tokens and JWT session tokens.
 * If a database is specified, database session tokens will be used by default.
 * If no database is specified, JWT session tokens will be used by default.
 
-You can also choose to use JSON Web Tokens as session tokens with using a database, by explictly setting the `session: { jwt: true }` option.
+You can also choose to use JSON Web Tokens as session tokens with using a database, by explicitly setting the `session: { jwt: true }` option.
 
 ### What are the advantages of JSON Web Tokens?
 
@@ -201,13 +206,13 @@ JSON Web Tokens can be used for session tokens, but are also used for lots of ot
 
   Avoid storing any data in a token that might be problematic if it were to be decrypted in the future.
 
-* If you do not explictly specify a secret for for NextAuth.js, existing sessions will be invalidated any time your NextAuth.js configuration changes, as NextAuth.js will default to an auto-generated secret.
+* If you do not explicitly specify a secret for for NextAuth.js, existing sessions will be invalidated any time your NextAuth.js configuration changes, as NextAuth.js will default to an auto-generated secret.
 
   If using JSON Web Token you should at least specify a secret and ideally configure public/private keys.
 
 ### Are JSON Web Tokens secure?
 
-By default tokens are signed (JWS) but not encrypted (JWE), as encryption adds additional overhead and reduces the amount of space avalible to store data (total cookie size for a domain is limited to 4KB).
+By default tokens are signed (JWS) but not encrypted (JWE), as encryption adds additional overhead and reduces the amount of space available to store data (total cookie size for a domain is limited to 4KB).
 
 * JSON Web Tokens in NextAuth.js use JWS and are signed using HS512 with an auto-generated key.
 
@@ -217,7 +222,7 @@ You can specify other valid algorithms - [as specified in RFC 7518](https://tool
 
 NextAuth.js will generate keys for you, but this will generate a warning at start up.
 
-Using explict public/private keys for signing is strongly recommended.
+Using explicit public/private keys for signing is strongly recommended.
 
 ### What signing and encryption standards does NextAuth.js support?
 

www/docs/tutorials.md

@@ -11,7 +11,7 @@ _New submissions and edits are welcome!_
 
 ### [NextJS Authentication Crash Course with NextAuth.js](https://youtu.be/o_wZIVmWteQ)
 
-This tutorial dives in to the ins and outs of NextAuth including email, Github, Twitter and integrating with Auth0 in under hour.
+This tutorial dives in to the ins and outs of NextAuth including email, GitHub, Twitter and integrating with Auth0 in under hour.
 
 ### [Create your own NextAuth.js Login Pages](https://youtu.be/kB6YNYZ63fw)
 
@@ -43,6 +43,10 @@ This approach can be used to authenticate existing user accounts against any bac
 
 How to write tests using Cypress.
 
+### [Usage with class components](tutorials/usage-with-class-components)
+
+How to use `useSession()` hook with class components.
+
 ## Other tutorials and explainers
 
 _These are tutorials and explainers that have been submitted or that we have found on the web and are hosted elsewhere They include articles, videos and example projects. Submissions for inclusion are welcome!_
@@ -77,7 +81,7 @@ This example shows how to implement a fullstack app in TypeScript with Next.js u
 
 ### [Adding Authentication to an existing Next.js Application in no time!](https://dev.to/ndom91/adding-authentication-to-an-existing-serverless-next-js-app-in-no-time-with-nextauth-js-192h)
 
-This `dev.to` tutorial walks one through adding NextAuth.js to an existing project. Including setting up the OAuth client id and secret, adding the API routes for authentication, protecting pages and api routes behind that authentication, etc.
+This `dev.to` tutorial walks one through adding NextAuth.js to an existing project. Including setting up the OAuth client id and secret, adding the API routes for authentication, protecting pages and API routes behind that authentication, etc.
 
 ### [Adding Sign in With Apple Next JS](https://thesiddd.com/blog/apple-auth)
 

www/docs/tutorials/usage-with-class-components.md

@@ -0,0 +1,61 @@
+---
+id: usage-with-class-components
+title: Usage with class components
+---
+
+If you want to use the `useSession()` hook in your class components you can do so with the help of a higher order component or with a render prop.
+
+## Higher Order Component
+
+```js
+import { useSession } from "next-auth/client"
+
+const withSession = Component => props => {
+  const [session, loading] = useSession()
+
+    // if the component has a render property, we are good
+    if (Component.prototype.render) { 
+      return <Component session={session} loading={loading} {...props} />
+    }
+
+    // if the passed component is a function component, there is no need for this wrapper
+    throw new Error([
+     "You passed a function component, `withSession` is not needed.",
+     "You can `useSession` directly in your component."
+    ].join("\n"))
+};
+
+// Usage
+class ClassComponent extends React.Component {
+  render() {
+    const {session, loading} = this.props
+    return null
+  }
+}
+
+const ClassComponentWithSession = withSession(ClassComponent)
+```
+
+## Render Prop
+
+```js
+import { useSession } from "next-auth/client"
+
+const UseSession = ({ children }) => {
+  const [session, loading] = useSession()
+  return children({ session, loading })
+};
+
+// Usage
+class ClassComponent extends React.Component {
+  render() {
+    return (
+      <UseSession>
+        {({ session, loading }) => (
+          <pre>{JSON.stringify(session, null, 2)}</pre>
+        )}
+      </UseSession>
+    )
+  }
+}
+```