[core] Support magic links in SignInPage

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { SignInPage } from '@toolpad/core/SignInPage';
+import { AppProvider } from '@toolpad/core/AppProvider';
+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,
+  SignInPage,
+  SupportedAuthProvider,
+  AuthResponse,
+} from '@toolpad/core/SignInPage';
+import { AppProvider } from '@toolpad/core/AppProvider';
+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,30 @@
+import * as React from 'react';
+import { SignInPage } from '@toolpad/core/SignInPage';
+import { AppProvider } from '@toolpad/core/AppProvider';
+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,
+  SignInPage,
+  SupportedAuthProvider,
+} from '@toolpad/core/SignInPage';
+import { AppProvider } from '@toolpad/core/AppProvider';
+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

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

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { SignInPage, type AuthProvider } from '@toolpad/core/SignInPage';
 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 @@ The `SignInPage` component can be set up with an OAuth provider by passing in a
 
 :::info
 
-The following providers are supported and maintained by default:
+The following OAuth providers are supported and maintained by default:
 
 - Google
 - GitHub
@@ -44,11 +44,29 @@ The following providers are supported and maintained by default:
 - 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
+
+The `SignIn` page component supports magic links. To enable this, you have to set up a provider such as Auth.js NodeMailer. See more details in the Auth.js docs on [database setup for email](https://authjs.dev/getting-started/authentication/email) and [Nodemailer configuration](https://authjs.dev/getting-started/providers/nodemailer/).
+
+To render a magic link form, pass in a provider with `nodemailer` as the `id` property.
+
+{{"demo": "MagicLinkSignInPage.js", "iframe": true, "height": 400}}
+
+### 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": 400}}
+
+:::info
+Check out the complete [Next.js Auth.js Magic Link 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.
+:::
+
 ## Passkey
 
 The `SignInPage` component can be set up to use [Passkeys](https://passkeys.dev) by passing in a provider with `passkey` as the `id`:
@@ -64,7 +82,7 @@ The [Toolpad Core Passkey example app](https://github.com/mui/mui-toolpad/tree/m
 ## Credentials
 
 :::warning
-It is recommended to use the OAuth or Passkey provider for more robust maintenance, support, and security.
+The Credentials provider is not the most secure way to authenticate users. It's recommended to use 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.
@@ -231,4 +249,4 @@ The `SignInPage` component has versions with different layouts for authenticatio
 
 ## 🚧 Other authentication Flows
 
-The `SignInPage` will be accompanied by other components to allow users to sign up, verify emails and reset passwords. This is in progress.
+Besides the `SignInPage` , the team is planning work on several other components that enable new workflows such as [sign up](https://github.com/mui/toolpad/issues/4068) and [password reset](https://github.com/mui/toolpad/issues/4265).

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;'passkey'<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;'passkey'<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/Dockerfile

@@ -0,0 +1,45 @@
+# Use Node.js 20 Alpine as the base image
+FROM node:20-alpine AS builder
+
+# Set working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy all files
+COPY . .
+
+# Build the Next.js app
+RUN npm run build
+
+# Start a new stage for a smaller final image
+FROM node:20-alpine AS runner
+
+WORKDIR /app
+
+# Copy built assets from the builder stage
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/package.json ./package.json
+COPY --from=builder /app/src/prisma ./prisma
+
+# Set environment variables
+ENV NODE_ENV production
+ENV PORT 3000
+
+# Copy the entrypoint script
+COPY entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
+
+# Set the entrypoint
+ENTRYPOINT ["/entrypoint.sh"]
+
+# Expose the port Next.js runs on
+EXPOSE 3000
+
+# Run the Next.js app
+CMD ["npm", "start"]

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/docker-compose.yml

@@ -0,0 +1,52 @@
+version: '3.8'
+
+services:
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - '3000:3000'
+    environment:
+      - DATABASE_URL=${DATABASE_URL}
+      - AUTH_URL=${AUTH_URL}
+      - AUTH_TRUST_HOST=true
+      - NODE_ENV=production
+      - GITHUB_CLIENT_ID=${GITHUB_CLIENT_ID}
+      - GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET}
+      - AUTH_SECRET=${AUTH_SECRET}
+      - EMAIL_SERVER_HOST=${EMAIL_SERVER_HOST}
+      - EMAIL_SERVER_PORT=${EMAIL_SERVER_PORT}
+      - EMAIL_SERVER_USER=${EMAIL_SERVER_USER}
+      - EMAIL_SERVER_PASSWORD=${EMAIL_SERVER_PASSWORD}
+      - EMAIL_FROM=${EMAIL_FROM}
+    depends_on:
+      db:
+        condition: service_healthy
+    networks:
+      - app-network
+
+  db:
+    image: postgres:13
+    environment:
+      - POSTGRES_USER=${POSTGRES_USER}
+      - POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
+      - POSTGRES_DB=${POSTGRES_DB}
+    ports:
+      - '${POSTGRES_PORT}:5432'
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    healthcheck:
+      test: ['CMD-SHELL', 'pg_isready -U ${POSTGRES_USER} -d ${POSTGRES_DB}']
+      interval: 5s
+      timeout: 5s
+      retries: 5
+    networks:
+      - app-network
+
+volumes:
+  postgres_data:
+
+networks:
+  app-network:
+    driver: bridge