fix(security): use maxAge instead of expires for session cookies (#209)

Session cookies were expiring immediately because the expires date was
calculated at server startup time. After 7+ days of server uptime, all
new cookies would have an expiration date in the past.

Also adds error feedback display on login page when email verification
fails (e.g., burner email, invalid format).

Closes rb-login-broken

Amp-Thread-ID: https://ampcode.com/threads/T-019bed38-9b38-74b0-8aa7-70eaf424dcc6

Co-authored-by: Amp <amp@ampcode.com>

Author: zainfathoni

app/components/alerts.tsx

@@ -1,4 +1,4 @@
-import { CheckCircleIcon } from '@heroicons/react/solid'
+import { CheckCircleIcon, XCircleIcon } from '@heroicons/react/solid'
 import { ReactNode } from 'react'
 
 export function Alert({ children }: { children: ReactNode }) {
@@ -18,3 +18,18 @@ export function Alert({ children }: { children: ReactNode }) {
     </div>
   )
 }
+
+export function ErrorAlert({ children }: { children: ReactNode }) {
+  return (
+    <div className="bg-red-50 border-l-4 border-red-400 py-3 px-4 mt-4">
+      <div className="flex">
+        <div className="flex-shrink-0">
+          <XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
+        </div>
+        <div className="ml-3">
+          <p className="text-sm font-medium text-red-900">{children}</p>
+        </div>
+      </div>
+    </div>
+  )
+}

app/routes/login.tsx

@@ -1,21 +1,32 @@
 import type { ActionFunction, LoaderFunction } from '@remix-run/node'
 import { json } from '@remix-run/node'
 import { Form, useLoaderData, useNavigation } from '@remix-run/react'
-import { Alert } from '~/components/alerts'
+import { Alert, ErrorAlert } from '~/components/alerts'
 import { Button } from '~/components/form-elements'
 import { auth } from '~/services/auth.server'
-import { getUserSession } from '~/services/session.server'
+import { commitSession, getUserSession } from '~/services/session.server'
 
 export const loader: LoaderFunction = async ({ request }) => {
   await auth.isAuthenticated(request, { successRedirect: '/dashboard' })
   const session = await getUserSession(request)
   // This session key `auth:magiclink` is the default one used by the EmailLinkStrategy
   // you can customize it passing a `sessionMagicLinkKey` when creating an
   // instance.
-  return json({
-    user: session.get('user'),
-    magicLinkSent: session.has('zain:magiclink'),
-  })
+  const error = session.get(auth.sessionErrorKey) as
+    | { message: string }
+    | undefined
+  return json(
+    {
+      user: session.get('user'),
+      magicLinkSent: session.has('zain:magiclink'),
+      error: error?.message,
+    },
+    {
+      headers: {
+        'Set-Cookie': await commitSession(session),
+      },
+    }
+  )
 }
 
 export const action: ActionFunction = async ({ request }) => {
@@ -31,7 +42,10 @@ export const action: ActionFunction = async ({ request }) => {
 }
 
 export default function Login() {
-  const { magicLinkSent } = useLoaderData<{ magicLinkSent: boolean }>()
+  const { magicLinkSent, error } = useLoaderData<{
+    magicLinkSent: boolean
+    error?: string
+  }>()
   const { state } = useNavigation()
 
   return (
@@ -79,6 +93,7 @@ export default function Login() {
                   </Button>
                 </div>
               </Form>
+              {error ? <ErrorAlert>{error}</ErrorAlert> : null}
               {magicLinkSent ? (
                 <Form action="/logout" method="post">
                   <input type="hidden" name="redirectTo" value="/login" />

app/services/session.server.ts

@@ -7,7 +7,7 @@ export const sessionStorage = createCookieSessionStorage({
     sameSite: 'lax',
     path: '/',
     httpOnly: true,
-    expires: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // 7 days
+    maxAge: 7 * 24 * 60 * 60, // 7 days in seconds
     secrets: [getRequiredServerEnvVar('SESSION_SECRET')],
     // normally you want this to be `secure: true`
     // but that doesn't work on localhost for Safari