@digilogiclabs/create-saas-app 1.1.0 → 1.1.1

package/src/templates/mobile/base/template/App.tsx

@@ -1,19 +1,52 @@
 import React from 'react';
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View, Button } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { AuthProvider, useAuth } from '@digilogiclabs/saas-factory-auth/native';
+import { StripeProvider } from '@digilogiclabs/saas-factory-payments/native';
+import { Link, Slot } from 'expo-router';
+
+function AppContent() {
+  const { user, signOut } = useAuth();
+
+  return (
+    <View style={styles.container}>
+      {user ? (
+        <>
+          <Text style={styles.title}>Welcome back!</Text>
+          <Text style={styles.subtitle}>You are signed in.</Text>
+          <Link href="/checkout" style={styles.link}>
+            <Text>Checkout</Text>
+          </Link>
+          <Button title="Sign Out" onPress={signOut} />
+        </>
+      ) : (
+        <>
+          <Text style={styles.title}>Welcome to {{titleCaseName}}</Text>
+          <Text style={styles.subtitle}>{{description}}</Text>
+          <Link href="/login" style={styles.link}>
+            <Text>Login</Text>
+          </Link>
+          <Link href="/signup" style={styles.link}>
+            <Text>Sign Up</Text>
+          </Link>
+        </>
+      )}
+      <StatusBar style="auto" />
+    </View>
+  );
+}
 
 export default function App() {
   return (
     <SafeAreaProvider>
-      <View style={styles.container}>
-        <Text style={styles.title}>Welcome to {{titleCaseName}}</Text>
-        <Text style={styles.subtitle}>{{description}}</Text>
-        <Text style={styles.description}>
-          Built with Expo and DigitalLogic Labs packages
-        </Text>
-        <StatusBar style="auto" />
-      </View>
+      <AuthProvider>
+        <StripeProvider
+          stripeKey={process.env.EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY!}
+        >
+          <AppContent />
+        </StripeProvider>
+      </AuthProvider>
     </SafeAreaProvider>
   );
 }
@@ -43,5 +76,13 @@ const styles = StyleSheet.create({
     color: '#999',
     textAlign: 'center',
   },
+  link: {
+    marginTop: 15,
+    paddingVertical: 15,
+    borderWidth: 1,
+    borderColor: '#DDD',
+    borderRadius: 5,
+    textAlign: 'center',
+    width: '80%',
+  },
 });
-

package/src/templates/mobile/base/template/app/(auth)/login.tsx

@@ -0,0 +1,44 @@
+import { LoginForm } from '@digilogiclabs/saas-factory-ui/native';
+import { AuthProvider } from '@digilogiclabs/saas-factory-auth/native';
+import { createBrowserClient } from '@supabase/ssr';
+import React from 'react';
+import { View } from 'react-native';
+import * as WebBrowser from 'expo-web-browser';
+import { useOAuth } from '@clerk/clerk-expo';
+
+export default function LoginPage() {
+  const supabase = createBrowserClient(
+    process.env.EXPO_PUBLIC_SUPABASE_URL!,
+    process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY!
+  );
+
+  const handleLogin = async (values: any) => {
+    await supabase.auth.signInWithPassword({
+      email: values.email,
+      password: values.password,
+    });
+  };
+
+  const handleGoogleLogin = async () => {
+    const { data, error } = await supabase.auth.signInWithOAuth({
+      provider: 'google',
+      options: {
+        redirectTo: 'exp://localhost:8081/auth/callback',
+      },
+    });
+
+    if (data.url) {
+      await WebBrowser.openAuthSessionAsync(data.url);
+    }
+  };
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <LoginForm
+        onSubmit={handleLogin}
+        onGoogleSignIn={handleGoogleLogin}
+        authProvider={AuthProvider.SUPABASE}
+      />
+    </View>
+  );
+}

package/src/templates/mobile/base/template/app/(auth)/signup.tsx

