feat: 🎸 Implemented login/logout in the manager app example

Author: kostysh

examples/manager/src/App.tsx

@@ -27,7 +27,7 @@ export const App = () => {
         tabs={[
           {
             id: 0,
-            title: 'Authorization',
+            title: 'Access',
             active: true,
           },
           {

examples/manager/src/components/LoginWidget.tsx

@@ -6,7 +6,7 @@ import { createAdminSignature } from '../../../../src/node/api/client.js';
 import { Tabs, TabPanel } from './Tabs.js';
 
 export const LoginWidget = () => {
-  const { isAuth, login, setConfig, resetAuth } = useConfig();
+  const { isAuth, login, setAuth, resetAuth } = useConfig();
   const { node, nodeConnected } = useNode();
   const { isConnected, walletClient } = useWallet();
   const [selectedTab, setSelectedTab] = useState<number>(0);
@@ -66,24 +66,42 @@ export const LoginWidget = () => {
     });
   }, [node, name, handleSignature]);
 
-  const handleAdminAction = useCallback(async () => {
+  const handleLogout = useCallback(async () => {
     try {
+      setError(undefined);
+      setMessage(undefined);
+
       if (!node) {
         throw new Error('Not connected to the Node');
       }
 
+      await node.user.logout.mutate();
+      resetAuth();
+    } catch (error) {
+      console.log(error);
+      setError((error as Error).message || 'Unknown logout error');
+    }
+  }, [node, resetAuth]);
+
+  const handleAdminAction = useCallback(async () => {
+    try {
       setError(undefined);
       setMessage(undefined);
 
+      if (!node) {
+        throw new Error('Not connected to the Node');
+      }
+
       switch (adminAction) {
         case 'register':
           await handleAdminRegister();
-          setConfig({ login: name });
           setAdminAction('login');
           setMessage(`Admin "${name}" successfully registered. Please log in.`);
+          setAuth(name);
           break;
         case 'login':
           await handleAdminLogin();
+          setAuth(name);
           break;
         default:
           throw new Error('Unknown admin action');
@@ -92,17 +110,18 @@ export const LoginWidget = () => {
       console.log(error);
       setError((error as Error).message || 'Unknown login error');
     }
-  }, [
-    node,
-    adminAction,
-    name,
-    setConfig,
-    handleAdminRegister,
-    handleAdminLogin,
-  ]);
+  }, [node, adminAction, name, handleAdminRegister, setAuth, handleAdminLogin]);
 
   return (
     <>
+      {isAuth &&
+        <div>
+          <div>Welcome {login ?? 'user'}</div>
+          <div>
+            <button onClick={handleLogout}>Log Out</button>
+          </div>
+        </div>
+      }
       <Tabs
         tabs={[
           {
@@ -118,7 +137,6 @@ export const LoginWidget = () => {
         onChange={setSelectedTab}
       />
       <TabPanel id={0} activeTab={selectedTab}>
-        {isAuth && <div>Welcome {login ?? 'user'}</div>}
         {!isAuth && nodeConnected && (
           <div style={{ marginTop: 20 }}>
             <form
@@ -192,14 +210,6 @@ export const LoginWidget = () => {
             </div>
           </div>
         )}
-        {isAuth && (
-          <div>
-            <div>Welcome {login ?? 'user'}</div>
-            <div>
-              <button onClick={() => resetAuth()}>Log Out</button>
-            </div>
-          </div>
-        )}
       </TabPanel>
 
       {message && <div style={{ marginTop: 20 }}>✅ {message}</div>}

examples/manager/src/providers/ConfigProvider/ConfigProviderContext.ts

@@ -1,11 +1,9 @@
 import { createContext, useContext } from 'react';
-import { HTTPHeaders } from '@trpc/client';
 
 export const APP_CONFIG_KEY = 'appConfig';
 
 export interface AppConfig {
   nodeHost?: string;
-  accessToken?: string;
   login?: string;
 }
 
@@ -14,7 +12,6 @@ export interface ConfigContextData extends AppConfig {
   setConfig(config: AppConfig): void;
   setAuth(accessToken: string): void;
   resetAuth(): void;
-  getAuthHeaders(): HTTPHeaders;
   isAuth: boolean;
 }
 

examples/manager/src/providers/ConfigProvider/index.tsx

@@ -16,7 +16,7 @@ export const ConfigProvider = ({ children }: PropsWithChildren) => {
   const [config, setConfig] = useState<AppConfig>({});
   const [error, setError] = useState<string | undefined>();
 
-  const isAuth = useMemo(() => Boolean(config.accessToken), [config]);
+  const isAuth = useMemo(() => Boolean(config.login), [config]);
 
   const hydrate = useCallback((config: AppConfig) => {
     try {
@@ -55,22 +55,16 @@ export const ConfigProvider = ({ children }: PropsWithChildren) => {
             ...config,
             ...data,
           }),
-        setAuth: (accessToken: string) =>
+        setAuth: (login: string) =>
           setConfig({
             ...config,
-            accessToken,
+            login,
           }),
         resetAuth: () =>
           setConfig({
             ...config,
-            accessToken: undefined,
             login: undefined,
           }),
-        getAuthHeaders: () => ({
-          authorization: config.accessToken
-            ? `Bearer ${config.accessToken}`
-            : '',
-        }),
         isAuth,
         configError: error,
       }}

examples/manager/src/providers/NodeProvider/index.tsx

@@ -2,15 +2,12 @@ import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
 import superjson from 'superjson';
 import { PropsWithChildren, useState, useEffect } from 'react';
 import { NodeContext } from './NodeProviderContext';
-import {
-  ACCESS_TOKEN_NAME,
-  accessTokenLink,
-} from '../../../../../src/node/api/client.js';
+import { unauthorizedLink } from '../../../../../src/node/api/client.js';
 import type { AppRouter } from '../../../../../src/node/api/index.js';
 import { useConfig } from '../ConfigProvider/ConfigProviderContext.js';
 
 export const NodeProvider = ({ children }: PropsWithChildren) => {
-  const { nodeHost, setAuth, getAuthHeaders } = useConfig();
+  const { nodeHost, setAuth, resetAuth } = useConfig();
   const [node, setNode] = useState<
     ReturnType<typeof createTRPCProxyClient<AppRouter>> | undefined
   >();
@@ -38,10 +35,16 @@ export const NodeProvider = ({ children }: PropsWithChildren) => {
         const tRpcNode = createTRPCProxyClient<AppRouter>({
           transformer: superjson,
           links: [
-            accessTokenLink(ACCESS_TOKEN_NAME, setAuth),
+            unauthorizedLink(resetAuth),
             httpBatchLink({
               url: nodeHost,
-              headers: getAuthHeaders,
+              fetch(url, options) {
+                return fetch(url, {
+                  ...options,
+                  // allows to send cookies to the server
+                  credentials: 'include',
+                });
+              },
             }),
           ],
         });
@@ -65,7 +68,7 @@ export const NodeProvider = ({ children }: PropsWithChildren) => {
     return () => {
       stopClient();
     };
-  }, [getAuthHeaders, setAuth, nodeHost]);
+  }, [nodeHost, setAuth, resetAuth]);
 
   return (
     <NodeContext.Provider