elm-ssr 1.0.0 → 1.0.3

package/lib/scaffold.mjs

@@ -48,10 +48,10 @@ const elmJsonTemplate = () => ({
   }
 });
 
-const sharedTemplate = (namespace) => `module ${namespace}.View.Shared exposing (head, shell)
+const sharedTemplate = (namespace, auth) => `module ${namespace}.View.Shared exposing (head, layout)
 
-import ElmSsr.Html exposing (Node, div, h1, text)
-import ElmSsr.Html.Attributes exposing (class)
+import ElmSsr.Html exposing (Node, a, div, header, main_, nav, span, text)
+import ElmSsr.Html.Attributes exposing (class, href)
 import ElmSsr.Page as Page
 
 
@@ -63,19 +63,33 @@ head =
     ]
 
 
-shell : String -> List (Node msg) -> Node msg
-shell heading body =
-    div [ class "shell" ] (h1 [] [ text heading ] :: body)
+layout : String -> List (Node msg) -> Node msg
+layout pageTitle body =
+    div [ class "page" ]
+        [ header [ class "header" ]
+            [ div [ class "header-inner" ]
+                [ a [ class "brand", href "/" ]
+                    [ span [ class "brand-icon" ] [ text "◆" ]
+                    , text "elm-ssr"
+                    ]
+                , nav [ class "nav" ]
+                    [ a [ class "nav-link", href "/" ] [ text "Home" ]
+                    , a [ class "nav-link", href "/counter" ] [ text "Counter" ]${auth ? `
+                    , a [ class "nav-link", href "/login" ] [ text "Sign in" ]` : ""}
+                    ]
+                ]
+            ]
+        , main_ [ class "main" ]
+            [ div [ class "container" ] body
+            ]
+        ]
 `;
 
-const indexRouteTemplate = (namespace) => `module ${namespace}.Routes.Index exposing (page, action)
-
--- File-based routing: this module maps to GET /.
--- A page is stateless (no Model/Msg) and ships no client JavaScript.
+const indexRouteTemplate = (namespace, auth) => `module ${namespace}.Routes.Index exposing (page, action)
 
 import ElmSsr.Action as Action exposing (Action)
 import ElmSsr.Document exposing (Document)
-import ElmSsr.Html exposing (a, p, text)
+import ElmSsr.Html exposing (a, div, h1, h2, p, section, span, text)
 import ElmSsr.Html.Attributes exposing (class, href)
 import ElmSsr.Loader as Loader exposing (Loader)
 import ElmSsr.Page as Page
@@ -85,10 +99,7 @@ import ${namespace}.View.Shared as Shared
 
 page : Request -> Loader (Document Never)
 page _ =
-    Loader.env "GREETING"
-        |> Loader.map (\\maybeGreeting ->
-            view (Maybe.withDefault "Hello from default env!" maybeGreeting)
-        )
+    Loader.succeed view
 
 
 action : Request -> Action (Document Never)
@@ -96,30 +107,47 @@ action _ =
     Action.fail 405 "Method not allowed"
 
 
-view : String -> Document Never
-view greeting =
+view : Document Never
+view =
     Page.page
-        { title = "Starter | elm-ssr"
+        { title = "elm-ssr"
         , head = Shared.head
         , body =
-            [ Shared.shell "elm-ssr starter"
-                [ p [] [ text ("Greeting from environment: " ++ greeting) ]
-                , p [] [ text "This page is stateless and renders on the edge with no client runtime." ]
-                , p [] [ a [ class "link", href "/counter" ] [ text "Open the interactive counter" ] ]
+            [ Shared.layout "Home"
+                [ section [ class "hero" ]
+                    [ h1 [ class "hero-title" ] [ text "Ship fast." ]
+                    , p [ class "hero-subtitle" ]
+                        [ text "Type-safe server-side rendering with interactive islands. Runs on Cloudflare Workers and Bun." ]
+                    , div [ class "hero-actions" ]
+                        [ a [ class "btn btn-primary", href "/counter" ] [ text "Try the counter" ]${auth ? `
+                        , a [ class "btn btn-secondary", href "/login" ] [ text "Sign in" ]` : ""}
+                        ]
+                    ]
+                , section [ class "features" ]
+                    [ featureCard "⚡" "Edge-first" "Renders in milliseconds at the edge. No cold starts."
+                    , featureCard "🦺" "Fully typed" "End-to-end Elm types from DB to HTML. No runtime surprises."
+                    , featureCard "🏝️" "Islands" "Add interactivity exactly where you need it. Zero JS elsewhere."
+                    ]
                 ]
             ]
         }
+
+
+featureCard : String -> String -> String -> ElmSsr.Html.Node msg
+featureCard icon title_ body =
+    div [ class "feature-card" ]
+        [ span [ class "feature-icon" ] [ text icon ]
+        , h2 [ class "feature-title" ] [ text title_ ]
+        , p [ class "feature-body" ] [ text body ]
+        ]
 `;
 
 const counterRouteTemplate = (namespace) => `module ${namespace}.Routes.Counter exposing (page, action)
 
--- File-based routing: GET /counter. A static page that embeds an interactive
--- island. The page ships no client runtime; the browser mounts the island
--- separately, and only that root updates.
-
 import ElmSsr.Action as Action exposing (Action)
 import ElmSsr.Document exposing (Document)
-import ElmSsr.Html exposing (p, text)
+import ElmSsr.Html exposing (div, h1, p, text)
+import ElmSsr.Html.Attributes exposing (class)
 import ElmSsr.Loader as Loader exposing (Loader)
 import ElmSsr.Page as Page
 import ElmSsr.Route exposing (Request)
@@ -143,9 +171,14 @@ view =
         { title = "Counter | elm-ssr"
         , head = Shared.head
         , body =
-            [ Shared.shell "Counter"
-                [ p [] [ text "This page is static. Only the counter below is an interactive island." ]
-                , Counter.embed { start = 0 }
+            [ Shared.layout "Counter"
+                [ div [ class "page-header" ]
+                    [ h1 [] [ text "Interactive Counter" ]
+                    , p [ class "page-subtitle" ]
+                        [ text "This page is server-rendered. Only the counter widget below is a client-side island — zero JS elsewhere." ]
+                    ]
+                , div [ class "card" ]
+                    [ Counter.embed { start = 0 } ]
                 ]
             ]
         }
@@ -238,19 +271,18 @@ subscriptions _ =
 view : Model -> Html Msg
 view model =
     div [ class "counter" ]
-        [ button [ class "button", type_ "button", onClick Decrement ] [ text "-" ]
-        , span [ class "value" ] [ text (String.fromInt model.count) ]
-        , button [ class "button primary", type_ "button", onClick Increment ] [ text "+" ]
+        [ button [ class "btn btn-secondary btn-square", type_ "button", onClick Decrement ] [ text "−" ]
+        , span [ class "counter-value" ] [ text (String.fromInt model.count) ]
+        , button [ class "btn btn-primary btn-square", type_ "button", onClick Increment ] [ text "+" ]
         ]
 `;
 
 const notFoundRouteTemplate = (namespace) => `module ${namespace}.Routes.NotFound exposing (page, action)
 
--- File-based routing: NotFound is the fallback when no other route matches.
-
 import ElmSsr.Action as Action exposing (Action)
 import ElmSsr.Document exposing (Document)
-import ElmSsr.Html exposing (p, text)
+import ElmSsr.Html exposing (a, div, h1, p, text)
+import ElmSsr.Html.Attributes exposing (class, href)
 import ElmSsr.Loader as Loader exposing (Loader)
 import ElmSsr.Page as Page
 import ElmSsr.Route exposing (Request)
@@ -272,44 +304,124 @@ view =
     Page.notFound
         { title = "Not Found | elm-ssr"
         , head = Shared.head
-        , body = [ Shared.shell "404" [ p [] [ text "This route does not exist." ] ] ]
+        , body =
+            [ Shared.layout "Not Found"
+                [ div [ class "error-page" ]
+                    [ h1 [ class "error-code" ] [ text "404" ]
+                    , p [ class "error-message" ] [ text "This page doesn't exist." ]
+                    , a [ class "btn btn-primary", href "/" ] [ text "Go home" ]
+                    ]
+                ]
+            ]
         }
 `;
 
