fix: move access token to env variables

Author: damlayildiz

examples/sync-demo-bare/.env.example

@@ -5,8 +5,13 @@
 # Get this from: https://dashboard.sqlitecloud.io/ > Your Database > OffSync / Configuration
 SQLITE_CLOUD_DATABASE_ID=
 
-# Your SQLite Cloud API Key
-# Get this from: https://dashboard.sqlitecloud.io/ > Your Database > Configuration
+# Authentication (provide ONE of the following):
+# Access token for user-level authentication (when using RLS)
+# In a real app, this comes from your auth system (e.g. Supabase Auth)
+# For testing, use a token from the user you want to test with
+ACCESS_TOKEN=
+# API key for simple authentication (if not using RLS)
+# Get this from: https://dashboard.sqlitecloud.io/ > Your Project > Settings > API Keys
 SQLITE_CLOUD_API_KEY=
 
 # Local database name (can be any name you prefer)

examples/sync-demo-bare/src/App.tsx

@@ -18,10 +18,13 @@ import {
   useSyncStatus,
   useSqliteTransaction,
 } from '@sqliteai/sqlite-sync-react-native';
-import { SQLITE_CLOUD_DATABASE_ID, DATABASE_NAME, TABLE_NAME } from '@env';
-
-let HARDCODED_ACCESS_TOKEN: string;
-HARDCODED_ACCESS_TOKEN = 'replace-with-access-token';
+import {
+  SQLITE_CLOUD_DATABASE_ID,
+  DATABASE_NAME,
+  TABLE_NAME,
+  ACCESS_TOKEN,
+  SQLITE_CLOUD_API_KEY,
+} from '@env';
 
 /**
  * Demo app showcasing the reactive hooks and dual connection architecture:
@@ -276,7 +279,12 @@ function TestApp() {
 }
 
 export default function App() {
-  if (!SQLITE_CLOUD_DATABASE_ID || !DATABASE_NAME || !TABLE_NAME) {
+  if (
+    !SQLITE_CLOUD_DATABASE_ID ||
+    !DATABASE_NAME ||
+    !TABLE_NAME ||
+    (!ACCESS_TOKEN && !SQLITE_CLOUD_API_KEY)
+  ) {
     return (
       <View style={styles.container}>
         <Text style={styles.error}>
@@ -290,19 +298,10 @@ export default function App() {
     );
   }
 
-  if (HARDCODED_ACCESS_TOKEN === 'replace-with-access-token') {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.error}>
-          Replace the hardcoded access token in src/App.tsx before running the
-          example.
-        </Text>
-        <Text style={styles.errorDetails}>
-          See README.md for setup instructions.
-        </Text>
-      </View>
-    );
-  }
+  // Auth: provide either ACCESS_TOKEN (for RLS) or SQLITE_CLOUD_API_KEY (without RLS)
+  const authProps = ACCESS_TOKEN
+    ? { accessToken: ACCESS_TOKEN }
+    : { apiKey: SQLITE_CLOUD_API_KEY };
 
   return (
     <SQLiteSyncProvider
@@ -322,7 +321,7 @@ export default function App() {
       ]}
       syncMode="polling"
       adaptivePolling={{ baseInterval: 3000 }}
-      accessToken={HARDCODED_ACCESS_TOKEN}
+      {...authProps}
       debug={true}
     >
       <TestApp />

examples/sync-demo-bare/types/env.d.ts

@@ -2,4 +2,6 @@ declare module '@env' {
   export const SQLITE_CLOUD_DATABASE_ID: string;
   export const DATABASE_NAME: string;
   export const TABLE_NAME: string;
+  export const ACCESS_TOKEN: string;
+  export const SQLITE_CLOUD_API_KEY: string;
 }

examples/sync-demo-expo/.env.example

@@ -5,8 +5,13 @@
 # Get this from: https://dashboard.sqlitecloud.io/ > Your Database > OffSync / Configuration
 SQLITE_CLOUD_DATABASE_ID=
 
-# Your SQLite Cloud API Key
-# Get this from: https://dashboard.sqlitecloud.io/
+# Authentication (provide ONE of the following):
+# Access token for user-level authentication (when using RLS)
+# In a real app, this comes from your auth system (e.g. Supabase Auth)
+# For testing, use a token from the user you want to test with
+ACCESS_TOKEN=
+# API key for simple authentication (if not using RLS)
+# Get this from: https://dashboard.sqlitecloud.io/ > Your Project > Settings > API Keys
 SQLITE_CLOUD_API_KEY=
 
 # Local database name (can be any name you prefer)

examples/sync-demo-expo/app.config.js

@@ -12,6 +12,7 @@ export default {
     extra: {
       sqliteCloudDatabaseId: process.env.SQLITE_CLOUD_DATABASE_ID,
       sqliteCloudApiKey: process.env.SQLITE_CLOUD_API_KEY,
+      accessToken: process.env.ACCESS_TOKEN,
       databaseName: process.env.DATABASE_NAME,
       tableName: process.env.TABLE_NAME,
       eas: {

examples/sync-demo-expo/src/App.tsx

@@ -28,6 +28,7 @@ import Constants from 'expo-constants';
 const SQLITE_CLOUD_DATABASE_ID =
   Constants.expoConfig?.extra?.sqliteCloudDatabaseId;
 const SQLITE_CLOUD_API_KEY = Constants.expoConfig?.extra?.sqliteCloudApiKey;
+const ACCESS_TOKEN = Constants.expoConfig?.extra?.accessToken;
 const DATABASE_NAME = Constants.expoConfig?.extra?.databaseName;
 const TABLE_NAME = Constants.expoConfig?.extra?.tableName;
 
@@ -394,9 +395,9 @@ export default function App() {
 
   if (
     !SQLITE_CLOUD_DATABASE_ID ||
-    !SQLITE_CLOUD_API_KEY ||
     !DATABASE_NAME ||
-    !TABLE_NAME
+    !TABLE_NAME ||
+    (!ACCESS_TOKEN && !SQLITE_CLOUD_API_KEY)
   ) {
     return (
       <View style={styles.container}>
@@ -411,6 +412,11 @@ export default function App() {
     );
   }
 
+  // Auth: provide either ACCESS_TOKEN (for RLS) or SQLITE_CLOUD_API_KEY (without RLS)
+  const authProps = ACCESS_TOKEN
+    ? { accessToken: ACCESS_TOKEN }
+    : { apiKey: SQLITE_CLOUD_API_KEY };
+
   return (
     <SQLiteSyncProvider
       databaseId={SQLITE_CLOUD_DATABASE_ID}
@@ -432,7 +438,7 @@ export default function App() {
       renderPushPermissionPrompt={({ allow, deny }) => (
         <PermissionDialog visible onAllow={allow} onDeny={deny} />
       )}
-      apiKey={SQLITE_CLOUD_API_KEY}
+      {...authProps}
       debug={true}
     >
       <TestApp deviceToken={deviceToken} />

examples/sync-demo-expo/types/env.d.ts

@@ -1,6 +1,7 @@
 declare module '@env' {
   export const SQLITE_CLOUD_DATABASE_ID: string;
   export const SQLITE_CLOUD_API_KEY: string;
+  export const ACCESS_TOKEN: string;
   export const DATABASE_NAME: string;
   export const TABLE_NAME: string;
 }