log out

atproto-notifications/src/components/setup/Chrome.tsx

···
 import { Handle } from '../User';
 
-export function Chrome({ user, children }) {
+export function Chrome({ user, onLogout, children }) {
   const content = children;
   const logout = () => null;
   return (
···
               <span className="handle">
                 <Handle did={user.did} />
               </span>
-              {/* TODO: clear *all* info on logout */}
-              <button className="subtle bad" onClick={logout}>&times;</button>
+              <button className="subtle bad" onClick={onLogout}>&times;</button>
             </p>
           </div>
         )}

atproto-notifications/src/components/setup/WithServerHello.tsx

···
 import { GetJson, PostJson } from '../Fetch';
 import { Chrome } from './Chrome';
 
-
-  // const logout = useCallback(async () => {
-  //   setRole('anonymous');
-  //   setUser(null);
-  //   // TODO: clear indexeddb
-  //   await fetch(`${host}/logout`, {
-  //     method: 'POST',
-  //     credentials: 'include',
-  //   });
-  // });
-
 export function WithServerHello({ children }) {
+  const [loggingOut, setLoggingOut] = useState(null);
+  const [helloKey, setHelloKey] = useState(0);
   const [whoamiKey, setWhoamiKey] = useState(0);
   const [whoamiInfo, setWhoamiInfo] = useState(null);
 
···
     setWhoamiKey(n => n + 1);
   });
 
+  const handleLogout = useCallback(async () => {
+    setLoggingOut(true);
+    try {
+      const host = import.meta.env.VITE_NOTIFICATIONS_HOST;
+      await fetch(`${host}/logout`, {
+        method: 'POST',
+        credentials: 'include',
+      });
+      // TODO: cancel subscription, clear storage, etc
+    } catch (e) {
+      console.error('logout fail', e);
+    }
+    setLoggingOut(null);
+    setHelloKey(n => n + 1);
+  });
+
+  if (loggingOut !== null) {
+    return <Chrome><p>Logging out&hellip;</p></Chrome>;
+  }
+
   return (
     <GetJson
       /* todo: key on login state */
+      key={helloKey}
       endpoint='/hello'
       credentials
       ok={({ whoamiHost, webPushPublicKey, role, did }) => {
···
                 data={{ token: whoamiInfo.token }}
                 credentials
                 ok={({ did, role, webPushPublicKey }) => (
-                  <Chrome user={{ did, role }}>
+                  <Chrome user={{ did, role }} onLogout={handleLogout}>
                     <PushServerContext.Provider value={webPushPublicKey}>
                       {childrenFor(did, role)}
                     </PushServerContext.Provider>
···
             )
         } else {
           return (
-            <Chrome user={{ did, role }}>
+            <Chrome user={{ did, role }} onLogout={handleLogout}>
               <PushServerContext.Provider value={webPushPublicKey}>
                 {childrenFor(did, role)}
               </PushServerContext.Provider>

server/index.js

···
       .end(JSON.stringify({ reason: 'failed to register subscription' }));
   }
   updateSubs(db);
+  clearAccountCookie(res);
   res.setHeader('Content-Type', 'application/json');
   res.writeHead(201);
   res.end(JSON.stringify({ sup: 'bye' }));