ログインページを作成する #7

Author: sinproject-iwasaki

prisma/schema.prisma

@@ -34,7 +34,7 @@ model AuthToken {
   id         Int      @id @default(autoincrement())
   created_at DateTime @default(now())
   updated_at DateTime @updatedAt
-  token      String
   user_id    Int
+  token      String
   user       User     @relation(fields: [user_id], references: [id])
 }

src/routes/login/+page.server.ts

@@ -0,0 +1,46 @@
+import { db } from '$lib/database'
+import type { Actions, PageServerLoad } from '.svelte-kit/types/src/routes/register/$types'
+import { invalid, redirect } from '@sveltejs/kit'
+import bcrypt from 'bcrypt'
+
+export const load: PageServerLoad = async () => {
+	// todo
+}
+
+export const actions: Actions = {
+	default: async ({ cookies, request }) => {
+		const data = await request.formData()
+		const username = data.get('username') as string
+		const password = data.get('password') as string
+
+		if (!username || !password) return invalid(404, { missing: true, username })
+
+		const user = await db.user.findUnique({ where: { username } })
+
+		if (!user) return invalid(400, { credentials: true, username })
+
+		const password_valid = await bcrypt.compare(password, user.password)
+
+		if (!password_valid) return invalid(400, { credentials: true, username })
+
+		await db.authToken.deleteMany({ where: { user_id: user.id } })
+
+		const auth_token = await db.authToken.create({
+			data: {
+				user_id: user.id,
+				token: crypto.randomUUID(),
+			},
+		})
+
+		cookies.set('session_id', auth_token.token, {
+			path: '/',
+			maxAge: 60 * 60 * 24 * 30,
+			sameSite: 'lax',
+			secure: true,
+			// secure: process.env.NODE_ENV === 'production',
+			httpOnly: true,
+		})
+
+		throw redirect(302, '/')
+	},
+}

src/routes/login/+page.svelte

@@ -1 +1,17 @@
-<h1>Log in</h1>
+<script lang="ts">
+	import type { ActionData } from './$types'
+
+	export let form: ActionData
+</script>
+
+<h1>Log in</h1>
+
+<form method="POST">
+	<input type="text" name="username" placeholder="Username" required value={form?.username ?? ''} />
+	<input type="password" name="password" placeholder="Password" required />
+
+	{#if form?.missing}<p class="error">Username and password is required.</p>{/if}
+	{#if form?.credentials}<p class="error">You have entered the wrong credentials.</p>{/if}
+
+	<button type="submit">Log in</button>
+</form>

src/routes/register/+page.svelte

@@ -11,8 +11,8 @@
 	<input type="email" name="email" placeholder="email" required value={form?.email ?? ''} />
 	<input type="password" name="password" placeholder="Password" required />
 
-	{#if form?.missing}<p class="error">Username, email and password are required.</p>{/if}
+	{#if form?.missing}<p class="error">Username, email and password is required.</p>{/if}
 	{#if form?.user_exists}<p class="error">Username or email is used.</p>{/if}
 
-	<input type="submit" value="Register" />
+	<button type="submit">Register</button>
 </form>