How to fix 405 error code from displaying before auth comes back from supabase

I am using Supabase to handle auth in my Sveltekit app. When user logs in with proper credentials after they have signed up, I am getting a quick flash onscreen that says 405 POST method not allowed. No actions exist for this page. That appears until the session is returned to me from Supabase, and then app redirects as it should properly. Why is this error message flashing and what can I do to prevent this? Do I need to set a boolean isLoading and display something over it while networking is happening? Here is my code in +page.svelte, thanks a lot!

<script lang="ts">
    import { enhance } from '$app/forms'

    // var to track if user is signing in or needs to create new user
    let isSignIn = true
    let email=""
    let password = ''
    let errorMessage=""

    // getting our supabase instance to use
    export let data
    let { supabase } = data
    $: ({ supabase } = data)

    // toggles the state
    const setIsSignIn = () => (isSignIn = !isSignIn)

    $: titleText = isSignIn ? 'Sign in' : 'Create new account'
    $: buttonText = isSignIn ? 'Need an account?' : 'Sign in'

    async function handleAuth(event: Event) {
        event.preventDefault() // Prevent the default form submission behavior
        if (isSignIn) {
            let { error } = await supabase.auth.signInWithPassword({ email, password })
            if (error) {
                console.log(error)
                errorMessage = error.message
            }
        } else {
            let { error } = await supabase.auth.signUp({ email, password })
            if (error) {
                console.log(error)
                errorMessage = error.message
            }
        }
    }
</script>

<div class="content">
    <h3>{titleText}</h3>
    <form method="POST" use:enhance on:submit={handleAuth}>
        <input type="email" placeholder="email address" bind:value={email} />
        <input type="password" placeholder="password" bind:value={password} />
        <button class="btn variant-filled" type="submit">Submit</button>
    </form>
    {#if errorMessage}
        <div class="error-message">
            <p>{errorMessage}</p>
        </div>
    {/if}

    <button on:click={setIsSignIn}>{buttonText}</button>
</div>

I tried to run this code and it does work, however the 405 error is showing up when I don’t want that. How can I prevent this bad UI from showing up?

Leave a Comment