joey•5mo ago

Help fix the password auth in my sveltekit example

The official auth demo is using react: https://labs.convex.dev/auth/config/passwords I tried that in a new sveltekit app, but got some problems, please help me find out where I'm wrong. layout to init convex filename=src/routes/+layout.svelte:

<script lang="ts">
    import { PUBLIC_CONVEX_URL } from '$env/static/public';
    import { setupConvex } from 'convex-svelte';
    setupConvex(PUBLIC_CONVEX_URL);
</script>

<slot/>

<script lang="ts">
    import { PUBLIC_CONVEX_URL } from '$env/static/public';
    import { setupConvex } from 'convex-svelte';
    setupConvex(PUBLIC_CONVEX_URL);
</script>

<slot/>

UI to render the form filename=src/routes/+page.svelte:

<script lang="ts">
    import type { SubmitFunction } from "@sveltejs/kit";
    import { enhance, applyAction } from "$app/forms"

    const handleSubmit: SubmitFunction = () => {
        return async ({ update, result }) => {
            await update({ reset: false });
            await applyAction(result);
        };
    };
</script>

<form method="POST" action="?/login" use:enhance={handleSubmit}>
    <label>
        Email
        <input name="email" type="email" />
    </label>
    <label>
        Password
        <input name="password" type="password" />
    </label>
    <button>Login</button>
    <button formaction="?/signup">Sign up</button>
</form>

<script lang="ts">
    import type { SubmitFunction } from "@sveltejs/kit";
    import { enhance, applyAction } from "$app/forms"

    const handleSubmit: SubmitFunction = () => {
        return async ({ update, result }) => {
            await update({ reset: false });
            await applyAction(result);
        };
    };
</script>

<form method="POST" action="?/login" use:enhance={handleSubmit}>
    <label>
        Email
        <input name="email" type="email" />
    </label>
    <label>
        Password
        <input name="password" type="password" />
    </label>
    <button>Login</button>
    <button formaction="?/signup">Sign up</button>
</form>

Server to handle auth params filename=src/routes/+page.server.ts:

import { signIn } from "../convex/auth.js";

export const actions = {
    login: async ({request}) => {
        const formData = await request.formData();
        const email = formData.get('email');
        const password = formData.get('password');
        signIn('password', { params: { email, password } });
    },
}

import { signIn } from "../convex/auth.js";

export const actions = {
    login: async ({request}) => {
        const formData = await request.formData();
        const email = formData.get('email');
        const password = formData.get('password');
        signIn('password', { params: { email, password } });
    },
}

Passwords - Convex Auth

Authentication library for your Convex backend

1 Reply

joeyOP•5mo ago

react is too difficult for me, in my demo app, the login action can receive form data, but the signIn method from auth.js require a GenericActionCtx, I don't know what's that

Help fix the password auth in my sveltekit example

Did you find this page helpful?