🚀 My Hilariously Chaotic Quest to Build a Custom Hive Login React UI Plugin 😅

Hello Hive community members So, after wrestling with @aioha's react-ui and achieving little more than existential dread, I *bravely* (read: foolishly) decided to code my own solution from scratch. Who needs sleep anyway, right? Check out my previous disaster—I mean, post—about my misadventures with keychain SDK integration in React: [Last Episode: React Keychain SDK Facepalms](https://peakd.com/hive-139531/@sagarkothari88/hive-keychain-sdk-the-react-adventure-with-vite-tailwind-and-facepalms) Trying to integrate **HiveAuth** in react-js-app? Challenge accepted... and instantly regretted. ``` npm install hive-auth-wrapper ``` Spoiler alert: Not compatible with react-js. Buffer errors everywhere! (I skipped documenting the headaches, but you can recreate my misery with a fresh react-js project.)  In summary—Both HiveKeychain & HiveAuth: 🧠 ➡️ 🤯 Suddenly, “Why am I doing this to myself?” became my new mantra.  --- ### 🏃‍♂️ Rolling Back Like a Pro (or Not) 🏃‍♂️ Taking two steps forward, three steps back: the true dev way! Time to: - Uninstall **keychain-sdk** & **hive-auth-wrapper** - Reinstall **aioha-core** & **aioha-react-provider** - Regret nothing!!! (okay, maybe a little) #### Say goodbye to global & module polyfills: ``` npm uninstall @esbuild-plugins/node-globals-polyfill npm uninstall @esbuild-plugins/node-modules-polyfill ``` #### Hello to vite polyfills: ``` npm i vite-plugin-node-polyfills ``` #### Out with the old experiments: ``` npm uninstall buffer hive-auth-wrapper keychain-sdk ``` #### In with the new (again): ``` npm i @aioha/aioha npm i @aioha/react-provider @aioha/aioha ``` All set! Time for the next round of updates—to infinity, and… more config files! --- ### ⚙️ Setting Up Aioha With Provider… Again 🙃  ``` import { initAioha } from "@aioha/aioha"; import { AiohaProvider } from "@aioha/react-provider"; import { useUserTokenStore } from "@/store/UserTokenStore"; // variables const aioha = initAioha({ hiveauth: { name: "Hive Login React", description: "Login with Hive React Component", }, }); const HiveLoginButton = () => { return ( <AiohaProvider aioha={aioha}> {userTokenStore.apiState === "loading" ? loader() : userTokenStore.user() !== null ? userAvatarBasedButton() : loginButton()} </AiohaProvider> ); } ``` --- ### 🔍 Keychain Logic Gets an Upgrade (Like, Finally!) 🧐 ``` useEffect(() => { const check = async () => { console.log("We don't have keychain yet"); await new Promise((res) => setTimeout(res, 500)); const isKeychainInstalled = aioha.isProviderEnabled(Providers.Keychain); console.log( `Do we have keychain now? ${isKeychainInstalled ? "yes" : "no"}` ); setKeychainAvailable(isKeychainInstalled); }; if (document.readyState === "complete") { check(); } else { window.addEventListener("load", check); return () => window.removeEventListener("load", check); } }, []); ``` --- #### When Users Tap “Login with Keychain” 🗝️ ``` const onKeychainLoginTapped = async () => { try { const newProof = new Date().toISOString(); setProof(newProof); const loginResult = await aioha.login(Providers.Keychain, username, { msg: newProof, keyType: KeyTypes.Posting, loginTitle: "Login", }); if (loginResult.success) { const user = await userTokenStore.login(loginResult, newProof); console.log(`Logged in user is ${JSON.stringify(user)}`); if (dialogRef.current) { dialogRef.current.close(); } } else { console.log("Something went wrong"); } } catch (error) { console.log({ error }); } }; ``` --- ### 🧸 Reinventing State Management (Bye Redux, Hi Zustand Bear!) 🎉 Installing `zustand` was the best decision since breakfast: ``` npm i zustand ```   Now state management is so easy, I almost feel clever again! 🐻 --- ### 🚧 What’s Next on My Hive React Adventure? 🎯 - What if the same user tries to login again? Time to handle edge cases! - Craft a “Switch User” screen for seamless logins. - Package everything into a neat library (eventually). - Enable encryption key & API URL customization for devs. - More memes, more caffeine, more Hive. --- ### 🟢 More Power To Hive (And To Bearing My Meme-Fueled Struggles!) - Big shoutout to open-source warriors at keychain, hiveauth, aioha 💪 - Hive community—y’all are amazing! - Hive blockchain to the moon… and BEYOND! 🚀🌕✨  --- **Thanks for surviving this post! Send help (and coffee) as I continue this Hive React UI plugin journey.** --- ### 📝 Final Note - I asked perplexity to help optimize this post to make it more readable and viewer-friendly. - Here is the link where you can find both original content & improvements made by AI - https://www.perplexity.ai/search/4cf3eceb-fdbf-4aa6-9d80-0ff80c3c1bcb --- ### 🚀 My Contributions to ♦️ Hive Ecosystem | Contribution | To | Hive | Ecosystem | |--------------|----|------|-----------| | Hive Witness Node | Hive API Node (in progress) | 3Speak Video Encoder Node Operator (highest number of nodes) | 3Speak Mobile App Developer | | 3Speak Podcast App Developer | 3Speak Shorts App Developer | 3Speak Support & Maintenance Team | [Distriator Developer](https://distriator.com/) | | [CheckinWithXYZ](https://checkinwith.xyz/) | [Hive Inbox](https://hive-inbox.the-hive-mobile.app/) | [HiFind](https://hifind.the-hive-mobile.app/) | [Hive Donate App](https://donate.the-hive-mobile.app/) | | Contributed to HiveAuth Mobile App | Ecency ↔ 3Speak Integration | Ecency ↔ InLeo Integration | Ecency ↔ Actifit Integration | | [Hive Stats App](https://stats.the-hive-mobile.app/) | [Vote for Witness App](https://witness.the-hive-mobile.app/) | [HiveFlutterKit](https://hiveflutterkit.sagarkothari88.one/docs/intro) | [New 3Speak App](https://3speak.sagarkothari88.one/#/?tab=home) | --- ### 🙌 Support Back ❤️ **Appreciate my work? Consider supporting @threespeak & @sagarkothari88!** ❤️ | Vote | For | Witness | |------|-----|---------| | [](https://witness.the-hive-mobile.app/#/witnesses/@sagarkothari88) | [sagarkothari88](https://witness.the-hive-mobile.app/#/witnesses/@sagarkothari88) | @sagarkothari88 | | [](https://witness.the-hive-mobile.app/#/witnesses/@threespeak) | [threespeak](https://witness.the-hive-mobile.app/#/witnesses/@threespeak) | @threespeak | ---