Local Supabase Auth Setup
There doesn't seem to be a lot of clear info online for setting up Authentication on localhost, so I thought I would write one. I'm currently trying to develop my next project local-first, which is good practice. Here are few things I'm learning along the way.
ENV Files#
Add your Client ID and Secret to your .env file, as you don't want the info readily available on GitHub.
GOOGLE_CLIENT_ID=...
GOOGLE_CLIENT_SECRET=...
TOML File#
Edit your config.toml file to add your auth inside env() functions like so:
[auth.external.google]
enabled = true
client_id = "env(GOOGLE_CLIENT_ID)"
secret = "env(GOOGLE_CLIENT_SECRET)"
# Overrides the default auth redirectUrl.
redirect_uri = "http://localhost:54321/auth/v1/callback"
# Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
# or any other third-party OIDC providers.
url = ""
Package.json#
Add a stop and start command like sb:start and sb:stop to your package.json for easy use.
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"test": "playwright test",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"test:unit": "vitest",
"lint": "prettier --plugin-search-dir . --check . && eslint .",
"format": "prettier --plugin-search-dir . --write .",
"sb:stop": "npx env-cmd npx supabase stop",
"sb:start": "npx env-cmd npx supabase start"
},
If you use a Linux system or Mac, you should be able to use something like:
source ./.env && npx supabase start
This depends on where your .env file is located.
However, if you use Windows, you will need to install env-cmd first:
npm i -D env-cmd
then use this command instead:
npx env-cmd npx supabase start
You will need load the .env file for both stop and start. Now you can use:
npm run sb:stop
npm run sb:start
Callback#
Make sure to use:
http://localhost:54321/auth/v1/callback
as your callback URL. This doesn't seem to be clear anywhere. For Google, i.e., you need to add this to your "Authorized redirect URIs" after you follow the Google Setup.
Now you can Login with Google using only a Localhost setup.
J
Comments
Share a thought or join the conversation.
Sign In to comment or reply.