Hive dApps Dev Update - hive-authentication - reactjs package update - dark and light mode support added

sagarkothari88(77)

Published in

HiveDevs

Words

349

Reading

2 min

Listen

Play

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 @aioha
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

switch user light mode

add user light mode

add user with posting key - light mode

add user hiveauth qr scanner

Dark mode

switch user dark mode

add account with posting key dark mode

add account with dark mode

add account - hive auth - QR code - 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