🏗️ 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
| 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 |
Congratulations @sagarkothari88! You have completed the following achievement on the Hive blockchain And have been rewarded with New badge(s)
Your next target is to reach 125000 upvotes.
You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word
STOPCheck out our last posts:
You've been curated by @plantpoweronhive! Delegations welcome!
Thank you so much @plantpoweronhive for the curation.
I'll keep up my best.