[core] Add more OAuth providers to SignInPage

codecov.yml

@@ -1,4 +1,6 @@
 coverage:
+  ignore:
+    - '*/icons/*'
   status:
     project:
       default:

docs/data/toolpad/core/components/sign-in-page/OAuthSignInPage.js

@@ -6,6 +6,8 @@ const providers = [
   { id: 'github', name: 'GitHub' },
   { id: 'google', name: 'Google' },
   { id: 'facebook', name: 'Facebook' },
+  { id: 'twitter', name: 'Twitter' },
+  { id: 'linkedin', name: 'LinkedIn' },
 ];
 
 // preview-end

docs/data/toolpad/core/components/sign-in-page/OAuthSignInPage.tsx

@@ -6,6 +6,8 @@ const providers = [
   { id: 'github', name: 'GitHub' },
   { id: 'google', name: 'Google' },
   { id: 'facebook', name: 'Facebook' },
+  { id: 'twitter', name: 'Twitter' },
+  { id: 'linkedin', name: 'LinkedIn' },
 ];
 // preview-end
 

docs/data/toolpad/core/components/sign-in-page/OAuthSignInPage.tsx.preview

@@ -2,6 +2,8 @@ const providers = [
   { id: 'github', name: 'GitHub' },
   { id: 'google', name: 'Google' },
   { id: 'facebook', name: 'Facebook' },
+  { id: 'twitter', name: 'Twitter' },
+  { id: 'linkedin', name: 'LinkedIn' },
 ];
 
 // ...

docs/data/toolpad/core/components/sign-in-page/sign-in-page.md

@@ -14,7 +14,14 @@ The `SignInPage` component is a quick way to generate a ready-to-use authenticat
 
 The `SignInPage` component can be set up with an OAuth provider by passing in a list of providers in the `providers` prop, along with a `signIn` function that accepts the `provider` as a parameter.
 
