sveltekit helpers update #245

david-plugge · 2022-09-11T21:08:32Z

Closes #230

What kind of change does this PR introduce?

Support new versions of sveltekit (around 1.0.0-next.440 upwards, random guess based on their changelog)

What is the current behavior?

We can´t use auth helpers with the current version of sveltekit.

Additional context

Since there is no need for a Svelte component we could build the sveltekit helpers with tsup like the other packages.

PS:
SvelteKit is in release candidate phase!

Edit: very sorry for this huge commit :/

dlugoschvincent · 2022-09-11T21:38:21Z

Firstly, thank you for your work bringing the auth helpers up to date with the newest version of sveltekit.

I have one question. I don't see any example or possibility to trigger an action with authentication. All I see is authenticated data retrieval, but not authenticated data posting. Am I seeing this correctly, or how would I go about making an authenticated insert/update/delete from the server side?

david-plugge · 2022-09-11T21:50:47Z

Using supabaseServerClient you get a supabase instance that sends the users accessToken on every request.

I´ll add an example though!

Edit:

Completely misread your comment, there is missing a helper for actions. The same logic would apply though.
And you can always do supabaseServerClient(locals.accessToken)

Something like this:

export const load: Actions = {
  createPost: actionWithSession(
    { status: 401, '/signin' },
    async ({ session, getSupabaseClient }) => {
      // do something
    }
  )
}

david-plugge · 2022-09-11T21:57:25Z

To clarify a bit:

The helpers (load, serverLoad, server) check if there is a logged in user and if not redirects with the status and location provided. So the callback only runs when there is a session, which makes sense to me. There won´t be many pages that check if there is no session right?

There could be added even more to the event than just the session.

export const load: PageLoad = loadWithSession(
	{ status: 303, location: '/' },     	// the user is redirected if there is no session
	async ({ session }) => {				// we have a session and can make authenticated requests
		const { data: testTable } = await supabaseServerClient(session.accessToken)
			.from<TestTable>('test')
			.select('*');
		return {
			testTable,
			user: session.user  // the user is correctly typed, no need to check if it´s nullish
		};
	}
);

Since the helper has access to the session this is possible aswell:

export const load: PageLoad = loadWithSession(
	{ status: 303, location: '/' }, 
	async ({ getSupabaseClient }) => {
		const { data: testTable } = await getSupabaseClient()
			.from<TestTable>('test')
			.select('*');
		return {
			testTable,
        };
	}
);

Thoughts?

dlugoschvincent · 2022-09-11T22:04:40Z

Ok, thank you, I figured as much, but how do I get the access token in an action as there is a loadWithSession function but no “action with session” function. Maybe I am confused.

Imagine a scenario like this, where I want to make sure only authenticated users can insert into the database.
Would something like this be possible?

export const actions: Actions = {
  add: async ({ request }) => {
    const json = await request.json();
    supabaseServerClient(json.accessToken)
      .from<definitions['Food']>('Food')
      .insert({ bar_code: json.barCode });
  }
}

david-plugge · 2022-09-11T22:06:52Z

You can use locals in actions

export const actions: Actions = {
  add: async ({ request, locals }) => {
    if (!locals.accessToken) {
        throw redirect(303, '/signin');
    }
    const json = await request.json();
    supabaseServerClient(locals.accessToken)
      .from<definitions['Food']>('Food')
      .insert({ bar_code: json.barCode });
  }
}

dlugoschvincent · 2022-09-11T22:09:50Z

Okay, thank you so much, I will give it a try! Sorry for taking your time. Having an example for actions would be really helpful. I could think one up once this PR gets merged.

david-plugge · 2022-09-13T01:09:49Z

Updated docs

Feel free to leave some comments

kvetoslavnovak · 2022-09-15T07:09:10Z

I guess this dangerous SvelteKit data leaking in SSR issue should be checked as well.
There is even a proposed solution for a custom store reinventing the depreciated session store.
Edit: Regarding the draft of updated documentation it seems to me there is still depreciated import { session } from '$app/stores'; mentioned or is not?

david-plugge · 2022-09-15T09:41:50Z

Good catch, i found a few more issues in the readme.
Since we are only using the page store there is no chance data can leak.

david-plugge · 2022-09-15T14:59:24Z

I noticed one problem though that is also included in the current version.
The supabaseServerClient() method returns the supabase instance and sets the accessToken. If there is no token it wont be set. So now the global instance on the server uses that accessToken to make api calls and if a developer does not check if the access token is valid before using the helper data will leak.

user with valid accessToken makes a request -> global instance accessToken is set
user without token makes a request -> global instance reuses the accessToken from first request

I can think of two possible solutions:

throw an error if there is no accessToken
unset the accessToken
create a new supabase client on every request and store it in locals (PocketBase does it like this)

