add decision document for sessions

Author: kentcdodds

app/root.tsx

@@ -23,7 +23,7 @@ import {
 import { clsx } from 'clsx'
 import { useState } from 'react'
 import tailwindStylesheetUrl from './styles/tailwind.css'
-import { authenticator } from './utils/auth.server.ts'
+import { authenticator, getUserId } from './utils/auth.server.ts'
 import { prisma } from './utils/db.server.ts'
 import { getEnv } from './utils/env.server.ts'
 import { ButtonLink } from './utils/forms.tsx'
@@ -65,7 +65,7 @@ export const meta: V2_MetaFunction = () => {
 }
 
 export async function loader({ request }: DataFunctionArgs) {
-	const userId = await authenticator.isAuthenticated(request)
+	const userId = await getUserId(request)
 
 	const user = userId
 		? await prisma.user.findUnique({

app/routes/_auth+/login.tsx

@@ -6,14 +6,12 @@ import {
 import { useLoaderData, useSearchParams } from '@remix-run/react'
 import { GeneralErrorBoundary } from '~/components/error-boundary.tsx'
 import { Spacer } from '~/components/spacer.tsx'
-import { authenticator } from '~/utils/auth.server.ts'
+import { authenticator, requireAnonymous } from '~/utils/auth.server.ts'
 import { commitSession, getSession } from '~/utils/session.server.ts'
 import { InlineLogin } from '../resources+/login.tsx'
 
 export async function loader({ request }: DataFunctionArgs) {
-	await authenticator.isAuthenticated(request, {
-		successRedirect: '/',
-	})
+	await requireAnonymous(request)
 	const session = await getSession(request.headers.get('cookie'))
 	const error = session.get(authenticator.sessionErrorKey)
 	let errorMessage: string | null = null

app/routes/_auth+/onboarding.tsx

@@ -16,7 +16,7 @@ import {
 } from '@remix-run/react'
 import { z } from 'zod'
 import { Spacer } from '~/components/spacer.tsx'
-import { authenticator, createUser } from '~/utils/auth.server.ts'
+import { authenticator, requireAnonymous, signup } from '~/utils/auth.server.ts'
 import { Button, CheckboxField, ErrorList, Field } from '~/utils/forms.tsx'
 import { safeRedirect } from '~/utils/misc.ts'
 import { commitSession, getSession } from '~/utils/session.server.ts'
@@ -25,8 +25,8 @@ import {
 	passwordSchema,
 	usernameSchema,
 } from '~/utils/user-validation.ts'
-import { onboardingEmailSessionKey } from './signup.tsx'
 import { checkboxSchema } from '~/utils/zod-extensions.ts'
+import { onboardingEmailSessionKey } from './signup.tsx'
 
 const OnboardingFormSchema = z
 	.object({
@@ -52,9 +52,7 @@ const OnboardingFormSchema = z
 	})
 
 export async function loader({ request }: DataFunctionArgs) {
-	await authenticator.isAuthenticated(request, {
-		successRedirect: '/',
-	})
+	await requireAnonymous(request)
 	const session = await getSession(request.headers.get('cookie'))
 	const error = session.get(authenticator.sessionErrorKey)
 	const onboardingEmail = session.get(onboardingEmailSessionKey)
@@ -72,8 +70,8 @@ export async function loader({ request }: DataFunctionArgs) {
 }
 
 export async function action({ request }: DataFunctionArgs) {
-	const session = await getSession(request.headers.get('cookie'))
-	const email = session.get(onboardingEmailSessionKey)
+	const cookieSession = await getSession(request.headers.get('cookie'))
+	const email = cookieSession.get(onboardingEmailSessionKey)
 	if (typeof email !== 'string' || !email) {
 		return redirect('/signup')
 	}
@@ -105,14 +103,13 @@ export async function action({ request }: DataFunctionArgs) {
 		redirectTo,
 	} = submission.value
 
-	const user = await createUser({ email, username, password, name })
-	session.set(authenticator.sessionKey, user.id)
-	session.unset(onboardingEmailSessionKey)
+	const session = await signup({ email, username, password, name })
+
+	cookieSession.set(authenticator.sessionKey, session.id)
+	cookieSession.unset(onboardingEmailSessionKey)
 
-	const newCookie = await commitSession(session, {
-		maxAge: remember
-			? 60 * 60 * 24 * 7 // 7 days
-			: undefined,
+	const newCookie = await commitSession(cookieSession, {
+		expires: remember ? session.expirationDate : undefined,
 	})
 	return redirect(safeRedirect(redirectTo, '/'), {
 		headers: { 'Set-Cookie': newCookie },
@@ -162,7 +159,9 @@ export default function OnboardingPage() {
 						inputProps={{
 							...conform.input(fields.username),
 							autoComplete: 'username',
-							autoFocus: typeof actionData === 'undefined' || typeof fields.username.initialError !== 'undefined',
+							autoFocus:
+								typeof actionData === 'undefined' ||
+								typeof fields.username.initialError !== 'undefined',
 						}}
 						errors={fields.username.errors}
 					/>
@@ -201,7 +200,10 @@ export default function OnboardingPage() {
 							children:
 								'Do you agree to our Terms of Service and Privacy Policy?',
 						}}
-						buttonProps={conform.input(fields.agreeToTermsOfServiceAndPrivacyPolicy, { type: 'checkbox' })}
+						buttonProps={conform.input(
+							fields.agreeToTermsOfServiceAndPrivacyPolicy,
+							{ type: 'checkbox' },
+						)}
 						errors={fields.agreeToTermsOfServiceAndPrivacyPolicy.errors}
 					/>
 
@@ -211,7 +213,9 @@ export default function OnboardingPage() {
 							children:
 								'Would you like to receive special discounts and offers?',
 						}}
-						buttonProps={conform.input(fields.agreeToMailingList, { type: 'checkbox' })}
+						buttonProps={conform.input(fields.agreeToMailingList, {
+							type: 'checkbox',
+						})}
 						errors={fields.agreeToMailingList.errors}
 					/>
 
@@ -224,7 +228,11 @@ export default function OnboardingPage() {
 						errors={fields.remember.errors}
 					/>
 
-					<input name={fields.redirectTo.name} type="hidden" value={redirectTo} />
+					<input
+						name={fields.redirectTo.name}
+						type="hidden"
+						value={redirectTo}
+					/>
 
 					<ErrorList errors={data.formError ? [data.formError] : []} />
 					<ErrorList errors={form.errors} id={form.errorId} />

app/routes/_auth+/reset-password.tsx

@@ -13,7 +13,11 @@ import {
 } from '@remix-run/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '~/components/error-boundary.tsx'
-import { authenticator, resetUserPassword } from '~/utils/auth.server.ts'
+import {
+	authenticator,
+	requireAnonymous,
+	resetUserPassword,
+} from '~/utils/auth.server.ts'
 import { Button, ErrorList, Field } from '~/utils/forms.tsx'
 import { conform, useForm } from '@conform-to/react'
 import { getFieldsetConstraint, parse } from '@conform-to/zod'
@@ -32,9 +36,7 @@ const ResetPasswordSchema = z
 	})
 
 export async function loader({ request }: DataFunctionArgs) {
-	await authenticator.isAuthenticated(request, {
-		successRedirect: '/',
-	})
+	await requireAnonymous(request)
 	const session = await getSession(request.headers.get('cookie'))
 	const error = session.get(authenticator.sessionErrorKey)
 	const resetPasswordUsername = session.get(resetPasswordSessionKey)

app/routes/resources+/login.tsx

@@ -35,9 +35,9 @@ export async function action({ request }: DataFunctionArgs) {
 		)
 	}
 
-	let userId: string | null = null
+	let sessionId: string | null = null
 	try {
-		userId = await authenticator.authenticate(FormStrategy.name, request, {
+		sessionId = await authenticator.authenticate(FormStrategy.name, request, {
 			throwOnError: true,
 		})
 	} catch (error) {
@@ -60,7 +60,7 @@ export async function action({ request }: DataFunctionArgs) {
 	}
 
 	const session = await getSession(request.headers.get('cookie'))
-	session.set(authenticator.sessionKey, userId)
+	session.set(authenticator.sessionKey, sessionId)
 	const { remember, redirectTo } = submission.value
 	const newCookie = await commitSession(session, {
 		maxAge: remember
@@ -143,7 +143,11 @@ export function InlineLogin({
 						</div>
 					</div>
 
-					<input value={redirectTo} {...fields.redirectTo} type="hidden" />
+					<input
+						value={redirectTo}
+						{...conform.input(fields.redirectTo)}
+						type="hidden"
+					/>
 					<ErrorList errors={formError ? [formError] : []} />
 					<ErrorList errors={form.errors} id={form.errorId} />
 

app/routes/settings+/profile.tsx

@@ -147,6 +147,7 @@ export default function EditUserProfile() {
 			return parse(formData, { schema: ProfileFormSchema })
 		},
 		defaultValue: {
+			username: data.user.username,
 			name: data.user.name ?? '',
 			email: data.user.email,
 		},
@@ -188,10 +189,7 @@ export default function EditUserProfile() {
 								htmlFor: fields.username.id,
 								children: 'Username',
 							}}
-							inputProps={{
-								...fields.username,
-								defaultValue: data.user.username,
-							}}
+							inputProps={conform.input(fields.username)}
 							errors={fields.username.errors}
 						/>
 						<Field
@@ -224,7 +222,9 @@ export default function EditUserProfile() {
 										children: 'Current Password',
 									}}
 									inputProps={{
-										...conform.input(fields.currentPassword, { type: 'password' }),
+										...conform.input(fields.currentPassword, {
+											type: 'password',
+										}),
 										autoComplete: 'current-password',
 									}}
 									errors={fields.currentPassword.errors}

app/utils/auth.server.ts

@@ -5,13 +5,16 @@ import { FormStrategy } from 'remix-auth-form'
 import invariant from 'tiny-invariant'
 import { prisma } from '~/utils/db.server.ts'
 import { sessionStorage } from './session.server.ts'
+import { redirect } from '@remix-run/node'
 
 export type { User }
 
 export const authenticator = new Authenticator<string>(sessionStorage, {
-	sessionKey: 'userId',
+	sessionKey: 'sessionId',
 })
 
+const SESSION_EXPIRATION_TIME = 1000 * 60 * 60 * 24 * 30
+
 authenticator.use(
 	new FormStrategy(async ({ form }) => {
 		const username = form.get('username')
@@ -27,8 +30,15 @@ authenticator.use(
 		if (!user) {
 			throw new Error('Invalid username or password')
 		}
+		const session = await prisma.session.create({
+			data: {
+				expirationDate: new Date(Date.now() + SESSION_EXPIRATION_TIME),
+				userId: user.id,
+			},
+			select: { id: true },
+		})
 
-		return user.id
+		return session.id
 	}),
 	FormStrategy.name,
 )
@@ -48,14 +58,35 @@ export async function requireUserId(
 	const failureRedirect = ['/login', loginParams?.toString()]
 		.filter(Boolean)
 		.join('?')
-	const userId = await authenticator.isAuthenticated(request, {
+	const sessionId = await authenticator.isAuthenticated(request, {
 		failureRedirect,
 	})
-	return userId
+	const session = await prisma.session.findFirst({
+		where: { id: sessionId },
+		select: { userId: true, expirationDate: true },
+	})
+	if (!session) {
+		throw redirect(failureRedirect)
+	}
+	console.log(session.expirationDate, session.expirationDate > new Date())
+	return session.userId
 }
 
 export async function getUserId(request: Request) {
-	return authenticator.isAuthenticated(request)
+	const sessionId = await authenticator.isAuthenticated(request)
+	if (!sessionId) return null
+	const session = await prisma.session.findUnique({
+		where: { id: sessionId },
+		select: { userId: true },
+	})
+	if (!session) return null
+	return session.userId
+}
+
+export async function requireAnonymous(request: Request) {
+	await authenticator.isAuthenticated(request, {
+		successRedirect: '/',
+	})
 }
 
 export async function resetUserPassword({
@@ -78,7 +109,7 @@ export async function resetUserPassword({
 	})
 }
 
-export async function createUser({
+export async function signup({
 	email,
 	username,
 	password,
@@ -91,18 +122,25 @@ export async function createUser({
 }) {
 	const hashedPassword = await getPasswordHash(password)
 
-	return prisma.user.create({
+	const session = await prisma.session.create({
 		data: {
-			email,
-			username,
-			name,
-			password: {
+			expirationDate: new Date(Date.now() + SESSION_EXPIRATION_TIME),
+			user: {
 				create: {
-					hash: hashedPassword,
+					email,
+					username,
+					name,
+					password: {
+						create: {
+							hash: hashedPassword,
+						},
+					},
 				},
 			},
 		},
+		select: { id: true, expirationDate: true },
 	})
+	return session
 }
 
 export async function getPasswordHash(password: string) {