🏗️ Dev Log Drop: Custom Hive Authentication Package! 🛠️

Hey party people of Hive! 🙋‍♂️

Let’s crank the dev updates up to eleven, sprinkle a dash of memes, and bring some buzz to the blockchain! 🐝

---

😅 Why Not Stick to Just Aioha?

I've used @aioha package like it’s my morning chai 🍵—everywhere: distriator, checkinwithxyz, and the 3speak-refactor mobile app! But, plot twist, we decided to ride one scooter further and build our own custom package (on top of it). Why? Well, because facing setbacks is just part of building on the bleeding edge—and, honestly, who doesn’t like doing things their own way sometimes? 😏

• Custom User Interface (because users want their apps looking fancy 💄)
• Custom Data Storage (we want our tokens, our types, and our own flavor 🌶️)
• Async logic for logins (because we absolutely must call our APIs! 🤖)
• Fan-demand: support login with private key for multiple users (not just me anymore!)

---

🤖 Introducing... HiveAuthentication (Name Sucks, Help Wanted! 😂)

Time to take matters into our own hands—UI hands, that is!

We’re making an open-source package (WIP name: hive-authentication, cheers for ideas!). Drop your brilliant/crazy/funny name suggestions in the comments—winner gets karma, eternal gratitude, and a virtual high five! ✋

• 100% open-source for Hive fam
• Minimal dependencies—lightweight is tight! 🪶
• Repo here: https://github.com/sag333ar/hive-authentication

• Is this our third attempt? Yes.
• Did we crash and burn before? Also yes.
• Am I more hopeful than ever? ABSOL

---

👀 Sneak Peak - UI Unveiled!

Check the glow-up! When users hit "login", they get this snazzy new UI. Options:

• Enter username, choose login flavor 😋
• Working options: keychain, hiveauth, posting key

More to come, but this is everything we’ve polished so far. ✨

---

⚛️ ReactJS Integration = Breezy! 🌬️

Installation (Spoiler: It’s Easy!)

npm install hive-authentication

Install the package. It will take care of adding aioha internally.

Let's not break UI

import 'hive-authentication/build.css';

Wherever you plan to use hive-authentication package's button, make sure you import the build.css file so that you don't break UX we have supplied in the package.

Code Snippet

import { AuthButton, useAuthStore } from 'hive-authentication';

function App() {
  const { currentUser, loggedInUsers } = useAuthStore();

  // Subscribe to store changes using Zustand
  useEffect(() => {
    const unsubscribe = useAuthStore.subscribe((state) => {
      console.log('Store state changed:', state);
    });

    return unsubscribe;
  }, []);

  // Your authentication callback - works for both login AND adding accounts
  const handleAuthenticate = async (hiveResult) => {
    // Make your API call here
    const response = await fetch('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        challenge: hiveResult.challenge,
        username: hiveResult.username,
        pubkey: hiveResult.publicKey,
        proof: hiveResult.proof,
      }),
    });

    if (!response.ok) {
      throw new Error('Server authentication failed');
    }

    const data = await response.json();
    
    // Return your server response as JSON string
    return JSON.stringify(data);
  };

  return (
    <div>
      <h1>My App</h1>
      <AuthButton onAuthenticate={handleAuthenticate} />
      
      {currentUser && (
        <p>Welcome, {currentUser.username}!</p>
      )}
    </div>
  );
}

That's it

Yep. That is it. Your reactjs app is ready with login/authentication. Easy peasy. Give it a try & share your feedback if you are a dev.

---

🎉 The Hive Hype Never Stops 🚂

• 🙌 Keep building open source for hive
• 💝 Big love to Hive fam for feedback & support
• 📈 Hive blockchain = 🚀🌌 all the way to the moon, Mars & beyond!

🔥 Until the next dev log — Keep building, keep Hiving! 🐝💜

---

📝 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/e3e4a8ed-6cf2-46a4-b539-81866c27acb1

---

🚀 My Contributions to ♦️ Hive Ecosystem

---

🙌 Support Back

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

---