+const betterAuthMigrationTemplate = () => `-- BetterAuth requires these 4 tables. Do not rename or remove columns.
+-- Generated by elm-ssr. See https://www.better-auth.com/docs/concepts/database
+CREATE TABLE IF NOT EXISTS "user" (
+    id TEXT NOT NULL PRIMARY KEY,
+    name TEXT NOT NULL,
+    email TEXT NOT NULL UNIQUE,
+    "emailVerified" INTEGER NOT NULL DEFAULT 0,
+    image TEXT,
+    "createdAt" INTEGER NOT NULL,
+    "updatedAt" INTEGER NOT NULL
+);
+
+CREATE TABLE IF NOT EXISTS session (
+    id TEXT NOT NULL PRIMARY KEY,
+    "expiresAt" INTEGER NOT NULL,
+    token TEXT NOT NULL UNIQUE,
+    "createdAt" INTEGER NOT NULL,
+    "updatedAt" INTEGER NOT NULL,
+    "ipAddress" TEXT,
+    "userAgent" TEXT,
+    "userId" TEXT NOT NULL REFERENCES "user"(id) ON DELETE CASCADE
+);
+
+CREATE TABLE IF NOT EXISTS account (
+    id TEXT NOT NULL PRIMARY KEY,
+    "accountId" TEXT NOT NULL,
+    "providerId" TEXT NOT NULL,
+    "userId" TEXT NOT NULL REFERENCES "user"(id) ON DELETE CASCADE,
+    "accessToken" TEXT,
+    "refreshToken" TEXT,
+    "idToken" TEXT,
+    "accessTokenExpiresAt" INTEGER,
+    "refreshTokenExpiresAt" INTEGER,
+    scope TEXT,
+    password TEXT,
+    "createdAt" INTEGER NOT NULL,
+    "updatedAt" INTEGER NOT NULL
+);
+
+CREATE TABLE IF NOT EXISTS verification (
+    id TEXT NOT NULL PRIMARY KEY,
+    identifier TEXT NOT NULL,
+    value TEXT NOT NULL,
+    "expiresAt" INTEGER NOT NULL,
+    "createdAt" INTEGER,
+    "updatedAt" INTEGER
+);
+`;
+
+const auth0MigrationTemplate = () => `-- Local user cache for Auth0 authenticated users.
+-- Auth0 is the canonical identity source; this table stores profile data after first login.
+CREATE TABLE IF NOT EXISTS users (
+    id TEXT NOT NULL PRIMARY KEY,
+    email TEXT NOT NULL UNIQUE,
+    name TEXT,
+    picture TEXT,
+    "createdAt" INTEGER NOT NULL,
+    "updatedAt" INTEGER NOT NULL
+);
+`;
+
+const authDisplayName = (authProvider) =>
+  authProvider === "auth0" ? "Auth0" : "BetterAuth";
+
 const loginRouteTemplate = (namespace, authProvider) => `module ${namespace}.Routes.Login exposing (page, action)
 
 import ElmSsr.Action as Action exposing (Action)
 import ElmSsr.Document exposing (Document)
-import ElmSsr.Html exposing (a, div, p, text)
-import ElmSsr.Html.Attributes as Attr
+import ElmSsr.Html exposing (a, div, h1, p, span, text)
+import ElmSsr.Html.Attributes exposing (class, href)
 import ElmSsr.Loader as Loader exposing (Loader)
 import ElmSsr.Page as Page
 import ElmSsr.Route exposing (Request)
 import ${namespace}.View.Shared as Shared
 
+
 page : Request -> Loader (Document Never)
 page _ =
     Loader.succeed view
 
+
 action : Request -> Action (Document Never)
 action _ =
     Action.fail 405 "Method not allowed"
 
+
 view : Document Never
 view =
     Page.page
-        { title = "Login | elm-ssr"
+        { title = "Sign in | elm-ssr"
         , head = Shared.head
         , body =
-            [ Shared.shell "Sign In"
-                [ div [ Attr.class "login-container" ]
-                    [ p [] [ text "Access user authentication example (${authProvider})." ]
-                    , div [ Attr.style "margin-top" "20px" ]
-                        [ a 
-                            [ Attr.class "button primary"
-                            , Attr.href "/api/auth/login"
-                            ] 
-                            [ text "Sign In with Auth Provider" ]
+            [ Shared.layout "Sign in"
+                [ div [ class "auth-page" ]
+                    [ div [ class "auth-card" ]
+                        [ div [ class "auth-header" ]
+                            [ span [ class "auth-logo" ] [ text "◆" ]
+                            , h1 [ class "auth-title" ] [ text "Welcome back" ]
+                            , p [ class "auth-subtitle" ] [ text "Sign in to your account to continue." ]
+                            ]
+                        , div [ class "auth-body" ]
+                            [ a [ class "btn btn-primary btn-full", href "/api/auth/login" ]
+                                [ text "Continue with ${authDisplayName(authProvider)}" ]
+                            ]
+                        , p [ class "auth-footer" ]
+                            [ text "Powered by ${authDisplayName(authProvider)} via elm-ssr" ]
                         ]
                     ]
                 ]
@@ -321,54 +433,144 @@ const profileRouteTemplate = (namespace) => `module ${namespace}.Routes.Profile
 
 import ElmSsr.Action as Action exposing (Action)
 import ElmSsr.Document exposing (Document)
