Skip to main content

Social Login

Display a Login card​

Let's add a button to trigger a social login card:

src/app.tsx
export default function App() {
    // ...
    async function handleClick() {
        try {
            const user = await kukaiEmbed.current!.login({
                loginOptions: [
                    TypeOfLogin.Google,
                    TypeOfLogin.Twitter,
                    TypeOfLogin.Facebook,
                    TypeOfLogin.Reddit,
                    "email" as TypeOfLogin,
                ], // add or remove of social providers
                wideButtons: [true, true, false, false, false], // true: wide buttons, false: small buttons
            });
        } catch (error) {
            console.log(error);
        }

        setUser(user);
    }

    return (
        <div className="App">
            <h1>Demo</h1>
            <button onClick={handleClick} disabled={!isReady}>Sign in</button>
        </div>
    );
}



Logout​

Let's add another button so that users can sign out:

src/app.tsx
async function handleLogout() {
    try {
        await kukaiEmbed.current!.logout()
        setUser(null);
    } catch (error) {
        console.log(error)
    }
}

// ...

return (
    // ...
    <button onClick={handleClick} disabled={!isReady || !!user}>Sign in</button>
    <hr />
    {!!user && <button onClick={handleLogout}>Log out</button>}
)