create-absolutejs 0.5.1 → 0.6.0

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 {};

package/dist/messages.js

@@ -11,10 +11,11 @@ Options:
   ${cyan('--help, -h')}                      Show this help message and exit
   ${cyan('--debug, -d')}                     Display a summary of the project configuration after creation
 
+  ${cyan('--abs-provider')}                  A provider for Absolute-Auth (eg. 'google', 'github', 'discord') the full list is available at https://absolutejs.com/documentation/absolute-auth   
   ${cyan('--angular')}                       Include an Angular frontend
   ${cyan('--angular-dir')} ${dim(cyan('<directory>'))}       Specify the directory for and use the Angular frontend
   ${cyan('--assets')} ${dim(cyan('<directory>'))}            Directory name for your static assets
-  ${cyan('--auth')} ${dim(cyan('<plugin>'))}                 Pre-configured auth plugin (currently only "absolute-auth") or 'none'
+  ${cyan('--auth')} ${dim(cyan('<plugin>'))}                 Pre-configured auth plugin (currently only "abs") or 'none'
   ${cyan('--biome')}                         Use Biome for code quality and formatting
   ${cyan('--build')} ${dim(cyan('<directory>'))}             Output directory for build artifacts
   ${cyan('--db')} ${dim(cyan('<engine>'))}                   Database engine (postgresql | mysql | sqlite | mongodb | mariadb | gel | singlestore | cockroachdb | mssql) or 'none'
