@timbenniks/contentstack-platform-app-scaffold 0.1.0 → 0.1.6

package/templates/nextjs/app/page.tsx.hbs

@@ -1,55 +1,159 @@
 {{#if features.oauth}}
-import { auth } from "@/lib/auth"
-{{/if}}
+import { auth, signIn, signOut } from "@/lib/auth"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+
+export const dynamic = "force-dynamic"
 
-export default {{#if features.oauth}}async {{/if}}function Home() {
-  {{#if features.oauth}}
+export default async function Home() {
   const session = await auth()
-  {{/if}}
+
+  if (session) {
+    return (
+      <main className="min-h-screen p-8 max-w-2xl mx-auto">
+        <h1 className="text-3xl font-bold mb-2">
+          Welcome, {(session.user as { name?: string })?.name ?? "User"}
+        </h1>
+        <p className="text-muted-foreground mb-8">You are signed in with Contentstack.</p>
+
+        <div className="grid gap-4">
+          {{#if features.cma}}
+          <Card>
+            <CardHeader>
+              <CardTitle>Content Management</CardTitle>
+              <CardDescription>Manage your entries and assets</CardDescription>
+            </CardHeader>
+            <CardContent className="flex gap-2">
+              <Button variant="secondary" asChild><a href="/entries">Entries</a></Button>
+              <Button variant="secondary" asChild><a href="/assets">Assets</a></Button>
+            </CardContent>
+          </Card>
+          {{/if}}
+          {{#if features.launch}}
+          <Card>
+            <CardHeader>
+              <CardTitle>Launch</CardTitle>
+              <CardDescription>Manage your deployment projects</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Button variant="secondary" asChild><a href="/launch">Projects</a></Button>
+            </CardContent>
+          </Card>
+          {{/if}}
+          {{#if features.brandkit}}
+          <Card>
+            <CardHeader>
+              <CardTitle>Brand Kit AI</CardTitle>
+              <CardDescription>Manage your brand kits and voice profiles</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Button variant="secondary" asChild><a href="/brandkit">Brand Kits</a></Button>
+            </CardContent>
+          </Card>
+          {{/if}}
+        </div>
+
+        <form
+          className="mt-8"
+          action={async () => {
+            "use server"
+            await signOut({ redirectTo: "/" })
+          }}
+        >
+          <Button variant="outline" type="submit">Sign Out</Button>
+        </form>
+      </main>
+    )
+  }
 
   return (
-    <main style=\{{ padding: "2rem", fontFamily: "system-ui, sans-serif" }}>
-      <h1>{{projectName}}</h1>
-      <p>Region: <code>{{region}}</code></p>
-      <p>Built with <a href="https://github.com/contentstack/platform-sdk">Contentstack Platform SDK</a></p>
-
-      <h2>Getting Started</h2>
-      <ol>
-        <li>Copy <code>.env.example</code> to <code>.env.local</code></li>
-        <li>Fill in your Contentstack credentials</li>
-        <li>Start building!</li>
-      </ol>
-      {{#if features.oauth}}
-
-      <h2>Authentication</h2>
-      {session ? (
-        <p>Signed in. <a href="/api/auth/signout">Sign out</a></p>
-      ) : (
-        <p><a href="/api/auth/signin">Sign in with Contentstack</a></p>
-      )}
-      {{/if}}
+    <main className="min-h-screen flex items-center justify-center p-8">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle className="text-2xl">{{projectName}}</CardTitle>
+          <CardDescription>
+            Region: <code className="text-xs bg-muted px-1 py-0.5 rounded">{{region}}</code>
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <ol className="list-decimal list-inside text-sm text-muted-foreground space-y-1">
+            <li>Copy <code className="text-xs bg-muted px-1 py-0.5 rounded">.env.example</code> to <code className="text-xs bg-muted px-1 py-0.5 rounded">.env.local</code></li>
+            <li>Fill in your Contentstack credentials</li>
+            <li>Start building!</li>
+          </ol>
+          <form
+            action={async () => {
+              "use server"
+              await signIn("contentstack", { redirectTo: "/" })
+            }}
+          >
+            <Button className="w-full" type="submit">Sign in with Contentstack</Button>
+          </form>
+        </CardContent>
+      </Card>
+    </main>
+  )
+}
+{{else}}
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+
+export default function Home() {
+  return (
+    <main className="min-h-screen p-8 max-w-2xl mx-auto">
+      <h1 className="text-3xl font-bold mb-2">{{projectName}}</h1>
+      <p className="text-muted-foreground mb-8">
+        Region: <code className="text-xs bg-muted px-1 py-0.5 rounded">{{region}}</code>
+      </p>
+
+      <Card className="mb-6">
+        <CardHeader>
+          <CardTitle>Getting Started</CardTitle>
+          <CardDescription>Set up your Contentstack credentials to begin</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ol className="list-decimal list-inside text-sm text-muted-foreground space-y-1">
+            <li>Copy <code className="text-xs bg-muted px-1 py-0.5 rounded">.env.example</code> to <code className="text-xs bg-muted px-1 py-0.5 rounded">.env.local</code></li>
+            <li>Fill in your Contentstack credentials</li>
+            <li>Start building!</li>
+          </ol>
+        </CardContent>
+      </Card>
       {{#if features.cma}}
 
-      <h2>Content Management</h2>
-      <ul>
-        <li><a href="/entries">Entries</a></li>
-        <li><a href="/assets">Assets</a></li>
-      </ul>
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Content Management</CardTitle>
+        </CardHeader>
+        <CardContent className="flex gap-2">
+          <Button variant="secondary" asChild><a href="/entries">Entries</a></Button>
+          <Button variant="secondary" asChild><a href="/assets">Assets</a></Button>
+        </CardContent>
+      </Card>
       {{/if}}
       {{#if features.launch}}
 
-      <h2>Launch</h2>
-      <ul>
-        <li><a href="/launch">Projects</a></li>
-      </ul>
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Launch</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Button variant="secondary" asChild><a href="/launch">Projects</a></Button>
+        </CardContent>
+      </Card>
       {{/if}}
       {{#if features.brandkit}}
 
-      <h2>Brand Kit AI</h2>
-      <ul>
-        <li><a href="/brandkit">Brand Kits</a></li>
-      </ul>
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Brand Kit AI</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Button variant="secondary" asChild><a href="/brandkit">Brand Kits</a></Button>
+        </CardContent>
+      </Card>
       {{/if}}
     </main>
   )
 }
+{{/if}}

package/templates/nextjs/app/providers.tsx.hbs

@@ -4,7 +4,19 @@ import { ContentstackProvider } from "@timbenniks/contentstack-platform-sdk/reac
 
 export function Providers({ children }: { children: React.ReactNode }) {
   return (
-    <ContentstackProvider region="{{region}}">
+    <ContentstackProvider
+      region={process.env.NEXT_PUBLIC_CONTENTSTACK_REGION as "{{region}}" ?? "{{region}}"}
+      apiKey={process.env.NEXT_PUBLIC_CONTENTSTACK_API_KEY ?? ""}
+      proxyBasePath="/api/cma"
+{{#if features.launch}}
+      organizationUid={process.env.NEXT_PUBLIC_CONTENTSTACK_ORGANIZATION_UID ?? ""}
+{{else if features.brandkit}}
+      organizationUid={process.env.NEXT_PUBLIC_CONTENTSTACK_ORGANIZATION_UID ?? ""}
+{{/if}}
+{{#if features.brandkit}}
+      brandKitUid={process.env.NEXT_PUBLIC_CONTENTSTACK_BRAND_KIT_UID ?? ""}
+{{/if}}
+    >
       {children}
     </ContentstackProvider>
   )

package/templates/nextjs/lib/auth.ts.hbs

@@ -1,12 +1,50 @@
-import { createContentstackAuth } from "@timbenniks/contentstack-platform-sdk/server/middleware"
 import type { ContentstackRegion } from "@timbenniks/contentstack-platform-sdk/regions"
+import { createContentstackAuth } from "@timbenniks/contentstack-platform-sdk/server/middleware"
+import type { NextRequest } from "next/server"
+
+type AuthConfig = Awaited<ReturnType<typeof createContentstackAuth>>
+
+let _authConfig: AuthConfig | null = null
+
+async function getAuthConfig(): Promise<AuthConfig> {
+  if (!_authConfig) {
+    _authConfig = await createContentstackAuth({
+      region: (process.env.CONTENTSTACK_REGION ?? "{{region}}") as ContentstackRegion,
+      appId: process.env.CONTENTSTACK_APP_ID!,
+      clientId: process.env.CONTENTSTACK_CLIENT_ID!,
+      clientSecret: process.env.CONTENTSTACK_CLIENT_SECRET!,
+      secret: process.env.AUTH_SECRET!,
+      scopes: [{{#each scopes}}"{{this}}"{{#unless @last}}, {{/unless}}{{/each}}],
+      trustHost: true,
+      signInPage: "/",
+      errorPage: "/",
+    })
+  }
+  return _authConfig
+}
+
+export const handlers = {
+  GET: async (req: NextRequest) => {
+    const config = await getAuthConfig()
+    return config.handlers.GET(req)
+  },
+  POST: async (req: NextRequest) => {
+    const config = await getAuthConfig()
+    return config.handlers.POST(req)
+  },
+}
+
+export async function auth() {
+  const config = await getAuthConfig()
+  return config.auth()
+}
+
+export async function signIn(provider?: string, options?: Record<string, unknown>) {
+  const config = await getAuthConfig()
+  return config.signIn(provider, options)
+}
 
-export const { handlers, auth } = await createContentstackAuth({
-  region: (process.env.CONTENTSTACK_REGION ?? "{{region}}") as ContentstackRegion,
-  appId: process.env.CONTENTSTACK_APP_ID!,
-  clientId: process.env.CONTENTSTACK_CLIENT_ID!,
-  clientSecret: process.env.CONTENTSTACK_CLIENT_SECRET!,
-  secret: process.env.AUTH_SECRET!,
-  scopes: [{{#each scopes}}"{{this}}"{{#unless @last}}, {{/unless}}{{/each}}],
-  trustHost: true,
-})
+export async function signOut(options?: Record<string, unknown>) {
+  const config = await getAuthConfig()
+  return config.signOut(options)
+}

package/templates/nextjs/manifest.json

@@ -1,10 +1,9 @@
 [
-  { "path": "package.json" },
   { "path": ".env.example" },
-  { "path": ".gitignore" },
-  { "path": "tsconfig.json" },
-  { "path": "next.config.js" },
+  { "path": "next.config.ts" },
+  { "path": "types/next-auth.d.ts", "requiredFeatures": ["oauth"] },
   { "path": "lib/auth.ts", "requiredFeatures": ["oauth"] },
+  { "path": "app/globals.css" },
   { "path": "app/layout.tsx" },
   { "path": "app/page.tsx" },
   { "path": "app/providers.tsx", "anyFeatures": ["cma", "launch", "brandkit"] },

package/templates/nextjs/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next"
+
+const nextConfig: NextConfig = {
+  transpilePackages: ["@timbenniks/contentstack-platform-sdk"],
+}
+
+export default nextConfig

package/templates/nextjs/types/next-auth.d.ts.hbs

@@ -0,0 +1,8 @@
+import "next-auth"
+
+declare module "next-auth" {
+  interface Session {
+    accessToken?: string
+    error?: "RefreshAccessTokenError"
+  }
+}

package/templates/nextjs/next.config.js

@@ -1,4 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {}
-
-module.exports = nextConfig

package/templates/nextjs/package.json.hbs

@@ -1,24 +0,0 @@
-{
-  "name": "{{projectName}}",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "next": "^15.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@timbenniks/contentstack-platform-sdk": "^{{sdkVersion}}"{{#if features.oauth}},
-    "next-auth": "5.0.0-beta.30"{{/if}}
-  },
-  "devDependencies": {
-    "typescript": "^5.5.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@types/node": "^22.0.0"
-  }
-}

package/templates/nextjs/tsconfig.json

@@ -1,21 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [{ "name": "next" }],
-    "paths": { "@/*": ["./*"] }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
-}