[cli] Support Magic Link and Passkeys in CLI (#4339)

Author: bharatkashyap

docs/data/toolpad/core/introduction/tutorial.md

@@ -15,15 +15,15 @@ title: Tutorial
 <codeblock storageKey="package-manager">
 
 ```bash npm
-npx create-toolpad-app@latest --example core-tutorial
+npx create-toolpad-app@latest --example tutorial
 ```
 
 ```bash pnpm
-pnpm dlx create toolpad-app --example core-tutorial
+pnpm dlx create toolpad-app --example tutorial
 ```
 
 ```bash yarn
-yarn create toolpad-app --example core-tutorial
+yarn create toolpad-app --example tutorial
 ```
 
   </codeblock>

examples/core/auth-nextjs-passkey/src/app/auth/signin/page.tsx

@@ -27,6 +27,5 @@ const signIn = async (provider: AuthProvider, formData: FormData, callbackUrl?:
 };
 
 export default function SignIn() {
-  // TODO: Fix this
   return <SignInPage providers={providerMap} signIn={signIn} />;
 }

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

@@ -23,9 +23,13 @@ import auth from './templates/auth/auth';
 import envLocal from './templates/auth/envLocal';
 import middleware from './templates/auth/middleware';
 import routeHandler from './templates/auth/route';
+import prisma from './templates/auth/prisma';
+import env from './templates/auth/env';
+import schemaPrisma from './templates/auth/schemaPrisma';
 
 // Auth files for app router
 import signInPage from './templates/auth/nextjs-app/signInPage';
+import signInAction from './templates/auth/nextjs-app/actions';
 
 // Auth files for pages router
 import signInPagePagesRouter from './templates/auth/nextjs-pages/signIn';
@@ -59,7 +63,7 @@ export default function generateProject(
     case 'nextjs-pages': {
       const nextJsPagesRouterStarter = new Map([
         ['pages/index.tsx', { content: indexPageContent }],
-        ['pages/orders/index.tsx', { content: ordersPage }],
+        ['pages/orders/index.tsx', { content: ordersPage(options) }],
         ['pages/_document.tsx', { content: document }],
         ['pages/_app.tsx', { content: app(options) }],
       ]);
@@ -74,6 +78,16 @@ export default function generateProject(
           ['app/api/auth/[...nextAuth]/route.ts', { content: routeHandler }],
           ['pages/auth/signin.tsx', { content: signInPagePagesRouter(options) }],
         ]);
+        if (options.hasNodemailerProvider || options.hasPasskeyProvider) {
+          // Prisma adapter support requires removal of middleware
+          authFiles.delete('middleware.ts');
+          const prismaFiles = new Map([
+            ['prisma.ts', { content: prisma }],
+            ['.env', { content: env }],
+            ['prisma/schema.prisma', { content: schemaPrisma(options) }],
+          ]);
+          return new Map([...files, ...nextJsPagesRouterStarter, ...authFiles, ...prismaFiles]);
+        }
         return new Map([...files, ...nextJsPagesRouterStarter, ...authFiles]);
       }
       return new Map([...files, ...nextJsPagesRouterStarter]);
@@ -84,7 +98,7 @@ export default function generateProject(
         ['app/(dashboard)/layout.tsx', { content: dashboardLayout }],
         ['app/layout.tsx', { content: rootLayout(options) }],
         ['app/(dashboard)/page.tsx', { content: indexPageContent }],
-        ['app/(dashboard)/orders/page.tsx', { content: ordersPage }],
+        ['app/(dashboard)/orders/page.tsx', { content: ordersPage(options) }],
       ]);
       if (options.auth) {
         const authFiles = new Map([
@@ -93,7 +107,18 @@ export default function generateProject(
           ['middleware.ts', { content: middleware }],
           ['app/api/auth/[...nextAuth]/route.ts', { content: routeHandler }],
           ['app/auth/signin/page.tsx', { content: signInPage(options) }],
+          ['app/auth/signin/actions.ts', { content: signInAction(options) }],
         ]);
+        if (options.hasNodemailerProvider || options.hasPasskeyProvider) {
+          // Prisma adapater support requires removal of middleware
+          authFiles.delete('middleware.ts');
+          const prismaFiles = new Map([
+            ['prisma.ts', { content: prisma }],
+            ['.env', { content: env }],
+            ['prisma/schema.prisma', { content: schemaPrisma(options) }],
+          ]);
+          return new Map([...files, ...nextJsAppRouterStarter, ...authFiles, ...prismaFiles]);
+        }
 
         return new Map([...files, ...nextJsAppRouterStarter, ...authFiles]);
       }

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

@@ -281,6 +281,9 @@ const run = async () => {
 
   const absolutePath = bashResolvePath(projectPath);
 
+  let hasNodemailerProvider = false;
+  let hasPasskeyProvider = false;
+
   // If the user has provided an example, download and extract it
   if (example) {
     await downloadAndExtractExample(absolutePath, example);
@@ -311,6 +314,9 @@ const run = async () => {
         choices: [
           { name: 'Google', value: 'google' },
           { name: 'GitHub', value: 'github' },
+          { name: 'Passkey', value: 'passkey' },
+          { name: 'Magic Link', value: 'nodemailer' },
+          { name: 'Credentials', value: 'credentials' },
           { name: 'GitLab', value: 'gitlab' },
           { name: 'Twitter', value: 'twitter' },
           { name: 'Facebook', value: 'facebook' },
@@ -331,6 +337,8 @@ const run = async () => {
           { name: 'FusionAuth', value: 'fusionauth' },
         ],
       });
+      hasNodemailerProvider = authProviderOptions?.includes('nodemailer');
+      hasPasskeyProvider = authProviderOptions?.includes('passkey');
     }
     const options = {
       name: path.basename(absolutePath),
@@ -340,6 +348,9 @@ const run = async () => {
       auth: authFlag,
       install: installFlag,
       authProviders: authProviderOptions,
+      hasCredentialsProvider: authProviderOptions?.includes('credentials'),
+      hasNodemailerProvider,
+      hasPasskeyProvider,
     };
     await scaffoldCoreProject(options);
   }
@@ -355,11 +366,17 @@ const run = async () => {
 
   const installInstruction = example || !installFlag ? `  ${packageManager} install\n` : '';
 
+  const databaseInstruction =
+    hasNodemailerProvider || hasPasskeyProvider
+      ? `  npx prisma migrate dev --schema=prisma/schema.prisma\n`
+      : '';
+
   const message = `Run the following to get started: \n\n${chalk.magentaBright(
-    `${changeDirectoryInstruction}${installInstruction}  ${packageManager}${
+    `${changeDirectoryInstruction}${databaseInstruction}${installInstruction}  ${packageManager}${
       packageManager === 'yarn' ? '' : ' run'
     } dev`,
   )}`;
+
   // eslint-disable-next-line no-console
   console.log(message);
   // eslint-disable-next-line no-console

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

@@ -20,36 +20,56 @@ const CredentialsProviderTemplate = `Credentials({
   },
 }),`;
 
+const NodemailerTemplate = `Nodemailer({
+    server: {
+      host: process.env.EMAIL_SERVER_HOST,
+      port: process.env.EMAIL_SERVER_PORT,
+      auth: {
+        user: process.env.EMAIL_SERVER_USER,
+        pass: process.env.EMAIL_SERVER_PASSWORD,
+      },
+      secure: true,
+    },
+    from: process.env.EMAIL_FROM,
+  }),`;
+
+const PasskeyTemplate = 'Passkey,';
+
 const oAuthProviderTemplate = (provider: SupportedAuthProvider) => `
   ${kebabToPascal(provider)}({
     clientId: process.env.${kebabToConstant(provider)}_CLIENT_ID,
     clientSecret: process.env.${kebabToConstant(provider)}_CLIENT_SECRET,${requiresIssuer(provider) ? `\n\t\tissuer: process.env.${kebabToConstant(provider)}_ISSUER,` : ''}${requiresTenantId(provider) ? `\n\t\ttenantId: process.env.${kebabToConstant(provider)}_TENANT_ID,` : ''}
   }),`;
 const checkEnvironmentVariables = (providers: SupportedAuthProvider[] | undefined) => `${providers
   ?.filter((p) => p !== 'credentials')
-  .map(
-    (provider) =>
-      `if(!process.env.${kebabToConstant(provider)}_CLIENT_ID) { 
+  .map((provider) => {
+    if (provider === 'nodemailer') {
+      return `if(!process.env.DATABASE_URL || !process.env.EMAIL_SERVER_HOST) { \nconsole.warn('The Nodemailer provider requires configuring a database and an email server.')\n}`;
+    }
+    if (provider === 'passkey') {
+      return `if(!process.env.DATABASE_URL) { \nconsole.warn('The passkey provider requires configuring a database.')\n}`;
+    }
+    return `if(!process.env.${kebabToConstant(provider)}_CLIENT_ID) { 
   console.warn('Missing environment variable "${kebabToConstant(provider)}_CLIENT_ID"');
 }
 if(!process.env.${kebabToConstant(provider)}_CLIENT_SECRET) {
   console.warn('Missing environment variable "${kebabToConstant(provider)}_CLIENT_SECRET"');
 }${
-        requiresTenantId(provider)
-          ? `
+      requiresTenantId(provider)
+        ? `
 if(!process.env.${kebabToConstant(provider)}_TENANT_ID) { 
   console.warn('Missing environment variable "${kebabToConstant(provider)}_TENANT_ID"');
 }`
-          : ''
-      }${
-        requiresIssuer(provider)
-          ? `
+        : ''
+    }${
+      requiresIssuer(provider)
+        ? `
 if(!process.env.${kebabToConstant(provider)}_ISSUER) {
   console.warn('Missing environment variable "${kebabToConstant(provider)}_ISSUER"');
 }`
-          : ''
-      }`,
-  )
+        : ''
+    }`;
+  })
   .join('\n')}
 `;
 
@@ -63,12 +83,19 @@ const auth: Template = (options) => {
     )
     .join('\n')}
 import type { Provider } from 'next-auth/providers';
+${options.hasNodemailerProvider || options.hasPasskeyProvider ? `\nimport { PrismaAdapter } from '@auth/prisma-adapter';\nimport { prisma } from './prisma';` : ''}
 
 const providers: Provider[] = [${providers
     ?.map((provider) => {
       if (provider === 'credentials') {
         return CredentialsProviderTemplate;
       }
+      if (provider === 'nodemailer') {
+        return NodemailerTemplate;
+      }
+      if (provider === 'passkey') {
+        return PasskeyTemplate;
+      }
       return oAuthProviderTemplate(provider);
     })
     .join('\n')}
@@ -86,6 +113,15 @@ export const providerMap = providers.map((provider) => {
 
 export const { handlers, auth, signIn, signOut } = NextAuth({
   providers,
+  ${options.hasNodemailerProvider || options.hasPasskeyProvider ? `\nadapter: PrismaAdapter(prisma),` : ''}
+  ${options.hasNodemailerProvider || (options.router === 'nextjs-app' && options.hasPasskeyProvider && providers && providers.length > 1) ? `\nsession: { strategy: 'jwt' },` : ''}
+  ${
+    options.hasPasskeyProvider
+      ? `\nexperimental: {
+    enableWebAuthn: true,
+  },`
+      : ''
+  }    
   secret: process.env.AUTH_SECRET,
   pages: {
     signIn: '/auth/signin',

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

@@ -0,0 +1,5 @@
+const env = `
+DATABASE_URL = 
+`;
+
+export default env;

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

@@ -4,14 +4,15 @@ import { Template } from '../../types';
 
 const env: Template = (options) => {
   const { authProviders: providers } = options;
-  const nonCredentialProviders = providers?.filter((provider) => provider !== 'credentials');
+  const nonCredentialProviders = providers?.filter(
+    (provider) => provider !== 'credentials' && provider !== 'nodemailer' && provider !== 'passkey',
+  );
   return `
 # Generate a secret with \`npx auth secret\`
 # and replace the value below with it
 AUTH_SECRET=secret
 
 # Add secrets for your auth providers to the .env.local file
