[core] Support magic links in SignInPage

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { AppProvider, SignInPage } from '@toolpad/core';
+import { useTheme } from '@mui/material/styles';
+
+const providers = [{ id: 'nodemailer', name: 'Email' }];
+
+const signIn = async (provider) => {
+  const promise = new Promise((resolve) => {
+    setTimeout(() => {
+      console.log(`Sign in with ${provider.id}`);
+      // preview-start
+      resolve({
+        success: 'Check your email for a verification link.',
+      });
+      // preview-end
+    }, 500);
+  });
+  return promise;
+};
+
+export default function MagicLinkAlertSignInPage() {
+  const theme = useTheme();
+  return (
+    // preview-start
+    <AppProvider theme={theme}>
+      <SignInPage signIn={signIn} providers={providers} />
+    </AppProvider>
+    // preview-end
+  );
+}

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

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import {
+  AuthProvider,
+  AppProvider,
+  SignInPage,
+  AuthResponse,
+  SupportedAuthProvider,
+} from '@toolpad/core';
+import { useTheme } from '@mui/material/styles';
+
+const providers: { id: SupportedAuthProvider; name: string }[] = [
+  { id: 'nodemailer', name: 'Email' },
+];
+
+const signIn: (provider: AuthProvider) => Promise<AuthResponse> = async (
+  provider,
+) => {
+  const promise = new Promise<AuthResponse>((resolve) => {
+    setTimeout(() => {
+      console.log(`Sign in with ${provider.id}`);
+      // preview-start
+      resolve({
+        success: 'Check your email for a verification link.',
+      });
+      // preview-end
+    }, 500);
+  });
+  return promise;
+};
+
+export default function MagicLinkAlertSignInPage() {
+  const theme = useTheme();
+  return (
+    // preview-start
+    <AppProvider theme={theme}>
+      <SignInPage signIn={signIn} providers={providers} />
+    </AppProvider>
+    // preview-end
+  );
+}

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

@@ -0,0 +1,9 @@
+resolve({
+  success: 'Check your email for a verification link.',
+});
+
+// ...
+
+<AppProvider theme={theme}>
+  <SignInPage signIn={signIn} providers={providers} />
+</AppProvider>

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { AppProvider, SignInPage } from '@toolpad/core';
+import { useTheme } from '@mui/material/styles';
+
+// preview-start
+const providers = [{ id: 'nodemailer', name: 'Email' }];
+
+// preview-end
+
+const signIn = async (provider) => {
+  const promise = new Promise((resolve) => {
+    setTimeout(() => {
+      console.log(`Sign in with ${provider.id}`);
+      resolve();
+    }, 500);
+  });
+  return promise;
+};
+
+export default function MagicLinkSignInPage() {
+  const theme = useTheme();
+  return (
+    // preview-start
+    <AppProvider theme={theme}>
+      <SignInPage signIn={signIn} providers={providers} />
+    </AppProvider>
+    // preview-end
+  );
+}

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import {
+  AuthProvider,
+  AppProvider,
+  SignInPage,
+  SupportedAuthProvider,
+} from '@toolpad/core';
+import { useTheme } from '@mui/material/styles';
+
+// preview-start
+const providers: { id: SupportedAuthProvider; name: string }[] = [
+  { id: 'nodemailer', name: 'Email' },
+];
+// preview-end
+
+const signIn: (provider: AuthProvider) => void = async (provider) => {
+  const promise = new Promise<void>((resolve) => {
+    setTimeout(() => {
+      console.log(`Sign in with ${provider.id}`);
+      resolve();
+    }, 500);
+  });
+  return promise;
+};
+
+export default function MagicLinkSignInPage() {
+  const theme = useTheme();
+  return (
+    // preview-start
+    <AppProvider theme={theme}>
+      <SignInPage signIn={signIn} providers={providers} />
+    </AppProvider>
+    // preview-end
+  );
+}

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

@@ -0,0 +1,9 @@
+const providers: { id: SupportedAuthProvider; name: string }[] = [
+  { id: 'nodemailer', name: 'Email' },
+];
+
+// ...
+
+<AppProvider theme={theme}>
+  <SignInPage signIn={signIn} providers={providers} />
+</AppProvider>

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { AppProvider, SignInPage } from '@toolpad/core';
 import { useTheme } from '@mui/material/styles';
