Lucia, PlanetScale, और Upstash Redis के साथ SvelteKit में सुरक्षित, टाइप-सुरक्षित प्रमाणीकरण

हमारे अंतिम गाइड के Upstash ब्लॉग पर Bytes न्यूज़लेटर पर एक स्थान हासिल करने के बाद, मैंने सोचा कि हम SvelteKit पार्टी को जारी रखेंगे।

एक Svelte सुपर फैन के रूप में, मैं हर दिन अधिक से अधिक लोगों को इसमें शामिल होते देख रहा हूं — और यह मुझे भविष्य के लिए अविश्वसनीय रूप से उत्साहित करता है।

उन उपकरणों में से एक जो अभी भी रडार के नीचे उड़ रहा है, वह है Lucia।

इस गाइड में मैं आपको दिखाऊंगा कि Lucia के साथ प्रमाणीकरण कैसे चालू करें और चलाएं। हम अपने डेटाबेस आवश्यकताओं के लिए PlanetScale का उपयोग करेंगे, और सत्रों को संभालने के लिए Upstash Redis का उपयोग करेंगे।

नीचे इस गाइड के लिए हमारे अंतिम लक्ष्य का एक स्क्रीनशॉट है। आप उदाहरण रिपॉजिटरी यहां पा सकते हैं।

यह गाइड SvelteKit में होगा, लेकिन चूंकि Lucia किसी भी फ्रेमवर्क का समर्थन करता है, इसलिए इस गाइड का अधिकांश भाग आसानी से किसी भी लोकप्रिय फ्रेमवर्क पर लागू किया जा सकता है।

Lucia क्या है?

सीधे शब्दों में कहें, Lucia एक TypeScript लाइब्रेरी है जो उपयोगकर्ताओं और सत्रों को संभालना आसान बनाती है। मूल रूप से, यह लाइब्रेरी SvelteKit के लिए बनाई गई थी, लेकिन यह लगातार विकसित हुई है और अब लगभग किसी भी फ्रेमवर्क के साथ अच्छी तरह से काम करने के लिए पर्याप्त बहुमुखी है।

Lucia के बारे में जो बहुत बढ़िया है, वह यह है कि यह आपको उपयोगकर्ता अनुभव का त्याग किए बिना प्रमाणीकरण की जटिलता को प्रबंधित करने के लिए आवश्यक सब कुछ प्रदान करता है। Lucia को प्रिमिटिव्स के एक सेट के रूप में सोचें — यह आप पर निर्भर करता है कि आप अपने कोड को कैसे संरचित करना चाहते हैं और उपयोगकर्ता अनुभव को कैसे संभालना चाहते हैं। Lucia के कुछ प्रमुख भाग हैं जिन्हें समझना महत्वपूर्ण है:

मिडलवेयर Lucia को विभिन्न फ्रेमवर्क और रनटाइम के लिए अनुरोध और प्रतिक्रिया पढ़ने की अनुमति देता है।

यहां एक उदाहरण है कि आप मिडलवेयर को कैसे कॉन्फ़िगर करेंगे:

import { lucia } from "lucia"; import { node } from "lucia/middleware"; // import { nextjs } from "lucia/middleware"; // import { h3 } from "lucia/middleware"; export const auth = lucia({ env: "DEV", // "PROD" अगर HTTPS पर डिप्लॉय किया गया middleware: node(), });

डेटाबेस एडाप्टर Lucia को उपयोगकर्ताओं और सत्रों को संग्रहीत और पुनः प्राप्त करने की अनुमति देते हैं। एक एडाप्टर प्रदान करके Lucia जानता है कि इन प्रकारों के लिए कैसे क्वेरी करना है। दो प्रकार के एडाप्टर हैं; नियमित एडाप्टर, और सत्र एडाप्टर। इस विशेष गाइड में हम अपने उपयोगकर्ताओं को संग्रहीत करने के लिए PlanetScale पर होस्ट किए गए एक mySQL डेटाबेस का उपयोग करने जा रहे हैं, और सत्रों को संभालने के लिए Upstash पर होस्ट किए गए एक Redis इंस्टेंस का उपयोग करेंगे।

