integrate auth

src/layouts/defaultLayout.tsx

@@ -21,11 +21,12 @@ export const defaultLayout = ({ children }: IDefaultLayoutProps) => {
   const router = useRouter();
   const currentRoute = router.pathname;
 
-  const { getGuilds, getGuildInfoByDiscord } = useAppStore();
+  const { getGuilds, getGuildInfoByDiscord, authorizeTwitter } = useAppStore();
   const [openDialog, setOpenDialog] = useState<boolean>(false);
 
+  const user = StorageService.readLocalStorage<IUser>('user');
+
   useEffect(() => {
-    const user = StorageService.readLocalStorage<IUser>('user');
     if (user) {
       const { guildId } = user.guild;
       getGuilds();
@@ -154,6 +155,7 @@ export const defaultLayout = ({ children }: IDefaultLayoutProps) => {
                 <TcButton
                   text={'Connect Twitter account'}
                   variant="contained"
+                  onClick={() => authorizeTwitter(user?.token.accessToken)}
                 />
               </div>{' '}
             </div>

src/store/slices/twitterSlice.ts

@@ -0,0 +1,29 @@
+import { StateCreator } from 'zustand';
+import { axiosInstance } from '../../axiosInstance';
+import ITwitter from '../types/ITwitter';
+import { conf } from '../../configs';
+
+const BASE_URL = conf.API_BASE_URL;
+
+const createTwitterSlice: StateCreator<ITwitter> = (set, get) => ({
+  authorizeTwitter: async (token: string) => {
+    try {
+      // Send token to intermediary endpoint
+      await axiosInstance({
+        method: 'GET', // adjust as necessary
+        url: `${BASE_URL}/auth/twitter/login`,
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      // The above request should set some session or cookie authentication
+      // and then redirect to the Twitter authorization URL.
+      // Since it's a 302 redirect, you might not need to handle the response directly.
+    } catch (error) {
+      console.error('Error in intermediary auth step:', error);
+    }
+  },
+});
+
+export default createTwitterSlice;

src/store/types/ITwitter.ts

@@ -0,0 +1,3 @@
+export default interface ITwitter {
+  authorizeTwitter: (token: string) => void;
+}

src/store/useStore.ts

@@ -5,6 +5,7 @@ import createSettingSlice from './slices/settingSlice';
 import createBreakdownsSlice from './slices/breakdownsSlice';
 import createMemberInteractionSlice from './slices/memberInteractionSlice';
 import communityHealthSlice from './slices/communityHealthSlice';
+import twitterSlice from './slices/twitterSlice';
 
 const useAppStore = create<any>()((...a) => ({
   ...createAuthSlice(...a),
@@ -13,6 +14,7 @@ const useAppStore = create<any>()((...a) => ({
   ...createBreakdownsSlice(...a),
   ...createMemberInteractionSlice(...a),
   ...communityHealthSlice(...a),
+  ...twitterSlice(...a),
 }));
 
 export default useAppStore;