Option 3 sounds nice, but since we don´t have access to locals in load functions this isn´t the best option.

I prefer option 1 as there is no reason to use the helper method if you want to serve public data as you can simply use the global supabaseClient instance. That way you get feedback if you are doing something wrong.

kvetoslavnovak · 2022-09-16T08:10:08Z

@david-plugge please, can you check in your updated docs (Server-side data fetching with RLS and Protecting API routes) whether your imports are right?
Especially importing import { supabaseServerClient, withApiAuth} from '@supabase/auth-helpers-sveltekit'; but using getSupabaseClient and withAuth later on.

Thank you very much.

yzn-h · 2022-09-24T10:28:51Z

nice work guys, i really need this to be merged 😅

maxkozlowski · 2022-09-24T12:06:23Z

Great stuff guys, really appreciated all the work that has gone here!
Seconding @yzn-h - if you could merge it, that would help me a lot! 🙏

Edit: I've forked and published the new version via npm, but getting an error when trying to install.
npm ERR! Unsupported URL Type "workspace:": workspace:*

david-plugge · 2022-09-26T10:55:24Z

I've forked and published the new version via npm, but getting an error when trying to install.
npm ERR! Unsupported URL Type "workspace:": workspace:*

Have you published the package with npm or pnpm? I think npm doesn´t replace workspace:* with the actual version.

And you didn´t publish the auth-helpers-shared package right?

pnpm i @maxkozlowski/auth-helpers-sveltekit
> ERR_PNPM_NO_MATCHING_VERSION_INSIDE_WORKSPACE  In : No matching version found for @supabase/auth-helpers-shared@* inside the workspace

maxkozlowski · 2022-09-26T11:03:38Z

Have you published the package with npm or pnpm?
I published it with npm.

And you didn´t publish the auth-helpers-shared package right?
That's right, I didn't publish auth-helpers-shared.

Happy to try to publish both libraries with pnpm instead if that should work?

jamalmoir · 2022-09-26T11:08:03Z

Hopefully, it will be merged soon. It was just the weekend, and this is a company, so I assume they don't work on the weekends.

david-plugge · 2022-09-26T11:19:37Z

Happy to try to publish both libraries with pnpm instead if that should work?

It should, if not there is a bug. Make sure to change the package name of the shared helpers in the dependencies of the sveltekit helpers too

silentworks · 2022-09-26T12:26:03Z

Thanks for this @david-plugge, I will get a release out during this week after writing up the migration docs.

maxkozlowski · 2022-09-27T09:10:14Z

Thank you for merging the change and releasing so quickly! I've downloaded the library but I'm getting an error with one of imports in src/hooks.server.ts.

import { auth } from '@supabase/auth-helpers-sveltekit/server';
Cannot find module '@supabase/auth-helpers-sveltekit/server' or its corresponding type declarations.

Does anyone experience the same? Not sure how to fix this 🤔

david-plugge · 2022-09-27T10:28:32Z

Yeah that´s a known issue. If you have multiple entry points it´s hard to get ts intellisense working if they are not located in the packages root folder. I´ve setup publishConfig in the package.json to publish the dist folder only. It seems like @silentworks decided to remove that. To get it working like this (publishing the whole package, not just dist) we need to add this to the package.json:

"typesVersions": {
  "*": {
    "server": ["./dist/server/index.d.ts"],
    "./": ["./dist/index.d.ts"]
  }
}

I created a PR #267

maxkozlowski · 2022-09-27T11:24:30Z

Thank you David! Does that mean that we'll need to wait for the new release now?

mitjakukovec · 2022-09-27T11:31:27Z

@silentworks, was publishConfig in the package.json removed intentionally or if it will be re-introduced? Thanks!

jamalmoir · 2022-09-27T11:35:17Z

I'm getting ERR_MODULE_NOT_FOUND due to imports not having the extensions specified eg. import {...} from './utils/cookie' rather than import {...} from './utils/cookie.js'

How are people getting this to work?

david-plugge · 2022-09-27T11:35:27Z

Does that mean that we'll need to wait for the new release now?

In the meantime you can use this alias in your svelte.config.js

alias: {
	'@supabase/auth-helpers-sveltekit/server': './node_modules/@supabase/auth-helpers-sveltekit/dist/server'
}