यहां एक उदाहरण है कि आप डेटाबेस एडाप्टर को कैसे कॉन्फ़िगर करेंगे:

import { prisma } from "@lucia-auth/adapter-prisma"; import { PrismaClient } from "@prisma/client"; import { lucia } from "lucia"; const client = new PrismaClient(); const auth = lucia({ env: "DEV", adapter: prisma(client), });

उस पृष्ठभूमि जानकारी के साथ, चलिए सीधे अंदर कूदते हैं।

पूर्वापेक्षाएँ

ऐप के साथ उठने और चलने और साथ चलने के लिए आपको आवश्यकता है:

• SvelteKit की मौलिक समझ। फॉर्म और रूटिंग को संभालना एक प्लस है।
• Drizzle ORM के साथ बुनियादी परिचितता।
• PlanetScale पर एक खाता और डेटाबेस।
• एक Redis इंस्टेंस तक पहुंच, उदाहरण के लिए, Upstash Redis।

शुरुआत करना

दक्षता के लिए, हम पूरे एप्लिकेशन को स्क्रैच से नहीं बनाएंगे।

इसके बजाय, आप Upstash उदाहरण रिपॉजिटरी से sveltekit-lucia-redis निर्देशिका को क्लोन करके साथ चल सकते हैं।

रिपॉजिटरी डाउनलोड करने के बाद, cd कमांड का उपयोग करके एप्लिकेशन में नेविगेट करें और अपनी पसंद के पैकेज मैनेजर के माध्यम से निर्भरताएँ इंस्टॉल करें और .env.example को डुप्लिकेट करके .env चर सेट करें।

मुख्य भागों को समझना

यहां सभी महत्वपूर्ण भागों का एक त्वरित विवरण है।

• src/lib/server/auth/index.ts - यहां हम Lucia को कॉन्फ़िगर करते हैं।
• src/lib/server/drizzle - Drizzle हमें एक mySQL स्कीमा आसानी से बनाने में मदद करता है जिसे हम Drizzle Kit का उपयोग करके PlanetScale पर आसानी से पुश कर सकते हैं।
• src/lib/server/planetscale - Upstash क्लाइंट निर्यात करता है जिसका उपयोग हम अपने Lucia एडाप्टर कॉन्फ़िगरेशन में उपयोगकर्ताओं को प्रबंधित करने के लिए करते हैं।
• src/lib/server/upstash - Upstash क्लाइंट निर्यात करता है जिसका उपयोग हम अपने Lucia एडाप्टर कॉन्फ़िगरेशन में सत्रों को प्रबंधित करने के लिए करते हैं।

कोड को तोड़ना

Lucia कॉन्फ़िगर करना

पहली चीज जो हमें करने की आवश्यकता है वह है Lucia को कॉन्फ़िगर करना। हम src/lib/server/auth/index.ts में एक नई फ़ाइल बनाकर ऐसा कर सकते हैं।

import { planetscale } from "@lucia-auth/adapter-mysql"; import { dev } from "$app/environment"; import { lucia } from "lucia"; import { sveltekit } from "lucia/middleware"; import { ps } from "../planetscale"; export enum PROVIDER_ID { EMAIL = "email", } export const auth = lucia({ adapter: { user: planetscale(ps, { user: "users", key: "keys", /** * सत्रों को Upstash Redis द्वारा संभाला जाता है। */ session: null, }), }, middleware: sveltekit(), env: dev ? "DEV" : "PROD", getUserAttributes: (data) => { return { userId: data.id, email: data.email, }; }, }); export type Auth = typeof auth;

यहां क्या हो रहा है इसका एक त्वरित विवरण:

हम lucia पैकेज से lucia फ़ंक्शन को Lucia के लिए कॉन्फ़िगरेशन सेट अप करने के लिए आयात करते हैं।

