Update lurker corner to switch back to session

components/header.js

@@ -28,7 +28,7 @@ import { clearNotifications } from '../lib/badge'
 import { useServiceWorker } from './serviceworker'
 import SubSelect from './sub-select'
 import { useShowModal } from './modal'
-import SwitchAccountDialog from './switch-account'
+import SwitchAccountDialog, { useAccounts } from './switch-account'
 
 function WalletSummary ({ me }) {
   if (!me) return null
@@ -177,6 +177,8 @@ function StackerCorner ({ dropNavKey }) {
 function LurkerCorner ({ path }) {
   const router = useRouter()
   const strike = useLightning()
+  const { isAnon } = useAccounts()
+  const showModal = useShowModal()
 
   useEffect(() => {
     if (!window.localStorage.getItem('striked')) {
@@ -193,6 +195,23 @@ function LurkerCorner ({ path }) {
     query: { callbackUrl: window.location.origin + router.asPath }
   }), [router])
 
+  if (isAnon) {
+    return (
+      <div className='d-flex ms-auto'>
+        <Dropdown className={styles.dropdown} align='end'>
+          <Dropdown.Toggle className='nav-link nav-item' id='profile' variant='custom'>
+            <Nav.Link eventKey='anon' as='span' className='p-0'>
+              <AnonIcon className='me-1 fill-muted' width={20} height={20} />@anon
+            </Nav.Link>
+          </Dropdown.Toggle>
+          <Dropdown.Menu>
+            <Dropdown.Item onClick={() => showModal(onClose => <SwitchAccountDialog onClose={onClose} />)}>switch account</Dropdown.Item>
+          </Dropdown.Menu>
+        </Dropdown>
+      </div>
+    )
+  }
+
   return path !== '/login' && path !== '/signup' && !path.startsWith('/invites') &&
     <div className='ms-auto'>
       <Button

components/switch-account.js

@@ -1,4 +1,4 @@
-import { createContext, useCallback, useContext, useEffect, useState } from 'react'
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import AnonIcon from '../svgs/spy-fill.svg'
 import { useRouter } from 'next/router'
 import cookie from 'cookie'
@@ -34,10 +34,16 @@ export const AccountProvider = ({ children }) => {
     setAccounts(accounts => accounts.filter(({ id }) => id !== userId))
   }, [setAccounts])
 
-  return <AccountContext.Provider value={{ accounts, addAccount, removeAccount }}>{children}</AccountContext.Provider>
+  const isAnon = useMemo(() => {
+    const { 'multi_auth.user-id': multiAuthUserIdCookie } = cookie.parse(document.cookie)
+    if (!multiAuthUserIdCookie) return false
+    return multiAuthUserIdCookie === 'anonymous'
+  }, [document.cookie])
+
+  return <AccountContext.Provider value={{ accounts, addAccount, removeAccount, isAnon }}>{children}</AccountContext.Provider>
 }
 
-const useAccounts = () => useContext(AccountContext)
+export const useAccounts = () => useContext(AccountContext)
 
 const AnonAccount = () => {
   const me = useMe()

middleware.js

@@ -19,8 +19,13 @@ const multiAuthMiddleware = (request) => {
   const sessionCookieName = '__Secure-next-auth.session-token'
   const hasSession = request.cookies?.has(sessionCookieName)
   if (userId && hasSession) {
-    const userJWT = request.cookies.get(`multi_auth.${userId}`)?.value
-    if (userJWT) request.cookies.set(sessionCookieName, userJWT)
+    if (userId === 'anonymous') {
+      // user switched to anon
+      request.cookies.delete(sessionCookieName)
+    } else {
+      const userJWT = request.cookies.get(`multi_auth.${userId}`)?.value
+      if (userJWT) request.cookies.set(sessionCookieName, userJWT)
+    }
   }
   const response = NextResponse.next({ request })
   return response