🔒 Dynamic OAuth Providers - Only load OAuth providers into NextAuth.js if their required client ID / secrete keys are present as environment variables

[...nextauth].ts

// pages/api/auth/[...nextauth].ts

import NextAuth from 'next-auth';
import TwitterProvider from 'next-auth/providers/twitter';

import type { OAuthConfig, OAuthUserConfig, Provider } from 'next-auth/providers';

/**
 * Supported Provider Type
 * 
 * @description An enum of all possible NextAuth.js providers that you or your project supports
 */
export enum SupportedProviderType {
	/**
	 * Twitter Provider
	 * @see https://next-auth.js.org/providers/twitter
	 */
	TWITTER = 'twitter',
}

export type SupportedProvider<T = any> = {
	/**
	 * Name
	 * 
	 * @description Name of the provider used to search for provider client id/secret environment variables
	 */
	name: SupportedProviderType;

	/**
	 * Arguments
	 * 
	 * @description Any additional, optional, arguments to pass to the constructor function
	 */
	args?: Partial<OAuthConfig<T>>;
} & (
	| {
		/**
		 * Client Provider generator function
		 */
		constructor: (args: Partial<OAuthConfig<T>>) => OAuthConfig<T>;
	  }
	| {
		/**
		 * Client Provider generator function
		 */
		constructor: (
			args: OAuthUserConfig<Record<string, T>>,
		) => OAuthConfig<Record<string, T>>;
	  }
);

const supportedProviders: Array<SupportedProvider> = [
	{
		name: SupportedProviderType.TWITTER,
		constructor: TwitterProvider,
	},
];

export default NextAuth({
	// ...
	providers: [
		...(supportedProviders
			.map(({ args = {}, name, constructor: fn }) => {
				const clientIdKey = `${name.toUpperCase()}_CLIENT_ID`;
				const clientSecretKey = `${name.toUpperCase()}_CLIENT_SECRET`;

				if (!process.env[clientIdKey] || !process.env[clientSecretKey]) return null;

				return fn({
					clientId: process.env[clientIdKey]!,
					clientSecret: process.env[clientSecretKey]!,
					...args,
				});
			})
			.filter((provider) => provider) as Array<Provider>),
	],
});