Hello Hive Community Members,
With this post, today I will share an update on hive-authentication package that we've built & maintaining it as an open source. You can find all about it by clicking following link
https://github.com/sag333ar/hive-authentication
You can also find it on npmjs.com with following link
https://www.npmjs.com/package/hive-authentication
hive-authentication package
- Hive authentication package is for reactjs developers
- It provides ready-made-ui for logging in & switching users
- It works on top of another package
- hive authentication package allows user to login to multiple accounts with wallets like hive-keychain, hive-auth & sometimes with posting key as well.
What did we change?
We added support for dark mode & light mode. After updating to latest version of package, you may follow the steps listed below to add support for dark or light mode.
Step 1. Set current mode (dark or light)
const [theme, setTheme] = useState<"light" | "dark">("light");
In this example, we are using light mode as default.
Step 2. Apply theme to document
useEffect(() => {
// Apply the theme manually by setting a data-theme attribute on the HTML element
document.documentElement.setAttribute("data-theme", theme);
}, [theme]);
Step 3. Add Theme Toggle
{/* Theme Toggle */}
<div className="flex justify-end mb-4">
<button
className="btn btn-outline"
onClick={() => setTheme(theme === "light" ? "dark" : "light")}
>
Switch to {theme === "light" ? "Dark" : "Light"} Mode
</button>
</div>
Step 4. Supply updated theme to hive-authentication package's button
<AuthButton
onAuthenticate={handleAuthenticate}
aioha={aioha}
onClose={() => {
console.log("AuthButton dialog closed");
}}
onSignMessage={(username) => {
return `${new Date().toISOString()}:${username}`;
}}
theme={theme} // Pass theme to AuthButton
/>
That's it & you are all set with it. Keep using hive-authentication package & share feedback if you've any.
Preview Images
Light mode
Dark mode
🦾 Power-Up the Hive! 🚀🌒
- 💪 Making Hive’s community stronger, one bug at a time!
- 🧙♂️ Love to all the open-source wizards—your code is my spellbook!
- 🌒 Hive = blockchain rocket. Destination: THE MOON! Unlimited upvotes, here we come! 🚀
🙌 Support, Laughs & Good Vibes Zone
- Found a bug? Smack it with an UPVOTE 🐞!
- Want more Hive sorcery? Vote me as Hive Witness 🧙♂️!
- Tips, jokes, karma, Hive-love—send ‘em all ❤️.
- Until next time—BYEEE 👋🚀
🚀 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 | |