Use Supabase with Hono
Learn how to create a Supabase project, add some sample data to your database, secure it with auth, and query the data from a Hono app.
1
Create a Hono app
Bootstrap the Hono example app from the Supabase Samples using the CLI.
Terminal
1npx supabase@latest bootstrap hono
2
Install the Supabase client library
The package.json file in the project includes the necessary dependencies, including @supabase/supabase-js and @supabase/ssr to help with server-side auth.
Terminal
1npm install
3
Set up the required environment variables
Copy the .env.example file to .env and update the values with your Supabase project URL and publishable key.
Lastly, enable anonymous sign-ins in the Auth settings.
Project URL
To get your Project URL, log in.
Publishable key
To get your Publishable key, log in.
Terminal
1cp .env.example .env
You can also get the Project URL and key from the project's Connect dialog.
Get API details#
Now that you've created some database tables, you are ready to insert data using the auto-generated API.
To do this, you need to get the Project URL and key from the project Connect dialog.
Read the API keys docs for a full explanation of all key types and their uses.
Changes to API keys
Supabase is changing the way keys work to improve project security and developer experience. You can read the full announcement, but in the transition period, you can use both the current anon and service_role keys and the new publishable key with the form sb_publishable_xxx which will replace the older keys.
The legacy keys will be deprecated shortly, so we strongly encourage switching to and using the new publishable and secret API keys.
In most cases, you can get the correct key from the Project's Connect dialog, but if you want a specific key, you can find all keys in the API Keys section of a Project's Settings page:
For new keys, open the API Keys tab, if you don't have a publishable key already, click Create new API Keys, and copy the value from the Publishable key section.
4
Start the app
Start the app, go to http://localhost:5173.
Learn how server side auth works with Hono.
Terminal
1npm run dev
Next steps#
- Learn how server side auth works with Hono.
- Insert more data into your database
- Upload and serve static files using Storage