Use base64 encoding for multi_auth cookie

components/switch-account.js

@@ -8,16 +8,22 @@ import Link from 'next/link'
 
 const AccountContext = createContext()
 
+const b64Decode = str => Buffer.from(str, 'base64').toString('utf-8')
+
 export const AccountProvider = ({ children }) => {
   const me = useMe()
   const [accounts, setAccounts] = useState()
 
   useEffect(() => {
-    const { multi_auth: multiAuthCookie } = cookie.parse(document.cookie)
-    const accounts = multiAuthCookie
-      ? JSON.parse(multiAuthCookie)
-      : me ? [{ id: me.id, name: me.name, photoId: me.photoId }] : []
-    setAccounts(accounts)
+    try {
+      const { multi_auth: multiAuthCookie } = cookie.parse(document.cookie)
+      const accounts = multiAuthCookie
+        ? JSON.parse(b64Decode(multiAuthCookie))
+        : me ? [{ id: me.id, name: me.name, photoId: me.photoId }] : []
+      setAccounts(accounts)
+    } catch (err) {
+      console.error('error parsing cookies:', err)
+    }
   }, [])
 
   const addAccount = useCallback(user => {

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

@@ -123,10 +123,10 @@ async function pubkeyAuth (credentials, req, res, pubkeyColumnName) {
           res.appendHeader('Set-Cookie', cookie.serialize(`multi_auth.${me.id}`, tokenJWT, cookieOptions))
           res.appendHeader('Set-Cookie',
             cookie.serialize('multi_auth',
-              JSON.stringify([
+              Buffer.from(JSON.stringify([
                 { id: user.id, name: user.name, photoId: user.photoId },
                 { id: me.id, name: me.name, photoId: me.photoId }
-              ]),
+              ])).toString('base64'),
               { ...cookieOptions, httpOnly: false }))
           // don't switch accounts, we only want to add. switching is done in client via "pointer cookie"
           return token