https://supabase.com/ logo
Join Discord
Powered by
Hi all, new here, using Supabase with SvelteKit, d...
# javascript
r
Hi all, new here, using Supabase with SvelteKit, did a simple Todo with client side auth. https://github.com/robots4life/val https://val-todo.vercel.app/ Now kind of like to tackle Supabase with SvelteKit SSR auth and that proves a lot harder or at least there are lot more parts to it. Found this discussion last night https://github.com/supabase/supabase/discussions/5218 and happy to see all the content there. Is there more I need to know, could the answer in that discussion be used as a starting point for a tutorial or an example repo? @User if you are going to write a tutorial on SvelteKit SSR auth with Supabase I am very happy to assist you, trying to learn this, thank you. edit: I also found this https://github.com/supabase-community/svelte-supabase/pull/13 if someone is interested.
b
Hey @Rob, did you ever get a functioning app with SSR login via Supabase? I'm referring to that discussion on GitHub and I'm having a hard time applying the code there to a full SvelteKit app
r
@bjorgen I have not followed through with that code and postponed SvelteKit SSR Auth for several reasons, mainly them being there are too many parts to it that I have not learned and hence don't understand. However... In the May Svelte Blog.. https://svelte.dev/blog/whats-new-in-svelte-may-2022 There is a post.. SvelteKit JWT authentication tutorial by pilcrowOnPaper 😁 https://dev.to/pilcrowonpaper/sveltekit-jwt-authentication-tutorial-2m34 Regardless of any Tool or Library I would follow through with that tut so that I understand the parts that get the work done in SSR Auth.. and then move on to doing it with Supabase or any other service. Since I am happy to get this going, would you be interested to work through that article with me and see how far we can get ? Have you got much JS or Svelte experience ?
Hang on.. the person writing the tut even uses Supabase !
b
I’ll check that article out this evening! I’d be more than happy to work through with you. I’ll try and share some updates in this thread tonight when I get time to work through.
r
Just found this !
Matija is awesome !
For the setup he uses Prisma, but we might as well change that to anything we like.
I am giving GraphCMS a good whirl these days, could also set up things with that.
But first things first.. haha too eager to get all this going.
b
OK, so using the details in https://github.com/supabase/supabase/discussions/5218 I was able to use what eikaramba posted and post against the api/auth endpoint and set cookies. That said I'm doing this in a pretty manual process so far. I'm running supabase.signIn method, grabbing the session response from that, and posting against api/auth. I think if you do that from within SvelteKit it should set cookies but I haven't gotten that far just yet.
r
Great, it is a start. I have to have a mental model of what at all happens and what is stored where and accesses by who and passed along to what page to be able to understand what the code should do.
From this comment https://github.com/supabase/supabase/discussions/5218#discussioncomment-2775521 the logic of how this works should be something like this.
> but i can say that you can just use the login.js endpoint from #889 and make a post request from your login page to that endpoint. the endpoint is setting a httponly cookie (meaning the cookie is set by server in the header not by client in js) > which then is "read" by the hook.js file and then the token is stored in memory in the session object for access in the frontend. Does that make sense? However I need more details and how exactly this works. So yeah, I will go over what Matija made, including all the videos and the long post first and see if I can then make sense of what has to go where. Then I will try and translate that to the tut from "SvelteKit JWT authentication tutorial by pilcrowOnPaper" since that uses Supabase. Hope that will work out.
b
So I was able to make a little bit of progress today. I'm able to login and store the data in the cookie. However, I get an error related to not subscribing to the session, which makes me think I'm missing something w/ SvelteKit. The error is 
Cannot set session store before subscribing
. Anyway, here's my login component to at least get logged in and set the cookie against the code in the GH issue 5218. Basically, I'm doing programmatically what I was doing via a REST client previously and it sets the cookie correctly.
Copy code
<script>
    import { goto } from '$app/navigation';
    import { auth } from '$lib/auth';
    const signUpUser = async function () {
        const { user, session, error } = await auth.signUp({
            email: 'EMAIL',
            password: 'PASSWORD'
        });
        goto('/');
    };

    const signInUser = async function () {
        const { user, session, error } = await auth.signIn({
            email: 'EMAIL',
            password: 'PASSWORD'
        });
        const response = await fetch('/api/auth', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                session
            })
        });
        const json = await response.json();
        console.log(json);
        goto('/');
    };

    const signOutUser = async function () {
        const { error } = await auth.signOut();
        goto('/');
    };
</script>

<button on:click={signInUser}>Sign In</button>
<button on:click={signOutUser}>Sign Out</button>
s
This is not a good tutorial for reasons listed in the comments. Supabase has auth built-in, no need to roll one's own.
PreviousNext
Powered by