create-absolutejs 0.5.0 → 0.6.0

package/dist/generators/project/generateImportsBlock.js

@@ -1,7 +1,7 @@
 import { mkdirSync, writeFileSync } from 'fs';
 import { join } from 'path';
 import { isDrizzleDialect } from '../../typeGuards';
-export const generateImportsBlock = ({ backendDirectory, deps, flags, orm, authProvider, databaseEngine, databaseHost, frontendDirectories }) => {
+export const generateImportsBlock = ({ backendDirectory, deps, flags, orm, authOption, databaseEngine, databaseHost, frontendDirectories }) => {
     const rawImports = [];
     const pushHandler = (cond, name) => cond &&
         rawImports.push(`import { ${name} } from '@absolutejs/absolute'`);
@@ -38,12 +38,12 @@ export const generateImportsBlock = ({ backendDirectory, deps, flags, orm, authP
     if (flags.requiresVue && !flags.requiresSvelte && vueDir !== undefined)
         rawImports.push(`import VueExample from '${buildExamplePath(vueDir, 'VueExample.vue')}'`);
     const connectorImports = {
-        neon: [`import { Pool } from '@neondatabase/serverless'`],
-        planetscale: [`import { connect } from '@planetscale/database'`],
+        neon: [`import { neon } from '@neondatabase/serverless'`],
+        planetscale: [`import { Client } from '@planetscale/database'`],
         turso: [`import { createClient } from '@libsql/client'`]
     };
     const dialectImports = {
-        neon: [`import { drizzle } from 'drizzle-orm/neon-serverless'`],
+        neon: [`import { drizzle } from 'drizzle-orm/neon-http'`],
         planetscale: [
             `import { drizzle } from 'drizzle-orm/planetscale-serverless'`
         ],
@@ -58,11 +58,8 @@ export const generateImportsBlock = ({ backendDirectory, deps, flags, orm, authP
             ...(databaseEngine === 'sqlite' && !isRemoteHost
                 ? []
                 : [`import { getEnv } from '@absolutejs/absolute'`]),
-            ...(authProvider === 'absoluteAuth'
-                ? [
-                    `import { schema } from '../../db/schema'`,
-                    `import { User } from '../types/databaseTypes'`
-                ]
+            ...(authOption === 'abs'
+                ? [`import { schema } from '../../db/schema'`]
                 : [`import { schema } from '../../db/schema'`])
         ]
     };
@@ -87,7 +84,12 @@ export const generateImportsBlock = ({ backendDirectory, deps, flags, orm, authP
                     `import { SQL } from 'bun'`,
                     `import { drizzle } from 'drizzle-orm/bun-sql'`
                 ]
-                : [],
+                : isRemoteHost && databaseHost === 'planetscale'
+                    ? [
+                        `import { drizzle } from 'drizzle-orm/node-postgres'`,
+                        `import { Pool } from 'pg'`
+                    ]
+                    : [],
             singlestore: [
                 `import { drizzle } from 'drizzle-orm/singlestore'`,
                 `import { createPool } from 'mysql2/promise'`
@@ -127,15 +129,20 @@ export const generateImportsBlock = ({ backendDirectory, deps, flags, orm, authP
                 `import { SQL } from 'bun'`,
                 `import { getEnv } from '@absolutejs/absolute'`
             ],
-        postgresql: isRemoteHost
+        postgresql: isRemoteHost && databaseHost === 'neon'
             ? [
                 ...connectorImports[databaseHost],
                 `import { getEnv } from '@absolutejs/absolute'`
             ]
-            : [
-                `import { SQL } from 'bun'`,
-                `import { getEnv } from '@absolutejs/absolute'`
-            ],
+            : isRemoteHost && databaseHost === 'planetscale'
+                ? [
+                    `import { Pool } from 'pg'`,
+                    `import { getEnv } from '@absolutejs/absolute'`
+                ]
+                : [
+                    `import { SQL } from 'bun'`,
+                    `import { getEnv } from '@absolutejs/absolute'`
+                ],
         singlestore: [
             `import { createPool } from 'mysql2/promise'`,
             `import { getEnv } from '@absolutejs/absolute'`
@@ -150,7 +157,9 @@ export const generateImportsBlock = ({ backendDirectory, deps, flags, orm, authP
     if (orm === 'drizzle') {
         rawImports.push(...ormImports[orm]);
     }
-    if (orm === 'drizzle' && isRemoteHost) {
+    if (orm == 'drizzle' &&
+        isRemoteHost &&
+        !(databaseEngine === 'postgresql' && databaseHost === 'planetscale')) {
         rawImports.push(...connectorImports[databaseHost], ...dialectImports[databaseHost]);
     }
     if (orm === 'drizzle' && isDrizzleDialect(databaseEngine)) {
@@ -159,13 +168,9 @@ export const generateImportsBlock = ({ backendDirectory, deps, flags, orm, authP
     if (noOrm && hasDatabase && noOrmImports[databaseEngine]) {
         rawImports.push(...noOrmImports[databaseEngine]);
     }
-    if (authProvider === 'absoluteAuth')
-        rawImports.push(`import { absoluteAuth, instantiateUserSession } from '@absolutejs/auth'`, ...(hasDatabase
-            ? [
-                `import { createUser, getUser } from './handlers/userHandlers'`
-            ]
-            : []));
-    if (hasDatabase && (authProvider === undefined || authProvider === 'none'))
+    if (authOption === 'abs')
+        rawImports.push(`import { absoluteAuthConfig } from './utils/absoluteAuthConfig'`, `import { t } from 'elysia'`, `import { authProviderOption, providers, userSessionIdTypebox, getStatus } from '@absolutejs/auth'`);
+    if (hasDatabase && (authOption === undefined || authOption === 'none'))
         rawImports.push(`import { getCountHistory, createCountHistory } from './handlers/countHistoryHandlers'`, `import { t } from 'elysia'`);
     if (flags.requiresVue && flags.requiresSvelte) {
         const utilsDir = join(backendDirectory, 'utils');

package/dist/generators/project/generateRoutesBlock.d.ts

@@ -1,10 +1,10 @@
-import type { AuthProvider, FrontendDirectories } from '../../types';
+import type { AuthOption, FrontendDirectories } from '../../types';
 import type { FrameworkFlags } from './computeFlags';
 type GenerateRoutesBlockProps = {
     flags: FrameworkFlags;
     frontendDirectories: FrontendDirectories;
-    authProvider: AuthProvider;
+    authOption: AuthOption;
     buildDirectory: string;
 };
-export declare const generateRoutesBlock: ({ flags, frontendDirectories, authProvider, buildDirectory }: GenerateRoutesBlockProps) => string;
+export declare const generateRoutesBlock: ({ flags, frontendDirectories, authOption, buildDirectory }: GenerateRoutesBlockProps) => string;
 export {};

package/dist/generators/project/generateRoutesBlock.js

@@ -1,73 +1,84 @@
 import { isFrontend } from '../../typeGuards';
-export const generateRoutesBlock = ({ flags, frontendDirectories, authProvider, buildDirectory }) => {
+export const generateRoutesBlock = ({ flags, frontendDirectories, authOption, buildDirectory }) => {
     const routes = [];
+    const wrap = (handlerCall) => authOption === 'abs'
+        ? `async ({ cookie: { auth_provider, user_session_id }, store: { session }, status }) => {
+    const { user, error } = await getStatus(session, user_session_id);
+
+    if (error) {
+      return status(error.code, error.message);
+    }
+
+    const providerConfiguration =
+      auth_provider.value && providers[auth_provider.value];
+
+    return ${handlerCall};
+  }`
+        : `() => ${handlerCall}`;
     const createHandlerCall = (frontend, directory) => {
         const base = `${buildDirectory}${directory ? `/${directory}` : ''}/pages`;
         if (frontend === 'html')
             return `handleHTMLPageRequest(\`${base}/HTMLExample.html\`)`;
         if (frontend === 'htmx')
             return `handleHTMXPageRequest(\`${base}/HTMXExample.html\`)`;
-        if (frontend === 'react')
+        if (frontend === 'react') {
+            const reactProps = authOption === 'abs'
+                ? `{ initialCount: 0, cssPath: asset(manifest, 'ReactExampleCSS'), user, providerConfiguration }`
+                : `{ initialCount: 0, cssPath: asset(manifest, 'ReactExampleCSS') }`;
             return `handleReactPageRequest(
-        ReactExample,
-        asset(manifest, 'ReactExampleIndex'),
-        { initialCount: 0, cssPath: asset(manifest, 'ReactExampleCSS') }
-      )`;
+    ReactExample,
+    asset(manifest, 'ReactExampleIndex'),
+    ${reactProps}
+  )`;
+        }
         if (frontend === 'svelte')
             return `handleSveltePageRequest(
-        SvelteExample,
-        asset(manifest, 'SvelteExample'),
-        asset(manifest, 'SvelteExampleIndex'),
-        { initialCount: 0, cssPath: asset(manifest, 'SvelteExampleCSS') }
-      )`;
-        if (frontend === 'vue')
-            return flags.requiresSvelte
-                ? `handleVuePageRequest(
-          vueImports.VueExample,
-          asset(manifest, 'VueExample'),
-          asset(manifest, 'VueExampleIndex'),
-          generateHeadElement({
-            cssPath: asset(manifest, 'VueExampleCSS'),
-            title: 'AbsoluteJS + Vue',
-            description: 'A Vue.js example with AbsoluteJS'
-          }),
-          { initialCount: 0 }
-        )`
-                : `handleVuePageRequest(
-          VueExample,
-          asset(manifest, 'VueExample'),
-          asset(manifest, 'VueExampleIndex'),
-          generateHeadElement({
-            cssPath: asset(manifest, 'VueExampleCSS'),
-            title: 'AbsoluteJS + Vue',
-            description: 'A Vue.js example with AbsoluteJS'
-          }),
-          { initialCount: 0 }
-        )`;
+    SvelteExample,
+    asset(manifest, 'SvelteExample'),
+    asset(manifest, 'SvelteExampleIndex'),
+    { initialCount: 0, cssPath: asset(manifest, 'SvelteExampleCSS') }
+  )`;
+        if (frontend === 'vue') {
+            const vueComponent = flags.requiresSvelte
+                ? 'vueImports.VueExample'
+                : 'VueExample';
+            return `handleVuePageRequest(
+    ${vueComponent},
+    asset(manifest, 'VueExample'),
+    asset(manifest, 'VueExampleIndex'),
+    generateHeadElement({
+      cssPath: asset(manifest, 'VueExampleCSS'),
+      title: 'AbsoluteJS + Vue',
+      description: 'A Vue.js example with AbsoluteJS'
+    }),
+    { initialCount: 0 }
+  )`;
+        }
         return '';
     };
     Object.entries(frontendDirectories).forEach(([frontend, directory], entryIndex) => {
         if (!isFrontend(frontend))
             return;
         const handlerCall = createHandlerCall(frontend, directory);
-        if (entryIndex === 0)
-            routes.push(`.get('/', () => ${handlerCall})`);
+        if (!handlerCall)
+            return;
+        const handler = wrap(handlerCall);
+        if (entryIndex === 0) {
+            routes.push(`.get('/', ${handler})`);
+        }
         if (frontend === 'htmx') {
-            routes.push(`.get('/htmx', () => ${handlerCall})`, `.post('/htmx/reset', ({ resetScopedStore }) => resetScopedStore())`, `.get('/htmx/count', ({ scopedStore }) => scopedStore.count)`, `.post('/htmx/increment', ({ scopedStore }) => ++scopedStore.count)`);
+            routes.push(`.get('/htmx', ${handler})`);
+            routes.push(`.post('/htmx/reset', ({ resetScopedStore }) => resetScopedStore())`, `.get('/htmx/count', ({ scopedStore }) => scopedStore.count)`, `.post('/htmx/increment', ({ scopedStore }) => ++scopedStore.count)`);
         }
         else {
-            routes.push(`.get('/${frontend}', () => ${handlerCall})`);
+            routes.push(`.get('/${frontend}', ${handler})`);
         }
     });
-    if (authProvider === undefined || authProvider === 'none') {
+    if (authOption === undefined || authOption === 'none') {
         routes.push(`.get('/count/:uid', ({ params: { uid } }) => getCountHistory(db, uid), {
-    params: t.Object({
-      uid: t.Number()
-    })
+    params: t.Object({ uid: t.Number() })
   })`, `.post('/count', ({ body: { count } }) => createCountHistory(db, count), {
-    body: t.Object({
-      count: t.Number()
-    })
+    body: t.Object({ count: t.Number() })
   })`);
     }
     return routes.join('\n  ');

package/dist/generators/project/generateServer.d.ts

@@ -1,6 +1,6 @@
 import type { CreateConfiguration } from '../../types';
-type CreateServerFileProps = Pick<CreateConfiguration, 'tailwind' | 'authProvider' | 'databaseEngine' | 'plugins' | 'buildDirectory' | 'databaseHost' | 'orm' | 'assetsDirectory' | 'frontendDirectories'> & {
+type CreateServerFileProps = Pick<CreateConfiguration, 'tailwind' | 'authOption' | 'databaseEngine' | 'plugins' | 'buildDirectory' | 'databaseHost' | 'orm' | 'assetsDirectory' | 'frontendDirectories'> & {
     backendDirectory: string;
 };
-export declare const generateServerFile: ({ tailwind, authProvider, plugins, buildDirectory, databaseEngine, databaseHost, orm, assetsDirectory, frontendDirectories, backendDirectory }: CreateServerFileProps) => void;
+export declare const generateServerFile: ({ tailwind, authOption, plugins, buildDirectory, databaseEngine, databaseHost, orm, assetsDirectory, frontendDirectories, backendDirectory }: CreateServerFileProps) => void;
 export {};

package/dist/generators/project/generateServer.js

@@ -1,4 +1,4 @@
-import { writeFileSync, mkdirSync } from 'fs';
+import { writeFileSync } from 'fs';
 import { join } from 'path';
 import { collectDependencies } from './collectDependencies';
 import { computeFlags } from './computeFlags';
@@ -6,13 +6,12 @@ import { generateBuildBlock } from './generateBuildBlock';
 import { generateDBBlock } from './generateDBBlock';
 import { generateImportsBlock } from './generateImportsBlock';
 import { generateRoutesBlock } from './generateRoutesBlock';
-import { generateUseBlock } from './generateUseBlock';
-export const generateServerFile = ({ tailwind, authProvider, plugins, buildDirectory, databaseEngine, databaseHost, orm, assetsDirectory, frontendDirectories, backendDirectory }) => {
+export const generateServerFile = ({ tailwind, authOption, plugins, buildDirectory, databaseEngine, databaseHost, orm, assetsDirectory, frontendDirectories, backendDirectory }) => {
     const serverFilePath = join(backendDirectory, 'server.ts');
     const flags = computeFlags(frontendDirectories);
-    const deps = collectDependencies({ authProvider, flags, plugins });
+    const deps = collectDependencies({ authOption, flags, plugins });
     const importsBlock = generateImportsBlock({
-        authProvider,
+        authOption,
         backendDirectory,
         databaseEngine,
         databaseHost,
@@ -31,13 +30,30 @@ export const generateServerFile = ({ tailwind, authProvider, plugins, buildDirec
     if (databaseEngine && databaseEngine !== 'none') {
         dbBlock = generateDBBlock({ databaseEngine, databaseHost, orm });
     }
-    const useBlock = generateUseBlock({
-        databaseEngine,
-        deps,
-        orm
-    });
+    const useBlock = deps
+        .flatMap((dependency) => dependency.imports ?? [])
+        .filter((pluginImport) => pluginImport.isPlugin)
+        .map((pluginImport) => {
+        if (pluginImport.packageName === 'absoluteAuth') {
+            return `.use(absoluteAuth(absoluteAuthConfig(db)))`;
+        }
+        if (pluginImport.config === undefined) {
+            return `.use(${pluginImport.packageName})`;
+        }
+        if (pluginImport.config === null) {
+            return `.use(${pluginImport.packageName}())`;
+        }
+        return `.use(${pluginImport.packageName}(${JSON.stringify(pluginImport.config)}))`;
+    })
+        .join('\n');
+    const guardBlock = `.guard({
+			cookie: t.Cookie({
+				auth_provider: t.Optional(authProviderOption),
+				user_session_id: userSessionIdTypebox
+			})
+		})`;
     const routesBlock = generateRoutesBlock({
-        authProvider,
+        authOption,
         buildDirectory,
         flags,
         frontendDirectories
@@ -48,12 +64,12 @@ ${manifestBlock}
 ${dbBlock}
 new Elysia()
 ${useBlock}
+${authOption === 'abs' ? guardBlock : ''}
   ${routesBlock}
   .on('error', err => {
     const { request } = err
     console.error(\`Server error on \${request.method} \${request.url}: \${err.message}\`)
   });
 `;
-    mkdirSync(backendDirectory, { recursive: true });
     writeFileSync(serverFilePath, content);
 };

package/dist/generators/project/scaffoldBackend.d.ts

@@ -0,0 +1,6 @@
+import { CreateConfiguration } from '../../types';
+type ScaffoldBackendProps = Pick<CreateConfiguration, 'assetsDirectory' | 'absProviders' | 'authOption' | 'buildDirectory' | 'databaseEngine' | 'databaseHost' | 'frontendDirectories' | 'orm' | 'plugins' | 'tailwind'> & {
+    backendDirectory: string;
+};
+export declare const scaffoldBackend: ({ assetsDirectory, authOption, absProviders, backendDirectory, buildDirectory, databaseEngine, databaseHost, frontendDirectories, orm, plugins, tailwind }: ScaffoldBackendProps) => void;
+export {};

package/dist/generators/project/scaffoldBackend.js

@@ -0,0 +1,23 @@
+import { mkdirSync, writeFileSync } from 'fs';
+import { join } from 'path';
+import { generateAbsoluteAuthConfig } from './generateAbsoluteAuthConfig';
+import { generateServerFile } from './generateServer';
+export const scaffoldBackend = ({ assetsDirectory, authOption, absProviders, backendDirectory, buildDirectory, databaseEngine, databaseHost, frontendDirectories, orm, plugins, tailwind }) => {
+    generateServerFile({
+        assetsDirectory,
+        authOption,
+        backendDirectory,
+        buildDirectory,
+        databaseEngine,
+        databaseHost,
+        frontendDirectories,
+        orm,
+        plugins,
+        tailwind
+    });
+    if (authOption === 'abs') {
+        mkdirSync(join(backendDirectory, 'utils'), { recursive: true });
+        const absoluteAuthConfig = generateAbsoluteAuthConfig(absProviders);
+        writeFileSync(join(backendDirectory, 'utils', 'absoluteAuthConfig.ts'), absoluteAuthConfig, 'utf-8');
+    }
+};

package/dist/generators/project/scaffoldFrontends.d.ts

@@ -1,8 +1,8 @@
 import type { CreateConfiguration } from '../../types';
-type ScaffoldFrontendsProps = Pick<CreateConfiguration, 'useHTMLScripts' | 'frontendDirectories' | 'frontends'> & {
+type ScaffoldFrontendsProps = Pick<CreateConfiguration, 'useHTMLScripts' | 'frontendDirectories' | 'assetsDirectory' | 'frontends' | 'authOption' | 'absProviders'> & {
     frontendDirectory: string;
     templatesDirectory: string;
     projectAssetsDirectory: string;
 };
-export declare const scaffoldFrontends: ({ frontendDirectory, templatesDirectory, projectAssetsDirectory, useHTMLScripts, frontendDirectories, frontends }: ScaffoldFrontendsProps) => void;
+export declare const scaffoldFrontends: ({ frontendDirectory, assetsDirectory, absProviders, authOption, templatesDirectory, projectAssetsDirectory, useHTMLScripts, frontendDirectories, frontends }: ScaffoldFrontendsProps) => void;
 export {};

package/dist/generators/project/scaffoldFrontends.js

@@ -1,11 +1,11 @@
-import { cpSync, mkdirSync } from 'node:fs';
-import { join } from 'node:path';
+import { cpSync, mkdirSync } from 'fs';
+import { join } from 'path';
 import { scaffoldHTML } from '../html/scaffoldHTML';
 import { scaffoldHTMX } from '../htmx/scaffoldHTMX';
 import { scaffoldReact } from '../react/scaffoldReact';
 import { scaffoldSvelte } from '../svelte/scaffoldSvelte';
 import { scaffoldVue } from '../vue/scaffoldVue';
-export const scaffoldFrontends = ({ frontendDirectory, templatesDirectory, projectAssetsDirectory, useHTMLScripts, frontendDirectories, frontends }) => {
+export const scaffoldFrontends = ({ frontendDirectory, assetsDirectory, absProviders, authOption, templatesDirectory, projectAssetsDirectory, useHTMLScripts, frontendDirectories, frontends }) => {
     const stylesTargetDirectory = join(frontendDirectory, 'styles');
     cpSync(join(templatesDirectory, 'styles'), stylesTargetDirectory, {
         recursive: true
@@ -25,6 +25,9 @@ export const scaffoldFrontends = ({ frontendDirectory, templatesDirectory, proje
         switch (frontendName) {
             case 'react':
                 scaffoldReact({
+                    absProviders,
+                    assetsDirectory,
+                    authOption,
                     frontends,
                     isSingleFrontend,
                     projectAssetsDirectory,
@@ -34,6 +37,9 @@ export const scaffoldFrontends = ({ frontendDirectory, templatesDirectory, proje
                 break;
             case 'svelte':
                 scaffoldSvelte({
+                    absProviders,
+                    assetsDirectory,
+                    authOption,
                     frontends,
                     isSingleFrontend,
                     projectAssetsDirectory,
@@ -43,6 +49,9 @@ export const scaffoldFrontends = ({ frontendDirectory, templatesDirectory, proje
                 break;
             case 'vue':
                 scaffoldVue({
+                    absProviders,
+                    assetsDirectory,
+                    authOption,
                     frontends,
                     projectAssetsDirectory,
                     targetDirectory,
@@ -54,6 +63,9 @@ export const scaffoldFrontends = ({ frontendDirectory, templatesDirectory, proje
                 break;
             case 'html':
                 scaffoldHTML({
+                    absProviders,
+                    assetsDirectory,
+                    authOption,
                     frontends,
                     isSingleFrontend,
                     projectAssetsDirectory,
@@ -64,6 +76,9 @@ export const scaffoldFrontends = ({ frontendDirectory, templatesDirectory, proje
                 break;
             case 'htmx':
                 scaffoldHTMX({
+                    absProviders,
+                    assetsDirectory,
+                    authOption,
                     frontends,
                     isSingleFrontend,
                     projectAssetsDirectory,

package/dist/generators/react/generateReactComponents.d.ts

@@ -0,0 +1,5 @@
+import { ProviderOption } from '@absolutejs/auth';
+import { AuthOption, Frontend } from '../../types';
+export declare const generateDropdownComponent: (frontends: Frontend[]) => string;
+export declare const generateSignInComponent: (absProviders: ProviderOption[] | undefined) => string;
+export declare const generateReactExamplePage: (authOption: AuthOption) => string;

package/dist/generators/react/generateReactComponents.js

@@ -0,0 +1,126 @@
+import { formatNavLink } from '../../utils/formatNavLink';
+export const generateDropdownComponent = (frontends) => {
+    const navLinks = frontends.map(formatNavLink).join('\n\t\t\t');
+    return `import { useState } from 'react';
+      
+      export const Dropdown = () => {
+        const [isOpen, setIsOpen] = useState(false);
+      
+        return (
+            <details
+                onPointerEnter={() => setIsOpen(true)}
+                onPointerLeave={() => setIsOpen(false)}
+                open={isOpen}
+            >
+                <summary>Pages</summary>
+                <nav>
+                    ${navLinks}
+                </nav>
+            </details>
+        );
+      };
+      `;
+};
+export const generateSignInComponent = (absProviders) => `import { useState } from 'react';
+import { OAuthLink } from './OAuthLink';
+
+export const SignIn = () => {
+	const [isOpen, setIsOpen] = useState(false);
+	
+	return (
+		<details
+			onPointerEnter={() => setIsOpen(true)}
+			onPointerLeave={() => setIsOpen(false)}
+			open={isOpen}
+		>
+			<summary>Sign In</summary>
+			<nav>
+				${absProviders && absProviders.length > 0
+    ? absProviders
+        .map((provider) => {
+        const logoUrl = `/assets/svg/google-logo.svg`;
+        const name = provider.charAt(0).toUpperCase() +
+            provider.slice(1).toLowerCase();
+        return `<OAuthLink provider="${provider}" logoUrl="${logoUrl}" name="${name}" mode="in" />`;
+    })
+        .join('\n\t\t\t')
+    : `<p>No OAuth providers configured</p>`}
+			</nav>
+		</details>
+	);
+}
+`;
+export const generateReactExamplePage = (authOption) => {
+    const useBlockReturn = authOption === 'abs';
+    const propsType = `
+		type ReactExampleProps = { 
+			initialCount: number; 
+			cssPath: string;
+			${authOption === 'abs' ? 'user: User | null;\n\tproviderConfiguration: ProviderConfiguration | undefined;' : ''}
+		};
+	`;
+    const fnSignature = authOption === 'abs'
+        ? `export const ReactExample = ({ initialCount, cssPath, user, providerConfiguration }: ReactExampleProps) => {`
+        : `export const ReactExample = ({ initialCount, cssPath }: ReactExampleProps) => (`;
+    const extractProps = `	const userImage =
+		user?.metadata && providerConfiguration?.picture
+			? extractPropFromIdentity(
+					user.metadata,
+					providerConfiguration.picture,
+					'string'
+				)
+			: undefined;
+
+	const givenName =
+		user?.metadata && providerConfiguration?.givenName
+			? extractPropFromIdentity(
+					user.metadata,
+					providerConfiguration.givenName,
+					'string'
+				)
+			: undefined;
+
+	const familyName =
+		user?.metadata && providerConfiguration?.familyName
+			? extractPropFromIdentity(
+					user.metadata,
+					providerConfiguration.familyName,
+					'string'
+				)
+			: undefined;`;
+    const userButtonsBlock = authOption === 'abs'
+        ? `{user ? <ProfilePicture userImage={userImage} givenName={givenName} familyName={familyName} /> : <SignIn />}`
+        : ``;
+    const rightGroup = authOption === 'abs'
+        ? `<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+						<Dropdown />
+						${userButtonsBlock}
+					</div>`
+        : `<Dropdown />`;
+    const closing = authOption === 'abs' ? `};` : `);`;
+    return `
+${authOption === 'abs' ? `import { User } from '../../../types/databaseTypes';\nimport { extractPropFromIdentity, ProviderConfiguration } from '@absolutejs/auth';` : ''}
+import { App } from '../components/App';
+import { Dropdown } from '../components/Dropdown';
+import { Head } from '../components/Head';
+${authOption === 'abs' ? `import { ProfilePicture } from '../components/ProfilePicture';\nimport { SignIn } from '../components/SignIn';` : ''}
+
+${propsType}
+
+${fnSignature}
+${authOption === 'abs' ? extractProps : ''}
+    ${useBlockReturn ? 'return (' : ''}
+        <html>
+            <Head cssPath={cssPath} />
+            <body>
+                <header>
+                    <a href="/">AbsoluteJS</a>
+                    ${rightGroup}
+                </header>
+                <App initialCount={initialCount} />
+            </body>
+        </html>
+    ${useBlockReturn ? ');' : ''}
+${closing}
+`;
+};

package/dist/generators/react/scaffoldReact.d.ts

@@ -1,2 +1,2 @@
 import { ScaffoldFrontendProps } from '../../types';
-export declare const scaffoldReact: ({ isSingleFrontend, targetDirectory, templatesDirectory, frontends, projectAssetsDirectory }: ScaffoldFrontendProps) => void;
+export declare const scaffoldReact: ({ isSingleFrontend, authOption, targetDirectory, templatesDirectory, frontends, assetsDirectory, projectAssetsDirectory, absProviders }: ScaffoldFrontendProps) => void;

package/dist/generators/react/scaffoldReact.js

@@ -1,14 +1,23 @@
 import { copyFileSync, cpSync, mkdirSync, writeFileSync } from 'fs';
 import { join } from 'path';
 import { generateMarkupCSS } from '../project/generateMarkupCSS';
-import { generateDropdownComponent } from './generateReactPage';
-export const scaffoldReact = ({ isSingleFrontend, targetDirectory, templatesDirectory, frontends, projectAssetsDirectory }) => {
+import { generateDropdownComponent, generateReactExamplePage, generateSignInComponent } from './generateReactComponents';
+export const scaffoldReact = ({ isSingleFrontend, authOption, targetDirectory, templatesDirectory, frontends, assetsDirectory, projectAssetsDirectory, absProviders }) => {
+    mkdirSync(join(projectAssetsDirectory, 'svg'), { recursive: true });
     copyFileSync(join(templatesDirectory, 'assets', 'svg', 'react.svg'), join(projectAssetsDirectory, 'svg', 'react.svg'));
+    copyFileSync(join(templatesDirectory, 'assets', 'svg', 'google-logo.svg'), join(projectAssetsDirectory, 'svg', 'google-logo.svg'));
     cpSync(join(templatesDirectory, 'react'), targetDirectory, {
         recursive: true
     });
     const dropdownComponent = generateDropdownComponent(frontends);
     writeFileSync(join(targetDirectory, 'components', 'Dropdown.tsx'), dropdownComponent, 'utf-8');
+    if (authOption === 'abs') {
+        const signInComponent = generateSignInComponent(absProviders);
+        writeFileSync(join(targetDirectory, 'components', 'SignIn.tsx'), signInComponent, 'utf-8');
+    }
+    const pageComponent = generateReactExamplePage(authOption);
+    mkdirSync(join(targetDirectory, 'pages'), { recursive: true });
+    writeFileSync(join(targetDirectory, 'pages', 'ReactExample.tsx'), pageComponent, 'utf-8');
     const cssOutputDir = join(targetDirectory, 'styles');
     mkdirSync(cssOutputDir, { recursive: true });
     const cssOutputFile = join(cssOutputDir, 'react-example.css');

package/dist/index.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env bun
-import { exit } from 'node:process';
+import { exit } from 'process';
 import { outro } from '@clack/prompts';
 import { getDebugMessage, getOutroMessage, helpMessage } from './messages';
 import { prompt } from './prompt';

package/dist/messages.d.ts

@@ -10,5 +10,5 @@ type DebugMessageProps = {
     response: CreateConfiguration;
     packageManager: string;
 };
-export declare const getDebugMessage: ({ response: { projectName, codeQualityTool, directoryConfig, useTailwind, tailwind, frontends, useHTMLScripts, frontendDirectories, buildDirectory, assetsDirectory, databaseEngine, databaseHost, databaseDirectory, orm, authProvider, plugins, initializeGitNow, installDependenciesNow }, packageManager }: DebugMessageProps) => string;
+export declare const getDebugMessage: ({ response: { projectName, codeQualityTool, directoryConfig, useTailwind, tailwind, frontends, useHTMLScripts, frontendDirectories, buildDirectory, assetsDirectory, databaseEngine, databaseHost, databaseDirectory, orm, authOption, plugins, initializeGitNow, installDependenciesNow }, packageManager }: DebugMessageProps) => string;
 export {};