+
 // preview-start
 const providers = [
   { id: 'github', name: 'GitHub' },

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { AuthProvider, AppProvider, SignInPage } from '@toolpad/core';
 import { useTheme } from '@mui/material/styles';
+
 // preview-start
 const providers = [
   { id: 'github', name: 'GitHub' },

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

@@ -22,7 +22,7 @@
 
 :::info
 
-The following providers are supported and maintained by default:
+The following OAuth providers are supported and maintained by default:
 
 - Google
 - GitHub
@@ -44,15 +44,86 @@
 - 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).
 :::
 
+## Magic Link
+
+You can use the `SignInPage` component to quickly set up authentication via one-time verification links. It uses Nodemailer under the hood to send the verification link to the user's email address. See more details in the [Auth.js docs](https://authjs.dev/getting-started/providers/nodemailer/) on configuration and customization.
+
+To render a magic link form, pass in a provider with `nodemailer` as the `id` property.
+
+{{"demo": "MagicLinkSignInPage.js", "iframe": true, "height": 500}}
+
+### Alerts
+
+The `SignInPage` component can display a success alert if the email is sent successfully. You can enable this by passing a `success` property in the
+response object of the `signIn` prop.
+
+{{"demo": "MagicLinkAlertSignInPage.js", "iframe": true, "height": 500}}
+
+To get the magic link working, you need to add the following code to your custom sign-in page:
+
+```tsx title="app/auth/signin/page.tsx"
+import * as React from 'react';
+import { SignInPage } from '@toolpad/core/SignInPage';
+import { AuthError } from 'next-auth';
+import type { AuthProvider } from '@toolpad/core';
+import { signIn, providerMap } from '../../../auth';
+
+export default function SignIn() {
+  return (
+    <React.Fragment>
+      <SignInPage providers={providerMap} signIn={
+        async (provider: AuthProvider, formData: FormData, callbackUrl?: string) {
+          try {
+            return await signInAction(provider.id, {
+              ...(formData && {
+                email: formData.get('email'),
+                password: formData.get('password'),
+              }),
+              redirectTo: callbackUrl ?? '/',
+            });
+        } catch (error) {
+          if (error instanceof Error && error.message === 'NEXT_REDIRECT') {
+            if (provider.id === 'nodemailer' &&
+            (error as any).digest?.includes('verify-request')) {
+            return {
+              success: 'Check your email for a verification link.',
+            };
+          }
+          throw error;
+        }
+
+        if (error instanceof AuthError) {
+          return {
+            error:
+              error.type === 'CredentialsSignin'
+                ? 'Invalid credentials.'
+                : 'An error with Auth.js occurred.',
+            type: error.type,
+          };
+        }
+        return {
+          error: 'Something went wrong.',
+          type: 'UnknownError',
+        };
+      }
+    }} />;
+    </React.Fragment>
+  );
+}
+```
+
+:::info
+Check out the complete [Next.js App Router Nodemailer example](https://github.com/mui/mui-toolpad/tree/master/examples/core-auth-nextjs-email/) example for a working implementation of a magic link sign-in page with Auth.js, Nodemailer, Prisma and PostgreSQL.
+:::
+
 ## Credentials
 
 :::warning
-It is recommended to use the OAuth provider for more robust maintenance, support, and security.
+The Credentials provider is not the most secure way to authenticate users. We recommend using any of the other providers for a more robust solution.
 :::
 
 To render a username password form, pass in a provider with `credentials` as the `id` property. The `signIn` function accepts a `formData` parameter in this case.

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

@@ -3,7 +3,7 @@
     "providers": {
       "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;"
+        "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;'nodemailer'<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": "[]"
     },

examples/core-auth-nextjs-email/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/core-auth-nextjs-email/.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

examples/core-auth-nextjs-email/README.md

@@ -0,0 +1,34 @@
+# Toolpad Core Next.js App Router app with email provider
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/core-auth-nextjs-email/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

examples/core-auth-nextjs-email/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

examples/core-auth-nextjs-email/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "playground-nextjs-email",
+  "version": "0.5.2",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "@mui/icons-material": "^6",
+    "@mui/lab": "^6",
+    "@mui/material": "^6",
+    "@mui/material-nextjs": "^6",
+    "@toolpad/core": "latest",
+    "@prisma/client": "^5",
+    "prisma": "^5",
+    "@auth/prisma-adapter": "^2",
+    "next": "^14",
+    "next-auth": "5.0.0-beta.20",
+    "nodemailer": "^6",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "typescript": "^5",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "^14"
+  }
+}

examples/core-auth-nextjs-email/src/app/(dashboard)/layout.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import { PageContainer } from '@toolpad/core/PageContainer';
+
+export default function DashboardPagesLayout(props: { children: React.ReactNode }) {
+  return (
+    <DashboardLayout>
+      <PageContainer>{props.children}</PageContainer>
+    </DashboardLayout>
+  );
+}