Supabase•9mo ago

Problem with Setting up Server-Side Auth for SvelteKit

I have followed exectly the supabase documentation for setting up up server-side Auth for my sveltekit app. but when i try to use sign up i get the following error "AuthUnknownError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON" Please help me how to fix it??

10 Replies

j4•9mo ago

Can you show the code you're using for the signup? Also, which SvelteKit docs? There are a couple of places.

SaryassOP•9mo ago

https://supabase.com/docs/guides/auth/server-side/sveltekit

Setting up Server-Side Auth for SvelteKit | Supabase Docs

j4•9mo ago

Based on the error, I wonder if Sveltekit is returning an html error page to you. Is the error being thrown or is it the error returned from signUp or what?

SaryassOP•9mo ago

the Error is returned from the signUP. When I try to fill in my form in frontend, after submitting the form i get this error. Let me provide you the whole error i get in detail. here is the error i get in my terminal: There has been an erro🤬 AuthUnknownError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON at handleError (/Users/saryass/Desktop/Svelte 5-Folder/svelte5-bookLibrary/node_modules/@supabase/auth-js/dist/main/lib/fetch.js:34:15) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async _handleRequest (/Users/saryass/Desktop/Svelte 5-Folder/svelte5-bookLibrary/node_modules/@supabase/auth-js/dist/main/lib/fetch.js:114:9) at async _request (/Users/saryass/Desktop/Svelte 5-Folder/svelte5-bookLibrary/node_modules/@supabase/auth-js/dist/main/lib/fetch.js:95:18) at async SupabaseAuthClient.signUp (/Users/saryass/Desktop/Svelte 5-Folder/svelte5-bookLibrary/node_modules/@supabase/auth-js/dist/main/GoTrueClient.js:287:23) <anonymous>:128:18) at async render_page (eval at runInlinedModule (file:///Users/saryass/Desktop/Svelte%205-Folder/svelte5-bookLibrary/node_modules/vite/dist/node/module-runner.js:1049:11), <anonymous>:63:20) at async resolve (eval at runInlinedModule (file:///Users/saryass/Desktop/Svelte%205-Folder/svelte5-bookLibrary/node_modules/vite/dist/node/module-runner.js:1049:11), <anonymous>:379:24) at async respond (eval at runInlinedModule (file:///Users/saryass/Desktop/Svelte%205-Folder/svelte5-bookLibrary/node_modules/vite/dist/node/module-runner.js:1049:11), <anonymous>:271:22) { __isAuthError: true, status: undefined, code: undefined, originalError: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON at JSON.parse (<anonymous>) at parseJSONFromBytes (node:internal/deps/undici/undici:4306:19) } init null init { success: false, errors: [] }

j4•9mo ago

Ok, thanks. Just to verify, can you share the form action code you're using to handle the signUp? And possibly the form html too.

SaryassOP•9mo ago

the action is in the code i have already shown you, but here is my form along with the HTML. i made it a generic component

<script lang="ts">
    import { Button } from '$components';
    import type { ActionData } from '../../routes/register/$types';

    interface componentProps {
        isRegistration: boolean;
        form: ActionData; 
    }
    let { isRegistration, form }: componentProps = $props();
</script>

<div class="default-margin auth-container">
    <h1 class="mb-l">{isRegistration ? 'Register' : 'Login'}</h1>

    <div class="form-and-social-login">
        <form class="auth-form" method="POST">
        {#if form && form.errors?.length}
                {#each form.errors as error}
                    <div class="auth-error">
                        <p>{error}</p>
                    </div>
                {/each}
            {/if}
{#if isRegistration}
                <input placeholder="Name" type="text" name="name" />
            {/if}

            <input placeholder="Email" type="text" name="email" />
            <input placeholder="Password" type="password" name="password" />

            {#if isRegistration}
                <input placeholder="Confirm password" type="password" name="passwordConfirmation" />
            {/if}

            <Button type="submit">{isRegistration ? 'Register' : 'Login'}</Button>
            {#if isRegistration}
                <p class="auth-hint mt-s">Already have an account? <a href="/login">Log In</a></p>
            {:else}
                <p class="auth-hint mt-s">Don't have an account yet? <a href="/register">Register</a></p>
            {/if}
        </form>

        <div class="social-login">
            <!-- add a button here later -->
        </div>
    </div>
</div>

<script lang="ts">
    import { Button } from '$components';
    import type { ActionData } from '../../routes/register/$types';

    interface componentProps {
        isRegistration: boolean;
        form: ActionData; 
    }
    let { isRegistration, form }: componentProps = $props();
</script>

<div class="default-margin auth-container">
    <h1 class="mb-l">{isRegistration ? 'Register' : 'Login'}</h1>

    <div class="form-and-social-login">
        <form class="auth-form" method="POST">
        {#if form && form.errors?.length}
                {#each form.errors as error}
                    <div class="auth-error">
                        <p>{error}</p>
                    </div>
                {/each}
            {/if}
{#if isRegistration}
                <input placeholder="Name" type="text" name="name" />
            {/if}

            <input placeholder="Email" type="text" name="email" />
            <input placeholder="Password" type="password" name="password" />

            {#if isRegistration}
                <input placeholder="Confirm password" type="password" name="passwordConfirmation" />
            {/if}

            <Button type="submit">{isRegistration ? 'Register' : 'Login'}</Button>
            {#if isRegistration}
                <p class="auth-hint mt-s">Already have an account? <a href="/login">Log In</a></p>
            {:else}
                <p class="auth-hint mt-s">Don't have an account yet? <a href="/register">Register</a></p>
            {/if}
        </form>

        <div class="social-login">
            <!-- add a button here later -->
        </div>
    </div>
</div>

silentworks•9mo ago

You haven’t shared any action here, please provide the code you have in your project.

j4•9mo ago

So I take it you are just using a default form action? Supposedly exatly what's in the guide.

silentworks•9mo ago

I can tell you that following that exact guide doesn’t result in this error. There is always a step skipped when this sort of thing happens.

j4•9mo ago

Have you console logged the info in the form action, just to make sure it's what you expect? Understood.

Gaming

Programming

Problem with Setting up Server-Side Auth for SvelteKit

Did you find this page helpful?