data-sync for vue, next

Author: AlgoFoe

lib/authentication/index.js

@@ -264,7 +264,7 @@ export async function setupClerk(state) {
         return;
     }
     if (framework === 'next') {
-        await setupNextClerk(framework, projectName, language, styling,useTailwind);
+        await setupNextClerk(state);
         return;
     } else if (framework === 'vue') {
         // Delegate Vue-specific Clerk setup to helper

lib/authentication/utils/clerknext.js

@@ -1,10 +1,12 @@
-import { newStyles, nextMiddleware, nextsignInCss, nextSignInPage, nextsignUpCss, nextSignUpPage } from "./utility.js";
+import { newStyles, nextMiddleware, nextsignInCss, nextSignInPage, nextsignUpCss, nextSignUpPage, clerkUserModel, clerkUserController, clerkWebhookRoute } from "./utility.js";
 import chalk from "chalk";
 import fs from "fs";
 import { execa } from "execa";
 import path from "path";
 
-export async function setupNextClerk(framework, projectName, language, styling,useTailwind) {
+export async function setupNextClerk(state) {
+    const { projectName, language, styling, database} = state;
+    const useTailwind = (styling === "tailwind");
         try {
             const targetDir = path.resolve(projectName);
             const currentDir = process.cwd();
@@ -61,27 +63,69 @@ export async function setupNextClerk(framework, projectName, language, styling,u
                     fs.writeFileSync(signupCssPath, signupCssContent);
                 }
 
-                const middlewareContent = nextMiddleware;
+                let middlewareContent = nextMiddleware;
+                if (database === 'mongodb') {
+                    middlewareContent = middlewareContent.replace("'/sign-in(.*)','/sign-up(.*)'", "'/sign-in(.*)','/sign-up(.*)', '/api/webhooks(.*)',");
+                }
                 const middlewareFilePath = path.join(srcDir, `middleware.${language === 'ts' ? 'ts' : 'js'}`);
                 fs.writeFileSync(middlewareFilePath, middlewareContent);
 
+                if (database === 'mongodb') {
+                    try {
+                        // webhook route
+                        const webhookDir = path.join(srcDir, 'app', 'api', 'webhooks', 'clerk');
+                        fs.mkdirSync(webhookDir, { recursive: true });
+                        const webhookExt = language === 'ts' ? 'ts' : 'js';
+                        const webhookPath = path.join(webhookDir, `route.${webhookExt}`);
+                        const webhookContent = clerkWebhookRoute ? clerkWebhookRoute(language, 'next') : '';
+                        if (webhookContent) fs.writeFileSync(webhookPath, webhookContent, 'utf8');
+
+                        // user controller (actions)
+                        const actionsDir = path.join(rootDir, 'lib', 'actions');
+                        fs.mkdirSync(actionsDir, { recursive: true });
+                        const controllerExt = language === 'ts' ? 'ts' : 'js';
+                        const controllerPath = path.join(actionsDir, `user.actions.${controllerExt}`);
+                        const controllerContent = clerkUserController ? clerkUserController(language, 'next') : '';
+                        if (controllerContent) fs.writeFileSync(controllerPath, controllerContent, 'utf8');
+
+                        // user model
+                        const modelsDir = path.join(rootDir, 'lib', 'database', 'models');
+                        fs.mkdirSync(modelsDir, { recursive: true });
+                        const modelExt = language === 'ts' ? 'ts' : 'js';
+                        const modelPath = path.join(modelsDir, `user.model.${modelExt}`);
+                        const modelContent = clerkUserModel ? clerkUserModel(language) : '';
+                        if (modelContent) fs.writeFileSync(modelPath, modelContent, 'utf8');
+
+                        // Append webhook signing secret to .env.local if missing
+                        const envFile = path.join(rootDir, '.env.local');
+                        let envExisting = '';
+                        if (fs.existsSync(envFile)) envExisting = fs.readFileSync(envFile, 'utf8');
+                        const secretLine = 'CLERK_WEBHOOK_SIGNING_SECRET=your_secret';
+                        if (!envExisting.includes('CLERK_WEBHOOK_SIGNING_SECRET')) {
+                            fs.appendFileSync(envFile, `\n${secretLine}\n`, 'utf8');
+                            console.log(chalk.green('Added CLERK_WEBHOOK_SIGNING_SECRET to .env.local'));
+                        }
+                    } catch (e) {
+                        console.log(chalk.yellow('Could not scaffold Clerk MongoDB helpers automatically:'), e.message);
+                    }
+                }
+
                 const envPath = path.join(rootDir, ".env.local");
 
-                // Content you want to ensure exists
                 const newEnvContent = `
 NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
 NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
 NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
 NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_key_here
+CLERK_SECRET_KEY=your_secret_key_here
 `;
 
-                // Read existing content if file exists
                 let existing = "";
                 if (fs.existsSync(envPath)) {
                     existing = fs.readFileSync(envPath, "utf-8");
                 }
 
-                // Filter out only new lines that don't already exist
                 const linesToAdd = newEnvContent
                     .trim()
                     .split("\n")
@@ -91,9 +135,9 @@ NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/
                 // Append only new lines
                 if (linesToAdd) {
                     fs.appendFileSync(envPath, `\n${linesToAdd}\n`, "utf-8");
-                    console.log("✅ Added missing env variables to .env.local successfully!");
+                    console.log("Added missing env variables to .env.local successfully!");
                 } else {
-                    console.log("ℹ️ All Clerk environment variables already exist in .env.local.");
+                    console.log("All Clerk environment variables already exist in .env.local.");
                 }
                 const filePath = path.join(srcDir, `app`, `page.${language === 'ts' ? 'tsx' : 'js'}`);
                 let content = fs.readFileSync(filePath, "utf8");
@@ -164,9 +208,9 @@ NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/
 
                         if (!existingCss.includes(styleClerkUi)) {
                             fs.appendFileSync(targetPath, `\n${styleClerkUi}\n`, "utf-8");
-                            console.log(`✅ Added user auth button styles to ${path.basename(targetPath)} successfully!`);
+                            console.log(`Added user auth button styles to ${path.basename(targetPath)} successfully!`);
                         } else {
-                            console.log(`ℹ️ User auth button styles already exist in ${path.basename(targetPath)}, skipped adding again.`);
+                            console.log(`User auth button styles already exist in ${path.basename(targetPath)}, skipped adding again.`);
                         }
                     }
 
@@ -184,7 +228,7 @@ NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/
 
                 // Add import if missing
                 if (!layoutcontent.includes("ClerkProvider")) {
-                    const importLine = `import { ClerkProvider } from "@clerk/nextjs";\nimport { Toaster } from "@/components/ui/toaster";\n`;
+                    const importLine = `import { ClerkProvider } from "@clerk/nextjs";\n`;
                     // place after the last import
                     layoutcontent = layoutcontent.replace(/(import .*?;\n)(?!import)/s, match => match + importLine);
                     layoutchanged = true;
@@ -207,11 +251,20 @@ NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/
 
             console.log(chalk.green.bold(`Clerk setup completed successfully!\nYour app is now configured with Clerk authentication.\nRemember to add your Publishable Key in the .env file:\nVITE_CLERK_PUBLISHABLE_KEY=your_key_here\n\nYou can now start your app and enjoy secure authentication! 🚀`));
             console.log(chalk.yellow(
-                "🛠️ First-time setup:\n" +
+                "First-time setup:\n" +
                 "1. Sign in to your Clerk dashboard.\n" +
                 "2. Create a new application.\n" +
                 "3. Copy your 'NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY' and 'CLERK_SECRET_KEY' into your .env.local file."
             ));
+            if(database === 'mongodb') {
+                console.log(chalk.yellow(
+                    "4. Set up Clerk webhooks for user management:\n" +
+                    "   - In the Clerk dashboard, go to Webhooks and create a new webhook with the URL: <HTTPS_URL>/api/webhooks/clerk\n" +
+                    "   - Subscribe to events: user.created, user.updated, user.deleted\n" +
+                    "   - Copy the webhook signing secret into your .env.local as:\n" + 
+                    "     CLERK_WEBHOOK_SIGNING_SECRET=your_secret_here"
+                ));
+            }
 
         } catch (error) {
             console.error(chalk.red("Error setting up Clerk for authentication"), error.message);

lib/authentication/utils/clerkvue.js

@@ -2,6 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import chalk from 'chalk';
 import { execa } from 'execa';
+import { actions, clerkUserModel, webhooksRoute } from './utility';
 
 // Component templates
 const SIGNIN_COMPONENT = `<script setup lang="ts">
@@ -150,8 +151,8 @@ router.beforeEach(async (to) => {
 export default router
 `;
 export async function setupVueClerk(state) {
-  const daisy=state.uiLibrary==="daisyui";
-  const { projectName, language } = state;
+  const daisy = state.uiLibrary === "daisyui";
+  const { projectName, language, database } = state;
   console.log(chalk.blue(`Setting up Clerk for Vue project: ${projectName} (lang=${language})`));
 
   const rootDir = path.isAbsolute(projectName)
@@ -373,7 +374,7 @@ function generateParticleStyle(index) {
                 '🎉 Welcome aboard! HackPack is ready to accelerate your development journey.'
               )
           "
-          ${ daisy?`class="btn btn-primary"`:`class="bg-yellow-400 hover:bg-yellow-300 text-gray-900 px-6 py-3 rounded-xl font-semibold transition-transform transform hover:scale-105 shadow-lg"`}
+          ${daisy ? `class="btn btn-primary"` : `class="bg-yellow-400 hover:bg-yellow-300 text-gray-900 px-6 py-3 rounded-xl font-semibold transition-transform transform hover:scale-105 shadow-lg"`}
         >
           Launch a Toast message
         </button>
@@ -571,8 +572,108 @@ export default defineConfig({
       }
     }
 
-    console.log(chalk.green.bold('🎉 Vue Clerk setup completed (best-effort). Please verify the main file, App.vue and .env value.'));
-    console.log(chalk.green('ℹ️ The `ClerkHeader.vue` component created in src/components can be used as a compact auth button/chip anywhere in your app.'));
+    console.log(chalk.green.bold('Vue Clerk setup completed (best-effort). Please verify the main file, App.vue and .env value.'));
+    console.log(chalk.green('The `ClerkHeader.vue` component created in src/components can be used as a compact auth button/chip anywhere in your app.'));
+    // If the user selected MongoDB, scaffold a minimal backend webhook handler
+    if (database === 'mongodb') {
+      try {
+        const backendDir = path.join(rootDir, 'backend');
+        // backend dir exists
+        try {
+          await execa('npm', ['install', '@clerk/express'], { cwd: backendDir, stdio: 'inherit' });
+        } catch (e) {
+          console.log(chalk.yellow('Could not install @clerk/express in backend:'), e.message);
+        }
+        const backendSrc = path.join(backendDir, 'src');
+        fs.mkdirSync(backendSrc, { recursive: true });
+
+        // actions/user.actions.js/ts
+        const actionsDir = path.join(backendSrc, 'actions');
+        fs.mkdirSync(actionsDir, { recursive: true });
+        const actionsExt = language === 'ts' ? 'ts' : 'js';
+        const actionsPath = path.join(actionsDir, `user.actions.${actionsExt}`);
+        if (!fs.existsSync(actionsPath)) fs.writeFileSync(actionsPath, actions(language), 'utf8');
+
+        // models/user.model.js
+        const modelsDir = path.join(backendSrc, 'models');
+        fs.mkdirSync(modelsDir, { recursive: true });
+        const modelExt = language === 'ts' ? 'ts' : 'js';
+        const modelPath = path.join(modelsDir, `user.model.${modelExt}`);
+        if (!fs.existsSync(modelPath)) fs.writeFileSync(modelPath, clerkUserModel(language), 'utf8');
+
+        // routes/webhooks.route.js
+        const routesDir = path.join(backendSrc, 'routes');
+        fs.mkdirSync(routesDir, { recursive: true });
+        const routeExt = language === 'ts' ? 'ts' : 'js';
+        const routePath = path.join(routesDir, `webhooks.route.${routeExt}`);
+        if (!fs.existsSync(routePath)) fs.writeFileSync(routePath, webhooksRoute(language), 'utf8');
+
+        // backend/src/index.js - create or patch
+        const indexPath = path.join(backendSrc, `index.${language === 'ts' ? 'ts' : 'js'}`);
+        if (fs.existsSync(indexPath)) {
+          let indexContent = fs.readFileSync(indexPath, "utf8");
+          const importRegex = /(import connectDB[^\n]*\n)/;
+
+          if (!/import\s+webhooksRoute/.test(indexContent)) {
+            indexContent = indexContent.replace(
+              importRegex,
+              `$1import webhooksRoute from "./routes/webhooks.route.js";\n`
+            );
+          }
+          // for js
+          let expressRegex;
+          if(language === 'ts'){
+            expressRegex = /const app: express.Application = express()\(\);/;
+          } 
+          else{
+            expressRegex = /const app = express\(\);/; 
+          }         
+
+          if (!/app\.use\(\s*['"]\/api\/webhooks/.test(indexContent)) {
+            indexContent = indexContent.replace(
+              expressRegex,
+              `const app = express();\napp.use('/api/webhooks', webhooksRoute);`
+            );
+          }
+
+          fs.writeFileSync(indexPath, indexContent, "utf8");
+          console.log("index.js updated successfully ✔");
+        } else {
+          const indexLines = [
+            "import express from 'express';",
+            "import dotenv from 'dotenv';",
+            "import webhooksRoute from './routes/webhooks.route.js';",
+            "",
+            "dotenv.config();",
+            "const app = express();",
+            "app.use('/api/webhooks', webhooksRoute);",
+            "app.use(express.json());",
+            "",
+            "const PORT = process.env.PORT || 5000;",
+            "app.listen(PORT, () => console.log('Server listening on port ' + (process.env.PORT || 5000)));",
+            ""
+          ];
+          fs.writeFileSync(indexPath, indexLines.join('\n'), 'utf8');
+        }
+
+        // Append CLERK_WEBHOOK_SIGNING_SECRET and CLIENT_URL to backend/.env if missing
+        const backendEnv = path.join(backendDir, '.env');
+        let envExisting = '';
+        if (fs.existsSync(backendEnv)) envExisting = fs.readFileSync(backendEnv, 'utf8');
+        const secretLine = 'CLERK_WEBHOOK_SIGNING_SECRET=your_secret';
+        const clientLine = 'CLIENT_URL=http://localhost:5173';
+        if (!envExisting.includes('CLERK_WEBHOOK_SIGNING_SECRET')) {
+          fs.appendFileSync(backendEnv, '\n' + secretLine + '\n', 'utf8');
+          console.log(chalk.green('Added CLERK_WEBHOOK_SIGNING_SECRET to backend/.env'));
+        }
+        if (!envExisting.includes('CLIENT_URL')) {
+          fs.appendFileSync(backendEnv, clientLine + '\n', 'utf8');
+          console.log(chalk.green('Added CLIENT_URL to backend/.env'));
+        }
+      } catch (e) {
+        console.log(chalk.yellow('Could not scaffold Clerk backend helpers automatically:'), e.message);
+      }
+    }
   } catch (err) {
     console.error(chalk.red('Error setting up Clerk for Vue:'), err && err.message ? err.message : err);
   }