การรับรองความถูกต้องที่ปลอดภัยและปลอดภัยใน SvelteKit ด้วย Lucia, PlanetScale และ Upstash Redis

ตอนนี้เรามาดูที่ 497 วัตถุ เราสามารถรับข้อมูลแบบฟอร์มจากออบเจ็กต์คำขอ และดูแลทำความสะอาดขั้นพื้นฐาน

actions = {
 default: async ({ request, locals }) => {
 const formData = await request.formData();
 const email = formData.get("email") as string;
 const password = formData.get("password") as string;
 const fields = [email, password];
 
 if (fields.some(field => !field)) {
 return fail(400, {
 error: "All fields are required"
 });
 }

ต่อไปเราจะลองลงชื่อเข้าใช้ผู้ใช้ หากไม่มีผู้ใช้อยู่หรือรหัสผ่านไม่ถูกต้อง Lucia จะแจ้งข้อผิดพลาด เราได้เตรียมพร้อมสำหรับเหตุการณ์นี้โดยการตรวจจับข้อผิดพลาดและส่งคืนการตอบกลับ 400 รายการพร้อมกับข้อความแสดงข้อผิดพลาด

try {
 const user = await auth.useKey(PROVIDER_ID.EMAIL, email.toLowerCase(), password);
 
 const session = await auth.createSession({
 userId: user.userId,
 attributes: {}
 });
 
 locals.auth.setSession(session);
} catch (err) {
 if (
 err instanceof LuciaError &&
 (err.message === 'AUTH_INVALID_KEY_ID' || err.message === 'AUTH_INVALID_PASSWORD')
 ) {
 return fail(400, {
 error: 'Incorrect username of password'
 });
 }
 
 return fail(400, {
 error: 'An unknown error occurred'
 });
}

หากมีผู้ใช้อยู่และรหัสผ่านถูกต้อง เราจะสร้างเซสชันใหม่

และสุดท้าย เราจะเปลี่ยนเส้นทางผู้ใช้ไปยังแดชบอร์ด

return redirect('/app');

ดังที่คุณคงทราบได้ว่า Lucia ขจัดความซับซ้อนในการรับรองความถูกต้องออกไปมากมาย สิ่งที่เราต้องทำคือเรียกวิธีการที่ถูกต้อง แล้วลูเซียจะจัดการส่วนที่เหลือ

ไม่จำเป็นต้องแฮชรหัสผ่าน สร้างเซสชัน หรือจัดการคุกกี้ ลูเซียทำทุกอย่างเพื่อเรา และปลอดภัยทุกประเภท!

การสร้างหน้าลงทะเบียน

สร้างไฟล์ใหม่ใน 501 .

หน้าลงทะเบียนจะคล้ายกับหน้าลงชื่อเข้าใช้มาก ดังนั้นจึงไม่มีอะไรจะอธิบายมากนัก ข้อแตกต่างเพียงอย่างเดียวคือเราขอให้ยืนยันรหัสผ่าน

<script lang="ts">
 import { enhance } from '$app/forms';
 import { Button, Input, Label, PasswordInput } from '$lib/components/common';
 import type { ActionData } from './$types';
 
 export let form: ActionData;
 
 let loading = false;
 let email = '';
 let password = '';
 let passwordConfirmation = '';
</script>
 
<form
 method="POST"
 use:enhance={() => {
 loading = true;
 
 return async ({ update }) => {
 loading = false;
 
 update();
 };
 }}
>
 {#if form && form.error}
 <div class="p-2 mb-4 text-sm text-center text-red-900 bg-red-200 rounded-sm">
 Error: {form.error}
 </div>
 {/if}
 
 <div class="grid gap-2.5">
 <div class="grid gap-1">
 <Label for="email">Email</Label>
 <Input
 bind:value={email}
 name="email"
 placeholder="Email"
 type="email"
 autoCapitalize="none"
 autoComplete="email"
 autoCorrect="off"
 required={true}
 />
 </div>
 
 <div class="grid gap-1">
 <Label for="password">Password</Label>
 <PasswordInput name="password" placeholder="Password" bind:value={password} />
 </div>
 
 <div class="grid gap-1">
 <Label for="passwordConfirmation">Confirm password</Label>
 <PasswordInput
 name="passwordConfirmation"
 placeholder="Repeat password"
 bind:value={passwordConfirmation}
 />
 </div>
 
 <div class="mt-6 col-span-full">
 <Button type="submit" class="w-full" disabled={loading}>
 {#if loading}
 Loading...
 {:else}
 Sign in
 {/if}
 </Button>
 </div>
 </div>
</form>

การจัดการคำขอลงทะเบียน

สร้างไฟล์ใหม่ใน 514 .

สำหรับการสมัครสมาชิก เราจะต้องใช้รูปแบบที่คล้ายกันกับแบบฟอร์มลงทะเบียนของเรา แต่จะมีความแตกต่างเล็กน้อยตั้งแต่การดึงข้อมูลจากแบบฟอร์ม การตรวจสอบความถูกต้องของฟิลด์จนถึงจุดสร้างผู้ใช้ และการจัดการผู้ใช้ที่มีอยู่แล้ว

การนำเข้าจะเหมือนกับหน้าลงชื่อเข้าใช้ ดังนั้นเราจะข้ามส่วนนั้นไป

เราจะเริ่มต้นด้วยการรับข้อมูลแบบฟอร์มจากออบเจ็กต์คำขอ และดำเนินการดูแลทำความสะอาดขั้นพื้นฐาน เราจะตรวจสอบด้วยว่ารหัสผ่านตรงกันหรือไม่

const formData = await request.formData();
const email = formData.get('email') as string;
const password = formData.get('password') as string;
const passwordConfirmation = formData.get('passwordConfirmation') as string;
 
const fields = [email, password, passwordConfirmation];
 
if (fields.some((field) => !field)) {
 return fail(400, {
 error: 'All fields are required'
 });
}
 
if (password !== passwordConfirmation) {
 return fail(400, {
 error: 'Passwords do not match'
 });
}

ต่อไป เราจะพยายามค้นหาผู้ใช้ทางอีเมลโดยใช้ Drizzle ORM หากมีผู้ใช้อยู่ เราจะตอบกลับ 400 รายการพร้อมกับข้อความแสดงข้อผิดพลาด

try {
 const user = await db.query.users.findFirst({
 where: eq(schema.users.email, email.toLowerCase()),
 });
 
 if (user) {
 return fail(400, {
 error: "User with this email already exists"
 });
 }

หากไม่มีผู้ใช้ เราจะสร้างผู้ใช้ใหม่โดยใช้ Lucia

const newUser = await auth.createUser({
 key: {
 providerId: PROVIDER_ID.EMAIL,
 providerUserId: email.toLowerCase(),
 password: password,
 },
 attributes: {
 email,
 },
});

และสุดท้าย เราจะสร้างเซสชันใหม่และเปลี่ยนเส้นทางผู้ใช้ไปยังแดชบอร์ด

const session = await auth.createSession({
 userId: newUser.userId,
 attributes: {},
});
 
locals.auth.setSession(session);

บีบมะนาวพีซี่ง่ายๆ!

โบนัส:การสร้างหน้าออกจากระบบ

ในระหว่างนี้ เรามาสร้างจุดสิ้นสุดเพื่อออกจากระบบผู้ใช้กันดีกว่า สร้างไฟล์ใหม่ใน 521 .

และเพิ่มโค้ดต่อไปนี้:

import { auth } from "$lib/server";
 
import type { RequestHandler } from "./$types";
 
export const POST: RequestHandler = async ({ locals }) => {
 const session = await locals.auth.validate();
 
 if (!session) {
 return new Response(null, {
 status: 400,
 });
 }
 
 // Invalidate session or alternatively, you can delete all sessions: await auth.invalidateAllUserSessions(session.userId);
 await auth.invalidateSession(session.sessionId);
 
 // Remove the cookie.
 locals.auth.setSession(null);
 
 return new Response(null, {
 status: 200,
 });
};

เป็นอีกครั้งที่ลูเซียสนับสนุนเราด้วยการทำให้เซสชันโมฆะเป็นเรื่องง่ายอย่างเหลือเชื่อ สิ่งที่เราต้องทำตอนนี้คือเรียกตำแหน่งข้อมูลนี้เมื่อผู้ใช้คลิกปุ่มออกจากระบบ

<script lang="ts">
 import { goto } from '$app/navigation';
 import { Button } from '$lib/components/common';
 
 async function handleSignOut() {
 const response = await fetch('/auth/signout', {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json'
 }
 });
 
 if (response.ok) {
 goto('/auth/signin', {
 replaceState: true,
 invalidateAll: true
 });
 }
 }
</script>
 
<Button on:click={handleSignOut}>Sign out</Button>

แค่สรุป

เราสร้างการตรวจสอบสิทธิ์แบบปลอดภัยกับ Lucia, PlanetScale และ Upstash Redis สำเร็จแล้ว และเราเพิ่งเริ่มต้นสิ่งที่ Lucia สามารถทำได้เท่านั้น

อีกครั้ง คุณสามารถค้นหา repo สำหรับคำแนะนำนี้ได้ที่นี่ หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Lucia ฉันขอแนะนำให้ตรวจสอบเอกสาร

ก่อนที่คุณจะไปต่อ คุณควรออกไปเที่ยวในชุมชน Upstash Discord — เรากำลังมีช่วงเวลาดีๆ อยู่ และหากคุณต้องการเนื้อหา SvelteKit เพิ่มเติม คุณสามารถค้นหาได้จากบล็อกของฉันที่นี่