But i think there are a few more issues that need to be addressed. It seems like $app/* is not accessible in a npm package while it works locally in the monorepo.

david-plugge · 2022-09-27T11:36:56Z

I'm getting ERR_MODULE_NOT_FOUND due to imports not having the extensions specified eg. import {...} from './utils/cookie' rather than import {...} from './utils/cookie.js'

How are people getting this to work?

Before the update there was a script that adds .js to every imported file to solve that issue. I removed it since it shouldn´t be an issue if the files are located in the packages root. I´ll add that script back in.

jamalmoir · 2022-09-27T11:38:55Z

I'm getting ERR_MODULE_NOT_FOUND due to imports not having the extensions specified eg. import {...} from './utils/cookie' rather than import {...} from './utils/cookie.js'
How are people getting this to work?

Before the update there was a script that adds .js to every imported file to solve that issue. I removed it since it shouldn´t be an issue if the files are located in the packages root. I´ll add that script back in.

So rather than it living in node_modules, it should live in your project root?

david-plugge · 2022-09-27T11:40:54Z

So rather than it living in node_modules, it should live in your project root?

No i mean in the folder node_modules/@supabase/auth-helpers-sveltekit. Currently they live in node_modules/@supabase/auth-helpers-sveltekit/dist. But i´m not 100% confident about that.

jamalmoir · 2022-09-27T11:41:44Z

So rather than it living in node_modules, it should live in your project root?

No i mean in the folder node_modules/@supabase/auth-helpers-sveltekit. Currently they live in node_modules/@supabase/auth-helpers-sveltekit/dist. But i´m not 100% confident about that.

Ah, OK I see. Got you, thanks

maxkozlowski · 2022-09-27T13:02:35Z

Has anyone got the new release to work in the end? I am unable to I'm afraid.

It would be fantastic to either get clear instructions as to how to get it to work or ETA when we might get a release that works.

jamalmoir · 2022-09-27T13:10:00Z

@maxkozlowski #267

maxkozlowski · 2022-09-28T13:02:39Z

Looks like the new release works well 👏
The only thing I'm struggling with now is log in. I've followed the instructions and used saveSession but getting an error:
No action with name 'default' found.

Has anyone come across this?

ak4zh · 2022-09-28T13:07:53Z

@maxkozlowski You need to create named action.

async signin({ request, cookies, url }) {}

to

signin: async ({ request, cookies, url }) => {}

and in your form use action=“?/signin”

david-plugge · 2022-09-28T13:08:44Z

Take a look at this example https://github.com/supabase/auth-helpers/blob/main/examples/sveltekit-email-password/src/routes/(app)/%2Bpage.server.ts :)

ak4zh · 2022-09-28T13:11:16Z

@david-plugge

Here It mentions auth callback api/auth/callback do we need to create that endpoint?

or it’s auto handled if we use the export const handle = auth();

Here it’s redirecting to /logging-in is that a special endpoint that needs to be created and do some special cookie saving stuff? Or we can redirect to any page including root and it is all handled by hooks.server.js ?

david-plugge · 2022-09-28T13:33:45Z

@ak4zh

auth() creates the endpoint for you
Thats just a page the user gets redirected to after successfull login. But since it´s email+password login it´s actually not needed there. You can use it when signing in using oAuth or magic-link.

maxkozlowski · 2022-09-30T10:19:27Z

Thanks both!

One more question: I'm getting some issues when trying to do password reset. I use supabaseClient.auth.api.resetPasswordForEmail with user's email and redirect them upon clicking the link to create the new password.

Even though the user appears to be logged in, when I try to do

const { user, error } = await supabaseClient.auth.update({
			password: password,
		})

I get an error Error: Not logged in.. Has anyone successfully completed password reset and could help?

Thank you 🙏

mitjakukovec · 2022-09-30T10:41:20Z

I followed all the steps on how to setup @supabase/auth-helpers-sveltekit.

Everything seems so trivial, but when I try to sign into my page using an authentication provider like google it will not work.

I am sure I am missing something here but I just can't figure it out.

On calling signing method like this

// +page.server.ts

const { user, session, error } = await supabase.auth.signIn({ provider: 'google' });

console.log('user:', user);
console.log('session:', session);
console.log('error:', error);

It will just return null for every property

Log output:

user: null
session: null
error: null

It is the same even if I use an authentication provider name, that is unsupported by Supabase.
How is it possible that it even doesn't return an error of some kind?

P. S.
On the Supabase page google is configured and enabled as an authentication provider.

Any ideas are more than welcome, Thanks!

david-plugge · 2022-09-30T11:24:19Z

@mitjakukovec you can´t get the session like that! signIn({ provider: 'google' }) returns { url: string }. You need to redirect the user to that url. After the user confirms the propmt by google he will be redirected back to your page with a token in the url hash. The supabase client will read that token and sync the session to the server.

So in case you are trying to achieve oauth login on the server, you simply can´t at the moment (maybe possible in the future).

Just call supabase.auth.signIn({ provider: 'google' }); on the client and you should be good to go. example

mitjakukovec · 2022-09-30T11:36:54Z

Thank you @david-plugge, this is exactly what I was doing wrong! I was trying to log in on the server and then somehow sync the session back to the client and not vice versa. As you can see I am not a web developer by trade, but C++ guy with mainly embedded systems experience.

Does it make sense to do the signin call on the server and then redirect the client to the received URL?

Something like this

// +page.server.ts

export const actions: Actions = {
    async signin({ request }) {
        const data = await request.formData();
        const provider = data.get('provider') as Provider;

        const { url } = await supabase.auth.signIn({ provider });
        throw redirect(303, url as string);
    },

    async signout({ cookies }) {
        deleteSession(cookies);
        throw redirect(303, '/');
    }
};

david-plugge · 2022-09-30T11:51:24Z

Does it make sense to do the signin call on the server and then redirect the client to the received URL?

Not really, since you need client js anyway to retrieve the token.
For oAuth signin i´d suggest using the client only to keep it simple :)

huge sveltekit update

31982a6

david-plugge added 4 commits September 12, 2022 18:36

fix public env prefix

169879d

combine into one helper

e5aa9c7

locals.session & better types

a3bee21

docs

943ae96

david-plugge added 3 commits September 13, 2022 03:20

actually remove the session client side

fe31387

missed those

7e6ce6a

session hook improvements

7d1e901

thorwebdev requested a review from silentworks September 15, 2022 05:56

thorwebdev added enhancement New feature or request sveltekit SvelteKit specific functionality labels Sep 15, 2022

remove deprecated session store

512ba4a

kvetoslavnovak mentioned this pull request Sep 16, 2022

Server-side data fetching with RLS - token in local.user instead of s… #206

Closed

david-plugge added 6 commits September 16, 2022 11:16

update docs

ddb0395

use client side logout

1610e7a

simplify withAuth & update docs

f9cee99

update sveltekit 1.0.0-next.483

0e9ce25

remove unused package script

4c8e6da

fix client & update examples

5e42a52

silentworks merged commit 9c82084 into supabase:main Sep 26, 2022

sveltekit helpers update #245

sveltekit helpers update #245

Conversation

david-plugge commented Sep 11, 2022 • edited

What kind of change does this PR introduce?

What is the current behavior?

Additional context

dlugoschvincent commented Sep 11, 2022 • edited

david-plugge commented Sep 11, 2022 • edited

david-plugge commented Sep 11, 2022 • edited

dlugoschvincent commented Sep 11, 2022

david-plugge commented Sep 11, 2022

dlugoschvincent commented Sep 11, 2022

david-plugge commented Sep 13, 2022

kvetoslavnovak commented Sep 15, 2022 • edited

david-plugge commented Sep 15, 2022

david-plugge commented Sep 15, 2022

kvetoslavnovak commented Sep 16, 2022

yzn-h commented Sep 24, 2022 • edited

maxkozlowski commented Sep 24, 2022 • edited

david-plugge commented Sep 26, 2022

maxkozlowski commented Sep 26, 2022

jamalmoir commented Sep 26, 2022

david-plugge commented Sep 26, 2022

silentworks commented Sep 26, 2022

maxkozlowski commented Sep 27, 2022 • edited

david-plugge commented Sep 27, 2022 • edited

maxkozlowski commented Sep 27, 2022

mitjakukovec commented Sep 27, 2022

jamalmoir commented Sep 27, 2022

david-plugge commented Sep 27, 2022

david-plugge commented Sep 27, 2022

jamalmoir commented Sep 27, 2022

david-plugge commented Sep 27, 2022

jamalmoir commented Sep 27, 2022

maxkozlowski commented Sep 27, 2022

jamalmoir commented Sep 27, 2022

maxkozlowski commented Sep 28, 2022 • edited

ak4zh commented Sep 28, 2022 • edited

david-plugge commented Sep 28, 2022

ak4zh commented Sep 28, 2022 • edited

david-plugge commented Sep 28, 2022 • edited

maxkozlowski commented Sep 30, 2022

mitjakukovec commented Sep 30, 2022 • edited

david-plugge commented Sep 30, 2022

mitjakukovec commented Sep 30, 2022 • edited

david-plugge commented Sep 30, 2022

david-plugge commented Sep 11, 2022 •

edited

dlugoschvincent commented Sep 11, 2022 •

edited

david-plugge commented Sep 11, 2022 •

edited

david-plugge commented Sep 11, 2022 •

edited

kvetoslavnovak commented Sep 15, 2022 •

edited

yzn-h commented Sep 24, 2022 •

edited

maxkozlowski commented Sep 24, 2022 •

edited

maxkozlowski commented Sep 27, 2022 •

edited

david-plugge commented Sep 27, 2022 •

edited

maxkozlowski commented Sep 28, 2022 •

edited

ak4zh commented Sep 28, 2022 •

edited

ak4zh commented Sep 28, 2022 •

edited

david-plugge commented Sep 28, 2022 •

edited

mitjakukovec commented Sep 30, 2022 •

edited

mitjakukovec commented Sep 30, 2022 •

edited