๐ Whatโs the Buzz About?
Hello Hive community members! ๐
- You may have seen me mention the
hive-authenticationpackage 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?
๐ค 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 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}>
<div>Your App goes here</div>
</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 (
<div>
<h1>My App</h1>
<AuthButton
onAuthenticate={handleAuthenticate}
aioha={aioha}
shouldShowSwitchUser = {true} // Optional true
onClose={() => {
console.log("AuthButton dialog closed");
}}
/>
{currentUser && (
<p>Welcome, {currentUser.username}!</p>
)}
</div>
);
}
Step 4: Call Your Backend Like a Pro
const handleAuthenticate = async (hiveResult: HiveAuthResult): Promise<string> => {
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 | 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 |
| 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 &
! โค๏ธ
| Vote | For | Witness |
|---|---|---|
| sagarkothari88 | ||
| threespeak |