Bootstrap Supabase Provider

npm version | License: MIT

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

Installation

1. Via npm (recommended)

npm install bootstrap-supabase-provider

Then add this to your HTML:

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

2. Via CDN

<script type="importmap">
{
  "imports": {
    "bootstrap-supabase-provider": "https://cdn.jsdelivr.net/npm/bootstrap-supabase-provider@1"
  }
}
</script>

Usage

import { bootstrapSupabaseProvider, getCurrentState } from "bootstrap-supabase-provider";

const { supabase, user } = await bootstrapSupabaseProvider();

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

await bootstrapSupabaseProvider({ show: true });

Custom labels & help message

await bootstrapSupabaseProvider({
  title: "Connect to Supabase",
  urlLabel: "Supabase Project URL",
  keyLabel: "Anon Key",
  buttonLabel: "Save",
  help: '<div class="alert alert-info">Find your keys under <strong>Project Settings → API</strong>.</div>'
});

Custom storage

await bootstrapSupabaseProvider({
  storage: sessionStorage,
  key: "mySupabaseConfig"
});

API

`async bootstrapSupabaseProvider(options)`

Option	Type	Default	Description
`storage`	Storage	`localStorage`	Where to save config
`key`	string	`"bootstrapSupabaseProvider_config"`	Storage key name
`show`	boolean	`false`	Always show modal even if config exists
`help`	string (HTML)	`""`	Optional help text
`title`	string	`"Supabase Configuration"`	Modal title
`urlLabel`	string	`"Supabase URL"`	Label for URL input
`keyLabel`	string	`"Supabase Anon Key"`	Label for key input
`buttonLabel`	string	`"Connect to Supabase"`	Submit button label
`redirectTo`	string	`window.location.origin + window.location.pathname`	Optional redirect URL after login

Returns:

{
  supabase: SupabaseClient,
  user: currentUser | null
}

`getCurrentState()`

Returns:

{
  supabase: SupabaseClient | null,
  user: User | null,
  isAuthenticated: boolean
}

Development

git clone https://github.com/<yourname>/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

Simple zero-build ES module
Bootstrap modal UX for quick setup
LocalStorage-based persistence
Works seamlessly in browsers
Emits supabaseAuthChange on auth state change

bootstrap-supabase-provider

Package Exports

Readme