Supabase•2y ago

Can't get SvelteKit + Supabase Auth Working 🙁

I've tried every tutorial I can find including the ones in the official docs. They're all either outdated, don't work, or both. The official docs use the auth-helpers scheme even though the recommended method is to use the newer SSR module. But I can't get that far because the tutorial ends up in a 500 error:

Cannot read properties of undefined (reading 'auth')
    at +layout.svelte:14:16

Cannot read properties of undefined (reading 'auth')
    at +layout.svelte:14:16

For some reason the supabase object isn't making into my layout file. So after several hours of having no fun at all, my question is... Has anyone managed to successfully get SvelteKit working with Supabase Auth? Are there any current/working tutorials out there that I haven't found? Anyone got a recent GitHub showing it working? I really really want to love Supabase. But so far it's just been a huge bummer. Literally step one of the tutorial fails with this error:

 ~/Sandbox/test  npm install @supabase/auth-helpers-sveltekit @supabase/supabase-js
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: test@0.0.1
npm ERR! Found: @sveltejs/kit@2.0.6
npm ERR! node_modules/@sveltejs/kit
npm ERR!   dev @sveltejs/kit@"^2.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @sveltejs/kit@"^1.15.4" from @supabase/auth-helpers-sveltekit@0.10.7
npm ERR! node_modules/@supabase/auth-helpers-sveltekit
npm ERR!   @supabase/auth-helpers-sveltekit@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /Users/sean/.npm/_logs/2023-12-30T00_30_02_174Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/sean/.npm/_logs/2023-12-30T00_30_02_174Z-debug-0.log

 ~/Sandbox/test  npm install @supabase/auth-helpers-sveltekit @supabase/supabase-js
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: test@0.0.1
npm ERR! Found: @sveltejs/kit@2.0.6
npm ERR! node_modules/@sveltejs/kit
npm ERR!   dev @sveltejs/kit@"^2.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @sveltejs/kit@"^1.15.4" from @supabase/auth-helpers-sveltekit@0.10.7
npm ERR! node_modules/@supabase/auth-helpers-sveltekit
npm ERR!   @supabase/auth-helpers-sveltekit@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /Users/sean/.npm/_logs/2023-12-30T00_30_02_174Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/sean/.npm/_logs/2023-12-30T00_30_02_174Z-debug-0.log

Seriously not inspiring much confidence so far.

12 Replies

garyaustin•2y ago

Not up on the latest Sveltekit stuff, but I believe 2 is about 2weeks old. I'm not sure how much testing has occurred with that version considering the time of year. https://github.com/supabase/auth-helpers/issues/706

GitHub

Sveltekit 2.0 cookie API change · Issue #706 · supabase/auth-helpers

Bug report I confirm this is a bug with Supabase, not with my own application. I confirm I have searched the Docs, GitHub Discussions, and Discord. Describe the bug Recently Sveltekit 2.0 was relea...

garyaustin•2y ago

https://stackoverflow.com/questions/77703064/sveltekit-run-build-warning-to-load-an-es-module-set-type-module-in-the

Stack Overflow

Sveltekit run build = Warning: To load an ES module, set "type": "m...

I wrote a simple Sveltekit Application with the Skeleton UI. I created the build folder using npm run build. If I locally run this via node using node index.js it works fine, and the site is access...

francis•2y ago

yeah, I have this working in production, but I'm using kit 1.x still. @cp-sean you should be able to safely ignore the dependency mismatch warning, the sveltekit 1.x to 2.x differences shouldn't impact the auth bits feel free to ping me direct if you need extra help. I have been meaning to put together a sveltekit + supabase started based on my knowledge anyway, maybe we could give it a go?

cp-seanOP•2y ago

Hey that sounds great! I'm actually just now going through Joy Of Code's explanation of SvelteKit data flow to patch up a few knowledge gaps around hooks > +layout.server.js > +layout.js – Once I'm 100% solid around that, I think it should be just a matter of reading the Supabase docs and using the supabase object. I'm in San Francisco; what timezone are you in? Let's collaborate! 🙂

francis•2y ago

EST (also, highly recommend using typescript)

francis•2y ago

for anyone else who needs it: https://github.com/fnimick/sveltekit-supabase-auth-starter

GitHub

GitHub - fnimick/sveltekit-supabase-auth-starter: A starter templat...

