Initialization

React
Plain Javascript

Let's start by installing kukai-embed

npm install kukai-embed
# or
yarn add kukai-embed

Next, let's instantiate kukai-embed.
ⓘ In your DApp project, add kukai-embed to a store (using redux, zustand or similar) to share data between your components

tip

Kukai-embed performs browser OAuth compatibility checks and returns a boolean (isBrowserOAuthCompatible) and a message when it is initialized. If these checks need to be performed prior to initialization, please refer to the Troubleshooting/Browsers guide

src/app.tsx:
import { KukaiEmbed, Networks } from "kukai-embed";

export default function App() {
    const [user, setUser] = useState<LoginInfo | null>(null);
    const [isReady, setReady] = useState(false);

    const kukaiEmbed = useRef<KukaiEmbed>();

    useEffect(() => {
        init(); // instantiates kukai-embed and retrieves the active account, if any
    }, [setReady]);

    async function init() {
        if (kukaiEmbed.current) {
            return;
        }

        kukaiEmbed.current = new KukaiEmbed({ net: Networks.ghostnet }); // instantiation
        
        try {
            const { isBrowserOAuthCompatible, message } = await kukaiEmbed.current.init(); // initialization
            if (!isBrowserOAuthCompatible) {
                // update the UI, display errors
                throw new Error(message);
            }
        } catch {
            console.trace();
            return;
        }

        const { user } = kukaiEmbed.current; // retrieve an existing user account

        setUser(user);
        setReady(true);
    }

    // ...
}