@@ -47,7 +48,7 @@ export const getOutroMessage = ({ projectName, packageManager, installDependenci
     `${cyan('cd')} ${projectName}\n` +
     `${installDependenciesNow ? '' : `${cyan(`${packageManager} install`)}\n`}` +
     `${cyan(`${packageManager} dev`)}`; // TODO: Some package managers need run
-export const getDebugMessage = ({ response: { projectName, codeQualityTool, directoryConfig, useTailwind, tailwind, frontends, useHTMLScripts, frontendDirectories, buildDirectory, assetsDirectory, databaseEngine, databaseHost, databaseDirectory, orm, authProvider, plugins, initializeGitNow, installDependenciesNow }, packageManager }) => {
+export const getDebugMessage = ({ response: { projectName, codeQualityTool, directoryConfig, useTailwind, tailwind, frontends, useHTMLScripts, frontendDirectories, buildDirectory, assetsDirectory, databaseEngine, databaseHost, databaseDirectory, orm, authOption, plugins, initializeGitNow, installDependenciesNow }, packageManager }) => {
     const htmlScriptingValue = useHTMLScripts
         ? blueBright('TypeScript')
         : dim('None');
@@ -73,7 +74,7 @@ export const getDebugMessage = ({ response: { projectName, codeQualityTool, dire
         ['Database Host', databaseHost && databaseHost !== 'none' ? databaseHost : dim('None')],
         ['Database Directory', databaseDirectory ?? dim('None')],
         ['ORM', orm ?? dim('None')],
-        ['Auth Provider', authProvider && authProvider !== 'none' ? authProvider : dim('None')],
+        ['Auth Provider', authOption && authOption !== 'none' ? authOption : dim('None')],
         ['Plugins', plugins.length && !plugins.includes('none') ? plugins.join(', ') : dim('None')],
         ['Initialize Git', initializeGitNow ? green('Yes') : red('No')],
         ['Install Dependencies', installDependenciesNow ? green('Yes') : red('No')],

package/dist/prompt.js

@@ -1,4 +1,4 @@
-import { getAuthProvider } from './questions/authProvider';
+import { getAuthOption } from './questions/authOption';
 import { getCodeQualityTool } from './questions/codeQualityTool';
 import { getConfigurationType } from './questions/configurationType';
 import { getDatabaseEngine } from './questions/databaseEngine';
@@ -51,7 +51,7 @@ export const prompt = async (argumentConfiguration) => {
     if (argumentConfiguration.frontendDirectories !== undefined)
         directoryConfig = 'custom';
     // 12. Auth provider
-    const authProvider = argumentConfiguration.authProvider ?? (await getAuthProvider());
+    const authOption = argumentConfiguration.authOption ?? (await getAuthOption());
     // 13. Additional plugins
     const plugins = argumentConfiguration.plugins?.filter((plugin) => plugin !== undefined) ?? (await getPlugins());
     // 14. Initialize Git repository
@@ -60,8 +60,9 @@ export const prompt = async (argumentConfiguration) => {
     const installDependenciesNow = argumentConfiguration.installDependenciesNow ??
         (await getInstallDependencies());
     const values = {
+        absProviders: argumentConfiguration.absProviders?.filter((provider) => provider !== undefined),
         assetsDirectory,
-        authProvider,
+        authOption,
         buildDirectory,
         codeQualityTool,
         databaseDirectory,

package/dist/questions/authOption.d.ts

@@ -0,0 +1 @@
+export declare const getAuthOption: () => Promise<"abs" | undefined>;

package/dist/questions/{authProvider.js → authOption.js}

@@ -1,15 +1,15 @@
 import { select, isCancel } from '@clack/prompts';
 import { cyan } from 'picocolors';
 import { abort } from '../utils/abort';
-export const getAuthProvider = async () => {
-    const authProvider = await select({
+export const getAuthOption = async () => {
+    const authOption = await select({
         message: 'Auth provider:',
         options: [
             { label: 'None', value: 'none' },
-            { label: cyan('Absolute Auth'), value: 'absoluteAuth' }
+            { label: cyan('Absolute Auth'), value: 'abs' }
         ]
     });
-    if (isCancel(authProvider))
+    if (isCancel(authOption))
         abort();
-    return authProvider === 'none' ? undefined : authProvider;
+    return authOption === 'none' ? undefined : authOption;
 };

package/dist/scaffold.d.ts

@@ -5,5 +5,5 @@ type ScaffoldProps = {
     latest: boolean;
     envVariables: string[] | undefined;
 };
-export declare const scaffold: ({ response: { projectName, codeQualityTool, initializeGitNow, databaseEngine, databaseHost, useHTMLScripts, useTailwind, databaseDirectory, orm, frontends, plugins, authProvider, buildDirectory, assetsDirectory, tailwind, installDependenciesNow, frontendDirectories }, latest, envVariables, packageManager }: ScaffoldProps) => Promise<void>;
+export declare const scaffold: ({ response: { projectName, codeQualityTool, initializeGitNow, databaseEngine, databaseHost, useHTMLScripts, useTailwind, databaseDirectory, absProviders, orm, frontends, plugins, authOption, buildDirectory, assetsDirectory, tailwind, installDependenciesNow, frontendDirectories }, latest, envVariables, packageManager }: ScaffoldProps) => Promise<void>;
 export {};

package/dist/scaffold.js

@@ -1,6 +1,6 @@
-import { copyFileSync } from 'node:fs';
-import { join, dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
+import { copyFileSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
 import { formatProject } from './commands/formatProject';
 import { initializeGit } from './commands/initializeGit';
 import { installDependencies } from './commands/installDependencies';
@@ -8,9 +8,9 @@ import { createPackageJson } from './generators/configurations/generatePackageJs
 import { initalizeRoot } from './generators/configurations/initializeRoot';
 import { scaffoldConfigurationFiles } from './generators/configurations/scaffoldConfigurationFiles';
 import { scaffoldDatabase } from './generators/db/scaffoldDatabase';
-import { generateServerFile } from './generators/project/generateServer';
+import { scaffoldBackend } from './generators/project/scaffoldBackend';
 import { scaffoldFrontends } from './generators/project/scaffoldFrontends';
-export const scaffold = async ({ response: { projectName, codeQualityTool, initializeGitNow, databaseEngine, databaseHost, useHTMLScripts, useTailwind, databaseDirectory, orm, frontends, plugins, authProvider, buildDirectory, assetsDirectory, tailwind, installDependenciesNow, frontendDirectories }, latest, envVariables, packageManager }) => {
+export const scaffold = async ({ response: { projectName, codeQualityTool, initializeGitNow, databaseEngine, databaseHost, useHTMLScripts, useTailwind, databaseDirectory, absProviders, orm, frontends, plugins, authOption, buildDirectory, assetsDirectory, tailwind, installDependenciesNow, frontendDirectories }, latest, envVariables, packageManager }) => {
     const __dirname = dirname(fileURLToPath(import.meta.url));
     const templatesDirectory = join(__dirname, '/templates');
     const { frontendDirectory, backendDirectory, projectAssetsDirectory, typesDirectory } = initalizeRoot(projectName, templatesDirectory);
@@ -27,7 +27,7 @@ export const scaffold = async ({ response: { projectName, codeQualityTool, initi
         templatesDirectory
     });
     createPackageJson({
-        authProvider,
+        authOption,
         codeQualityTool,
         databaseEngine,
         databaseHost,
@@ -38,9 +38,10 @@ export const scaffold = async ({ response: { projectName, codeQualityTool, initi
         projectName,
         useTailwind
     });
-    generateServerFile({
+    scaffoldBackend({
+        absProviders,
         assetsDirectory,
-        authProvider,
+        authOption,
         backendDirectory,
         buildDirectory,
         databaseEngine,
@@ -54,7 +55,7 @@ export const scaffold = async ({ response: { projectName, codeQualityTool, initi
         databaseEngine !== 'none' &&
         databaseEngine !== undefined &&
         (await scaffoldDatabase({
-            authProvider,
+            authOption,
             backendDirectory,
             databaseDirectory,
             databaseEngine,
@@ -64,6 +65,9 @@ export const scaffold = async ({ response: { projectName, codeQualityTool, initi
             typesDirectory
         })));
     scaffoldFrontends({
+        absProviders,
+        assetsDirectory,
+        authOption,
         frontendDirectories,
         frontendDirectory,
         frontends,

package/dist/templates/assets/svg/google-logo.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+    <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" />
+    <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" />
+    <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" />
+    <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" />
+    <path fill="none" d="M0 0h48v48H0z" />
+</svg>

package/dist/templates/react/components/OAuthLink.tsx

@@ -0,0 +1,39 @@
+import { ProviderOption } from 'citra';
+
+type OAuthLinkProps = {
+	logoUrl: string;
+	name: string;
+	provider: Lowercase<ProviderOption> | undefined;
+	mode: 'in' | 'up';
+};
+
+export const OAuthLink = ({
+	provider,
+	logoUrl,
+	name,
+	mode
+}: OAuthLinkProps) => {
+	const buttonText = `Sign ${mode} with ${name}`;
+
+	return (
+		<a
+			style={{
+				alignItems: 'center',
+				display: 'flex',
+				gap: '0.5rem'
+			}}
+			href={provider ? `/oauth2/${provider}/authorization` : undefined}
+		>
+			{provider ? (
+				<img
+					style={{ height: '2rem', width: '2rem' }}
+					alt={`${name} logo`}
+					src={logoUrl}
+				/>
+			) : (
+				<p>Provider not configured</p>
+			)}
+			<span>{buttonText}</span>
+		</a>
+	);
+};

package/dist/templates/react/components/ProfilePicture.tsx

@@ -0,0 +1,56 @@
+type ProfilePictureProps = {
+	userImage: string | null | undefined;
+	givenName?: string;
+	familyName?: string;
+	color?: string;
+	width?: string;
+	height?: string;
+	fontSize?: string;
+};
+
+export const ProfilePicture = ({
+	userImage,
+	givenName = '',
+	familyName = '',
+	color = '#4285F4',
+	width = '2rem',
+	height = '2rem',
+	fontSize = '0.85rem'
+}: ProfilePictureProps) => {
+	if (userImage) {
+		return (
+			<img
+				alt="Profile"
+				src={userImage}
+				style={{
+					borderRadius: '50%',
+					height,
+					objectFit: 'cover',
+					width
+				}}
+			/>
+		);
+	}
+
+	const initials = `${givenName.charAt(0).toUpperCase()}${familyName.charAt(0).toUpperCase()}`;
+
+	return (
+		<div
+			style={{
+				alignItems: 'center',
+				backgroundColor: color,
+				borderRadius: '50%',
+				color: 'white',
+				display: 'flex',
+				fontSize,
+				fontWeight: 600,
+				height,
+				justifyContent: 'center',
+				userSelect: 'none',
+				width
+			}}
+		>
+			{initials}
+		</div>
+	);
+};

package/dist/typeGuards.d.ts

@@ -1,5 +1,5 @@
-import type { AuthProvider, AvailableDrizzleDialect, CodeQualityTool, DatabaseEngine, DatabaseHost, Frontend, ORM } from './types';
-export declare const isAuthProvider: (value: string | undefined) => value is AuthProvider;
+import type { AuthOption, AvailableDrizzleDialect, CodeQualityTool, DatabaseEngine, DatabaseHost, Frontend, ORM } from './types';
+export declare const isValidAuthOption: (value: string | undefined) => value is AuthOption;
 export declare const isDirectoryConfig: (value: string) => value is "default" | "custom";
 export declare const isDrizzleDialect: (value: string | undefined) => value is AvailableDrizzleDialect;
 export declare const isPrismaDialect: (value: string | undefined) => value is string;

package/dist/typeGuards.js

@@ -1,5 +1,5 @@
 import { availableDatabaseEngines, availableDatabaseHosts, availableDrizzleDialects, availablePrismaDialects, frontendLabels } from './data';
-export const isAuthProvider = (value) => value === 'absoluteAuth' || value === 'none' || value === undefined;
+export const isValidAuthOption = (value) => value === 'abs' || value === 'none' || value === undefined;
 export const isDirectoryConfig = (value) => value === 'default' || value === 'custom';
 export const isDrizzleDialect = (value) => availableDrizzleDialects.some((dialect) => dialect === value);
 export const isPrismaDialect = (value) => availablePrismaDialects.some((dialect) => dialect === value);

package/dist/types.d.ts

@@ -1,5 +1,9 @@
+import { ProviderOption } from '@absolutejs/auth';
 import { availableAuthProviders, availableCodeQualityTools, availableDatabaseEngines, availableDatabaseHosts, availableDirectoryConfigurations, availableDrizzleDialects, availableFrontends, availableORMs, availablePrismaDialects } from './data';
 export type ScaffoldFrontendProps = {
+    absProviders: ProviderOption[] | undefined;
+    assetsDirectory: string;
+    authOption: AuthOption;
     targetDirectory: string;
     templatesDirectory: string;
     projectAssetsDirectory: string;
@@ -21,7 +25,7 @@ export type AvailableDependency = {
     latestVersion: string;
 };
 export type PackageManager = 'npm' | 'pnpm' | 'yarn' | 'bun';
-export type AuthProvider = (typeof availableAuthProviders)[number] | undefined;
+export type AuthOption = (typeof availableAuthProviders)[number] | undefined;
 export type AvailableDrizzleDialect = (typeof availableDrizzleDialects)[number];
 export type AvailablePrismaDialect = (typeof availablePrismaDialects)[number];
 export type DatabaseEngine = (typeof availableDatabaseEngines)[number] | undefined;
@@ -34,8 +38,9 @@ export type TailwindConfig = {
     output: string;
 } | undefined;
 export type CreateConfiguration = {
+    absProviders: ProviderOption[] | undefined;
     assetsDirectory: string;
-    authProvider: AuthProvider;
+    authOption: AuthOption;
     buildDirectory: string;
     directoryConfig: DirectoryConfiguration;
     databaseEngine: DatabaseEngine;

package/dist/utils/abort.js

@@ -1,4 +1,4 @@
-import { exit } from 'node:process';
+import { exit } from 'process';
 import { cancel } from '@clack/prompts';
 /* eslint-disable */
 export function abort() {

package/dist/utils/parseCommandLineOptions.js

@@ -1,14 +1,16 @@
-import { argv, exit } from 'node:process';
-import { parseArgs } from 'node:util';
+import { argv, exit } from 'process';
+import { parseArgs } from 'util';
+import { isValidProviderOption, providers } from '@absolutejs/auth';
 import { DEFAULT_ARG_LENGTH } from '../constants';
 import { availableAuthProviders, availableDatabaseEngines, availableDatabaseHosts, availableDirectoryConfigurations, availableDrizzleDialects, availableORMs, availablePrismaDialects } from '../data';
-import { isAuthProvider, isDatabaseEngine, isDatabaseHost, isDirectoryConfig, isDrizzleDialect, isORM, isPrismaDialect } from '../typeGuards';
+import { isValidAuthOption, isDatabaseEngine, isDatabaseHost, isDirectoryConfig, isDrizzleDialect, isORM, isPrismaDialect } from '../typeGuards';
 export const parseCommandLineOptions = () => {
     const { values, positionals } = parseArgs({
         allowNegative: true,
         allowPositionals: true,
         args: argv.slice(DEFAULT_ARG_LENGTH),
         options: {
+            'abs-provider': { multiple: true, type: 'string' },
             angular: { type: 'boolean' },
             'angular-dir': { type: 'string' },
             assets: { type: 'string' },
@@ -47,15 +49,33 @@ export const parseCommandLineOptions = () => {
     });
     const errors = [];
     const projectName = positionals[0] ?? (values.skip ? 'absolutejs-project' : undefined);
-    let authProvider;
-    if (values.auth !== undefined && !isAuthProvider(values.auth)) {
+    let authOption;
+    if (values.auth !== undefined && !isValidAuthOption(values.auth)) {
         errors.push(`Invalid auth provider: "${values.auth}". Expected: [ ${availableAuthProviders.join(', ')} ]`);
     }
     else if (values.auth !== undefined) {
-        authProvider = values.auth;
+        authOption = values.auth;
     }
     else if (values.skip) {
-        authProvider = 'none';
+        authOption = 'none';
+    }
+    const absProviders = [];
+    if (values['abs-provider'] !== undefined) {
+        if (authOption === undefined || authOption === 'none') {
+            authOption = 'abs';
+        }
+        else if (authOption !== 'abs') {
+            errors.push(`Invalid auth configuration: "--abs-provider" specified but auth provider is set to "${authOption}". "--abs-provider" can only be used with "abs" auth provider.`);
+        }
+        for (const provider of values['abs-provider']) {
+            if (!isValidProviderOption(provider)) {
+                errors.push(`Invalid Absolute-Auth provider: "${provider}". Expected: ${Object.keys(providers).join(', ')}`);
+                continue;
+            }
+            else {
+                absProviders.push(provider);
+            }
+        }
     }
     let databaseEngine;
     if (values.db !== undefined && !isDatabaseEngine(values.db)) {
@@ -216,8 +236,9 @@ export const parseCommandLineOptions = () => {
     }
     values.env = validEnv.length ? validEnv : undefined;
     const argumentConfiguration = {
+        absProviders: absProviders.length ? absProviders : undefined,
         assetsDirectory: values.assets,
-        authProvider,
+        authOption,
         buildDirectory: values.build,
         codeQualityTool,
         databaseDirectory,

package/dist/utils/t3-utils.js

@@ -1,4 +1,4 @@
-import { env } from 'node:process';
+import { env } from 'process';
 /**
  * @author Adapted from the create-t3-app project
  * @see https://github.com/t3-oss/create-t3-app