make an automation to set client id for all examples

Author: yashovardhan

.gitignore

@@ -151,3 +151,4 @@ yarn-error.log
 build/
 Pods/
 .vscode/
+.vercel

ENV_SETUP.md

@@ -26,30 +26,5 @@ Custom authentication examples may require additional environment variables such
 - `VITE_AUTH0_CLIENT_ID` - Your Auth0 Client ID
 - `VITE_GOOGLE_CLIENT_ID` - Your Google OAuth Client ID
 - `VITE_FIREBASE_API_KEY` - Your Firebase API Key
-- `VITE_FIREBASE_AUTH_DOMAIN` - Your Firebase Auth Domain
-- `VITE_FIREBASE_PROJECT_ID` - Your Firebase Project ID
 
 Check the individual '.env.example' files in each example directory for the specific environment variables needed.
-
-## Updated Files
-
-All examples have been updated to use environment variables instead of hardcoded client IDs. The key files that were modified include:
-
-### Quick Starts
-- `quick-starts/react-quick-start/src/web3authContext.tsx`
-- `quick-starts/vue-quick-start/src/web3authContext.tsx`
-- `quick-starts/vue-solana-quick-start/src/web3authContext.tsx`
-- `quick-starts/react-solana-quick-start/src/web3authContext.tsx`
-- `quick-starts/nextjs-quick-start/components/provider.tsx`
-- `quick-starts/angular-quick-start/src/app/app.component.ts`
-- `quick-starts/vanillajs-quick-start/script.js`
-
-### Other Examples
-- `other/bitcoin-example/src/web3authContext.tsx`
-- (All other examples have .env.example files)
-
-### Custom Authentication
-- `custom-authentication/single-connection/auth0-implicit-example/src/web3authContext.tsx`
-- `custom-authentication/single-connection/auth0-jwt-example/src/index.tsx`
-- `custom-authentication/single-connection/google-one-tap-example/src/index.tsx`
-- (All other examples have .env.example files) 

react-playground/.env.example

@@ -0,0 +1 @@
+VITE_WEB3AUTH_CLIENT_ID=YOUR_WEB3AUTH_CLIENT_ID

react-playground/src/App.tsx

@@ -27,7 +27,7 @@ function App() {
 
       {/* Content */}
       <div className="relative z-10 flex flex-col min-h-screen">
-        <Web3AuthProvider config={{ web3AuthOptions: web3AuthContextConfig }}>
+        <Web3AuthProvider config={ web3AuthContextConfig }>
           <Playground>
             <BrowserRouter>
               <Routes>

react-playground/src/services/web3authContext.tsx

@@ -1,15 +1,14 @@
-import { walletServicesPlugin, WEB3AUTH_NETWORK, Web3AuthOptions } from "@web3auth/modal";
+import { WEB3AUTH_NETWORK } from "@web3auth/modal";
+import { Web3AuthContextConfig } from "@web3auth/modal/react";
 
-const clientId = "BIpw3vwP0QqF_QecEtEFYxEac6pW7i478ouMUwg-qiWp8ipe-OkD6FUabv99lG0iVO02GWd591bJeiYiM1Sl_Nc";
+const clientId = import.meta.env.VITE_WEB3AUTH_CLIENT_ID;
 
-const web3AuthOptions: Web3AuthOptions = {
-  clientId,
-  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
-  authBuildEnv: "testing",
-  plugins: [walletServicesPlugin()],
-  uiConfig: {
-    mode: "dark",
+const web3AuthContextConfig: Web3AuthContextConfig = {
+  web3AuthOptions: {
+    clientId,
+    web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+    authBuildEnv: "testing",
   },
 };
 
-export default web3AuthOptions;
+export default web3AuthContextConfig;

set-client-id.js

@@ -36,6 +36,30 @@ function findProjectDirs(dir, excludes = ['node_modules', '.git']) {
   return results;
 }
 
+// Find client ID variable from .env.example file
+function findClientIdVariable(dir) {
+  const envExamplePath = path.join(dir, '.env.example');
+  
+  if (fs.existsSync(envExamplePath)) {
+    const envExampleContent = fs.readFileSync(envExamplePath, 'utf8');
+    // Look for lines containing "WEB3AUTH" and "CLIENT_ID"
+    const lines = envExampleContent.split('\n');
+    const clientIdLine = lines.find(line => 
+      line.includes('WEB3AUTH') && line.includes('CLIENT_ID') && !line.trim().startsWith('#')
+    );
+    
+    if (clientIdLine) {
+      const match = clientIdLine.match(/^([^=]+)=/);
+      if (match && match[1]) {
+        return match[1].trim();
+      }
+    }
+  }
+  
+  // Default fallback
+  return 'VITE_WEB3AUTH_CLIENT_ID';
+}
+
 // Update .env file in the given directory with the client ID
 function updateEnvFile(dir, clientId) {
   const envPath = path.join(dir, '.env');
@@ -46,14 +70,20 @@ function updateEnvFile(dir, clientId) {
     envContent = fs.readFileSync(envPath, 'utf8');
   }
 
+  // Get the appropriate variable name from .env.example
+  const clientIdVariable = findClientIdVariable(dir);
+  
   // Update or add the client ID
-  const updated = envContent.includes('VITE_WEB3AUTH_CLIENT_ID=')
-    ? envContent.replace(/VITE_WEB3AUTH_CLIENT_ID=.*/g, `VITE_WEB3AUTH_CLIENT_ID=${clientId}`)
-    : envContent + `\nVITE_WEB3AUTH_CLIENT_ID=${clientId}\n`;
+  const variablePattern = new RegExp(`${clientIdVariable}=.*`, 'g');
+  const variableLine = `${clientIdVariable}=${clientId}`;
+  
+  const updated = envContent.includes(`${clientIdVariable}=`)
+    ? envContent.replace(variablePattern, variableLine)
+    : envContent + `\n${variableLine}\n`;
 
   // Write back to the file
   fs.writeFileSync(envPath, updated);
-  console.log(`Updated .env with Web3Auth client ID in ${dir}`);
+  console.log(`Updated .env with Web3Auth client ID (${clientIdVariable}) in ${dir}`);
 }
 
 // Main execution