लूसिया, प्लैनेटस्केल और अपस्टैश रेडिस के साथ SvelteKit में सुरक्षित, टाइप‑सुरक्षित प्रमाणीकरण

लूसिया क्या है?

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" if deployed to HTTPS
 middleware: node(),
});

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 की एक बुनियादी समझ। प्रपत्रों को संभालना और रूटिंग करना एक प्लस है।
• ड्रिज़ल ओआरएम से बुनियादी परिचय।
• PlanetScale पर एक खाता और डेटाबेस।
• उदाहरण के लिए Redis इंस्टेंस तक पहुंच, अपस्टैश Redis।

आरंभ करना

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

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

कोड को तोड़ना

लूसिया को कॉन्फ़िगर करना

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",
 /**
 * Sessions are handled by Upstash Redis.
 */
 session: null,
 }),
 },
 middleware: sveltekit(),
 env: dev ? "DEV" : "PROD",
 getUserAttributes: (data) => {
 return {
 userId: data.id,
 email: data.email,
 };
 },
});
 
export type Auth = typeof auth;

लूसिया के साथ बढ़िया प्रकार का अनुमान प्राप्त करना

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 {};

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

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

import dotenv from "dotenv";
import type { Config } from "drizzle-kit";
 
dotenv.config();
 
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;

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

सत्र प्रबंधन स्थापित करना

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

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,
 }),
 // Instruct Lucia to use Upstash Redis for sessions
 session: upstash(upstashClient),
 },
 middleware: sveltekit(),
 env: dev ? "DEV" : "PROD",
 getUserAttributes: (data) => {
 return {
 userId: data.id,
 email: data.email,
 };
 },
});
 
export type Auth = typeof auth;

मार्ग बनाना

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

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

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

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

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 = {
 /* our actions here */
};

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

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

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

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

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

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

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

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

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

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>

वह एक आवरण है