@@ -0,0 +1,43 @@
+import { SignupForm } from '@digilogiclabs/saas-factory-ui/native';
+import { AuthProvider } from '@digilogiclabs/saas-factory-auth/native';
+import { createBrowserClient } from '@supabase/ssr';
+import React from 'react';
+import { View } from 'react-native';
+import * as WebBrowser from 'expo-web-browser';
+
+export default function SignupPage() {
+  const supabase = createBrowserClient(
+    process.env.EXPO_PUBLIC_SUPABASE_URL!,
+    process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY!
+  );
+
+  const handleSignup = async (values: any) => {
+    await supabase.auth.signUp({
+      email: values.email,
+      password: values.password,
+    });
+  };
+
+  const handleGoogleSignup = async () => {
+    const { data, error } = await supabase.auth.signInWithOAuth({
+      provider: 'google',
+      options: {
+        redirectTo: 'exp://localhost:8081/auth/callback',
+      },
+    });
+
+    if (data.url) {
+      await WebBrowser.openAuthSessionAsync(data.url);
+    }
+  };
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <SignupForm
+        onSubmit={handleSignup}
+        onGoogleSignIn={handleGoogleSignup}
+        authProvider={AuthProvider.SUPABASE}
+      />
+    </View>
+  );
+}

package/src/templates/mobile/base/template/app/checkout.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { View, Button } from 'react-native';
+import { useStripe } from '@digilogiclabs/saas-factory-payments/native';
+
+export default function CheckoutScreen() {
+  const { handleCheckout } = useStripe();
+
+  const onCheckout = async () => {
+    await handleCheckout({
+      priceId: 'price_12345', // Replace with your actual price ID
+      returnUrl: 'exp://localhost:8081/dashboard',
+    });
+  };
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Button title="Proceed to Checkout" onPress={onCheckout} />
+    </View>
+  );
+}

package/src/templates/mobile/base/template/package.json