पहली चीज जो हम करते हैं वह है adapter प्रॉपर्टी को कॉन्फ़िगर करना। यह वह जगह है जहां हम Lucia को बताते हैं कि उपयोगकर्ताओं और सत्रों को कैसे संभालना है।

हम session प्रॉपर्टी को null पर सेट करते हैं क्योंकि हम सत्रों को संभालने के लिए Redis का उपयोग करना चाहते हैं। यदि आप यहां स्ट्रिंग 'session' का उपयोग करते, तो Lucia उपयोगकर्ताओं और सत्रों दोनों के लिए उसी एडाप्टर का उपयोग करेगा (ये स्ट्रिंग्स आपके डेटाबेस में टेबल से मेल खाते हैं)।

अभी सत्र एडाप्टर के बारे में चिंता न करें, हम बाद में उस पर पहुंचेंगे।

middleware प्रॉपर्टी में हम Lucia को बता सकते हैं कि हम SvelteKit का उपयोग कर रहे हैं। यह Lucia को अनुरोध और प्रतिक्रिया ऑब्जेक्ट पढ़ने की अनुमति देगा।

निर्यातित Auth प्रकार पर ध्यान दें। यह हमारे auth ऑब्जेक्ट का प्रकार है। हमें SvelteKit लोकल्स सेट अप करने के लिए इसकी आवश्यकता होगी।

Lucia के साथ शानदार टाइप इन्फरेंस प्राप्त करना

Lucia TypeScript में लिखी गई है, इसलिए आपको बॉक्स से बाहर शानदार टाइप इन्फरेंस मिलती है। आइए सुनिश्चित करें कि SvelteKit उस Auth प्रकार के बारे में जानता है जिसे हमने अभी बनाया है।

अपना app.d.ts फ़ाइल खोलें और निम्नलिखित जोड़ें:

