> ## Documentation Index
> Fetch the complete documentation index at: https://turnkey-0e7c1f5b-traian-remove-eip-712-note.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

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

export const FeatureCard = ({title, description, icon, logo, href}) => {
  return <a href={href} className="not-prose font-normal group ring-0 ring-transparent cursor-pointer block rounded-lg border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-transparent p-5 no-underline hover:border-primary/40 transition-colors">
      <div className="tk-card-row">
        <span className="tk-card-icon-wrap">
          {logo ? <img src={`/images/networks/${logo}.svg`} className="tk-card-network-logo" alt="" /> : <span className="tk-card-icon" style={{
    maskImage: `url(/images/icons/${icon}.svg)`,
    WebkitMaskImage: `url(/images/icons/${icon}.svg)`
  }} />}
        </span>
        <div>
          <div className="font-semibold text-sm text-zinc-950 dark:text-white group-hover:text-primary transition-colors">
            {title}
          </div>
          {description && <div className="text-sm text-zinc-500 dark:text-zinc-400 mt-1">
              {description}
            </div>}
        </div>
      </div>
    </a>;
};

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.

```tsx theme={null}
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.

```tsx theme={null}
<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](/solutions/embedded-wallets/integration-guide/react-native/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.

<div style={{display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '12px'}}>
  <FeatureCard title="Email & SMS" icon="lock-01" href="/solutions/embedded-wallets/integration-guide/react-native/authentication/email-sms" description="Set up email and SMS authentication in your React Native app." />

  <FeatureCard title="Passkey Authentication" icon="lock-01" href="/solutions/embedded-wallets/integration-guide/react-native/authentication/passkey" description="Set up passkey authentication in your React Native app." />

  <FeatureCard title="Social Logins" icon="lock-01" href="/solutions/embedded-wallets/integration-guide/react-native/authentication/social-logins" description="Add social logins with wallet creation and account derivation." />
</div>