Setting up email and password authentication on sveltekit using form actions
Hello ,
I have been trying to setup authentication with email and password using sveltekit form actions and superforms.
The onerror method gives undefined as the context error message even though data is being passed successfully .
A guide on how to solve this problem would be much appreciated.
14 Replies
Are you logging in the user on the serverside of svelte or directly from the client to better auth?
How does your code look like?
server side using sveltekit form actions(https://svelte.dev/docs/kit/form-actions) + svelte superforms(https://superforms.rocks/) after form validation i pass that data to the better-auth signup method ...the one on basic usage and my implementation are similar. The request is received successfully but it throws the (onError) method with an undefined error message context
Form actions • Docs • Svelte
Form actions • Svelte documentation
Superforms
Superforms - Form library for SvelteKit
Yeah but can you send the code?
in your +page.server.ts
mport type { Actions } from './$types';
import { superValidate } from 'sveltekit-superforms';
import { message } from 'sveltekit-superforms';
import { fail, redirect, type Action } from '@sveltejs/kit';
import { zod } from 'sveltekit-superforms/adapters';
import { z } from 'zod';
import { authClient } from '$lib/auth-client';
// Define outside the load function so the adapter can be cached
const schema = z.object({
name: z.string().min(4).max(100),
email: z.string().email(),
password: z.string().min(4)
});
export const load = async () => {
const form = await superValidate(zod(schema));
// Always return { form } in load functions
return { form };
};
export const actions = {
default: async ({ request }) => {
let form = await superValidate(request, zod(schema));
console.log(form);
const { email, password, name } = form.data;
if (!form.valid) {
// Return { form } and things will just work.
return fail(400, { form });
}
await authClient.signUp.email({
email, // user email address
password, // user password -> min 8 characters by default
name, // user display name
// User image URL (optional)
fetchOptions: {
onRequest(context) {
console.log(context.body, 'in progress');
},
onError(context) {
console.log(context.error.message);
}
}
});
return message(form, 'Form posted successfully!');
}
} satisfies Actions;
I don't think you can use the client variant of better auth there
As its ran server side
I see. Is it possible for you todo a quick implementation of what im trying to do...whats the alternative is the question im trying to ask👀
You do have to parse the headers with the server side api
Ohh...okay thanks a ton . I was completely lost
Did it work?
I have not implemented...I got so frustrated I delete the project and had a nap for a bit🥲
Haha alr
When it works out ill share here and to your inbox if your okay comfortable
You can just ping me here i'll most defn read it
import { fail } from '@sveltejs/kit';
import type { Actions, PageServerLoad } from './$types';
import { superValidate, message } from 'sveltekit-superforms';
import { formSchema } from '$lib/zod/schema';
import { zod } from 'sveltekit-superforms/adapters';
import { auth } from '$lib/auth';
export const load: PageServerLoad = async () => {
return {
form: await superValidate(zod(formSchema))
};
};
export const actions = {
default: async (event) => {
const form = await superValidate(event, zod(formSchema));
const { name, email, password } = form.data;
if (!form.valid) {
return fail(400, {
form
});
}
await auth.api.signUpEmail({
body: {
name: name,
email: email,
password: password
}
});
return message(form, 'Valid form!');
}
} satisfies Actions;
import { fail } from '@sveltejs/kit';
import type { Actions, PageServerLoad } from './$types';
import { superValidate, message } from 'sveltekit-superforms';
import { userSchema } from '$lib/zod/schema';
import { zod } from 'sveltekit-superforms/adapters';
import { auth } from '$lib/auth';
export const load: PageServerLoad = async () => {
return {
form: await superValidate(zod(userSchema))
};
};
export const actions = {
default: async (event) => {
const form = await superValidate(event, zod(userSchema));
const { email, password } = form.data;
if (!form.valid) {
message(form, 'wupps');
return fail(400, {
form
});
}
await auth.api.signInEmail({
body: {
email: email,
password: password
}
});
return message(form, 'Valid form!');
}
} satisfies Actions;
...signin works kind of the same...and cookies are set all...protecting routes is next i think