Reset multi_auth cookies on error (#1957)

* multi_auth cookies check + reset

* multi_auth cookies refresh

* Expire cookies after 30 days

This is the actual default for next-auth.session-token.

* Collapse issues by default

* Only refresh session cookie manually as anon

* fix mangled merge

---------

Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com>
Co-authored-by: k00b <k00b@stacker.news>

components/account.js

@@ -8,40 +8,31 @@ import { useQuery } from '@apollo/client'
 import { UserListRow } from '@/components/user-list'
 import Link from 'next/link'
 import AddIcon from '@/svgs/add-fill.svg'
+import { MultiAuthErrorBanner } from '@/components/banners'
 
 const AccountContext = createContext()
 
+const CHECK_ERRORS_INTERVAL_MS = 5_000
+
 const b64Decode = str => Buffer.from(str, 'base64').toString('utf-8')
-const b64Encode = obj => Buffer.from(JSON.stringify(obj)).toString('base64')
 
 const maybeSecureCookie = cookie => {
   return window.location.protocol === 'https:' ? cookie + '; Secure' : cookie
 }
 
 export const AccountProvider = ({ children }) => {
-  const { me } = useMe()
   const [accounts, setAccounts] = useState([])
   const [meAnon, setMeAnon] = useState(true)
+  const [errors, setErrors] = useState([])
 
   const updateAccountsFromCookie = useCallback(() => {
-    try {
+    const { multi_auth: multiAuthCookie } = cookie.parse(document.cookie)
-      const { multi_auth: multiAuthCookie } = cookie.parse(document.cookie)
+    const accounts = multiAuthCookie
-      const accounts = multiAuthCookie
+      ? JSON.parse(b64Decode(multiAuthCookie))
-        ? JSON.parse(b64Decode(multiAuthCookie))
+      : []
-        : me ? [{ id: Number(me.id), name: me.name, photoId: me.photoId }] : []
+    setAccounts(accounts)
-      setAccounts(accounts)
-      // required for backwards compatibility: sync cookie with accounts if no multi auth cookie exists
-      // this is the case for sessions that existed before we deployed account switching
-      if (!multiAuthCookie && !!me) {
-        document.cookie = maybeSecureCookie(`multi_auth=${b64Encode(accounts)}; Path=/`)
-      }
-    } catch (err) {
-      console.error('error parsing cookies:', err)
-    }
   }, [])
 
-  useEffect(updateAccountsFromCookie, [])
-
   const addAccount = useCallback(user => {
     setAccounts(accounts => [...accounts, user])
   }, [])
@@ -59,15 +50,43 @@ export const AccountProvider = ({ children }) => {
     return switchSuccess
   }, [updateAccountsFromCookie])
 
-  useEffect(() => {
+  const checkErrors = useCallback(() => {
-    if (SSR) return
+    const {
-    const { 'multi_auth.user-id': multiAuthUserIdCookie } = cookie.parse(document.cookie)
+      multi_auth: multiAuthCookie,
-    setMeAnon(multiAuthUserIdCookie === 'anonymous')
+      'multi_auth.user-id': multiAuthUserIdCookie
+    } = cookie.parse(document.cookie)
+
+    const errors = []
+
+    if (!multiAuthCookie) errors.push('multi_auth cookie not found')
+    if (!multiAuthUserIdCookie) errors.push('multi_auth.user-id cookie not found')
+
+    setErrors(errors)
   }, [])
 
+  useEffect(() => {
+    if (SSR) return
+
+    updateAccountsFromCookie()
+
+    const { 'multi_auth.user-id': multiAuthUserIdCookie } = cookie.parse(document.cookie)
+    setMeAnon(multiAuthUserIdCookie === 'anonymous')
+
+    const interval = setInterval(checkErrors, CHECK_ERRORS_INTERVAL_MS)
+    return () => clearInterval(interval)
+  }, [updateAccountsFromCookie, checkErrors])
+
   const value = useMemo(
-    () => ({ accounts, addAccount, removeAccount, meAnon, setMeAnon, nextAccount }),
+    () => ({
-    [accounts, addAccount, removeAccount, meAnon, setMeAnon, nextAccount])
+      accounts,
+      addAccount,
+      removeAccount,
+      meAnon,
+      setMeAnon,
+      nextAccount,
+      multiAuthErrors: errors
+    }),
+    [accounts, addAccount, removeAccount, meAnon, setMeAnon, nextAccount, errors])
   return <AccountContext.Provider value={value}>{children}</AccountContext.Provider>
 }
 
@@ -129,9 +148,23 @@ const AccountListRow = ({ account, ...props }) => {
 }
 
 export default function SwitchAccountList () {
-  const { accounts } = useAccounts()
+  const { accounts, multiAuthErrors } = useAccounts()
   const router = useRouter()
 
+  const hasError = multiAuthErrors.length > 0
+
+  if (hasError) {
+    return (
+      <>
+        <div className='my-2'>
+          <div className='d-flex flex-column flex-wrap mt-2 mb-3'>
+            <MultiAuthErrorBanner errors={multiAuthErrors} />
+          </div>
+        </div>
+      </>
+    )
+  }
+
   // can't show hat since the streak is not included in the JWT payload
   return (
     <>

components/banners.js

@@ -6,6 +6,7 @@ import { useMutation } from '@apollo/client'
 import { WELCOME_BANNER_MUTATION } from '@/fragments/users'
 import { useToast } from '@/components/toast'
 import Link from 'next/link'
+import AccordianItem from '@/components/accordian-item'
 
 export function WelcomeBanner ({ Banner }) {
   const { me } = useMe()
@@ -123,3 +124,24 @@ export function AuthBanner () {
     </Alert>
   )
 }
+
+export function MultiAuthErrorBanner ({ errors }) {
+  return (
+    <Alert className={styles.banner} key='info' variant='danger'>
+      <div className='fw-bold mb-3'>Account switching is currently unavailable</div>
+      <AccordianItem
+        className='my-3'
+        header='We have detected the following issues:'
+        headerColor='var(--bs-danger-text-emphasis)'
+        body={
+          <ul>
+            {errors.map((err, i) => (
+              <li key={i}>{err}</li>
+            ))}
+          </ul>
+      }
+      />
+      <div className='mt-3'>To resolve these issues, please sign out and sign in again.</div>
+    </Alert>
+  )
+}

lib/auth.js

@@ -0,0 +1,161 @@
+import { datePivot } from '@/lib/time'
+import * as cookie from 'cookie'
+import { NodeNextRequest } from 'next/dist/server/base-http/node'
+import { encode as encodeJWT, decode as decodeJWT } from 'next-auth/jwt'
+
+const b64Encode = obj => Buffer.from(JSON.stringify(obj)).toString('base64')
+const b64Decode = s => JSON.parse(Buffer.from(s, 'base64'))
+
+const userJwtRegexp = /^multi_auth\.\d+$/
+
+const HTTPS = process.env.NODE_ENV === 'production'
+const SESSION_COOKIE_NAME = HTTPS ? '__Secure-next-auth.session-token' : 'next-auth.session-token'
+
+const cookieOptions = (args) => ({
+  path: '/',
+  secure: process.env.NODE_ENV === 'production',
+  // httpOnly cookies by default
+  httpOnly: true,
+  sameSite: 'lax',
+  // default expiration for next-auth JWTs is in 30 days
+  expires: datePivot(new Date(), { days: 30 }),
+  ...args
+})
+
+export function setMultiAuthCookies (req, res, { id, jwt, name, photoId }) {
+  const httpOnlyOptions = cookieOptions()
+  const jsOptions = { ...httpOnlyOptions, httpOnly: false }
+
+  // add JWT to **httpOnly** cookie
+  res.appendHeader('Set-Cookie', cookie.serialize(`multi_auth.${id}`, jwt, httpOnlyOptions))
+
+  // switch to user we just added
+  res.appendHeader('Set-Cookie', cookie.serialize('multi_auth.user-id', id, jsOptions))
+
+  let newMultiAuth = [{ id, name, photoId }]
+  if (req.cookies.multi_auth) {
+    const oldMultiAuth = b64Decode(req.cookies.multi_auth)
+    // make sure we don't add duplicates
+    if (oldMultiAuth.some(({ id: id_ }) => id_ === id)) return
+    newMultiAuth = [...oldMultiAuth, ...newMultiAuth]
+  }
+  res.appendHeader('Set-Cookie', cookie.serialize('multi_auth', b64Encode(newMultiAuth), jsOptions))
+}
+
+export function switchSessionCookie (request) {
+  // switch next-auth session cookie with multi_auth cookie if cookie pointer present
+
+  // is there a cookie pointer?
+  const cookiePointerName = 'multi_auth.user-id'
+  const hasCookiePointer = !!request.cookies[cookiePointerName]
+
+  // is there a session?
+  const hasSession = !!request.cookies[SESSION_COOKIE_NAME]
+
+  if (!hasCookiePointer || !hasSession) {
+    // no session or no cookie pointer. do nothing.
+    return request
+  }
+
+  const userId = request.cookies[cookiePointerName]
+  if (userId === 'anonymous') {
+    // user switched to anon. only delete session cookie.
+    delete request.cookies[SESSION_COOKIE_NAME]
+    return request
+  }
+
+  const userJWT = request.cookies[`multi_auth.${userId}`]
+  if (!userJWT) {
+    // no JWT for account switching found
+    return request
+  }
+
+  if (userJWT) {
+    // use JWT found in cookie pointed to by cookie pointer
+    request.cookies[SESSION_COOKIE_NAME] = userJWT
+    return request
+  }
+
+  return request
+}
+
+export function checkMultiAuthCookies (req, res) {
+  if (!req.cookies.multi_auth || !req.cookies['multi_auth.user-id']) {
+    return false
+  }
+
+  const accounts = b64Decode(req.cookies.multi_auth)
+  for (const account of accounts) {
+    if (!req.cookies[`multi_auth.${account.id}`]) {
+      return false
+    }
+  }
+
+  return true
+}
+
+export function resetMultiAuthCookies (req, res) {
+  const httpOnlyOptions = cookieOptions({ expires: 0, maxAge: 0 })
+  const jsOptions = { ...httpOnlyOptions, httpOnly: false }
+
+  if ('multi_auth' in req.cookies) res.appendHeader('Set-Cookie', cookie.serialize('multi_auth', '', jsOptions))
+  if ('multi_auth.user-id' in req.cookies) res.appendHeader('Set-Cookie', cookie.serialize('multi_auth.user-id', '', jsOptions))
+
+  for (const key of Object.keys(req.cookies)) {
+    // reset all user JWTs
+    if (userJwtRegexp.test(key)) {
+      res.appendHeader('Set-Cookie', cookie.serialize(key, '', httpOnlyOptions))
+    }
+  }
+}
+
+export async function refreshMultiAuthCookies (req, res) {
+  const httpOnlyOptions = cookieOptions()
+  const jsOptions = { ...httpOnlyOptions, httpOnly: false }
+
+  const refreshCookie = (name) => {
+    res.appendHeader('Set-Cookie', cookie.serialize(name, req.cookies[name], jsOptions))
+  }
+
+  const refreshToken = async (token) => {
+    const secret = process.env.NEXTAUTH_SECRET
+    return await encodeJWT({
+      token: await decodeJWT({ token, secret }),
+      secret
+    })
+  }
+
+  const isAnon = req.cookies['multi_auth.user-id'] === 'anonymous'
+
+  for (const [key, value] of Object.entries(req.cookies)) {
+    // only refresh session cookie manually if we switched to anon since else it's already handled by next-auth
+    if (key === SESSION_COOKIE_NAME && !isAnon) continue
+
+    if (!key.startsWith('multi_auth') && key !== SESSION_COOKIE_NAME) continue
+
+    if (userJwtRegexp.test(key) || key === SESSION_COOKIE_NAME) {
+      const oldToken = value
+      const newToken = await refreshToken(oldToken)
+      res.appendHeader('Set-Cookie', cookie.serialize(key, newToken, httpOnlyOptions))
+      continue
+    }
+
+    refreshCookie(key)
+  }
+}
+
+export async function multiAuthMiddleware (req, res) {
+  if (!req.cookies) {
+    // required to properly access parsed cookies via req.cookies and not unparsed via req.headers.cookie
+    req = new NodeNextRequest(req)
+  }
+
+  const ok = checkMultiAuthCookies(req, res)
+  if (!ok) {
+    resetMultiAuthCookies(req, res)
+    return switchSessionCookie(req)
+  }
+
+  await refreshMultiAuthCookies(req, res)
+  return switchSessionCookie(req)
+}

pages/api/auth/[...nextauth].js

@@ -8,14 +8,13 @@ import prisma from '@/api/models'
 import nodemailer from 'nodemailer'
 import { PrismaAdapter } from '@auth/prisma-adapter'
 import { getToken, encode as encodeJWT } from 'next-auth/jwt'
-import { datePivot } from '@/lib/time'
 import { schnorr } from '@noble/curves/secp256k1'
 import { notifyReferral } from '@/lib/webPush'
 import { hashEmail } from '@/lib/crypto'
-import * as cookie from 'cookie'
+import { multiAuthMiddleware, setMultiAuthCookies } from '@/lib/auth'
-import { multiAuthMiddleware } from '@/pages/api/graphql'
 import { BECH32_CHARSET } from '@/lib/constants'
 import { NodeNextRequest } from 'next/dist/server/base-http/node'
+import * as cookie from 'cookie'
 
 /**
  * Stores userIds in user table
@@ -127,8 +126,8 @@ function getCallbacks (req, res) {
         token.sub = Number(token.id)
       }
 
-      // add multi_auth cookie for user that just logged in
       if (user && req && res) {
+        // add multi_auth cookie for user that just logged in
         const secret = process.env.NEXTAUTH_SECRET
         const jwt = await encodeJWT({ token, secret })
         const me = await prisma.user.findUnique({ where: { id: token.id } })
@@ -147,37 +146,6 @@ function getCallbacks (req, res) {
   }
 }
 
-function setMultiAuthCookies (req, res, { id, jwt, name, photoId }) {
-  const b64Encode = obj => Buffer.from(JSON.stringify(obj)).toString('base64')
-  const b64Decode = s => JSON.parse(Buffer.from(s, 'base64'))
-
-  // default expiration for next-auth JWTs is in 1 month
-  const expiresAt = datePivot(new Date(), { months: 1 })
-  const secure = process.env.NODE_ENV === 'production'
-  const cookieOptions = {
-    path: '/',
-    httpOnly: true,
-    secure,
-    sameSite: 'lax',
-    expires: expiresAt
-  }
-
-  // add JWT to **httpOnly** cookie
-  res.appendHeader('Set-Cookie', cookie.serialize(`multi_auth.${id}`, jwt, cookieOptions))
-
-  // switch to user we just added
-  res.appendHeader('Set-Cookie', cookie.serialize('multi_auth.user-id', id, { ...cookieOptions, httpOnly: false }))
-
-  let newMultiAuth = [{ id, name, photoId }]
-  if (req.cookies.multi_auth) {
-    const oldMultiAuth = b64Decode(req.cookies.multi_auth)
-    // make sure we don't add duplicates
-    if (oldMultiAuth.some(({ id: id_ }) => id_ === id)) return
-    newMultiAuth = [...oldMultiAuth, ...newMultiAuth]
-  }
-  res.appendHeader('Set-Cookie', cookie.serialize('multi_auth', b64Encode(newMultiAuth), { ...cookieOptions, httpOnly: false }))
-}
-
 async function pubkeyAuth (credentials, req, res, pubkeyColumnName) {
   const { k1, pubkey } = credentials
 
@@ -197,7 +165,7 @@ async function pubkeyAuth (credentials, req, res, pubkeyColumnName) {
       let user = await prisma.user.findUnique({ where: { [pubkeyColumnName]: pubkey } })
 
       // make following code aware of cookie pointer for account switching
-      req = multiAuthMiddleware(req)
+      req = await multiAuthMiddleware(req, res)
       // token will be undefined if we're not logged in at all or if we switched to anon
       const token = await getToken({ req })
       if (!user) {
@@ -759,7 +727,7 @@ const newUserHtml = ({ url, token, site, email }) => {
                   <tbody>
                     <tr>
                       <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
-                        <div style="font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;text-align:left;color:#000000;">Stacker News is like Reddit or Hacker News, but it <b>pays you Bitcoin</b>. Instead of giving posts or comments “upvotes,” Stacker News users (aka stackers) send you small amounts of Bitcoin called sats.</div>
+                        <div style="font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;text-align:left;color:#000000;">Stacker News is like Reddit or Hacker News, but it <b>pays you Bitcoin</b>. Instead of giving posts or comments "upvotes," Stacker News users (aka stackers) send you small amounts of Bitcoin called sats.</div>
                       </td>
                     </tr>
                     <tr>
@@ -774,7 +742,7 @@ const newUserHtml = ({ url, token, site, email }) => {
                     </tr>
                     <tr>
                       <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
-                        <div style="font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;text-align:left;color:#000000;">If you’re not sure what to share, <a href="${dailyUrl}"><b><i>click here to introduce yourself to the community</i></b></a> with a comment on the daily discussion thread.</div>
+                        <div style="font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;text-align:left;color:#000000;">If you're not sure what to share, <a href="${dailyUrl}"><b><i>click here to introduce yourself to the community</i></b></a> with a comment on the daily discussion thread.</div>
                       </td>
                     </tr>
                     <tr>
@@ -784,7 +752,7 @@ const newUserHtml = ({ url, token, site, email }) => {
                     </tr>
                     <tr>
                       <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
-                        <div style="font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;text-align:left;color:#000000;">If anything isn’t clear, comment on the FAQ post and we’ll answer your question.</div>
+                        <div style="font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;text-align:left;color:#000000;">If anything isn't clear, comment on the FAQ post and we'll answer your question.</div>
                       </td>
                     </tr>
                     <tr>

pages/api/graphql.js

@@ -11,7 +11,7 @@ import {
   ApolloServerPluginLandingPageLocalDefault,
   ApolloServerPluginLandingPageProductionDefault
 } from '@apollo/server/plugin/landingPage/default'
-import { NodeNextRequest } from 'next/dist/server/base-http/node'
+import { multiAuthMiddleware } from '@/lib/auth'
 
 const apolloServer = new ApolloServer({
   typeDefs,
@@ -68,7 +68,7 @@ export default startServerAndCreateNextHandler(apolloServer, {
         session = { user: { ...sessionFields, apiKey: true } }
       }
     } else {
-      req = multiAuthMiddleware(req)
+      req = await multiAuthMiddleware(req, res)
       session = await getServerSession(req, res, getAuthOptions(req))
     }
     return {
@@ -82,49 +82,3 @@ export default startServerAndCreateNextHandler(apolloServer, {
     }
   }
 })
-
-export function multiAuthMiddleware (request) {
-  // switch next-auth session cookie with multi_auth cookie if cookie pointer present
-
-  if (!request.cookies) {
-    // required to properly access parsed cookies via request.cookies
-    // and not unparsed via request.headers.cookie
-    request = new NodeNextRequest(request)
-  }
-
-  // is there a cookie pointer?
-  const cookiePointerName = 'multi_auth.user-id'
-  const hasCookiePointer = !!request.cookies[cookiePointerName]
-
-  const secure = process.env.NODE_ENV === 'production'
-
-  // is there a session?
-  const sessionCookieName = secure ? '__Secure-next-auth.session-token' : 'next-auth.session-token'
-  const hasSession = !!request.cookies[sessionCookieName]
-
-  if (!hasCookiePointer || !hasSession) {
-    // no session or no cookie pointer. do nothing.
-    return request
-  }
-
-  const userId = request.cookies[cookiePointerName]
-  if (userId === 'anonymous') {
-    // user switched to anon. only delete session cookie.
-    delete request.cookies[sessionCookieName]
-    return request
-  }
-
-  const userJWT = request.cookies[`multi_auth.${userId}`]
-  if (!userJWT) {
-    // no JWT for account switching found
-    return request
-  }
-
-  if (userJWT) {
-    // use JWT found in cookie pointed to by cookie pointer
-    request.cookies[sessionCookieName] = userJWT
-    return request
-  }
-
-  return request
-}