[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,36 @@ 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
+
+The following providers are supported and maintained by default:
+
+- Google
+- GitHub
+- Facebook
+- Microsoft (Entra ID)
+- Apple
+- Auth0
+- AWS Cognito
+- GitLab
+- Instagram
+- LINE
+- Okta
+- FusionAuth
+- Twitter
+- TikTok
+- LinkedIn
+- Slack
+- Spotify
+- Twitch
+- Discord
+- Keycloak
+- Credentials (username/password)
+
+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": {

examples/core-auth-nextjs-pages-nextauth-4/src/pages/_app.tsx

@@ -38,7 +38,7 @@ const NAVIGATION: Navigation = [
 ];
 
 const BRANDING = {
- title: 'My Toolpad Core App',
+ title: 'My Toolpad Core Next.js Pages next-auth 4 App',
 };
 
 const AUTHENTICATION = {

examples/core-auth-nextjs-pages/src/pages/_app.tsx

@@ -38,7 +38,7 @@ const NAVIGATION: Navigation = [
 ];
 
 const BRANDING = {
- title: 'My Toolpad Core App',
+ title: 'My Toolpad Core Next.js Pages App',
 };
 
 const AUTHENTICATION = {

examples/core-auth-nextjs/src/app/layout.tsx

@@ -24,7 +24,7 @@ const NAVIGATION: Navigation = [
 ];
 
 const BRANDING = {
- title: 'My Toolpad Core App',
+ title: 'My Toolpad Core Next.js App',
 };
 
 const AUTHENTICATION = {

packages/create-toolpad-app/package.json

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

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

@@ -12,17 +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 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,
- GenerateProjectOptions,
-} from './types';
+import type { SupportedRouter, PackageManager, GenerateProjectOptions } from './types';
 
 /**
  * Find package.json of the create-toolpad-app package
@@ -308,6 +304,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, capitalize } from '@toolpad/utils/strings';
-import { Template, SupportedAuthProvider } from '../../types';
+import type { SupportedAuthProvider } from '@toolpad/core';
+import { kebabToConstant, kebabToPascal } from '@toolpad/utils/strings';
+import { requiresIssuer, requiresTenantId } from './utils';
+import { Template } from '../../types';
 
 const CredentialsProviderTemplate = `Credentials({
  credentials: {
@@ -18,6 +20,12 @@ const CredentialsProviderTemplate = `Credentials({
  },
 }),`;
 
+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 checkEnvironmentVariables = (providers: SupportedAuthProvider[] | undefined) => `
 
 const missingVars: string[] = [];
@@ -47,20 +55,14 @@ if (missingVars.length > 0) {
  }
 }`;
 
-const oAuthProviderTemplate = (provider: SupportedAuthProvider) => `
-${capitalize(provider)}({
- clientId: process.env.${kebabToConstant(provider)}_CLIENT_ID,
- clientSecret: process.env.${kebabToConstant(provider)}_CLIENT_SECRET,
-}),`;
-
 const auth: Template = (options) => {
  const providers = options.authProviders;
 
  return `import NextAuth from 'next-auth';
  ${providers
  ?.map(
  (provider) =>
- `import ${capitalize(provider)} from 'next-auth/providers/${provider.toLowerCase()}';`,
+ `import ${kebabToPascal(provider)} from 'next-auth/providers/${provider.toLowerCase()}';`,
  )
  .join('\n')}
 import type { Provider } from 'next-auth/providers';

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

@@ -1,21 +1,23 @@
 import { kebabToConstant } from '@toolpad/utils/strings';
+import { requiresIssuer, requiresTenantId } from './utils';
 import { Template } from '../../types';
 
 const env: Template = (options) => {
  const { authProviders: providers } = options;
- 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';
 
-// 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/package.json

@@ -48,7 +48,7 @@
  "build:types": "tsc -b tsconfig.build.json",
  "predev": "pnpm clean",
  "dev": "concurrently \"pnpm build:stable --watch\" \"pnpm build:types --watch --preserveWatchOutput\"",
- "check-types": "tsc --noEmit",
+ "check-types": "pnpm build:types && tsc --noEmit",
  "test": "vitest run --coverage",
  "test:dev": "vitest",
  "test:browser": "vitest run --browser.enabled",