-{{"demo": "OAuthSignInPage.js", "iframe": true}}
+{{"demo": "OAuthSignInPage.js", "iframe": true, "height": 500}}
+
+:::info
+
+Find the list of supported providers in the [API reference](/toolpad/core/api/sign-in-page/#sign-in-page-prop-providers).
+
+Find details on how to set up each provider in the [Auth.js documentation](https://authjs.dev/getting-started/authentication/oauth/).
+:::
 
 ## Credentials
 

docs/pages/toolpad/core/api/sign-in-page.json

@@ -1,7 +1,10 @@
 {
   "props": {
     "providers": {
-      "type": { "name": "arrayOf", "description": "Array<{ id: string, name: string }>" },
+      "type": {
+        "name": "arrayOf",
+        "description": "Array&lt;{ id: 'apple'<br>&#124;&nbsp;'auth0'<br>&#124;&nbsp;'cognito'<br>&#124;&nbsp;'credentials'<br>&#124;&nbsp;'discord'<br>&#124;&nbsp;'facebook'<br>&#124;&nbsp;'fusionauth'<br>&#124;&nbsp;'github'<br>&#124;&nbsp;'gitlab'<br>&#124;&nbsp;'google'<br>&#124;&nbsp;'instagram'<br>&#124;&nbsp;'keycloak'<br>&#124;&nbsp;'line'<br>&#124;&nbsp;'linkedin'<br>&#124;&nbsp;'microsoft-entra-id'<br>&#124;&nbsp;'okta'<br>&#124;&nbsp;'slack'<br>&#124;&nbsp;'spotify'<br>&#124;&nbsp;'tiktok'<br>&#124;&nbsp;'twitch'<br>&#124;&nbsp;'twitter', name: string }&gt;"
+      },
       "default": "[]"
     },
     "signIn": {

packages/create-toolpad-app/package.json

@@ -32,6 +32,7 @@
   "dependencies": {
     "@inquirer/prompts": "^5.3.8",
     "@toolpad/utils": "workspace:*",
+    "@toolpad/core": "workspace:*",
     "chalk": "5.3.0",
     "execa": "9.3.1",
     "invariant": "2.2.4",

packages/create-toolpad-app/src/generateProject.ts

@@ -1,3 +1,5 @@
+import type { SupportedAuthProvider } from '@toolpad/core';
+
 // Common files for all apps
 import theme from './templates/theme';
 import eslintConfig from './templates/eslintConfig';
@@ -40,7 +42,7 @@ import packageJsonAuthPages from './templates/auth/nextjs-pages/packageJson';
 import appAuthPages from './templates/auth/nextjs-pages/app';
 import signInPagePagesRouter from './templates/auth/nextjs-pages/signIn';
 
-import { SupportedAuthProvider, SupportedRouter } from './types';
+import { SupportedRouter } from './types';
 
 export interface GenerateProjectOptions {
   name: string;

packages/create-toolpad-app/src/index.ts

@@ -12,12 +12,13 @@ import { satisfies } from 'semver';
 import { readJsonFile } from '@toolpad/utils/fs';
 import invariant from 'invariant';
 import { bashResolvePath } from '@toolpad/utils/cli';
+import type { SupportedAuthProvider } from '@toolpad/core';
 import generateProject, { GenerateProjectOptions } from './generateProject';
 import generateStudioProject from './generateStudioProject';
 import writeFiles from './writeFiles';
 import { downloadAndExtractExample } from './examples';
 import type { PackageJson } from './templates/packageType';
-import type { SupportedRouter, SupportedAuthProvider, PackageManager } from './types';
+import type { SupportedRouter, PackageManager } from './types';
 
 /**
  * Find package.json of the create-toolpad-app package
@@ -297,6 +298,24 @@ const run = async () => {
         choices: [
           { name: 'Google', value: 'google' },
           { name: 'GitHub', value: 'github' },
+          { name: 'GitLab', value: 'gitlab' },
+          { name: 'Twitter', value: 'twitter' },
+          { name: 'Facebook', value: 'facebook' },
+          { name: 'Cognito', value: 'cognito' },
+          { name: 'Microsoft Entra ID', value: 'microsoft-entra-id' },
+          { name: 'Apple', value: 'apple' },
+          { name: 'Instagram', value: 'instagram' },
+          { name: 'TikTok', value: 'tiktok' },
+          { name: 'LinkedIn', value: 'linkedin' },
+          { name: 'Slack', value: 'slack' },
+          { name: 'Spotify', value: 'spotify' },
+          { name: 'Twitch', value: 'twitch' },
+          { name: 'Discord', value: 'discord' },
+          { name: 'Line', value: 'line' },
+          { name: 'Auth0', value: 'auth0' },
+          { name: 'Keycloak', value: 'keycloak' },
+          { name: 'Okta', value: 'okta' },
+          { name: 'FusionAuth', value: 'fusionauth' },
         ],
       });
     }

packages/create-toolpad-app/src/templates/auth/auth.ts

@@ -1,5 +1,7 @@
-import { kebabToConstant } from '@toolpad/utils/strings';
-import { ProvidersTemplate, SupportedAuthProvider } from '../../types';
+import type { SupportedAuthProvider } from '@toolpad/core';
+import { kebabToConstant, kebabToPascal } from '@toolpad/utils/strings';
+import { ProvidersTemplate } from '../../types';
+import { requiresIssuer, requiresTenantId } from './utils';
 
 const CredentialsProviderTemplate = `Credentials({
   credentials: {
@@ -18,15 +20,16 @@ const CredentialsProviderTemplate = `Credentials({
   },
 }),`;
 
-const oAuthProviderTemplate = (provider: SupportedAuthProvider) => `${provider}({
-  clientId: process.env.${kebabToConstant(provider)}_CLIENT_ID,
-  clientSecret: process.env.${kebabToConstant(provider)}_CLIENT_SECRET,
+const oAuthProviderTemplate = (provider: SupportedAuthProvider) => `${kebabToPascal(provider)}({
+clientId: process.env.${kebabToConstant(provider)}_CLIENT_ID,
+clientSecret: process.env.${kebabToConstant(provider)}_CLIENT_SECRET,
+${requiresIssuer(provider) ? `issuer: process.env.${kebabToConstant(provider)}_ISSUER,\n` : ''}${requiresTenantId(provider) ? `tenantId: process.env.${kebabToConstant(provider)}_TENANT_ID,` : ''}
 }),`;
 
 const auth: ProvidersTemplate = (providers) => {
   return `import NextAuth from 'next-auth';
   ${providers
-    .map((provider) => `import ${provider} from 'next-auth/providers/${provider.toLowerCase()}';`)
+    .map((provider) => `import ${kebabToPascal(provider)} from 'next-auth/providers/${provider}';`)
     .join('\n')}
 import type { Provider } from 'next-auth/providers';
 

packages/create-toolpad-app/src/templates/auth/envLocal.ts

@@ -1,20 +1,23 @@
 import { kebabToConstant } from '@toolpad/utils/strings';
 import { ProvidersTemplate } from '../../types';
+import { requiresIssuer, requiresTenantId } from './utils';
 
 const env: ProvidersTemplate = (providers) => {
-  const oAuthProviders = providers.filter((provider) => provider !== 'credentials');
+  const nonCredentialProviders = providers.filter((provider) => provider !== 'credentials');
+
   return `
 # Generate a secret with \`npx auth secret\`
 # and replace the value below with it
 AUTH_SECRET=secret
 
-# Add the CLIENT_ID and CLIENT_SECRET from your OAuth provider
-# to the .env.local file
-${oAuthProviders
+# Add secrets for your auth providers to the .env.local file
+
+${nonCredentialProviders
   .map(
     (provider) => `
 ${kebabToConstant(provider)}_CLIENT_ID=
-${kebabToConstant(provider)}_CLIENT_SECRET=`,
+${kebabToConstant(provider)}_CLIENT_SECRET=
+${requiresIssuer(provider) ? `${kebabToConstant(provider)}_ISSUER=\n` : ''}${requiresTenantId(provider) ? `${kebabToConstant(provider)}_TENANT_ID=\n` : ''}`,
   )
   .join('\n')}    
 `;

packages/create-toolpad-app/src/templates/auth/utils.ts

@@ -0,0 +1,14 @@
+import type { SupportedAuthProvider } from '@toolpad/core';
+
+export function requiresIssuer(provider: SupportedAuthProvider) {
+  return (
+    provider === 'cognito' ||
+    provider === 'fusionauth' ||
+    provider === 'keycloak' ||
+    provider === 'okta'
+  );
+}
+
+export function requiresTenantId(provider: SupportedAuthProvider) {
+  return provider === 'microsoft-entra-id' || provider === 'fusionauth';
+}

packages/create-toolpad-app/src/types.ts

@@ -1,10 +1,6 @@
-import { PackageJson } from './templates/packageType';
-
-// https://authjs.dev/reference/core/providers#oauthconfigprofile
-type SupportedOAuthProvider = 'facebook' | 'github' | 'google';
+import type { SupportedAuthProvider } from '@toolpad/core/SignInPage';
 
-// https://authjs.dev/reference/core/providers#providertype
-export type SupportedAuthProvider = SupportedOAuthProvider | 'credentials';
+import { PackageJson } from './templates/packageType';
 
 export type SupportedRouter = 'nextjs-app' | 'nextjs-pages';
 export type PackageManager = 'npm' | 'pnpm' | 'yarn';

packages/toolpad-core/src/SignInPage/SignInPage.tsx

@@ -15,38 +15,76 @@ import LoadingButton, { LoadingButtonProps } from '@mui/lab/LoadingButton';
 import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import PasswordIcon from '@mui/icons-material/Password';
-import FacebookIcon from '@mui/icons-material/Facebook';
+import AppleIcon from '@mui/icons-material/Apple';
 import Stack from '@mui/material/Stack';
 import { LinkProps } from '@mui/material/Link';
+import GoogleIcon from './icons/Google';
+import FacebookIcon from './icons/Facebook';
+import TwitterIcon from './icons/Twitter';
+import InstagramIcon from './icons/Instagram';
+import TikTokIcon from './icons/TikTok';
+import LinkedInIcon from './icons/LinkedIn';
+import SlackIcon from './icons/Slack';
+import SpotifyIcon from './icons/Spotify';
+import TwitchIcon from './icons/Twitch';
+import DiscordIcon from './icons/Discord';
+import LineIcon from './icons/Line';
+import Auth0Icon from './icons/Auth0';
+import MicrosoftEntraIdIcon from './icons/MicrosoftEntra';
+import CognitoIcon from './icons/Cognito';
+import GitLabIcon from './icons/GitLab';
+import KeycloakIcon from './icons/Keycloak';
+import OktaIcon from './icons/Okta';
+import FusionAuthIcon from './icons/FusionAuth';
 import { BrandingContext, DocsContext, RouterContext } from '../shared/context';
 
-const IconProviderMap = new Map<string, React.ReactNode>([
+type SupportedOAuthProvider =
+  | 'github'
+  | 'google'
+  | 'facebook'
+  | 'gitlab'
+  | 'twitter'
+  | 'apple'
+  | 'instagram'
+  | 'tiktok'
+  | 'linkedin'
+  | 'slack'
+  | 'spotify'
+  | 'twitch'
+  | 'discord'
+  | 'line'
+  | 'auth0'
+  | 'cognito'
+  | 'keycloak'
+  | 'okta'
+  | 'fusionauth'
+  | 'microsoft-entra-id';
+
+// https://authjs.dev/reference/core/providers#providertype
+export type SupportedAuthProvider = SupportedOAuthProvider | 'credentials';
+
+const IconProviderMap = new Map<SupportedAuthProvider, React.ReactNode>([
   ['github', <GitHubIcon key="github" />],
   ['credentials', <PasswordIcon key="credentials" />],
-  [
-    'google',
-    // colored google icon
-    <svg key="google" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
-      <path
-        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-        fill="#4285F4"
-      />
-      <path
-        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-        fill="#34A853"
-      />
-      <path
-        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-        fill="#FBBC05"
-      />
-      <path
-        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-        fill="#EA4335"
-      />
-      <path d="M1 1h22v22H1z" fill="none" />
-    </svg>,
-  ],
+  ['google', <GoogleIcon key="google" />],
   ['facebook', <FacebookIcon key="facebook" />],
+  ['twitter', <TwitterIcon key="twitter" />],
+  ['apple', <AppleIcon key="apple" />],
+  ['instagram', <InstagramIcon key="instagram" />],
+  ['tiktok', <TikTokIcon key="tiktok" />],
+  ['linkedin', <LinkedInIcon key="linkedin" />],
+  ['slack', <SlackIcon key="slack" />],
+  ['spotify', <SpotifyIcon key="spotify" />],
+  ['twitch', <TwitchIcon key="twitch" />],
+  ['discord', <DiscordIcon key="discord" />],
+  ['line', <LineIcon key="line" />],
+  ['auth0', <Auth0Icon key="auth0" />],
+  ['microsoft-entra-id', <MicrosoftEntraIdIcon key="microsoft-entra-id" />],
+  ['cognito', <CognitoIcon key="cognito" />],
+  ['gitlab', <GitLabIcon key="gitlab" />],
+  ['keycloak', <KeycloakIcon key="keycloak" />],
+  ['okta', <OktaIcon key="okta" />],
+  ['fusionauth', <FusionAuthIcon key="fusionauth" />],
 ]);
 
 export interface AuthProvider {
@@ -56,7 +94,7 @@ export interface AuthProvider {
    * @example 'google'
    * @example 'github'
    */
-  id: string;
+  id: SupportedAuthProvider;
   /**
    * The name of the authentication provider.
    * @default ''
@@ -165,10 +203,10 @@ function SignInPage(props: SignInPageProps) {
   const credentialsProvider = providers?.find((provider) => provider.id === 'credentials');
   const [{ loading, providerId, error }, setFormStatus] = React.useState<{
     loading: boolean;
-    providerId: string;
+    providerId?: SupportedAuthProvider;
     error?: string;
   }>({
-    providerId: '',
+    providerId: undefined,
     loading: false,
     error: '',
   });
@@ -388,7 +426,29 @@ SignInPage.propTypes /* remove-proptypes */ = {
    */
   providers: PropTypes.arrayOf(
     PropTypes.shape({
-      id: PropTypes.string.isRequired,
+      id: PropTypes.oneOf([
+        'apple',
+        'auth0',
+        'cognito',
+        'credentials',
+        'discord',
+        'facebook',
+        'fusionauth',
+        'github',
+        'gitlab',
+        'google',
+        'instagram',
+        'keycloak',
+        'line',
+        'linkedin',
+        'microsoft-entra-id',
+        'okta',
+        'slack',
+        'spotify',
+        'tiktok',
+        'twitch',
+        'twitter',
+      ]).isRequired,
       name: PropTypes.string.isRequired,
     }),
   ),

packages/toolpad-core/src/SignInPage/icons/Auth0.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+/**
+ * @ignore - internal component.
+ */
+function Auth0Icon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 64 64">
+      <path
+        d="M49.012 51.774L42.514 32l17.008-12.22h-21.02L32.005 0h21.032l6.506 19.78c3.767 11.468-.118 24.52-10.53 31.993zm-34.023 0L31.998 64l17.015-12.226-17.008-12.22zm-10.516-32c-3.976 12.1.64 24.917 10.5 32.007v-.007L21.482 32 4.474 19.774l21.025.007L31.998 0H10.972z"
+        fill="#eb5424"
+      />
+    </svg>
+  );
+}
+
+export default Auth0Icon;