import type { Auth as LuciaAuth } from "$lib/server/auth"; import type { AuthRequest, Session, User } from "lucia"; declare global { namespace App { // interface Error {} interface Locals { auth: AuthRequest; session: Session | null; } interface PageData { user?: User; } // interface Platform {} } } /// <reference types="lucia" /> declare global { namespace Lucia { type Auth = LuciaAuth; type DatabaseUserAttributes = { email: string; }; type DatabaseSessionAttributes = {}; } } export {};

Auth प्रकार को Lucia नेमस्पेस में जोड़कर, हम अब locals ऑब्जेक्ट में auth ऑब्जेक्ट को अपने SvelteKit रूट्स से एक्सेस कर सकते हैं।

लेकिन Lucia से आयात की गई किसी भी चीज़ के पास अब सही प्रकार भी होंगे।

अब जब हमारे पास ये प्रकार हैं, तो हम hooks.server.ts सेट अप कर सकते हैं। यह वह जगह है जहां हम वर्तमान अनुरोध पर AuthRequest और Session ऑब्जेक्ट को बांधेंगे।

यह इसे locals के माध्यम से सर्वर पर आसानी से सुलभ बना देगा।

import type { Handle } from "@sveltejs/kit"; import { sequence } from "@sveltejs/kit/hooks"; import { auth } from "$lib/server"; const auth_handle: Handle = async ({ event, resolve }) => { event.locals.auth = auth.handleRequest(event); event.locals.session = await event.locals.auth.validate(); return resolve(event); }; export const handle = sequence(auth_handle);

हम sequence भी आयात करेंगे जो एक हेल्पर फ़ंक्शन है जो हमें कई हुक को क्रम में चलाने की अनुमति देता है। यह बाद में उपयोगी होगा जब हम अपने रूट्स को सुरक्षित करने का प्रयास करेंगे।

उपयोगकर्ता मॉडल बनाना

अब जब हमारे पास Lucia कॉन्फ़िगर है, तो हम अपना उपयोगकर्ता मॉडल बना सकते हैं।

हम Drizzle ORM का उपयोग करेंगे, क्योंकि यह अभी बहुत लोकप्रिय है।

और उनके मीम्स पॉइंट पर हैं। बस इसे देखें।

इससे पहले कि आप जारी रख सकें, आपको PlanetScale पर एक डेटाबेस बनाने की आवश्यकता है। और Drizzle कॉन्फ़िगरेशन फ़ाइल सेट अप करें। यह Drizzle CLI को आपके डेटाबेस से कनेक्ट करने में मदद करेगा।

import dotenv from "dotenv"; import type { Config } from "drizzle-kit"; dotenv.process(); const username = process.env.DATABASE_USERNAME; const password = process.env.DATABASE_PASSWORD; const host = process.env.DATABASE_HOST; const db = process.env.DATABASE_NAME; const connectionString = `mysql://${username}:${password}@${host}/${db}?ssl={"rejectUnauthorized":true}`; export default { schema: "./src/lib/server/drizzle/schema/index.ts", driver: "mysql2", dbCredentials: { connectionString: connectionString, }, } satisfies Config;

क्योंकि हम mySQL एडाप्टर का उपयोग कर रहे हैं, Lucia हमारे उपयोगकर्ता मॉडल से एक विशिष्ट संरचना की अपेक्षा करता है। आप डॉक्स में इसके बारे में अधिक जानकारी पा सकते हैं।

निम्नलिखित कोड को src/lib/server/drizzle/schema/index.ts में रखें।

import { relations } from "drizzle-orm"; import { bigint, datetime, index, int, mysqlEnum, mysqlTable, timestamp, unique, varchar, } from "drizzle-orm/mysql-core"; export const users = mysqlTable( "users", { id: varchar("id", { length: 255 }).primaryKey(), createdAt: timestamp("createdAt").defaultNow().onUpdateNow().notNull(), updatedAt: timestamp("updatedAt").defaultNow().onUpdateNow().notNull(), email: varchar("email", { length: 191 }).notNull(), }, (table) => { return { idIdx: index("users_id_idx").on(table.id), userIdKey: unique("users_id_key").on(table.id), }; }, ); export const keys = mysqlTable( "keys", { id: varchar("id", { length: 255 }).primaryKey(), hashedPassword: varchar("hashed_password", { length: 255 }), userId: varchar("user_id", { length: 255 }).notNull(), }, (table) => { return { userIdIdx: index("keys_user_id_idx").on(table.userId), keyIdKey: unique("keys_id_key").on(table.id), }; }, );

और स्कीमा को PlanetScale पर पुश करने के लिए pnpm drizzle-kit push:mysql चलाएं।

वोइला! अब आपके पास एक उपयोगकर्ता मॉडल है जिसका उपयोग Lucia उपयोगकर्ताओं को प्रबंधित करने के लिए कर सकता है।

सत्र प्रबंधन सेट अप करना

अब जब हमारे पास हमारा उपयोगकर्ता मॉडल है, तो हम सत्र प्रबंधन सेट अप कर सकते हैं।

हम सत्रों को संभालने के लिए Upstash Redis का उपयोग करेंगे। आप यहां मुफ्त खाते के लिए साइन अप कर सकते हैं।

एक बार जब आप डैशबोर्ड में हों, तो आपको बस एक नया डेटाबेस बनाना है और पर्यावरण चर कॉपी करना है।

अब इन चर को अपनी .env फ़ाइल में जोड़ें। और निम्नलिखित को src/lib/server/upstash/index.ts में जोड़ें।

import { Redis } from "@upstash/redis"; import { UPSTASH_REDIS_REST_TOKEN, UPSTASH_REDIS_REST_URL, } from "$env/static/private"; export const upstashClient = new Redis({ url: UPSTASH_REDIS_REST_URL, token: UPSTASH_REDIS_REST_TOKEN, });

अब याद रखें जब हमने Lucia को कॉन्फ़िगर किया था, हमने session को null पर सेट किया था। ऐसा इसलिए है क्योंकि हम सत्रों को संभालने के लिए Redis का उपयोग करना चाहते हैं। यह अब हमारे कॉन्फ़िगरेशन जैसा दिखता है:

import { planetscale } from "@lucia-auth/adapter-mysql"; import { upstash } from "@lucia-auth/adapter-session-redis"; import { dev } from "$app/environment"; import { lucia } from "lucia"; import { sveltekit } from "lucia/middleware"; import { ps } from "../planetscale"; import { upstashClient } from "../upstash"; export enum PROVIDER_ID { EMAIL = "email", } export const auth = lucia({ adapter: { user: planetscale(ps, { user: "users", key: "keys", session: null, }), // Lucia को सत्रों के लिए Upstash Redis का उपयोग करने का निर्देश दें session: upstash(upstashClient), }, middleware: sveltekit(), env: dev ? "DEV" : "PROD", getUserAttributes: (data) => { return { userId: data.id, email: data.email, }; }, }); export type Auth = typeof auth;

हमारे लिए भाग्यशाली, Lucia में बॉक्स से बाहर Upstash Redis एडाप्टर है। इसलिए हमें बस इसे आयात करना है और इसे Upstash क्लाइंट पास करना है।

अब यह आसान था!

रूट्स बनाना

अब जब हमारे पास Lucia कॉन्फ़िगर है, तो हम अपने रूट्स बना सकते हैं।

src/routes में निम्नलिखित फ़ोल्डर बनाएं। अभी किसी भी फ़ाइल के बारे में चिंता न करें, हम उन्हें थोड़ी देर में देखेंगे।

• src/routes/auth
  • src/routes/auth/signin
  • src/routes/auth/signup
• src/routes/app

टिप: कुछ "फीचर्स" को एक ही फ़ोल्डर नाम या समूह के तहत रखना रीडायरेक्ट और रूट्स की सुरक्षा करते समय प्रबंधन करना आसान बनाता है।

साइन-इन पेज बनाना

आखिरकार, हम कुछ फ्रंट-एंड काम कर सकते हैं! आइए साइन-इन पेज से शुरू करें।

src/routes/auth/signin/+page.svelte में एक नई फ़ाइल बनाएं। मैं अभी स्टाइलिंग को छोड़ दूंगा, और कार्यक्षमता पर ध्यान केंद्रित करूंगा — लेकिन आप उदाहरण रिपॉजिटरी में पूरा कोड पा सकते हैं।

<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 = ''; </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="mt-6 col-span-full"> <Button type="submit" class="w-full" disabled={loading}> {#if loading} Loading... {:else} Sign in {/if} </Button> </div> </div> </form>

use:enhance एक्शन फॉर्म को प्रगतिशील रूप से बढ़ाएगा, और हमें फॉर्म सबमिट होने पर लोडिंग स्थिति दिखाने की अनुमति देगा। आप यहां enhance के बारे में अधिक पढ़ सकते हैं।

बाकी कोड काफी आत्म-व्याख्यात्मक है।

साइन-इन अनुरोध को संभालना

SvelteKit POST अनुरोधों को संभालना अविश्वसनीय रूप से आसान बनाता है। हमें केवल +page.svelte फ़ाइल के समान निर्देशिका में +page.server.ts फ़ाइल बनाने और कम से कम एक default प्रॉपर्टी के साथ एक actions ऑब्जेक्ट निर्यात करने की आवश्यकता है।

import { fail, redirect } from "@sveltejs/kit"; import { auth, PROVIDER_ID } from "$lib/server"; import { LuciaError } from "lucia"; import type { Actions, PageServerLoad } from "./$types"; export const actions = { /* हमारे एक्शन यहाँ */ };

आइए इस फ़ाइल के इस भाग में प्रमुख तत्वों का पता लगाएं:

हमने पहले बनाए गए src/lib/server/auth से PROVIDER_ID enum और auth आयात किया है। यह auth ऑब्जेक्ट उपयोगकर्ताओं और सत्रों को प्रबंधित करने के लिए आवश्यक सभी विधियों को समाहित करता है।

अब आइए actions ऑब्जेक्ट पर एक नज़र डालें। हम अनुरोध ऑब्जेक्ट से फॉर्म डेटा प्राप्त कर सकते हैं, और कुछ बुनियादी हाउसकीपिंग कर सकते हैं।

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 प्रमाणीकरण की बहुत सारी जटिलता को छुपाता है। हमें केवल सही विधियों को कॉल करने की आवश्यकता है, और Lucia बाकी को संभाल लेगा।

पासवर्ड हैश करने, सत्र बनाने, या कुकीज़ प्रबंधित करने की आवश्यकता नहीं है। Lucia यह सब हमारे लिए करता है। और यह सब टाइप-सुरक्षित है!

साइन-अप पेज बनाना

src/routes/auth/signup/+page.svelte में एक नई फ़ाइल बनाएं।

साइन-अप पेज साइन-इन पेज के बहुत समान है, इसलिए यहां समझाने के लिए बहुत कुछ नहीं है। एकमात्र अंतर यह है कि हम पासवर्ड पुष्टिकरण मांग रहे हैं।

<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>

साइन-अप अनुरोध को संभालना

src/routes/auth/signup/+page.server.ts में एक नई फ़ाइल बनाएं।

साइन-अप के लिए हमें अपने साइन-अप फॉर्म के समान पैटर्न का उपयोग करने की आवश्यकता होगी लेकिन फॉर्म से डेटा पुनर्प्राप्ति से लेकर फ़ील्ड के सत्यापन तक उपयोगकर्ता बनाने और पहले से मौजूद उपयोगकर्ताओं को संभालने के बिंदु तक कुछ अंतर होंगे।

आयात साइन-इन पेज के समान हैं, इसलिए हम उस भाग को छोड़ देंगे।

हम अनुरोध ऑब्जेक्ट से फॉर्म डेटा प्राप्त करके शुरू करेंगे, और कुछ बुनियादी हाउसकीपिंग करेंगे। हम यह भी जांचेंगे कि पासवर्ड मेल खाते हैं या नहीं।

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);

आसान मटर नींबू निचोड़!

बोनस: साइन-आउट पेज बनाना

जबकि हम इस पर हैं, आइए उपयोगकर्ता को साइन आउट करने के लिए एक एंडपॉइंट बनाएं। src/routes/auth/signout/+server.ts में एक नई फ़ाइल बनाएं।

और निम्नलिखित कोड जोड़ें:

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, }); } // सत्र को अमान्य करें या वैकल्पिक रूप से, आप सभी सत्रों को हटा सकते हैं: await auth.invalidateAllUserSessions(session.userId); await auth.invalidateSession(session.sessionId); // कुकी हटाएं। locals.auth.setSession(null); return new Response(null, { status: 200, }); };

फिर से Lucia हमारी पीठ थपथपाता है जिससे सत्रों को अमान्य करना अविश्वसनीय रूप से आसान हो जाता है। अब हमें बस इतना करना है कि जब उपयोगकर्ता साइन आउट बटन पर क्लिक करे तो इस एंडपॉइंट को कॉल करें।

<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 क्या कर सकता है इसकी सतह को खरोंचा है।

फिर से, आप इस गाइड के लिए रेपो यहां पा सकते हैं। यदि आप Lucia के बारे में अधिक जानना चाहते हैं, तो मैं डॉक्स देखना अत्यधिक सुझाव देता हूं।

आगे बढ़ने से पहले आपको Upstash डिस्कॉर्ड समुदाय में आना चाहिए — हम एक अच्छा समय बिता रहे हैं। और यदि आप अधिक SvelteKit सामग्री चाहते हैं, तो आप इसे मेरे ब्लॉग पर यहां पा सकते हैं।