PINコード認証を行う #27

Author: sinproject-iwasaki

package-lock.json

@@ -35,7 +35,6 @@
 	"type": "module",
 	"dependencies": {
 		"@prisma/client": "^4.5.0",
-		"bcrypt": "^5.1.0",
 		"nodemailer": "^6.8.0"
 	}
 }

package.json

@@ -23,10 +23,9 @@ model User {
   created_at DateTime    @default(now())
   updated_at DateTime    @updatedAt
   role_id    Int
-  username   String      @unique
   email      String      @unique
-  password   String
   role       Role        @relation(fields: [role_id], references: [id])
+  auth_pin   AuthPin[]
   auth_token AuthToken[]
 }
 
@@ -38,3 +37,12 @@ model AuthToken {
   token      String   @unique
   user       User     @relation(fields: [user_id], references: [id])
 }
+
+model AuthPin {
+  id         Int      @id @default(autoincrement())
+  created_at DateTime @default(now())
+  updated_at DateTime @updatedAt
+  user_id    Int      @unique
+  pin_code   String   @unique
+  user       User     @relation(fields: [user_id], references: [id])
+}

prisma/schema.prisma

@@ -4,7 +4,7 @@
 declare namespace App {
 	interface Locals {
 		user: {
-			username: string
+			email: string
 			role: string
 		}
 	}

src/app.d.ts

@@ -23,7 +23,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 	if (!auth_token) return await resolve(event)
 
 	event.locals.user = {
-		username: auth_token.user.username,
+		email: auth_token.user.email,
 		role: auth_token.user.role.name,
 	}
 

src/hooks.server.ts

@@ -19,6 +19,5 @@
 		<button type="submit">Log out</button>
 	</form>
 {:else}
-	<a href="/login">Log in</a>
-	<a href="/register">Register</a>
+	<a href="/login">Log in / Register</a>
 {/if}

src/routes/+page.svelte

@@ -1,57 +1,6 @@
-import { CookiesManager } from '$lib/cookies_manager'
-import { db } from '$lib/database'
-import { NodemailerManager } from '$lib/nodemailer_manager'
-import type { Actions, PageServerLoad } from '.svelte-kit/types/src/routes/register/$types'
-import { invalid, redirect } from '@sveltejs/kit'
-import bcrypt from 'bcrypt'
+import type { PageServerLoad } from '.svelte-kit/types/src/routes/$types'
+import { redirect } from '@sveltejs/kit'
 
-export const load: PageServerLoad = async ({ locals, url }) => {
-	if (locals.user) {
-		const redirect_url = url.searchParams.get('redirect') || ' /'
-		throw redirect(302, redirect_url)
-	}
-}
-
-async function sendMail(username: string) {
-	const nodemailerManager = new NodemailerManager()
-
-	try {
-		await nodemailerManager.sendMail(
-			'info@sinproject.net',
-			'SvelteKit Authentication',
-			`${username} logged in `
-		)
-	} catch (error) {
-		console.error(error)
-	}
-}
-
-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 })
-
-		const user = await db.user.findUnique({ where: { username } })
-
-		if (!user) return invalid(400, { credentials: true })
-
-		const password_valid = await bcrypt.compare(password, user.password)
-
-		if (!password_valid) return invalid(400, { credentials: true })
-
-		sendMail(username)
-
-		const auth_token = await db.authToken.upsert({
-			where: { user_id: user.id },
-			update: { token: crypto.randomUUID() },
-			create: { user_id: user.id, token: crypto.randomUUID() },
-		})
-
-		new CookiesManager(cookies).setSessionId(auth_token.token)
-
-		return { success: true }
-	},
+export const load: PageServerLoad = async ({ locals }) => {
+	if (locals.user) throw redirect(302, '/')
 }

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

@@ -1,35 +1,25 @@
 <script lang="ts">
-	import { enhance } from '$app/forms'
+	import { page } from '$app/stores'
 	import { onMount } from 'svelte'
-	import type { ActionData } from './$types'
+	
+	let first_element: HTMLInputElement
 
-	export let form: ActionData
-
-	let username_element: HTMLInputElement
+	const redirect_url = $page.url.searchParams.get('redirect_url') ?? ''
+	const encoded_redirect_url = encodeURIComponent(redirect_url)
 
 	onMount(() => {
 		document.onfocus = (event) => {
 			if (event.target instanceof HTMLInputElement) event.target.select()
 		}
 
-		username_element.select()
+		first_element.select()
 	})
 </script>
 
-<h1>Log in</h1>
-
-<form method="POST" use:enhance>
-	<input
-		type="text"
-		name="username"
-		placeholder="Username"
-		required
-		bind:this={username_element}
-	/>
-	<input type="password" name="password" placeholder="Password" required />
+<h1>Log in / Register</h1>
 
-	{#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}
+<form method="POST" action="/pin_code?/login&redirect_url={encoded_redirect_url}">
+	<input type="email" name="email" placeholder="Email" required bind:this={first_element} />
 
 	<button type="submit">Log in</button>
 </form>

src/routes/login/+page.svelte

@@ -4,5 +4,10 @@ import type { PageServerLoad } from "./$types";
 // NOTE: https://github.com/sveltejs/kit/issues/3912
 
 export const load: PageServerLoad = async ({ locals, url }) => {
-	if (!locals.user) throw redirect(302, `/login?redirect=${url.pathname}`)
+	const redirect_url = new URL(url.origin)
+
+	redirect_url.pathname = '/login'
+	redirect_url.searchParams.set('redirect_url', url.pathname)
+
+	if (!locals.user) throw redirect(302, redirect_url.toString())
 }

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

@@ -7,7 +7,7 @@
 </svelte:head>
 
 {#if $page.data.user}
-	<h1>Welcome {$page.data.user.username}</h1>
+	<h1>Welcome {$page.data.user.email}</h1>
 	Role: {$page.data.user.role}
 {:else}
 	<h1>Welcome</h1>