Overview

Learn how to set up, log in, or sign up easily in your React app using @turnkey/react-native-wallet-kit.

The Embedded Wallet Kit makes authentication simple. You can call specific login and signup functions to create your own UI components and authentication flow.

Authentication state

To check if a user is authenticated, you can use the authState variable from the useTurnkey hook.

import { useTurnkey, AuthState } from "@turnkey/react-wallet-kit";

function AuthStatus() {
  const { authState, user, handleLogin } = useTurnkey();

  return (
    <div>
      {authState === AuthState.Authenticated ? (
        <p>Welcome back, {user?.userName}!</p>
      ) : (
        <button onClick={handleLogin}>Log in</button>
      )}
    </div>
  );
}

You can also set up an onAuthenticationSuccess callback passed in through the TurnkeyProvider to handle post-authentication logic, such as redirecting.

<TurnkeyProvider
  config={turnkeyConfig}
  callbacks={{
    onAuthenticationSuccess: ({ session }) => {
      console.log("User authenticated:", session);
      router.push("/dashboard");
    },
  }}
>
  {children}
</TurnkeyProvider>

Customize sub-organization creation

Need to configure default user names, passkey names, wallet creations or anything sub-org related? You can learn more about customizing the sub-orgs you create in the Sub-Organization Customization section.

Follow the guides below to learn how to set up email and SMS authentication, passkey authentication, and social logins in your React Native app.