feat: improve OAuth provider configuration (nextauthjs#2411)

> This touches on all OAuth providers, so there is a big potential for breaking by default. We have let new providers be added for contributors' specific needs, but from now on, we will require a more strict default on all new providers, so the basic behavior is predictable for everyone.
⚠ Unfortunately, we will not have the capacity to test each and every provider that has been added to the default providers, but we will do our best to test the most popular ones. (@ndom91 has worked on setting up the infrastructure for this). If you wish to make sure that the provider you are using will stay working, please reach out with your concerns and tell us how can you help us test that particular provider in the future. 🙏

That said, I will try my best to not break ANY of the currently built-in providers, or at least make the migration super easy. So hopefully, you won't have to change anything. It will most probably affect you if you defined a custom provider though.

We will monitor the default configuration much more closely, so the behavior will be more consistent across providers by default.

Closes nextauthjs#1846, Closes nextauthjs#1605, Closes nextauthjs#1607

BREAKING CHANGES:

Basecamp provider is removed. See the explanation [here](https://github.com/basecamp/api/blob/master/sections/authentication.md#on-authenticating-users-via-oauth)

**ALL** OAuth providers' `profile` callback is expected to only return these fields by default from now on: `id`, `name`, `email`, and `image` at most. Any of these missing values should be set to `null`.

The following new options are available:
1. `authorization` (replaces `authorizationUrl`, `authorizationParams`, `scope`)
2. `token` replaces (`accessTokenUrl`, `headers`, `params`)
3. `userinfo` (replaces `profileUrl`)

These three options map nicely to the OAuth spec's three endpoints for
1. initiating the login flow
2. retrieve OAuth tokens
3. retrieve user information

They all take the form of `EndpointHandler`:
```ts
type EndpointRequest<C, R> = (
  context: C & {
    /** `openid-client` Client */
    client: Client
    /** Provider is passed for convenience, ans also contains the `callbackUrl`. */
    provider: OAuthConfig & {
      signinUrl: string
      callbackUrl: string
    }
  }
) => Awaitable<R>

/** Gives granular control of the request to the given endpoint */
type AdvancedEndpointHandler<P extends UrlParams, C, R> = {
  /** Endpoint URL. Can contain parameters. Optionally, you can use `params`*/
  url?: string
  /** These will be prepended to the `url` */
  params?: P
  /**
   * Control the corresponding OAuth endpoint request completely.
   * Useful if your provider relies on some custom behavior
   * or it diverges from the OAuth spec.
   *
   * - ⚠ **This is an advanced option.**
   * You should **try to avoid using advanced options** unless you are very comfortable using them.
   */
  request?: EndpointRequest<C, R>
}

/** Either an URL (containing all the parameters) or an object with more granular control. */
type EndpointHandler<P extends UrlParams, C = any, R = any> =
  | string
  | AdvancedEndpointHandler<P, C, R>
```

In case of `authorization`, the `EndpointHandler` can define the `params` as [`AuthorizationParameters`](https://github.com/panva/node-openid-client/blob/51dc47d9ac619b71cd1c983b0be750a12bbae008/types/index.d.ts#L108-L143)

> Note: `authorization` does not implement `request` yet. We will have to see if there is demand for it.

From now on, instead of using the `...` spread operator when adding a new built-in provider, the user is expected to add `options` as a property at the end of the default config. This way, we can deep merge the user config with the default one. This is needed  to let the user do something like this:

```js
MyProvider({
  clientId: "",
  clientSecret: "",
  authorization: { params: {scope: ""} }
})
```
So even if the default config defines anything in `authorization`, only the user-defined parts will be overridden.

app/.env.local.example

@@ -10,12 +10,19 @@ NEXTAUTH_URL=http://localhost:3000
 SECRET= 
 
 AUTH0_ID=
-AUTH0_DOMAIN=
 AUTH0_SECRET=
+AUTH0_ISSUER=
+
+IDS4_ID=
+IDS4_SECRET=
+IDS4_ISSUER=
 
 GITHUB_ID=
 GITHUB_SECRET=
 
+TWITCH_ID=
+TWITCH_SECRET=
+
 TWITTER_ID=
 TWITTER_SECRET=
 

app/pages/api/auth/[...nextauth].js

@@ -4,51 +4,27 @@ import GitHubProvider from "next-auth/providers/github"
 import Auth0Provider from "next-auth/providers/auth0"
 import TwitterProvider from "next-auth/providers/twitter"
 import CredentialsProvider from "next-auth/providers/credentials"
+import IDS4Provider from "next-auth/providers/identity-server4"
+import Twitch from "next-auth/providers/twitch"
+import GoogleProvider from "next-auth/providers/google"
+import FacebookProvider from "next-auth/providers/facebook"
+import FoursquareProvider from "next-auth/providers/foursquare"
+// import FreshbooksProvider from "next-auth/providers/freshbooks"
+import GitlabProvider from "next-auth/providers/gitlab"
+import InstagramProvider from "next-auth/providers/instagram"
+import LineProvider from "next-auth/providers/line"
+import LinkedInProvider from "next-auth/providers/linkedin"
+import MailchimpProvider from "next-auth/providers/mailchimp"
+import DiscordProvider from "next-auth/providers/discord"
 
 export default NextAuth({
-  // Used to debug https://github.com/nextauthjs/next-auth/issues/1664
-  // cookies: {
-  //   csrfToken: {
-  //     name: 'next-auth.csrf-token',
-  //     options: {
-  //       httpOnly: true,
-  //       sameSite: 'none',
-  //       path: '/',
-  //       secure: true
-  //     }
-  //   },
-  //   pkceCodeVerifier: {
-  //     name: 'next-auth.pkce.code_verifier',
-  //     options: {
-  //       httpOnly: true,
-  //       sameSite: 'none',
-  //       path: '/',
-  //       secure: true
-  //     }
-  //   }
-  // },
   providers: [
+    // E-mail
     EmailProvider({
       server: process.env.EMAIL_SERVER,
       from: process.env.EMAIL_FROM,
     }),
-    GitHubProvider({
-      clientId: process.env.GITHUB_ID,
-      clientSecret: process.env.GITHUB_SECRET,
-    }),
-    Auth0Provider({
-      clientId: process.env.AUTH0_ID,
-      clientSecret: process.env.AUTH0_SECRET,
-      domain: process.env.AUTH0_DOMAIN,
-      checks: ["pkce", "state"],
-      // params: {
-      //   response_mode: "form_post",
-      // },
-    }),
-    TwitterProvider({
-      clientId: process.env.TWITTER_ID,
-      clientSecret: process.env.TWITTER_SECRET,
-    }),
+    // Credentials
     CredentialsProvider({
       name: "Credentials",
       credentials: {
@@ -66,6 +42,70 @@ export default NextAuth({
         return null
       },
     }),
+    // OAuth 1
+    TwitterProvider({
+      clientId: process.env.TWITTER_ID,
+      clientSecret: process.env.TWITTER_SECRET,
+    }),
+    // OAuth 2 / OIDC
+    GitHubProvider({
+      clientId: process.env.GITHUB_ID,
+      clientSecret: process.env.GITHUB_SECRET,
+    }),
+    Auth0Provider({
+      clientId: process.env.AUTH0_ID,
+      clientSecret: process.env.AUTH0_SECRET,
+      issuer: process.env.AUTH0_ISSUER,
+    }),
+    Twitch({
+      clientId: process.env.TWITCH_ID,
+      clientSecret: process.env.TWITCH_SECRET,
+    }),
+    GoogleProvider({
+      clientId: process.env.GOOGLE_ID,
+      clientSecret: process.env.GOOGLE_SECRET,
+    }),
+    FacebookProvider({
+      clientId: process.env.FACEBOOK_ID,
+      clientSecret: process.env.FACEBOOK_SECRET,
+    }),
+    FoursquareProvider({
+      clientId: process.env.FOURSQUARE_ID,
+      clientSecret: process.env.FOURSQUARE_SECRET,
+    }),
+    // FreshbooksProvider({
+    //   clientId: process.env.FRESHBOOKS_ID,
+    //   clientSecret: process.env.FRESHBOOKS_SECRET,
+    // }),
+    GitlabProvider({
+      clientId: process.env.GITLAB_ID,
+      clientSecret: process.env.GITLAB_SECRET,
+    }),
+    InstagramProvider({
+      clientId: process.env.INSTAGRAM_ID,
+      clientSecret: process.env.INSTAGRAM_SECRET,
+    }),
+    LineProvider({
+      clientId: process.env.LINE_ID,
+      clientSecret: process.env.LINE_SECRET,
+    }),
+    LinkedInProvider({
+      clientId: process.env.LINKEDIN_ID,
+      clientSecret: process.env.LINKEDIN_SECRET,
+    }),
+    MailchimpProvider({
+      clientId: process.env.MAILCHIMP_ID,
+      clientSecret: process.env.MAILCHIMP_SECRET,
+    }),
+    IDS4Provider({
+      clientId: process.env.IDS4_ID,
+      clientSecret: process.env.IDS4_SECRET,
+      issuer: process.env.IDS4_ISSUER,
+    }),
+    DiscordProvider({
+      clientId: process.env.DISCORD_ID,
+      clientSecret: process.env.DISCORD_SECRET,
+    }),
   ],
   jwt: {
     encryption: true,

src/lib/merge.js

@@ -0,0 +1,33 @@
+// Source: https://stackoverflow.com/a/34749873/5364135
+
+/**
+ * Simple object check.
+ * @param item
+ * @returns {boolean}
+ */
+function isObject(item) {
+  return item && typeof item === "object" && !Array.isArray(item)
+}
+
+/**
+ * Deep merge two objects.
+ * @param target
+ * @param ...sources
+ */
+export function merge(target, ...sources) {
+  if (!sources.length) return target
+  const source = sources.shift()
+
+  if (isObject(target) && isObject(source)) {
+    for (const key in source) {
+      if (isObject(source[key])) {
+        if (!target[key]) Object.assign(target, { [key]: {} })
+        merge(target[key], source[key])
+      } else {
+        Object.assign(target, { [key]: source[key] })
+      }
+    }
+  }
+
+  return merge(target, ...sources)
+}

src/providers/42.js

@@ -1,20 +1,19 @@
 export default function FortyTwo(options) {
   return {
-    id: '42-school',
-    name: '42 School',
-    type: 'oauth',
-    version: '2.0',
-    params: { grant_type: 'authorization_code' },
-    accessTokenUrl: 'https://api.intra.42.fr/oauth/token',
-    authorizationUrl:
-      'https://api.intra.42.fr/oauth/authorize?response_type=code',
-    profileUrl: 'https://api.intra.42.fr/v2/me',
-    profile: (profile) => ({
-      id: profile.id,
-      email: profile.email,
-      image: profile.image_url,
-      name: profile.usual_full_name,
-    }),
-    ...options,
+    id: "42-school",
+    name: "42 School",
+    type: "oauth",
+    authorization: "https://api.intra.42.fr/oauth/authorize",
+    token: "https://api.intra.42.fr/oauth/token",
+    userinfo: "https://api.intra.42.fr/v2/me",
+    profile(profile) {
+      return {
+        id: profile.id,
+        name: profile.usual_full_name,
+        email: profile.email,
+        image: profile.image_url,
+      }
+    },
+    options,
   }
 }

src/providers/apple.js

@@ -3,32 +3,34 @@ export default function Apple(options) {
     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,
+    authorization: {
+      url: "https://appleid.apple.com/auth/authorize",
+      params: {
+        scope: "name email",
+        response_type: "code",
+        id_token: "",
+        response_mode: "form_post",
+      },
+    },
+    token: {
+      url: "https://appleid.apple.com/auth/token",
+      idToken: true,
+    },
+    jwks_endpoint: "https://appleid.apple.com/auth/keys",
     profile(profile) {
-      // The name of the user will only return on first login
+      // The name of the user will only be returned on first login
+      const name = profile.user
+        ? profile.user.name.firstName + " " + profile.user.name.lastName
+        : null
+
       return {
         id: profile.sub,
-        name:
-          profile.user != null
-            ? profile.user.name.firstName + " " + profile.user.name.lastName
-            : null,
+        name,
         email: profile.email,
+        image: null,
       }
     },
-    clientId: null,
-    clientSecret: {
-      teamId: null,
-      privateKey: null,
-      keyId: null,
-    },
     checks: ["none"], // REVIEW: Apple does not support state, as far as I know. Can we use "pkce" then?
-    ...options,
+    options,
   }
 }

src/providers/atlassian.js

@@ -3,14 +3,15 @@ export default function Atlassian(options) {
     id: "atlassian",
     name: "Atlassian",
     type: "oauth",
-    version: "2.0",
-    params: {
-      grant_type: "authorization_code",
+    authorization: {
+      url: "https://auth.atlassian.com/oauth/authorize",
+      params: {
+        audience: "api.atlassian.com",
+        prompt: "consent",
+      },
     },
-    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",
+    token: "https://auth.atlassian.com/oauth/token",
+    userinfo: "https://api.atlassian.com/me",
     profile(profile) {
       return {
         id: profile.account_id,
@@ -19,6 +20,6 @@ export default function Atlassian(options) {
         image: profile.picture,
       }
     },
-    ...options,
+    options,
   }
 }

src/providers/auth0.js

@@ -1,14 +1,13 @@
+/** @type {import("types/providers").OAuthProvider} */
 export default function Auth0(options) {
   return {
     id: "auth0",
     name: "Auth0",
+    wellKnown: `${options.issuer}/.well-known/openid-configuration`,
     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`,
+    authorization: { params: { scope: "openid email profile" } },
+    checks: ["pkce", "state"],
+    idToken: true,
     profile(profile) {
       return {
         id: profile.sub,
@@ -17,6 +16,6 @@ export default function Auth0(options) {
         image: profile.picture,
       }
     },
-    ...options,
+    options,
   }
 }

src/providers/azure-ad-b2c.js

@@ -1,23 +1,24 @@
 export default function AzureADB2C(options) {
   const { tenantName, primaryUserFlow } = options
-  const authorizeUrl = `https://${tenantName}.b2clogin.com/${tenantName}.onmicrosoft.com/${primaryUserFlow}/oauth2/v2.0/authorize`
-  const tokenUrl = `https://${tenantName}.b2clogin.com/${tenantName}.onmicrosoft.com/${primaryUserFlow}/oauth2/v2.0/token`
 
   return {
     id: "azure-ad-b2c",
     name: "Azure Active Directory B2C",
     type: "oauth",
-    version: "2.0",
-    params: {
-      grant_type: "authorization_code",
+    authorization: {
+      url: `https://${tenantName}.b2clogin.com/${tenantName}.onmicrosoft.com/${primaryUserFlow}/oauth2/v2.0/authorize`,
+      params: {
+        response_type: "code id_token",
+        response_mode: "query",
+      },
     },
-    accessTokenUrl: tokenUrl,
-    requestTokenUrl: tokenUrl,
-    authorizationUrl: `${authorizeUrl}?response_type=code+id_token&response_mode=query`,
-    profileUrl: 'https://graph.microsoft.com/oidc/userinfo',
-    idToken: true,
-    profile: (profile) => {
-      let name = ''
+    token: {
+      url: `https://${tenantName}.b2clogin.com/${tenantName}.onmicrosoft.com/${primaryUserFlow}/oauth2/v2.0/token`,
+      idToken: true,
+    },
+    jwks_uri: `https://${tenantName}.b2clogin.com/${tenantName}.onmicrosoft.com/${primaryUserFlow}}/discovery/v2.0/keys`,
+    profile(profile) {
+      let name = ""
 
       if (profile.name) {
         // B2C "Display Name"
@@ -31,11 +32,12 @@ export default function AzureADB2C(options) {
       }
 
       return {
-        name,
         id: profile.oid,
-        email: profile.emails[0]
+        name,
+        email: profile.emails[0],
+        image: null,
       }
     },
-    ...options,
+    options,
   }
 }