@@ -8,7 +8,7 @@
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
-    "build": "expo build",
+    "build": "eas build",
     "eject": "expo eject"
   },
   "dependencies": {
@@ -22,10 +22,11 @@
     "react-native-screens": "~3.22.0",
     "react-native-safe-area-context": "4.6.3",
     "react-native-gesture-handler": "~2.12.0",
-    "@digilogiclabs/saas-factory-ui": "^1.0.0",
-    "@digilogiclabs/saas-factory-auth": "^1.0.0"{{#auth}}{{#firebase}},
-    "firebase": "^10.0.0"{{/firebase}}{{#supabase}},
-    "@supabase/supabase-js": "^2.0.0"{{/supabase}}{{/auth}}
+    "@digilogiclabs/saas-factory-ui": "^0.7.2",
+    "@digilogiclabs/saas-factory-auth": "^0.4.3",
+    "@digilogiclabs/saas-factory-payments": "^0.2.0",
+    "firebase": "^10.0.0",
+    "@supabase/supabase-js": "^2.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
@@ -35,4 +36,3 @@
   },
   "private": true
 }
-

package/src/templates/shared/auth/firebase/web/config.ts

@@ -1,24 +1,23 @@
-import { initializeApp } from 'firebase/app';
-import { getAuth } from 'firebase/auth';
-import { getFirestore } from 'firebase/firestore';
-
-const firebaseConfig = {
-  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
-  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
-  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
-  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
-  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
-  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
-};
-
-// Initialize Firebase
-const app = initializeApp(firebaseConfig);
-
-// Initialize Firebase Authentication and get a reference to the service
-export const auth = getAuth(app);
-
-// Initialize Cloud Firestore and get a reference to the service
-export const db = getFirestore(app);
-
-export default app;
-
+import { initializeApp } from 'firebase/app';
+import { getAuth } from 'firebase/auth';
+import { getFirestore } from 'firebase/firestore';
+
+const firebaseConfig = {
+  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+
+// Initialize Firebase Authentication and get a reference to the service
+export const auth = getAuth(app);
+
+// Initialize Cloud Firestore and get a reference to the service
+export const db = getFirestore(app);
+
+export default app;

package/src/templates/shared/auth/supabase/web/config.ts

@@ -1,9 +1,8 @@
-import { createClient } from '@supabase/supabase-js';
-
-const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
-const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
-
-export const supabase = createClient(supabaseUrl, supabaseAnonKey);
-
-export default supabase;
-
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
+const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
+
+export const supabase = createClient(supabaseUrl, supabaseAnonKey);
+
+export default supabase;

package/src/templates/web/base/template/.env.example

@@ -1,34 +1,15 @@
-# App Configuration
-NEXT_PUBLIC_APP_NAME={{projectName}}
-NEXT_PUBLIC_APP_URL=http://localhost:3000
+# Auth Configuration
+NEXT_PUBLIC_AUTH_PROVIDER=supabase|firebase
 
-{{#auth}}
-{{#firebase}}
-# Firebase Configuration
-NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
-NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
-NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
-NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
-NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
-NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
-{{/firebase}}
-{{#supabase}}
-# Supabase Configuration
-NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
-NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
-{{/supabase}}
-{{/auth}}
+# Supabase
+NEXT_PUBLIC_SUPABASE_URL=
+NEXT_PUBLIC_SUPABASE_ANON_KEY=
 
-# Database Configuration
-{{#database}}
-{{#supabase}}
-DATABASE_URL=your_database_url
-{{/supabase}}
-{{#firebase}}
-# Firebase Admin (Server-side)
-FIREBASE_ADMIN_PROJECT_ID=your_project_id
-FIREBASE_ADMIN_CLIENT_EMAIL=your_service_account_email
-FIREBASE_ADMIN_PRIVATE_KEY=your_private_key
-{{/firebase}}
-{{/database}}
+# Firebase
+NEXT_PUBLIC_FIREBASE_API_KEY=
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=
 
+# Payments
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
+STRIPE_SECRET_KEY=

package/src/templates/web/base/template/package.json

@@ -14,8 +14,9 @@
     "next": "^14.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@digilogiclabs/saas-factory-ui": "^1.0.0",
-    "@digilogiclabs/saas-factory-auth": "^1.0.0",
+    "@digilogiclabs/saas-factory-ui": "^0.7.2",
+    "@digilogiclabs/saas-factory-auth": "^0.4.3",
+    "@digilogiclabs/saas-factory-payments": "^0.2.0",
     "tailwindcss": "^3.3.0",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.31",
@@ -25,9 +26,9 @@
     "next-themes": "^0.2.1",
     "@radix-ui/react-slot": "^1.0.2",
     "tailwindcss-animate": "^1.0.7",
-    "lucide-react": "^0.292.0"{{#auth}}{{#firebase}},
-    "firebase": "^10.0.0"{{/firebase}}{{#supabase}},
-    "@supabase/supabase-js": "^2.0.0"{{/supabase}}{{/auth}}
+    "lucide-react": "^0.292.0",
+    "firebase": "^10.0.0",
+    "@supabase/supabase-js": "^2.0.0"
   },
   "devDependencies": {
     "typescript": "^5.0.0",
@@ -45,4 +46,3 @@
     "node": ">=18.0.0"
   }
 }
-

package/src/templates/web/base/template/src/app/auth/callback/route.ts

@@ -0,0 +1,18 @@
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
+import { cookies } from 'next/headers';
+import { NextResponse } from 'next/server';
+
+import type { NextRequest } from 'next/server';
+
+export async function GET(request: NextRequest) {
+  const requestUrl = new URL(request.url);
+  const code = requestUrl.searchParams.get('code');
+
+  if (code) {
+    const supabase = createRouteHandlerClient({ cookies });
+    await supabase.auth.exchangeCodeForSession(code);
+  }
+
+  // URL to redirect to after sign in process completes
+  return NextResponse.redirect(requestUrl.origin);
+}

package/src/templates/web/base/template/src/app/checkout/page.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import React from 'react';
+import { useStripe } from '@digilogiclabs/saas-factory-payments';
+import { Button } from '@/components/ui/button';
+
+export default function CheckoutPage() {
+  const { handleCheckout } = useStripe();
+
+  const onCheckout = async () => {
+    await handleCheckout({
+      priceId: 'price_12345', // Replace with your actual price ID
+      returnUrl: `${window.location.origin}/dashboard`,
+    });
+  };
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100">
+      <div className="p-8 bg-white rounded-lg shadow-md">
+        <h1 className="text-2xl font-bold mb-4">Checkout</h1>
+        <p className="mb-6">Click the button below to proceed to payment.</p>
+        <Button onClick={onCheckout}>
+          Proceed to Checkout
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/templates/web/base/template/src/app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import './globals.css'
 import { AppProviders } from '@/components/providers/app-providers'
+import { Header } from '@/components/shared/header'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -19,10 +20,10 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <body className={inter.className}>
         <AppProviders>
+          <Header />
           {children}
         </AppProviders>
       </body>
     </html>
   )
 }
-

package/src/templates/web/base/template/src/app/login/page.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { LoginForm } from '@digilogiclabs/saas-factory-ui';
+import { AuthProvider } from '@digilogiclabs/saas-factory-auth';
+import { createBrowserClient } from '@supabase/ssr';
+import React from 'react';
+
+export default function LoginPage() {
+  const supabase = createBrowserClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  );
+
+  const handleLogin = async (values: any) => {
+    await supabase.auth.signInWithPassword({
+      email: values.email,
+      password: values.password,
+    });
+  };
+
+  const handleGoogleLogin = async () => {
+    await supabase.auth.signInWithOAuth({
+      provider: 'google',
+      options: {
+        redirectTo: `${location.origin}/auth/callback`,
+      },
+    });
+  };
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100">
+      <LoginForm
+        onSubmit={handleLogin}
+        onGoogleSignIn={handleGoogleLogin}
+        authProvider={AuthProvider.SUPABASE}
+      />
+    </div>
+  );
+}

package/src/templates/web/base/template/src/app/page.tsx

@@ -1,9 +1,15 @@
+'use client'
+
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
-import { ArrowRight, Zap, Shield, Rocket } from 'lucide-react'
+import { ArrowRight, Zap, Shield, Rocket, LogOut } from 'lucide-react'
+import { useAuth } from '@digilogiclabs/saas-factory-auth'
+import Link from 'next/link'
 
 export default function Home() {
+  const { user, signOut } = useAuth()
+
   return (
     <main className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
       <div className="container mx-auto px-4 py-16">
@@ -23,13 +29,32 @@ export default function Home() {
             </code>
           </p>
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <Button size="lg" className="text-lg px-8">
-              Get Started
-              <ArrowRight className="ml-2 h-5 w-5" />
-            </Button>
-            <Button variant="outline" size="lg" className="text-lg px-8">
-              Learn More
-            </Button>
+            {!user ? (
+              <>
+                <Button size="lg" className="text-lg px-8" asChild>
+                  <Link href="/signup">
+                    Get Started
+                    <ArrowRight className="ml-2 h-5 w-5" />
+                  </Link>
+                </Button>
+                <Button variant="outline" size="lg" className="text-lg px-8" asChild>
+                  <Link href="/login">Learn More</Link>
+                </Button>
+              </>
+            ) : (
+              <>
+                <Button size="lg" className="text-lg px-8" asChild>
+                  <Link href="/dashboard">
+                    Go to Dashboard
+                    <ArrowRight className="ml-2 h-5 w-5" />
+                  </Link>
+                </Button>
+                <Button variant="outline" size="lg" className="text-lg px-8" onClick={signOut}>
+                  <LogOut className="mr-2 h-5 w-5" />
+                  Sign Out
+                </Button>
+              </>
+            )}
           </div>
         </div>
 
@@ -105,4 +130,3 @@ export default function Home() {
     </main>
   )
 }
-

package/src/templates/web/base/template/src/app/signup/page.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { SignupForm } from '@digilogiclabs/saas-factory-ui';
+import { AuthProvider } from '@digilogiclabs/saas-factory-auth';
+import { createBrowserClient } from '@supabase/ssr';
+import React from 'react';
+
+export default function SignupPage() {
+  const supabase = createBrowserClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  );
+
+  const handleSignup = async (values: any) => {
+    await supabase.auth.signUp({
+      email: values.email,
+      password: values.password,
+    });
+  };
+
+  const handleGoogleSignup = async () => {
+    await supabase.auth.signInWithOAuth({
+      provider: 'google',
+      options: {
+        redirectTo: `${location.origin}/auth/callback`,
+      },
+    });
+  };
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100">
+      <SignupForm
+        onSubmit={handleSignup}
+        onGoogleSignIn={handleGoogleSignup}
+        authProvider={AuthProvider.SUPABASE}
+      />
+    </div>
+  );
+}

package/src/templates/web/base/template/src/components/providers/app-providers.tsx

@@ -1,6 +1,9 @@
 'use client'
 
+import React from 'react'
+import { AuthProvider } from '@digilogiclabs/saas-factory-auth'
 import { ThemeProvider } from 'next-themes'
+import { StripeProvider } from '@digilogiclabs/saas-factory-payments'
 
 interface AppProvidersProps {
   children: React.ReactNode
@@ -8,14 +11,19 @@ interface AppProvidersProps {
 
 export function AppProviders({ children }: AppProvidersProps) {
   return (
-    <ThemeProvider
-      attribute="class"
-      defaultTheme="system"
-      enableSystem
-      disableTransitionOnChange
-    >
-      {children}
-    </ThemeProvider>
+    <AuthProvider provider="supabase">
+      <StripeProvider
+        stripeKey={process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!}
+      >
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
+      </StripeProvider>
+    </AuthProvider>
   )
 }
-

package/src/templates/web/base/template/src/components/shared/header.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { useAuth } from '@digilogiclabs/saas-factory-auth';
+import { Button } from '@/components/ui/button';
+import { LogOut } from 'lucide-react';
+
+export function Header() {
+  const { user, signOut } = useAuth();
+
+  return (
+    <header className="bg-white dark:bg-gray-800 shadow-md">
+      <div className="container mx-auto px-4 py-4 flex justify-between items-center">
+        <Link href="/" className="text-2xl font-bold text-gray-900 dark:text-white">
+          {{titleCaseName}}
+        </Link>
+        <nav className="flex items-center gap-4">
+          {user ? (
+            <>
+              <Link href="/dashboard" className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
+                Dashboard
+              </Link>
+              <Button variant="ghost" size="icon" onClick={signOut}>
+                <LogOut className="h-5 w-5" />
+              </Button>
+            </>
+          ) : (
+            <>
+              <Link href="/login" className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
+                Login
+              </Link>
+              <Button asChild>
+                <Link href="/signup">Sign Up</Link>
+              </Button>
+            </>
+          )}
+        </nav>
+      </div>
+    </header>
+  );
+}

package/src/templates/web/base/template/tailwind.config.js

@@ -6,6 +6,7 @@ module.exports = {
     './components/**/*.{ts,tsx}',
     './app/**/*.{ts,tsx}',
     './src/**/*.{ts,tsx}',
+    '../../node_modules/@digilogiclabs/saas-factory-ui/dist/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
     container: {
@@ -74,4 +75,3 @@ module.exports = {
   },
   plugins: [require("tailwindcss-animate")],
 }
-