-
 ${nonCredentialProviders
   ?.map(
     (provider) => `
@@ -20,7 +21,12 @@ ${kebabToConstant(provider)}_CLIENT_SECRET=
 ${requiresIssuer(provider) ? `${kebabToConstant(provider)}_ISSUER=\n` : ''}${requiresTenantId(provider) ? `${kebabToConstant(provider)}_TENANT_ID=\n` : ''}`,
   )
   .join('\n')}    
-`;
+
+${
+  options.hasNodemailerProvider
+    ? `EMAIL_SERVER_HOST=\nEMAIL_SERVER_PORT=\nEMAIL_SERVER_USER=\nEMAIL_SERVER_PASSWORD=\nEMAIL_FROM=`
+    : ''
+}`;
 };
 
 export default env;

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

@@ -0,0 +1,48 @@
+import { Template } from '../../../types';
+
+const actionsTemplate: Template = (options) => {
+  const { hasCredentialsProvider, hasNodemailerProvider } = options;
+
+  return `'use server';
+import { AuthError } from 'next-auth';
+import type { AuthProvider } from '@toolpad/core';
+import { signIn } from '../../../auth';
+
+export default async function serverSignIn(provider: AuthProvider, formData: FormData, callbackUrl?: string) {
+  try {
+    return await signIn(provider.id, {      
+    ...(formData && { email: formData.get('email'), password: formData.get('password') }),      
+      redirectTo: callbackUrl ?? '/',
+    });
+  } catch (error) {
+    if (error instanceof Error && error.message === 'NEXT_REDIRECT') {
+     ${
+       hasNodemailerProvider
+         ? `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: ${
+          hasCredentialsProvider
+            ? `error.type === 'CredentialsSignin' ? 'Invalid credentials.' : 'An error with Auth.js occurred.'`
+            : `'An error with Auth.js occurred.'`
+        },
+        type: error.type,
+      };
+    }
+    return {
+      error: 'Something went wrong.',
+      type: 'UnknownError',
+    };
+  }
+}`;
+};
+
+export default actionsTemplate;