Archive post
🧑💻 Hive dApps & dPackages development - hive-authentication package 📦 usage guide 📝
A fun guide to the new hive-authentication ReactJS package! Step-by-step setup, community shout-outs, and extra buzz
### **🐝 What’s the Buzz About?**
Hello Hive community members! 🎉
- You may have seen me mention the `hive-authentication` package in earlier posts, but never with this much jazz.
- That’s because it was, well, marinating like a fine curry. 🍛
- But now—it’s piping hot and ready for YOU to spice up your projects!
- No more waiting! Time to fire it up in your ReactJS apps. 🚀
> **⚠️ Quick Note:**
> This is **strictly for ReactJS** projects! No plain vanilla, no Angular, no Vue—just pure ReactJS flavor.
---
### **🔎 Where To Find It?**
- [npm](https://www.npmjs.com/package/hive-authentication)
- [github](https://github.com/sag333ar/hive-authentication)
---
### **🤔 Why Use hive-authentication?**
- Need to verify **proof-challenge** signed by a hive user from your backend? ✅
- Want to let users login with a **private posting key** (as the last resort)? ✅
- Fancy **custom local storage per user**? ✅
- Don’t need any of this? No worries—stick to [@aioha](https://github.com/aioha-hive/react-ui) and party on! 🎈
Now you know the “why”—let’s jump in!
---
### **🛠️ How to Implement in ReactJS**
#### **Step 1: Install**
```
npm install hive-authentication
```
#### **Step 2: Initialize in App.tsx**
Open up `App.tsx` and set up your authentication flow! 🔥
```
import { initAioha } from '@aioha/aioha'
import { AiohaProvider } from '@aioha/react-provider'
const aioha = initAioha(
{
hivesigner: {
app: 'hive-auth-demo.app',
callbackURL: window.location.origin + '/hivesigner.html',
scope: ['login', 'vote']
},
hiveauth: {
name: 'Hive Authentication Demo',
description: 'A demo app for testing Hive authentication'
}
}
)
function App() {
return (
<AiohaProvider aioha={aioha}>
);
}
```
#### **Step 4: Call Your Backend Like a Pro**
```
const handleAuthenticate = async (hiveResult: HiveAuthResult): Promise => {
console.log('Hive authentication result:', hiveResult);
try {
const response = await fetch("https://beta-api.distriator.com/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: ${response.status} ${response.statusText}`);
}
const data = await response.json();
console.log('Server response:', data);
// Return your server response as JSON string
return JSON.stringify(data);
} catch (error) {
console.error("Authentication error:", error);
throw error;
}
};
```
Wait for the *useEffect* state change message—voila, it works!
---
### **🎉 Done & Dusted**
Yep, that’s pretty much it. Easy as pie. 🥧
Give it a spin and let me know how it powers up your Hive projects!
---
### **🦾 More Power to Hive (and You!)**
- More power to **Hive community** members!
- More power to open-source contributors!
- More power to **Hive blockchain!**
- Hive to the moon and beyond 🚀🌕
---
### **🙌 Support & Love**
- Tried this package? Drop your **feedback** in the comments! 💬
- Liked my work? **Upvote** this post! 👍
- Want to keep seeing new stuff? **Vote me as Hive Witness** 😎
- Love me? **Tip me** on this post!
- See you in the next update—BYE BYE! 👋
---
### 📝 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/9b9e4552-5b5e-43ff-8a76-53cbf691132a
---
### 🚀 My Contributions to ♦️ Hive Ecosystem
| Contribution | To | Hive | Ecosystem |
|--------------|----|------|-----------|
| Hive Witness Node | [Hive API Node](https://hive-api.sagarkothari88.one/) | 3Speak Video Encoder Node Operator (highest number of nodes) | 3Speak Mobile App Developer |
| Podcast App Developer | 3Shorts 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 |</div>
</div>
Your App goes here
</AiohaProvider>
);
}
```
#### **Step 3: Add the Magic AuthButton**
```
import { AuthButton, useAuthStore } from 'hive-authentication';
import 'hive-authentication/build.css';
import { useAioha } from "@aioha/react-provider";
function YourComponent() {
const { currentUser, loggedInUsers } = useAuthStore();
const { aioha } = useAioha();
useEffect(() => {
const unsubscribe = useAuthStore.subscribe((state) => {
console.log('Store state changed:', state);
});
return unsubscribe;
}, []);
return (
My App
<AuthButton onAuthenticate={handleAuthenticate} aioha={aioha} shouldShowSwitchUser = {true} // Optional true onClose={() => { console.log("AuthButton dialog closed"); }} /> {currentUser && (Welcome, {currentUser.username}!
)}