Bootstrap Supabase Provider 🚀

Let users connect their Supabase project via a Bootstrap modal — no backend setup required. ✨

Installation 📦

1. Via npm (recommended) 💎

npm install [email protected]

Then add this to your HTML:

<script type="importmap">
{
  "imports": {
    "bootstrap-supabase-provider": "./node_modules/bootstrap-supabase-provider/bootstrap-supabase-provider.js"
  }
}
</script>

2. 2. Via CDN 🌐

<script type="importmap">
{
  "imports": {
    "bootstrap-supabase-provider": "https://cdn.jsdelivr.net/npm/[email protected]"
  }
}
</script>

Usage 🎯

import { bootstrapSupabaseProvider} from "https://cdn.jsdelivr.net/npm/[email protected]";

// Basic Config - Opens a modal and asks user for Supabase details 🔧
const { supabase, url, anonKey } = await bootstrapSupabaseProvider();

// Example query 📊
const { data, error } = await supabase.from("todos").select("*");
console.log(data, error);

// Always Show Modal - even if user has provided configuration before 🔄
const config1 = await bootstrapSupabaseProvider({ show: true });

// Custom Labels and Help 🎨
const config2 = await bootstrapSupabaseProvider({
  title: "Connect to Database",
  urlLabel: "Database URL", 
  keyLabel: "API Key",
  buttonLabel: "Connect",
  help: '<div class="alert alert-info">Get your credentials from <a href="https://supabase.com/dashboard">Supabase Dashboard</a></div>',
});

// Custom Storage - store in sessionStorage 💾
const config3 = await bootstrapSupabaseProvider({
  storage: sessionStorage,
  key: "mySupabaseConfig"
});

API 🔌

async function bootstrapSupabaseProvider({
  storage: localStorage,                           // where to store config, e.g. sessionStorage 💾
  key: "bootstrapSupabaseProvider_config",         // key name for storage 🔑
  show: false,                                     // true will force prompt even if config exists 👁️
  help: "",                                        // HTML rendered at top of modal 💡
  title: "Supabase Configuration",                 // modal dialog title 📝
  urlLabel: "Supabase URL",                        // URL input label 🌐
  keyLabel: "Supabase Anon Key",                   // API key input label 🔐
  buttonLabel: "Connect to Supabase",              // submit button label 🔗
})
// Returns: { supabase, url, anonKey } ✅

Development 👨‍💻

git clone https://github.com/Nitin399-maker//bootstrap-supabase-provider.git
cd bootstrap-supabase-provider
npm install

To test locally: 🧪

<script type="module" src="./bootstrap-supabase-provider.js"></script>

To publish: 📤

npm login
npm publish --access public

Design Decisions

• Design Decisions 🎯
• Simple zero-build ES module 📦
• Bootstrap modal UX for quick setup ⚡
• LocalStorage-based persistence 💾
• Works seamlessly in browsers 🌐

License

MIT License © 2025 Nitin Kumar ✨