@@ -104,7 +104,8 @@ export async function displayPostInstallInstructions(
104104 const starlightInstructions = addons ?. includes ( "starlight" )
105105 ? getStarlightInstructions ( runCmd )
106106 : "" ;
107- const clerkInstructions = isConvex && config . auth === "clerk" ? getClerkInstructions ( ) : "" ;
107+ const clerkInstructions =
108+ config . auth === "clerk" ? getClerkInstructions ( frontend || [ ] , backend , api ) : "" ;
108109 const polarInstructions =
109110 config . payments === "polar" && config . auth === "better-auth"
110111 ? getPolarInstructions ( backend )
@@ -445,8 +446,105 @@ function getBunWebNativeWarning() {
445446 ) } 'bun' might cause issues with web + native apps in a monorepo.\n Use 'pnpm' if problems arise.`;
446447}
447448
448- function getClerkInstructions ( ) {
449- return `${ pc . bold ( "Clerk Authentication Setup:" ) } \n${ pc . cyan ( "•" ) } Follow the guide: ${ pc . underline ( "https://docs.convex.dev/auth/clerk" ) } \n${ pc . cyan ( "•" ) } Set CLERK_JWT_ISSUER_DOMAIN in Convex Dashboard\n${ pc . cyan ( "•" ) } Set CLERK_PUBLISHABLE_KEY in apps/*/.env` ;
449+ function getClerkQuickstartUrl ( frontend : Frontend [ ] ) {
450+ if ( frontend . includes ( "next" ) ) return "https://clerk.com/docs/nextjs/getting-started/quickstart" ;
451+ if ( frontend . includes ( "react-router" ) ) {
452+ return "https://clerk.com/docs/react-router/getting-started/quickstart" ;
453+ }
454+ if ( frontend . includes ( "tanstack-start" ) ) {
455+ return "https://clerk.com/docs/tanstack-react-start/getting-started/quickstart" ;
456+ }
457+ if ( frontend . includes ( "tanstack-router" ) ) {
458+ return "https://clerk.com/docs/react/getting-started/quickstart" ;
459+ }
460+ if (
461+ frontend . includes ( "native-bare" ) ||
462+ frontend . includes ( "native-uniwind" ) ||
463+ frontend . includes ( "native-unistyles" )
464+ ) {
465+ return "https://clerk.com/docs/expo/getting-started/quickstart" ;
466+ }
467+
468+ return "https://clerk.com/docs" ;
469+ }
470+
471+ function getClerkInstructionLines (
472+ frontend : Frontend [ ] ,
473+ backend : Backend ,
474+ api : ProjectConfig [ "api" ] ,
475+ ) {
476+ const lines : string [ ] = [ ] ;
477+
478+ if ( frontend . includes ( "next" ) ) {
479+ lines . push ( "Set NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY in apps/web/.env" ) ;
480+ }
481+
482+ if (
483+ frontend . some ( ( value ) => [ "react-router" , "tanstack-router" , "tanstack-start" ] . includes ( value ) )
484+ ) {
485+ lines . push ( "Set VITE_CLERK_PUBLISHABLE_KEY in apps/web/.env" ) ;
486+ }
487+
488+ if (
489+ frontend . some ( ( value ) => [ "native-bare" , "native-uniwind" , "native-unistyles" ] . includes ( value ) )
490+ ) {
491+ lines . push ( "Set EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY in apps/native/.env" ) ;
492+ }
493+
494+ if ( backend === "convex" ) {
495+ return [
496+ "Set CLERK_JWT_ISSUER_DOMAIN in Convex Dashboard" ,
497+ ...lines ,
498+ ...( frontend . some ( ( value ) => [ "next" , "react-router" , "tanstack-start" ] . includes ( value ) )
499+ ? [ "Set CLERK_SECRET_KEY in apps/web/.env for Clerk server middleware" ]
500+ : [ ] ) ,
501+ ] ;
502+ }
503+
504+ const hasClerkServerFrontend = frontend . some ( ( value ) =>
505+ [ "next" , "react-router" , "tanstack-start" ] . includes ( value ) ,
506+ ) ;
507+ const serverEnvPath = backend === "self" ? "apps/web/.env" : "apps/server/.env" ;
508+ const needsServerSideClerkAuth = backend !== "none" ;
509+ const needsClerkBackendPublishableKey = [ "express" , "fastify" ] . includes ( backend ) ;
510+ const needsClerkRequestVerification =
511+ api !== "none" && [ "self" , "hono" , "elysia" ] . includes ( backend ) ;
512+
513+ if ( hasClerkServerFrontend && backend === "self" ) {
514+ lines . push (
515+ "Set CLERK_SECRET_KEY in apps/web/.env for Clerk server middleware and server-side Clerk auth" ,
516+ ) ;
517+ } else {
518+ if ( hasClerkServerFrontend ) {
519+ lines . push ( "Set CLERK_SECRET_KEY in apps/web/.env for Clerk server middleware" ) ;
520+ }
521+
522+ if ( needsServerSideClerkAuth ) {
523+ lines . push ( `Set CLERK_SECRET_KEY in ${ serverEnvPath } for server-side Clerk auth` ) ;
524+ }
525+ }
526+
527+ if ( needsClerkRequestVerification ) {
528+ lines . push (
529+ `Set CLERK_PUBLISHABLE_KEY in ${ serverEnvPath } for server-side Clerk request verification` ,
530+ ) ;
531+ }
532+
533+ if ( needsClerkBackendPublishableKey ) {
534+ lines . push ( `Set CLERK_PUBLISHABLE_KEY in ${ serverEnvPath } for Clerk backend middleware` ) ;
535+ }
536+
537+ return lines ;
538+ }
539+
540+ function getClerkInstructions ( frontend : Frontend [ ] , backend : Backend , api : ProjectConfig [ "api" ] ) {
541+ const lines = [
542+ `${ pc . bold ( "Clerk Authentication Setup:" ) } ` ,
543+ `${ pc . cyan ( "•" ) } Follow the guide: ${ pc . underline ( getClerkQuickstartUrl ( frontend ) ) } ` ,
544+ ...getClerkInstructionLines ( frontend , backend , api ) . map ( ( line ) => `${ pc . cyan ( "•" ) } ${ line } ` ) ,
545+ ] ;
546+
547+ return lines . join ( "\n" ) ;
450548}
451549
452550function getBetterAuthConvexInstructions ( hasWeb : boolean , webPort : string , packageManager : string ) {
0 commit comments