@basictech/nextjs 0.6.0-beta.5 → 0.6.0-beta.7

package/src/client.ts

@@ -0,0 +1,33 @@
+'use client'
+
+// @basictech/nextjs/client - Client-side exports for Next.js
+// Use this in client components (files with 'use client' directive)
+
+// Re-export everything from @basictech/react for client-side use
+export {
+  useBasic,
+  BasicProvider,
+  useQuery,
+  RemoteDB,
+  RemoteCollection,
+  RemoteDBError,
+  NotAuthenticatedError,
+  STORAGE_KEYS
+} from "@basictech/react"
+
+// Re-export types (DBMode is also a type)
+export type {
+  AuthConfig,
+  BasicStorage,
+  LocalStorageAdapter,
+  BasicProviderProps,
+  BasicContextType,
+  AuthResult,
+  BasicDB,
+  Collection,
+  RemoteDBConfig,
+  AuthError
+} from "@basictech/react"
+
+// DBMode is a type-only export
+export type { DBMode } from "@basictech/react"

package/src/{componets.tsx → components.tsx}

@@ -32,7 +32,7 @@ const LoginButton = () => {
 };
 
 // Basic styles
-const avatarContainerStyle = {
+const avatarContainerStyle: React.CSSProperties = {
   display: 'inline-flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -43,14 +43,14 @@ const avatarContainerStyle = {
   cursor: 'pointer',
 };
 
-const avatarImageStyle = {
+const avatarImageStyle: React.CSSProperties = {
   width: '100%',
   height: '100%',
   borderRadius: '100%',
-//   objectFit: 'cover',
+  objectFit: 'cover',
 };
 
-const avatarFallbackStyle = {
+const avatarFallbackStyle: React.CSSProperties = {
   width: '100%',
   height: '100%',
   borderRadius: '100%',
@@ -62,14 +62,14 @@ const avatarFallbackStyle = {
   fontSize: '20px',
 };
 
-const popoverContentStyle = {
+const popoverContentStyle: React.CSSProperties = {
   padding: '20px',
   borderRadius: '8px',
-//   backgroundColor: 'white',
+  backgroundColor: 'white',
   boxShadow: '0 2px 10px rgba(0, 0, 0, 0.2)',
 };
 
-const buttonStyle = {
+const buttonStyle: React.CSSProperties = {
   padding: '8px 16px',
   backgroundColor: '#007bff',
   color: '#fff',
@@ -78,7 +78,7 @@ const buttonStyle = {
   cursor: 'pointer',
 };
 
-const popoverArrowStyle = {
+const popoverArrowStyle: React.CSSProperties = {
   fill: 'white',
 };
 

package/src/index.ts

@@ -1,14 +1,38 @@
-'use client'
+// @basictech/nextjs - Next.js integration for Basic SDK
+//
+// Usage:
+// - Server components/middleware: import from "@basictech/nextjs"
+// - Client components: import from "@basictech/nextjs/client"
+//
+// Example:
+//   // In a client component (providers.tsx)
+//   'use client'
+//   import { BasicProvider, useBasic } from "@basictech/nextjs/client"
+//
+//   // In middleware.ts
+//   import { createBasicMiddleware } from "@basictech/nextjs"
 
-import dynamic from 'next/dynamic'
+// Re-export types from react package (types are safe for SSR)
+export type {
+    AuthConfig,
+    BasicStorage,
+    LocalStorageAdapter,
+    BasicProviderProps,
+    BasicContextType,
+    AuthResult,
+    DBMode,
+    BasicDB,
+    Collection,
+    RemoteDBConfig,
+    AuthError
+} from "@basictech/react"
 
-import { useBasic, useQuery } from "@basictech/react"
-import LoginButton from "./componets";
+// Middleware exports (server-side safe - no dexie dependency)
+export { 
+    createBasicMiddleware, 
+    withBasicAuth,
+    getAuthFromRequest,
+    getReturnUrl
+} from "./middleware"
 
-
-const BasicProvider = dynamic(() => import('@basictech/react').then(mod => mod.BasicProvider), { ssr: false });
-
-
-export {
-    useBasic, BasicProvider, useQuery, LoginButton
-}
+export type { BasicMiddlewareConfig } from "./middleware"

package/src/middleware.ts

@@ -0,0 +1,186 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+/**
+ * Configuration options for the Basic auth middleware
+ */
+export interface BasicMiddlewareConfig {
+  /**
+   * Routes that require authentication
+   * Supports glob patterns like '/dashboard/*', '/api/protected/*'
+   */
+  protectedRoutes?: string[]
+  
+  /**
+   * Routes that are always public (bypass auth check)
+   * Useful for login pages, public APIs, etc.
+   */
+  publicRoutes?: string[]
+  
+  /**
+   * Where to redirect unauthenticated users
+   * @default '/login'
+   */
+  signInUrl?: string
+  
+  /**
+   * Where to redirect after successful sign-in
+   * @default '/'
+   */
+  afterSignInUrl?: string
+  
+  /**
+   * Cookie name for the access token
+   * @default 'basic_access_token'
+   */
+  tokenCookieName?: string
+  
+  /**
+   * Cookie name for the full token object
+   * @default 'basic_token'
+   */
+  fullTokenCookieName?: string
+}
+
+const DEFAULT_CONFIG: Required<BasicMiddlewareConfig> = {
+  protectedRoutes: [],
+  publicRoutes: ['/login', '/signup', '/auth/*'],
+  signInUrl: '/login',
+  afterSignInUrl: '/',
+  tokenCookieName: 'basic_access_token',
+  fullTokenCookieName: 'basic_token'
+}
+
+/**
+ * Check if a path matches any of the patterns
+ * Supports simple glob patterns with * wildcard
+ */
+function matchesPattern(path: string, patterns: string[]): boolean {
+  return patterns.some(pattern => {
+    // Convert glob pattern to regex
+    const regexPattern = pattern
+      .replace(/\*/g, '.*')  // Replace * with .*
+      .replace(/\//g, '\\/')  // Escape slashes
+    const regex = new RegExp(`^${regexPattern}$`)
+    return regex.test(path)
+  })
+}
+
+/**
+ * Check if the user has a valid token
+ */
+function hasValidToken(request: NextRequest, config: Required<BasicMiddlewareConfig>): boolean {
+  const token = request.cookies.get(config.tokenCookieName)?.value
+  
+  if (!token) {
+    return false
+  }
+  
+  // Basic validation - token exists and is not empty
+  // For more thorough validation, you'd decode the JWT and check expiry
+  // But that adds latency to every request
+  return token.length > 0
+}
+
+/**
+ * Get auth info from cookies
+ */
+export function getAuthFromRequest(request: NextRequest, config?: Partial<BasicMiddlewareConfig>): {
+  isAuthenticated: boolean
+  token: string | null
+} {
+  const mergedConfig = { ...DEFAULT_CONFIG, ...config }
+  const token = request.cookies.get(mergedConfig.tokenCookieName)?.value || null
+  
+  return {
+    isAuthenticated: !!token && token.length > 0,
+    token
+  }
+}
+
+/**
+ * Create a Basic auth middleware for NextJS
+ * 
+ * @example
+ * // In middleware.ts at the root of your NextJS app:
+ * import { createBasicMiddleware } from '@basictech/nextjs'
+ * 
+ * export const middleware = createBasicMiddleware({
+ *   protectedRoutes: ['/dashboard/*', '/settings/*'],
+ *   publicRoutes: ['/login', '/signup', '/'],
+ *   signInUrl: '/login'
+ * })
+ * 
+ * export const config = {
+ *   matcher: ['/((?!_next/static|_next/image|favicon.ico).*)']
+ * }
+ */
+export function createBasicMiddleware(config?: BasicMiddlewareConfig) {
+  const mergedConfig = { ...DEFAULT_CONFIG, ...config }
+  
+  return function middleware(request: NextRequest): NextResponse {
+    const { pathname } = request.nextUrl
+    
+    // Skip middleware for static files and Next.js internals
+    if (
+      pathname.startsWith('/_next') ||
+      pathname.startsWith('/api/_next') ||
+      pathname.includes('.') // Static files like .css, .js, .ico
+    ) {
+      return NextResponse.next()
+    }
+    
+    // Check if route is explicitly public
+    if (matchesPattern(pathname, mergedConfig.publicRoutes)) {
+      return NextResponse.next()
+    }
+    
+    // Check if route is protected
+    const isProtectedRoute = mergedConfig.protectedRoutes.length === 0 
+      ? true  // If no protected routes specified, protect everything except public
+      : matchesPattern(pathname, mergedConfig.protectedRoutes)
+    
+    if (!isProtectedRoute) {
+      return NextResponse.next()
+    }
+    
+    // Check authentication
+    const isAuthenticated = hasValidToken(request, mergedConfig)
+    
+    if (!isAuthenticated) {
+      // Redirect to sign-in page with return URL
+      const signInUrl = new URL(mergedConfig.signInUrl, request.url)
+      signInUrl.searchParams.set('returnUrl', pathname)
+      
+      return NextResponse.redirect(signInUrl)
+    }
+    
+    // User is authenticated, allow the request
+    return NextResponse.next()
+  }
+}
+
+/**
+ * Simple auth check middleware - redirects unauthenticated users
+ * 
+ * @example
+ * // In middleware.ts
+ * import { withBasicAuth } from '@basictech/nextjs'
+ * 
+ * export const middleware = withBasicAuth
+ * 
+ * export const config = {
+ *   matcher: ['/dashboard/:path*', '/settings/:path*']
+ * }
+ */
+export function withBasicAuth(request: NextRequest): NextResponse {
+  return createBasicMiddleware()(request)
+}
+
+/**
+ * Helper to get the return URL from search params
+ */
+export function getReturnUrl(request: NextRequest, defaultUrl: string = '/'): string {
+  const returnUrl = request.nextUrl.searchParams.get('returnUrl')
+  return returnUrl || defaultUrl
+}
+

package/tsup.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'tsup'
 
 export default defineConfig({
-  entry: ['src/index.ts'],
+  entry: ['src/index.ts', 'src/client.ts'],
   format: ['cjs', 'esm'],
   dts: true,
   splitting: false,

package/src/sync.ts

@@ -1,75 +0,0 @@
-import sqlite3InitModule from '@sqlite.org/sqlite-wasm';
-
-export function sync() {
-    console.log("sync");
-
-    async function storeFileToOPFS(fileName: string, fileContent: string | ArrayBuffer) {
-        if (!('storage' in navigator && 'getDirectory' in navigator.storage)) {
-            console.error('OPFS is not supported in this browser');
-            return;
-        }
-
-        try {
-            const root = await navigator.storage.getDirectory();
-
-            // Create or open a file
-            const fileHandle = await root.getFileHandle(fileName, { create: true });
-
-            const writable = await fileHandle.createWritable();
-
-            await writable.write(fileContent);
-
-            await writable.close();
-
-            console.log(`File "${fileName}" has been stored in OPFS`);
-        } catch (error) {
-            console.error('Error storing file to OPFS:', error);
-        }
-    }
-
-    
-    // storeFileToOPFS(fileName, fileContent);
-
-    const log = console.log;
-    const error = console.error;
-
-    // const start = (sqlite3 : any) => {
-    //     log('Running SQLite3 version', sqlite3.version.libVersion);
-    //     const db = new sqlite3.oo1.DB('/mydb.sqlite3', 'ct');
-
-    //     const result = db.exec('SELECT * FROM sqlite_master');
-    //     // Your SQLite code here.
-    //   };
-
-      const initializeSQLite = async () => {
-        try {
-          log('Loading and initializing SQLite3 module...');
-          const sqlite3 = await sqlite3InitModule({
-            print: log,
-            printErr: error,
-          });
-          log('Done initializing. Running demo...');
-          log(sqlite3.version.libVersion);
-
-          const db = new sqlite3.oo1.DB('/mydb.sqlite3', 'ct');
-          const result = db.exec('SELECT * FROM sqlite_master');
-
-          
-          
-          log(result);
-
-
-        //   start(sqlite3);
-        } catch (err: any) {
-
-          error('Initialization error:', err.name, err.message);
-        }
-      };
-
-    initializeSQLite();
-
-    
-
-
-
-}