CORS error when trying to access supabase from a docker container
Hello,
I would like to dockerize a Svelte app that uses Supabase Auth. I am running Supabase CLI locally and the API url is available at
http://localhost:54321
To access this url from within the Docker container I use the http://host.docker.internal:54321 url (https://docs.docker.com/desktop/networking/#i-want-to-connect-from-a-container-to-a-service-on-the-host)
This approach however produces a CORS error when trying to use Auth - see attached screenshot.
I could not find a cors parameter in the config.toml settings file of Supabase CLI. How can I add/update CORS to include the host.docker.internal origin?
In general, what is the recommended practice for using Supabase locally together with a dockerized web app?
Many thanks for the help!24 Replies
is this local development?
are you using some kind of tunnel (ngrok or cloudflare tunnel or something else) to expose your callback endpoint to the internet?
did you add your internet available endpoint address to your supabase dashboard allowable addresses for callbacks?
Hi @Socal, thanks for your reply.
Yes, I am running everything on my local machine - local development environment.
Supabase CLI runs directly on the host machine (MacOS), and the API url is available at the standard port:
http://localhost:54321
The Svelte app runs inside a docker container, started with docker compose. In order for the Svelte app to access the supabase url (container --> host), I am using the special DNS name host.docker.internal, which resolves to the internal IP address used by the host. This is standard practice in docker containers.
For some reason though Supabase does not accept the incoming connection from the app in the docker container, and I get the above CORS issue.
I have tried adding the http://host.docker.internal:54321 to the auth.additional_redirect_urls list of callback urls in the config.toml file of Supabase CLI, but that didn't work.
I tried to find some sort of way to change the Supabase Auth CORS settings, but I do not think this is possible. Just wondering what are other people doing when they want to use Supabase with dockerized apps..did you adjust sveltekit cors as well?
is it svelte or sveltekit?
if it's sveltekit you're going to need to turn off checkOrigin in the svelte.config.js file
Thanks! I have already done this!
In svelte.config.js, I have set config.kit.csrf.checkOrigin to false
Hmm do you think the issue is on the Sveltekit side?
not if you have that set to false
just trying to get the easy stuff out of the way since it looks like you're running kubernetes and trying to have the servers in the clusters talk to each other
so if you have csrf turned off it's likley not a client side issue. are you able to connect to he postgres database via a different method other than your client? (db utility)
No, I'm not running kubernetes. Just a simple Dockerfile with docker-compose. One container only, running the sveltekit app.
are you starting supabase via the supabase cli?
Yes, when I run the Sveltekit app directly (outside docker) with
npm run dev and set the database url to http://localhost:54321 I am able to connect to the database, and use Supabase Auth (that's what I need).
yep, I'm running supabase start
(thanks so much for looking into this)why is this instead of
When running an app inside a docker container, localhost points to the app running inside the docker and not to the host machine (where Supabase CLI is running). So if I use
localhost:54321 I get a connection error.
This docker doc article covers connecting from a container to the host machine: https://docs.docker.com/desktop/networking/#i-want-to-connect-from-a-container-to-a-service-on-the-host
The article recommends using http://host.docker.internal:54321 inside the docker container, which should connect to the service (supabase) running on the host.i think i see what's happening
I think there are two issues:
1) If I use
http://localhost:54321, then I am able to request a magic link with Supabase Auth (because this part runs on the client, in the browser, and the browser is able to see the locally running Supabase API url. However when I click the magic link, the server side authentication of the OTP fails, because that part runs on the backend server (which is inside the container), so it can't connect to the Supabase server.
2) If I use http://host.docker.internal:54330, then the browser tries to connect to this url but it doesn't exist.in config.toml the additional_redirect_urls needs to be the full url that you're calling. example
(I just tested a random invalid url, and got the same CORS error message, which means it's not necessarily a cors issue, it could be an unreachable server)
not that
whatever the full redirect url is
i can't see it from the error message
Let me try~!
this url needs to be in the additional redirects
I have added the full url in the additional_redirect_urls - didn't work. When I set the database url to
http://host.docker.internal:54321 it's not even generating a magic link. I get the error as soon as I enter the email address in the login form.
I think this is the reason...
https://discord.com/channels/839993398554656828/1194987826220118106/1195485912965058570
sorry I meant to link to this message:
sveltekit has a browser checker https://stackoverflow.com/questions/67808939/how-can-i-tell-whether-sveltekits-load-function-is-running-on-the-server-vs
Stack Overflow
How can I tell whether SvelteKit's "load" function is running on th...
I'm trying to do API calls in a SvelteKit page from the load function, but I don't want to proxy these calls with local endpoints because I want to keep the web server as light as possible.
What I ...
you can probably use that to help you out. or you can use the supabase auth helpers to help out on what is a client side supabase vs a server side supbase https://supabase.com/docs/guides/auth/server-side/migrating-to-ssr-from-auth-helpers?framework=sveltekit
Migrating to the SSR package from Auth Helpers | Supabase Docs
Step-by-step guide to migrating your app to the new SSR package
Thank you! I'll check this out right now
I appreciate your help and time very much!
ok I actually figured it out!
I edited my MacOS
/etc/hosts file, and added the host.docker.internal url to point to localhost. Then set the database url to http://host.docker.internal:54321, as I was doing before and it worked.
The browser (client side) was able to see the supabase url, and the backend was able to verify the OTP using this url.
Thank you so much for your help and ideas! 🙂