A starter template for Sveltekit v2 with Supabase Auth used for authentication - GitHub - fnimick/sveltekit-supabase-auth-starter: A starter template for Sveltekit v2 with Supabase Auth used for au...

Calabresac•2y ago

I've implemented this code in a fresh repo, it successfully sends the magic link, but clicking the link in the inbucket never seems to establish a user session .ie it's always "session": null. Difficult for me to figure out what's going wrong since there are no errors. *edit: figured it out, I had generated my supabase types to a different path, working great now, thanks for sharing!

alka_99•2y ago

HI @francis I was using your code like almost copying your entire auth, but i had facing some problem i always get

 TypeError: getSession is not a function
    at load (/home/haikal/grorental/svelte/p2/grorental-dashboard/src/routes/+layout.server.ts:5:18)
    at Module.load_server_data (/home/haikal/grorental/svelte/p2/grorental-dashboard/node_modules/@sveltejs/kit/src/runtime/server/page/load_data.js:60:41)
    at /home/haikal/grorental/svelte/p2/grorental-dashboard/node_modules/@sveltejs/kit/src/runtime/server/page/index.js:143:19
TypeError: getSession is not a function
    at load (/home/haikal/grorental/svelte/p2/grorental-dashboard/src/routes/+layout.server.ts:5:18)
    at Module.load_server_data (/home/haikal/grorental/svelte/p2/grorental-dashboard/node_modules/@sveltejs/kit/src/runtime/server/page/load_data.js:60:41)
    at Module.respond_with_error (/home/haikal/grorental/svelte/p2/grorental-dashboard/node_modules/@sveltejs/kit/src/runtime/server/page/respond_with_error.js:49:32)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async resolve (/home/haikal/grorental/svelte/p2/grorental-dashboard/node_modules/@sveltejs/kit/src/runtime/server/respond.js:479:12)
    at async Module.respond (/home/haikal/grorental/svelte/p2/grorental-dashboard/node_modules/@sveltejs/kit/src/runtime/server/respond.js:282:20)
    at async file:///home/haikal/grorental/svelte/p2/grorental-dashboard/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:502:22

 TypeError: getSession is not a function
    at load (/home/haikal/grorental/svelte/p2/grorental-dashboard/src/routes/+layout.server.ts:5:18)
    at Module.load_server_data (/home/haikal/grorental/svelte/p2/grorental-dashboard/node_modules/@sveltejs/kit/src/runtime/server/page/load_data.js:60:41)
    at /home/haikal/grorental/svelte/p2/grorental-dashboard/node_modules/@sveltejs/kit/src/runtime/server/page/index.js:143:19
TypeError: getSession is not a function
    at load (/home/haikal/grorental/svelte/p2/grorental-dashboard/src/routes/+layout.server.ts:5:18)
    at Module.load_server_data (/home/haikal/grorental/svelte/p2/grorental-dashboard/node_modules/@sveltejs/kit/src/runtime/server/page/load_data.js:60:41)
    at Module.respond_with_error (/home/haikal/grorental/svelte/p2/grorental-dashboard/node_modules/@sveltejs/kit/src/runtime/server/page/respond_with_error.js:49:32)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async resolve (/home/haikal/grorental/svelte/p2/grorental-dashboard/node_modules/@sveltejs/kit/src/runtime/server/respond.js:479:12)
    at async Module.respond (/home/haikal/grorental/svelte/p2/grorental-dashboard/node_modules/@sveltejs/kit/src/runtime/server/respond.js:282:20)
    at async file:///home/haikal/grorental/svelte/p2/grorental-dashboard/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:502:22

any idea with this issues? i recheck everything i already make sure everything id copied.

francis•2y ago

here's your problem:

TypeError: getSession is not a function
    at load (/home/haikal/grorental/svelte/p2/grorental-dashboard/src/routes/+layout.server.ts:5:18)

TypeError: getSession is not a function
    at load (/home/haikal/grorental/svelte/p2/grorental-dashboard/src/routes/+layout.server.ts:5:18)

did you set up the hooks properly?

alka_99•2y ago

i think i was, i add your code to my code

alka_99•2y ago

francis•2y ago

hooks not the server load you have to explicit define getSession yourself

Gaming

Programming

Can't get SvelteKit + Supabase Auth Working 🙁

Did you find this page helpful?