-import ElmSsr.Html exposing (a, div, h2, p, text)
-import ElmSsr.Html.Attributes as Attr
+import ElmSsr.Html exposing (a, div, h1, p, span, text)
+import ElmSsr.Html.Attributes exposing (class, href)
 import ElmSsr.Loader as Loader exposing (Loader)
 import ElmSsr.Page as Page
-import ElmSsr.Route as Route exposing (Request)
+import ElmSsr.Route exposing (Request)
 import ${namespace}.View.Shared as Shared
 import Json.Decode as Decode
 
+
 type alias UserProfile =
     { email : String
     , name : Maybe String
     }
 
+
 userDecoder : Decode.Decoder UserProfile
 userDecoder =
     Decode.map2 UserProfile
         (Decode.field "email" Decode.string)
         (Decode.maybe (Decode.field "name" Decode.string))
 
+
 page : Request -> Loader (Document Never)
 page _ =
     Loader.requireUser userDecoder "/login" (\\user ->
         Loader.succeed (view user)
     )
 
+
 action : Request -> Action (Document Never)
 action _ =
     Action.fail 405 "Method not allowed"
 
+
 view : UserProfile -> Document Never
 view user =
     Page.page
         { title = "Profile | elm-ssr"
         , head = Shared.head
         , body =
-            [ Shared.shell "User Profile"
-                [ div []
-                    [ h2 [] [ text ("Welcome, " ++ (Maybe.withDefault user.email user.name)) ]
-                    , p [] [ text ("Email: " ++ user.email) ]
-                    , p [ Attr.style "margin-top" "20px" ]
-                        [ a [ Attr.class "button", Attr.href "/api/auth/logout" ] [ text "Sign Out" ] ]
+            [ Shared.layout "Profile"
+                [ div [ class "auth-page" ]
+                    [ div [ class "auth-card" ]
+                        [ div [ class "auth-header" ]
+                            [ span [ class "avatar" ]
+                                [ text (String.left 1 (Maybe.withDefault user.email user.name) |> String.toUpper) ]
+                            , h1 [ class "auth-title" ]
+                                [ text (Maybe.withDefault "Your account" user.name) ]
+                            , p [ class "auth-subtitle" ] [ text user.email ]
+                            ]
+                        , div [ class "auth-body" ]
+                            [ a [ class "btn btn-secondary btn-full", href "/api/auth/logout" ]
+                                [ text "Sign out" ]
+                            ]
+                        ]
                     ]
                 ]
             ]
         }
 `;
 
-const authEndpointTemplate = (authProvider) => `import { generateSessionId, signValue, generateCsrfToken, readSignedCookie } from "elm-ssr/sessions";
+const betterAuthEndpointTemplate = () => `import { betterAuth } from "better-auth";
+import type { Middleware } from "elm-ssr/http";
+import type { RequestSession } from "elm-ssr/sessions";
+
+// BetterAuth is initialised per-request to pick up the right DB binding.
+// Production (Cloudflare Workers): env.DB is the D1 binding.
+// Local dev (Bun): falls back to bun:sqlite using app.db.
+const createAuth = (env: any) => {
+  const db = env?.DB ?? (() => {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const { Database } = require("bun:sqlite");
+    return new Database("app.db");
+  })();
+
+  return betterAuth({
+    baseURL: (env?.BETTER_AUTH_URL as string) ?? "http://localhost:8787",
+    secret: (env?.BETTER_AUTH_SECRET as string) ?? "change-me-in-production",
+    database: { type: "sqlite", db },
+    emailAndPassword: { enabled: true },
+    // Uncomment to add social providers (add matching env vars in .dev.vars):
+    // socialProviders: {
+    //   github: {
+    //     clientId: env?.GITHUB_CLIENT_ID as string,
+    //     clientSecret: env?.GITHUB_CLIENT_SECRET as string,
+    //   },
+    // },
+  });
+};
+
+export const handleAuth = (request: Request, env: any): Promise<Response> =>
+  createAuth(env).handler(request);
+
+// Reads the BetterAuth session from the request and returns the user.
+const getSessionUser = async (
+  request: Request,
+  env: any
+): Promise<{ email: string; name: string } | null> => {
+  try {
+    const session = await createAuth(env).api.getSession({ headers: request.headers });
+    if (!session?.user) return null;
+    return { email: session.user.email, name: session.user.name ?? session.user.email };
+  } catch {
+    return null;
+  }
+};
+
+// elm-ssr middleware: reads BetterAuth's session and injects the user into
+// context.session so Loader.session / Loader.requireUser work on every request.
+export const betterAuthMiddleware: Middleware = async (context, next) => {
+  const user = await getSessionUser(context.request, context.env);
+  context.session = {
+    id: user ? \`ba:\${user.email}\` : "",
+    data: user,
+    csrf: "",
+    dirty: false,
+    destroyed: false,
+    isNew: false,
+  } as RequestSession;
+  return next(context);
+};
+`;
+
+const auth0EndpointTemplate = () => `import { generateSessionId, signValue, generateCsrfToken, readSignedCookie } from "elm-ssr/sessions";
+
+interface Auth0Config {
+  domain: string;
+  clientId: string;
+  clientSecret: string;
+  callbackUrl: string;
+}
+
+const getConfig = (env: any): Auth0Config => ({
+  domain: (env?.AUTH0_DOMAIN as string) ?? "",
+  clientId: (env?.AUTH0_CLIENT_ID as string) ?? "",
+  clientSecret: (env?.AUTH0_CLIENT_SECRET as string) ?? "",
+  callbackUrl: (env?.AUTH0_CALLBACK_URL as string) ?? "http://localhost:8787/api/auth/callback",
+});
 
 export const handleAuth = async (
   request: Request,
@@ -376,54 +578,88 @@ export const handleAuth = async (
   options?: { store?: any; secret?: string }
 ): Promise<Response> => {
   const url = new URL(request.url);
+  const config = getConfig(env);
 
   if (url.pathname === "/api/auth/login") {
-    // Mock login session update for ${authProvider}
-    let cookieVal = "__elm_ssr_session=" + encodeURIComponent(JSON.stringify({
-      user: { email: "user@example.com", name: "${authProvider === "better-auth" ? "BetterAuth User" : "Auth0 User"}" }
-    })) + "; Path=/; HttpOnly; SameSite=Lax";
+    if (!config.domain || !config.clientId) {
+      return new Response(
+        "Auth0 not configured — set AUTH0_DOMAIN and AUTH0_CLIENT_ID in .dev.vars",
+        { status: 500 }
+      );
+    }
+    const params = new URLSearchParams({
+      response_type: "code",
+      client_id: config.clientId,
+      redirect_uri: config.callbackUrl,
+      scope: "openid profile email",
+    });
+    return Response.redirect(\`https://\${config.domain}/authorize?\${params}\`, 302);
+  }
+
+  if (url.pathname === "/api/auth/callback") {
+    const code = url.searchParams.get("code");
+    if (!code) return new Response("Missing code", { status: 400 });
+
+    const tokenRes = await fetch(\`https://\${config.domain}/oauth/token\`, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({
+        grant_type: "authorization_code",
+        client_id: config.clientId,
+        client_secret: config.clientSecret,
+        code,
+        redirect_uri: config.callbackUrl,
+      }),
+    });
+
+    if (!tokenRes.ok) {
+      return new Response("Token exchange with Auth0 failed", { status: 502 });
+    }
+
+    const tokens = await tokenRes.json() as { id_token: string };
+    const [, payloadB64] = tokens.id_token.split(".");
+    const user = JSON.parse(atob(payloadB64)) as { email: string; name?: string; sub: string };
 
     if (options?.store && options?.secret) {
       const sessionId = generateSessionId();
       await options.store.set(sessionId, {
-        data: { email: "user@example.com", name: "${authProvider === "better-auth" ? "BetterAuth User" : "Auth0 User"}" },
-        csrf: generateCsrfToken()
+        data: { email: user.email, name: user.name ?? user.email },
+        csrf: generateCsrfToken(),
       });
       const signed = await signValue(options.secret, sessionId);
-      cookieVal = "session=" + signed + "; Path=/; HttpOnly; SameSite=Lax";
+      return new Response(null, {
+        status: 302,
+        headers: {
+          Location: "/profile",
+          "Set-Cookie": \`session=\${signed}; Path=/; HttpOnly; SameSite=Lax\`,
+        },
+      });
     }
-
-    return new Response(null, {
-      status: 302,
-      headers: {
-        "Location": "/profile",
-        "Set-Cookie": cookieVal
-      }
-    });
+    return new Response(null, { status: 302, headers: { Location: "/profile" } });
   }
 
   if (url.pathname === "/api/auth/logout") {
-    let cookieVal = "__elm_ssr_session=; Path=/; Max-Age=0; HttpOnly";
     if (options?.store && options?.secret) {
-      cookieVal = "session=; Path=/; Max-Age=0; HttpOnly";
-      const cookieHeader = request.headers.get("cookie");
-      if (cookieHeader) {
-        const sessionId = await readSignedCookie(cookieHeader, "session", options.secret);
-        if (sessionId) {
-          await options.store.delete(sessionId);
-        }
+      const incoming = request.headers.get("cookie");
+      if (incoming) {
+        const sessionId = await readSignedCookie(incoming, "session", options.secret);
+        if (sessionId) await options.store.delete(sessionId);
       }
     }
+    const params = new URLSearchParams({
+      client_id: config.clientId,
+      returnTo: new URL(request.url).origin,
+    });
     return new Response(null, {
       status: 302,
       headers: {
-        "Location": "/login",
-        "Set-Cookie": cookieVal
-      }
+        "Set-Cookie": "session=; Path=/; Max-Age=0; HttpOnly",
+        Location: \`https://\${config.domain}/oidc/logout?\${params}\`,
+      },
     });
   }
 
-  return new Response("${authProvider} Endpoint API Mock", { status: 200 });
+  return new Response("Not found", { status: 404 });
 };
 `;
 
@@ -434,6 +670,9 @@ const runtimeTemplate = (appRoot, db = false, auth = undefined) => {
   const upToRoot = appRoot === "." ? "." : appRoot.split("/").map(() => "..").join("/");
   const generatedPrefix = `${upToRoot}/generated/${appRoot === "." ? "" : appRoot}`.replace(/\/+$/, "");
 
+  const isBetterAuth = auth === "better-auth";
+  const isAuth0 = auth === "auth0";
+
   const imports = [
     `import { createWorkerApp } from "elm-ssr";`,
     `import { renderApp, type CompiledElmModule } from "elm-ssr/render";`,
@@ -441,13 +680,16 @@ const runtimeTemplate = (appRoot, db = false, auth = undefined) => {
     `import { islands, bundleSource } from "${generatedPrefix}/islands-manifest";`,
     `import { stylesheet } from "./styles";`,
     `// @ts-expect-error Generated at build time.`,
-    `import ElmRuntime from "${generatedPrefix}/app.mjs";`
+    `import ElmRuntime from "${generatedPrefix}/app.mjs";`,
+    `import { inMemoryEffects, cloudflareEffects } from "elm-ssr/effects";`
   ];
 
-  imports.push(`import { inMemoryEffects, cloudflareEffects } from "elm-ssr/effects";`);
-  if (auth) {
-    imports.push(`import { handleAuth } from "./src/Endpoints/Auth";`);
+  if (isBetterAuth) {
+    imports.push(`import { sessionEffects } from "elm-ssr/sessions";`);
+    imports.push(`import { handleAuth, betterAuthMiddleware } from "./src/Endpoints/Auth";`);
+  } else if (isAuth0) {
     imports.push(`import { memorySessionStore } from "elm-ssr/sessions";`);
+    imports.push(`import { handleAuth } from "./src/Endpoints/Auth";`);
   }
 
   let dbInit = '';
@@ -492,8 +734,9 @@ if (typeof Bun !== "undefined") {
     },`;
   }
 
-  const effectsConfig = `,
-  effects: (effect, context) => {
+  // BetterAuth: manually wrap effects with sessionEffects (no elm-ssr session cookie).
+  // Auth0 / plain: use the effects callback directly.
+  const baseEffectsBody = `(effect, context) => {
     if (context.env) {
       return cloudflareEffects(${db ? '{ dbBinding: "DB" }' : ''})(effect, context);
     }
@@ -502,9 +745,14 @@ if (typeof Bun !== "undefined") {
     })(effect, context);
   }`;
 
+  const effectsConfig = isBetterAuth
+    ? `,\n  effects: sessionEffects(${baseEffectsBody}),\n  middlewares: [betterAuthMiddleware]`
+    : `,\n  effects: ${baseEffectsBody}`;
+
+  // Auth0 keeps elm-ssr session middleware; BetterAuth manages sessions itself.
   let sessionsConfig = '';
   let authInit = '';
-  if (auth) {
+  if (isAuth0) {
     authInit = `\nexport const sessionStore = memorySessionStore();\n`;
     sessionsConfig = `,
   sessions: {
@@ -516,9 +764,21 @@ if (typeof Bun !== "undefined") {
   }
 
   let authIntercept = '';
-  if (auth) {
+  if (isBetterAuth) {
+    authIntercept = `
+// Delegate all /api/auth/* requests to BetterAuth.
+const baseWorkerFetch = worker.fetch;
+worker.fetch = async (request, env, ctx) => {
+  const url = new URL(request.url);
+  if (url.pathname.startsWith("/api/auth/")) {
+    return handleAuth(request, env);
+  }
+  return baseWorkerFetch(request, env, ctx);
+};
+`;
+  } else if (isAuth0) {
     authIntercept = `
-// Intercept Auth Provider requests
+// Delegate all /api/auth/* requests to the Auth0 handler.
 const baseWorkerFetch = worker.fetch;
 worker.fetch = async (request, env, ctx) => {
   const url = new URL(request.url);
@@ -635,175 +895,337 @@ export default worker;
 const stylesTemplate = () => `export const stylesheet = \`
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
 
-*, *::before, *::after {
-  box-sizing: border-box;
-}
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
 :root {
-  color-scheme: light;
+  --bg: #f6f5f3;
+  --surface: #ffffff;
+  --border: #e5e2dd;
+  --text: #1a1a1a;
+  --text-muted: #6b6b6b;
+  --accent: #1a1a1a;
+  --accent-hover: #333;
+  --radius: 12px;
+  --header-h: 60px;
   font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
   font-size: 16px;
-  color: #18222f;
+  color: var(--text);
+  background: var(--bg);
 }
 
-body {
-  margin: 0;
-  min-height: 100vh;
-  background:
-    radial-gradient(circle at top, rgba(255, 255, 255, 0.85), transparent 45%),
-    linear-gradient(180deg, #f8f3ea 0%, #efe7dc 100%);
+body { min-height: 100vh; }
+
+/* ── Layout ────────────────────────────────────────── */
+.page { display: flex; flex-direction: column; min-height: 100vh; }
+
+.header {
+  height: var(--header-h);
+  border-bottom: 1px solid var(--border);
+  background: rgba(246, 245, 243, 0.85);
+  backdrop-filter: blur(12px);
+  position: sticky;
+  top: 0;
+  z-index: 10;
 }
 
-.shell {
-  max-width: 44rem;
+.header-inner {
+  max-width: 1100px;
   margin: 0 auto;
-  padding: 4rem 1.5rem;
+  padding: 0 1.5rem;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
-h1 {
-  font-size: 2rem;
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
   font-weight: 700;
-  letter-spacing: -0.02em;
-  margin: 0 0 1rem;
-  color: #18222f;
-}
-
-h2 {
-  font-size: 1.4rem;
-  font-weight: 600;
-  margin: 0 0 0.75rem;
-  color: #18222f;
+  font-size: 1rem;
+  color: var(--text);
+  text-decoration: none;
+  letter-spacing: -0.01em;
 }
 
-p {
-  line-height: 1.6;
-  margin: 0 0 1rem;
-  color: #4a5568;
-}
+.brand-icon { font-size: 0.85em; opacity: 0.6; }
 
-a.link {
-  color: #18222f;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
+.nav { display: flex; align-items: center; gap: 0.25rem; }
 
-a.link:hover {
+.nav-link {
+  padding: 0.4rem 0.75rem;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-muted);
   text-decoration: none;
+  transition: background 0.12s, color 0.12s;
 }
+.nav-link:hover { background: var(--border); color: var(--text); }
+
+.main { flex: 1; padding: 3rem 1.5rem; }
+
+.container { max-width: 1100px; margin: 0 auto; }
 
-.button {
+/* ── Typography ────────────────────────────────────── */
+h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
+h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
+p  { line-height: 1.65; color: var(--text-muted); }
+
+/* ── Buttons ────────────────────────────────────────── */
+.btn {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 0.5rem;
-  border-radius: 999px;
-  border: 1.5px solid #18222f;
-  padding: 0.6rem 1.2rem;
+  padding: 0.55rem 1.1rem;
+  border-radius: 8px;
+  border: 1.5px solid transparent;
   font: inherit;
-  font-size: 0.9rem;
+  font-size: 0.875rem;
   font-weight: 500;
-  background: white;
-  color: #18222f;
   cursor: pointer;
   text-decoration: none;
-  transition: background 0.15s, color 0.15s;
+  transition: background 0.12s, color 0.12s, border-color 0.12s;
+  white-space: nowrap;
 }
 
-.button:hover {
-  background: #f0ebe3;
+.btn-primary {
+  background: var(--accent);
+  color: white;
+  border-color: var(--accent);
 }
+.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
 
-.button.primary {
-  background: #18222f;
-  color: white;
-  border-color: #18222f;
+.btn-secondary {
+  background: var(--surface);
+  color: var(--text);
+  border-color: var(--border);
+}
+.btn-secondary:hover { background: var(--bg); }
+
+.btn-square { width: 2.5rem; height: 2.5rem; padding: 0; font-size: 1.1rem; }
+
+.btn-full { width: 100%; }
+
+/* ── Cards ──────────────────────────────────────────── */
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.5rem;
+}
+
+/* ── Hero ────────────────────────────────────────────── */
+.hero {
+  text-align: center;
+  padding: 5rem 0 4rem;
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+.hero-title {
+  font-size: clamp(2.5rem, 6vw, 4rem);
+  font-weight: 800;
+  letter-spacing: -0.04em;
+  margin-bottom: 1rem;
 }
 
-.button.primary:hover {
-  background: #2d3748;
+.hero-subtitle {
+  font-size: 1.15rem;
+  margin-bottom: 2rem;
+  max-width: 480px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
+.hero-actions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+/* ── Features ────────────────────────────────────────── */
+.features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1rem;
+  margin-top: 4rem;
+}
+
+.feature-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.5rem;
+}
+
+.feature-icon { font-size: 1.5rem; display: block; margin-bottom: 0.75rem; }
+
+.feature-title {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: var(--text);
+}
+
+.feature-body { font-size: 0.9rem; }
+
+/* ── Page header ─────────────────────────────────────── */
+.page-header { margin-bottom: 2rem; }
+.page-header h1 { margin-bottom: 0.5rem; }
+.page-subtitle { font-size: 0.95rem; }
+
+/* ── Counter island ──────────────────────────────────── */
 .counter {
   display: grid;
   grid-template-columns: auto 1fr auto;
-  gap: 0.75rem;
   align-items: center;
-  margin: 2rem 0;
+  gap: 1rem;
 }
 
-.value {
+.counter-value {
   text-align: center;
-  font-size: 2.5rem;
+  font-size: 3rem;
   font-weight: 700;
-  color: #18222f;
+  letter-spacing: -0.03em;
 }
 
-.form {
+/* ── Auth pages ──────────────────────────────────────── */
+.auth-page {
   display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin-top: 1.5rem;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 3rem;
 }
 
-.field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
+.auth-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 2.5rem;
+  width: 100%;
+  max-width: 380px;
 }
 
-.field label,
-.field span {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #4a5568;
-}
+.auth-header { text-align: center; margin-bottom: 2rem; }
 
-.input {
-  width: 100%;
-  border-radius: 8px;
-  border: 1.5px solid #d1cdc7;
-  padding: 0.65rem 0.9rem;
-  font: inherit;
-  font-size: 0.95rem;
-  background: white;
-  color: #18222f;
-  transition: border-color 0.15s;
+.auth-logo {
+  font-size: 1.5rem;
+  display: block;
+  margin-bottom: 1rem;
 }
 
-.input:focus {
-  outline: none;
-  border-color: #18222f;
-}
+.auth-title { font-size: 1.5rem; margin-bottom: 0.5rem; }
+.auth-subtitle { font-size: 0.9rem; }
 
-.login-container {
-  margin-top: 2rem;
-  padding: 2rem;
-  background: white;
-  border-radius: 12px;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  max-width: 22rem;
+.auth-body { display: flex; flex-direction: column; gap: 0.75rem; }
+
+.auth-footer {
+  text-align: center;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-top: 1.5rem;
 }
 
-.card {
-  padding: 1.5rem;
-  background: white;
-  border-radius: 12px;
-  border: 1px solid rgba(0, 0, 0, 0.08);
+.avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 50%;
+  background: var(--accent);
+  color: white;
+  font-size: 1.5rem;
+  font-weight: 700;
   margin-bottom: 1rem;
 }
 
-.muted {
-  color: #718096;
-  font-size: 0.875rem;
+/* ── Error page ──────────────────────────────────────── */
+.error-page {
+  text-align: center;
+  padding: 5rem 0;
 }
 
-.error {
-  color: #c53030;
-  font-size: 0.875rem;
-  margin-top: 0.25rem;
+.error-code {
+  font-size: 6rem;
+  font-weight: 800;
+  letter-spacing: -0.05em;
+  color: var(--border);
+  margin-bottom: 0.5rem;
+}
+
+.error-message { margin-bottom: 2rem; }
+
+/* ── Forms ───────────────────────────────────────────── */
+.field { display: flex; flex-direction: column; gap: 0.35rem; }
+.field label, .field span { font-size: 0.875rem; font-weight: 500; }
+
+.input {
+  width: 100%;
+  border-radius: 8px;
+  border: 1.5px solid var(--border);
+  padding: 0.6rem 0.9rem;
+  font: inherit;
+  font-size: 0.9rem;
+  background: white;
+  color: var(--text);
+  transition: border-color 0.12s;
 }
+.input:focus { outline: none; border-color: var(--accent); }
+
+.error-hint { color: #c53030; font-size: 0.8rem; margin-top: 0.25rem; }
 \`;
 `;
 
+const devVarsContent = (auth) => {
+  if (auth === "better-auth") {
+    return `GREETING="Hello from your local .dev.vars file!"
+BETTER_AUTH_SECRET="change-me-to-a-secure-random-hmac-secret-key-that-is-at-least-32-chars"
+BETTER_AUTH_URL="http://localhost:8787"
+# Uncomment to enable social providers in src/Endpoints/Auth.ts:
+# GITHUB_CLIENT_ID="your-github-client-id"
+# GITHUB_CLIENT_SECRET="your-github-client-secret"
+`;
+  }
+  if (auth === "auth0") {
+    return `GREETING="Hello from your local .dev.vars file!"
+SESSION_SECRET="change-me-to-a-secure-random-hmac-secret-key-that-is-at-least-32-chars"
+AUTH0_DOMAIN="your-tenant.auth0.com"
+AUTH0_CLIENT_ID="your-client-id"
+AUTH0_CLIENT_SECRET="your-client-secret"
+AUTH0_CALLBACK_URL="http://localhost:8787/api/auth/callback"
+`;
+  }
+  return `GREETING="Hello from your local .dev.vars file!"
+SESSION_SECRET="change-me-to-a-secure-random-hmac-secret-key-that-is-at-least-32-chars"
+`;
+};
+
+const rootEnvContent = (auth) => {
+  if (auth === "better-auth") {
+    return `GREETING="Hello from your local .env file!"
+BETTER_AUTH_SECRET="change-me-to-a-secure-random-hmac-secret-key-that-is-at-least-32-chars"
+BETTER_AUTH_URL="http://localhost:8787"
+`;
+  }
+  if (auth === "auth0") {
+    return `GREETING="Hello from your local .env file!"
+SESSION_SECRET="change-me-to-a-secure-random-hmac-secret-key-that-is-at-least-32-chars"
+AUTH0_DOMAIN="your-tenant.auth0.com"
+AUTH0_CLIENT_ID="your-client-id"
+AUTH0_CLIENT_SECRET="your-client-secret"
+AUTH0_CALLBACK_URL="http://localhost:8787/api/auth/callback"
+`;
+  }
+  return `GREETING="Hello from your local .env file!"
+SESSION_SECRET="change-me-to-a-secure-random-hmac-secret-key-that-is-at-least-32-chars"
+`;
+};
+
 const filesForApp = (name, appRoot, options = {}) => {
   const namespace = toPascalCase(name);
   const db = options.db || !!options.auth;
@@ -815,29 +1237,34 @@ const filesForApp = (name, appRoot, options = {}) => {
     { path: `${appRoot}/runtime.ts`, content: runtimeTemplate(appRoot, db, auth) },
     { path: `${appRoot}/worker.ts`, content: workerTemplate() },
     { path: `${appRoot}/styles.ts`, content: stylesTemplate() },
-    { path: `${appRoot}/src/${namespace}/View/Shared.elm`, content: sharedTemplate(namespace) },
-    { path: `${appRoot}/src/${namespace}/Routes/Index.elm`, content: indexRouteTemplate(namespace) },
+    { path: `${appRoot}/src/${namespace}/View/Shared.elm`, content: sharedTemplate(namespace, auth) },
+    { path: `${appRoot}/src/${namespace}/Routes/Index.elm`, content: indexRouteTemplate(namespace, auth) },
     { path: `${appRoot}/src/${namespace}/Routes/Counter.elm`, content: counterRouteTemplate(namespace) },
     { path: `${appRoot}/src/${namespace}/Routes/NotFound.elm`, content: notFoundRouteTemplate(namespace) },
     { path: `${appRoot}/src/${namespace}/Islands/Counter.elm`, content: counterIslandTemplate(namespace) },
     {
       path: `${appRoot}/.dev.vars`,
-      content: `GREETING="Hello from your local .dev.vars file!"
-SESSION_SECRET="change-me-to-a-secure-random-hmac-secret-key-that-is-at-least-32-chars"
-`
+      content: devVarsContent(auth)
     }
   ];
 
   if (db) {
-    files.push({
-      path: `${appRoot}/migrations/0001_init.sql`,
-      content: `CREATE TABLE IF NOT EXISTS users (
+    let migrationContent;
+    if (auth === "better-auth") {
+      migrationContent = betterAuthMigrationTemplate();
+    } else if (auth === "auth0") {
+      migrationContent = auth0MigrationTemplate();
+    } else {
+      migrationContent = `CREATE TABLE IF NOT EXISTS users (
     id INTEGER PRIMARY KEY AUTOINCREMENT,
     email TEXT NOT NULL UNIQUE,
     name TEXT,
     created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-);
-`
+);\n`;
+    }
+    files.push({
+      path: `${appRoot}/migrations/0001_init.sql`,
+      content: migrationContent
     });
   }
 
@@ -852,7 +1279,7 @@ SESSION_SECRET="change-me-to-a-secure-random-hmac-secret-key-that-is-at-least-32
     });
     files.push({
       path: `${appRoot}/src/Endpoints/Auth.ts`,
-      content: authEndpointTemplate(auth)
+      content: auth === "better-auth" ? betterAuthEndpointTemplate() : auth0EndpointTemplate()
     });
   }
 
@@ -872,58 +1299,56 @@ SESSION_SECRET="change-me-to-a-secure-random-hmac-secret-key-that-is-at-least-32
 }
 
 @layer components {
-  .shell {
-    @apply max-w-2xl mx-auto px-6 py-16;
-  }
-
-  .button {
-    @apply inline-flex items-center gap-2 rounded-full border border-gray-900
-           px-5 py-2.5 text-sm font-medium bg-white text-gray-900 no-underline
-           cursor-pointer transition-colors hover:bg-gray-50;
-  }
-
-  .button.primary {
-    @apply bg-gray-900 text-white hover:bg-gray-700;
-  }
-
-  .counter {
-    @apply my-8 grid items-center gap-3;
-    grid-template-columns: auto 1fr auto;
-  }
-
-  .value {
-    @apply text-center text-5xl font-bold text-gray-900;
-  }
-
-  .form {
-    @apply flex flex-col gap-4 mt-6;
-  }
-
-  .field {
-    @apply flex flex-col gap-1.5;
-  }
-
-  .input {
-    @apply w-full rounded-lg border border-gray-300 px-3.5 py-2.5 text-sm
-           bg-white text-gray-900 focus:outline-none focus:border-gray-900
-           transition-colors;
-  }
-
-  .login-container {
-    @apply mt-8 p-8 bg-white rounded-xl border border-gray-100 max-w-sm;
-  }
-
-  .card {
-    @apply p-6 bg-white rounded-xl border border-gray-100 mb-4;
-  }
-
-  .muted {
-    @apply text-gray-500 text-sm;
-  }
-
-  .error {
-    @apply text-red-600 text-sm mt-1;
-  }
+  .page { @apply flex flex-col min-h-screen; }
+  .header { @apply sticky top-0 z-10 border-b border-gray-200 bg-white/80 backdrop-blur-md; }
+  .header-inner { @apply max-w-6xl mx-auto px-6 h-16 flex items-center justify-between; }
+  .brand { @apply flex items-center gap-2 font-bold text-gray-900 no-underline; }
+  .nav { @apply flex items-center gap-1; }
+  .nav-link { @apply px-3 py-1.5 rounded-md text-sm font-medium text-gray-500 no-underline hover:bg-gray-100 hover:text-gray-900 transition-colors; }
+  .main { @apply flex-1 px-6 py-12; }
+  .container { @apply max-w-6xl mx-auto; }
+  .card { @apply bg-white border border-gray-200 rounded-xl p-6; }
+
+  .btn { @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg border text-sm font-medium no-underline cursor-pointer transition-colors whitespace-nowrap; }
+  .btn-primary { @apply bg-gray-900 text-white border-gray-900 hover:bg-gray-700; }
+  .btn-secondary { @apply bg-white text-gray-900 border-gray-200 hover:bg-gray-50; }
+  .btn-square { @apply w-10 h-10 p-0 text-lg; }
+  .btn-full { @apply w-full; }
+
+  .hero { @apply text-center py-20 max-w-2xl mx-auto; }
+  .hero-title { @apply text-6xl font-extrabold tracking-tight mb-4; }
+  .hero-subtitle { @apply text-lg text-gray-500 mb-8 max-w-lg mx-auto; }
+  .hero-actions { @apply flex gap-3 justify-center flex-wrap; }
+
+  .features { @apply grid gap-4 mt-16; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
+  .feature-card { @apply bg-white border border-gray-200 rounded-xl p-6; }
+  .feature-icon { @apply text-2xl block mb-3; }
+  .feature-title { @apply text-base font-semibold mb-2; }
+  .feature-body { @apply text-sm text-gray-500; }
+
+  .page-header { @apply mb-8; }
+  .page-subtitle { @apply text-gray-500 mt-2; }
+
+  .counter { @apply grid items-center gap-4; grid-template-columns: auto 1fr auto; }
+  .counter-value { @apply text-center text-5xl font-bold tracking-tight; }
+
+  .auth-page { @apply flex justify-center pt-12; }
+  .auth-card { @apply bg-white border border-gray-200 rounded-2xl p-10 w-full max-w-sm; }
+  .auth-header { @apply text-center mb-8; }
+  .auth-logo { @apply text-2xl block mb-4; }
+  .auth-title { @apply text-2xl font-bold tracking-tight mb-2; }
+  .auth-subtitle { @apply text-sm text-gray-500; }
+  .auth-body { @apply flex flex-col gap-3; }
+  .auth-footer { @apply text-center text-xs text-gray-400 mt-6; }
+  .avatar { @apply inline-flex items-center justify-center w-14 h-14 rounded-full bg-gray-900 text-white text-2xl font-bold mb-4; }
+
+  .error-page { @apply text-center py-20; }
+  .error-code { @apply text-8xl font-extrabold text-gray-200 mb-2; }
+  .error-message { @apply text-gray-500 mb-8; }
+
+  .field { @apply flex flex-col gap-1.5; }
+  .input { @apply w-full rounded-lg border border-gray-300 px-3.5 py-2.5 text-sm bg-white focus:outline-none focus:border-gray-900 transition-colors; }
+  .error-hint { @apply text-red-600 text-xs mt-1; }
 }
 `
     });
@@ -955,7 +1380,7 @@ const normalizeAppRoot = (rawRoot, name) => {
   return candidate;
 };
 
-const ensurePackageJson = async (rootPath, appName) => {
+const ensurePackageJson = async (rootPath, appName, options = {}) => {
   const packageJsonPath = resolve(rootPath, "package.json");
   let packageJson = {};
   try {
@@ -978,9 +1403,15 @@ const ensurePackageJson = async (rootPath, appName) => {
     ...packageJson.scripts
   };
 
+  const extraDeps = {};
+  if (options.auth === "better-auth") {
+    extraDeps["better-auth"] = "latest";
+  }
+
   packageJson.devDependencies = {
     "elm-ssr": "latest",
     wrangler: "^4.0.0",
+    ...extraDeps,
     ...packageJson.devDependencies
   };
 
@@ -1026,9 +1457,7 @@ export const createAppScaffold = async (rootPath, name, options = {}) => {
   } catch {}
 
   if (!envExists) {
-    await writeFile(envPath, `GREETING="Hello from your local .env file!"
-SESSION_SECRET="change-me-to-a-secure-random-hmac-secret-key-that-is-at-least-32-chars"
-`, "utf8");
+    await writeFile(envPath, rootEnvContent(options.auth), "utf8");
   }
 
   await writeWorkspaceConfig(rootPath, {
@@ -1036,7 +1465,7 @@ SESSION_SECRET="change-me-to-a-secure-random-hmac-secret-key-that-is-at-least-32
     apps: [...config.apps, configEntry]
   });
 
-  await ensurePackageJson(rootPath, name);
+  await ensurePackageJson(rootPath, name, options);
 
   return configEntry;
 };