🚀 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

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()}
      <HiveLoginModal />
    </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
CheckinWithXYZ	Hive Inbox	HiFind	Hive Donate App
Contributed to HiveAuth Mobile App	Ecency ↔ 3Speak Integration	Ecency ↔ InLeo Integration	Ecency ↔ Actifit Integration
Hive Stats App	Vote for Witness App	HiveFlutterKit	New 3Speak App

---

🙌 Support Back

❤️ Appreciate my work? Consider supporting @threespeak & @sagarkothari88! ❤️

Vote	For	Witness
	sagarkothari88	@sagarkothari88
	threespeak	@threespeak

---