feat: add clerk auth support with convex (#548)

apps/cli/src/prompts/auth.ts

@@ -1,27 +1,56 @@
-import { confirm, isCancel } from "@clack/prompts";
+import { isCancel, select } from "@clack/prompts";
 import { DEFAULT_CONFIG } from "../constants";
-import type { Backend } from "../types";
+import type { Auth, Backend } from "../types";
 import { exitCancelled } from "../utils/errors";
 
 export async function getAuthChoice(
-	auth: boolean | undefined,
+	auth: Auth | undefined,
 	hasDatabase: boolean,
 	backend?: Backend,
+	frontend?: string[],
 ) {
+	if (auth !== undefined) return auth;
 	if (backend === "convex") {
-		return false;
+		const unsupportedFrontends = frontend?.filter((f) =>
+			["nuxt", "svelte", "solid"].includes(f),
+		);
+
+		if (unsupportedFrontends && unsupportedFrontends.length > 0) {
+			return "none";
+		}
+
+		const response = await select({
+			message: "Select authentication provider",
+			options: [
+				{
+					value: "clerk",
+					label: "Clerk",
+					hint: "More than auth, Complete User Management",
+				},
+				{ value: "none", label: "None" },
+			],
+			initialValue: "clerk",
+		});
+		if (isCancel(response)) return exitCancelled("Operation cancelled");
+		return response as Auth;
 	}
 
-	if (!hasDatabase) return false;
+	if (!hasDatabase) return "none";
 
-	if (auth !== undefined) return auth;
-
-	const response = await confirm({
-		message: "Add authentication with Better-Auth?",
+	const response = await select({
+		message: "Select authentication provider",
+		options: [
+			{
+				value: "better-auth",
+				label: "Better-Auth",
+				hint: "comprehensive auth framework for TypeScript",
+			},
+			{ value: "none", label: "None" },
+		],
 		initialValue: DEFAULT_CONFIG.auth,
 	});
 
 	if (isCancel(response)) return exitCancelled("Operation cancelled");
 
-	return response;
+	return response as Auth;
 }

apps/cli/src/prompts/config-prompts.ts

@@ -2,6 +2,7 @@ import { group } from "@clack/prompts";
 import type {
 	Addons,
 	API,
+	Auth,
 	Backend,
 	Database,
 	DatabaseSetup,
@@ -38,7 +39,7 @@ type PromptGroupResults = {
 	database: Database;
 	orm: ORM;
 	api: API;
-	auth: boolean;
+	auth: Auth;
 	addons: Addons[];
 	examples: Examples[];
 	dbSetup: DatabaseSetup;
@@ -57,7 +58,8 @@ export async function gatherConfig(
 ): Promise<ProjectConfig> {
 	const result = await group<PromptGroupResults>(
 		{
-			frontend: () => getFrontendChoice(flags.frontend, flags.backend),
+			frontend: () =>
+				getFrontendChoice(flags.frontend, flags.backend, flags.auth),
 			backend: ({ results }) =>
 				getBackendFrameworkChoice(flags.backend, results.frontend),
 			runtime: ({ results }) =>
@@ -75,7 +77,12 @@ export async function gatherConfig(
 			api: ({ results }) =>
 				getApiChoice(flags.api, results.frontend, results.backend),
 			auth: ({ results }) =>
-				getAuthChoice(flags.auth, results.database !== "none", results.backend),
+				getAuthChoice(
+					flags.auth as import("../types").Auth | undefined,
+					results.database !== "none",
+					results.backend,
+					results.frontend,
+				),
 			addons: ({ results }) => getAddonsChoice(flags.addons, results.frontend),
 			examples: ({ results }) =>
 				getExamplesChoice(
@@ -121,7 +128,6 @@ export async function gatherConfig(
 		result.database = "none";
 		result.orm = "none";
 		result.api = "none";
-		result.auth = false;
 		result.dbSetup = "none";
 		result.examples = ["todo"];
 	}
@@ -131,7 +137,7 @@ export async function gatherConfig(
 		result.database = "none";
 		result.orm = "none";
 		result.api = "none";
-		result.auth = false;
+		result.auth = "none";
 		result.dbSetup = "none";
 		result.examples = [];
 	}

apps/cli/src/prompts/frontend.ts

@@ -7,6 +7,7 @@ import { exitCancelled } from "../utils/errors";
 export async function getFrontendChoice(
 	frontendOptions?: Frontend[],
 	backend?: Backend,
+	auth?: string,
 ): Promise<Frontend[]> {
 	if (frontendOptions !== undefined) return frontendOptions;
 
@@ -72,7 +73,7 @@ export async function getFrontendChoice(
 		];
 
 		const webOptions = allWebOptions.filter((option) =>
-			isFrontendAllowedWithBackend(option.value, backend),
+			isFrontendAllowedWithBackend(option.value, backend, auth),
 		);
 
 		const webFramework = await select<Frontend>({