​
0. Prerequisites

This guide assumes that you have completed the Setup guide.

​
1. Enable a user to log in via email

This quickstart guide will demonstrate how to authenticate a user with a one time password as an example, but Privy supports many authentication methods. Explore our Authentication docs to learn about other methods such as socials, passkeys, and external wallets to authenticate users in your app.

To authenticate a user via their email address, use the React SDK’s useLoginWithEmail hook.

import {useLoginWithEmail} from '@privy-io/react-auth';
...
const {sendCode, loginWithCode} = useLoginWithEmail();

Ensure that this hook is mounted in a component that is wrapped by the PrivyProvider. You can use the returned methods sendCode and loginWithCode to authenticate your user per the instructions below.

​
Send an OTP

Send a one-time passcode (OTP) to the user’s email by passing their email address to the sendCode method returned from useLoginWithEmail:

import {useState} from 'react';
import {useLoginWithEmail} from '@privy-io/react-auth';

export default function LoginWithEmail() {
  const [email, setEmail] = useState('');
  const [code, setCode] = useState('');
  const {sendCode, loginWithCode} = useLoginWithEmail();

  return (
    <div>
      <input onChange={(e) => setEmail(e.currentTarget.value)} value={email} />
      <button onClick={() => sendCode({email})}>Send Code</button>
      <input onChange={(e) => setCode(e.currentTarget.value)} value={code} />
      <button onClick={() => loginWithCode({code})}>Login</button>
    </div>
  );
}

​
2. Create an embedded wallet for the user

Your app can configure Privy to automatically create wallets for your users as part of their login flow. The embedded wallet will be generated and linked to the user object upon authentication.

Alternatively your app can manually create wallets for users when required.

Privy can provision wallets for your users on both Ethereum and Solana.

​
3. Send a transaction with the embedded wallet

With the users’ embedded wallet, your application can now prompt the user to sign and send transactions.

import {useSendTransaction} from '@privy-io/react-auth';
export default function SendTransactionButton() {
  const {sendTransaction} = useSendTransaction();
  const onSendTransaction = async () => {
    sendTransaction({
      to: '0xE3070d3e4309afA3bC9a6b057685743CF42da77C',
      value: 100000
    });
  };

  return <button onClick={onSendTransaction}>Send Transaction</button>;
}

Learn more about sending transactions with the embedded wallet. Privy enables you to take many actions on the embedded wallet, including sign a message, sign typed data, and sign a transaction.

Congratulations, you have successfully been able to integrate Privy authentication and wallet into your React application!

​
0. Prerequisites

This guide assumes that you have completed the Setup guide.

​
1. Enable a user to log in via email

This quickstart guide will demonstrate how to authenticate a user with a one time password as an example, but Privy supports many authentication methods. Explore our Authentication docs to learn about other methods such as socials, passkeys, and external wallets to authenticate users in your app.

To authenticate a user via their email address, use the React SDK’s useLoginWithEmail hook.

import {useLoginWithEmail} from '@privy-io/react-auth';
...
const {sendCode, loginWithCode} = useLoginWithEmail();

Ensure that this hook is mounted in a component that is wrapped by the PrivyProvider. You can use the returned methods sendCode and loginWithCode to authenticate your user per the instructions below.

​
Send an OTP

Send a one-time passcode (OTP) to the user’s email by passing their email address to the sendCode method returned from useLoginWithEmail:

import {useState} from 'react';
import {useLoginWithEmail} from '@privy-io/react-auth';

export default function LoginWithEmail() {
  const [email, setEmail] = useState('');
  const [code, setCode] = useState('');
  const {sendCode, loginWithCode} = useLoginWithEmail();

  return (
    <div>
      <input onChange={(e) => setEmail(e.currentTarget.value)} value={email} />
      <button onClick={() => sendCode({email})}>Send Code</button>
      <input onChange={(e) => setCode(e.currentTarget.value)} value={code} />
      <button onClick={() => loginWithCode({code})}>Login</button>
    </div>
  );
}

​
2. Create an embedded wallet for the user

Your app can configure Privy to automatically create wallets for your users as part of their login flow. The embedded wallet will be generated and linked to the user object upon authentication.

Alternatively your app can manually create wallets for users when required.

Privy can provision wallets for your users on both Ethereum and Solana.

​
3. Send a transaction with the embedded wallet

With the users’ embedded wallet, your application can now prompt the user to sign and send transactions.

import {useSendTransaction} from '@privy-io/react-auth';
export default function SendTransactionButton() {
  const {sendTransaction} = useSendTransaction();
  const onSendTransaction = async () => {
    sendTransaction({
      to: '0xE3070d3e4309afA3bC9a6b057685743CF42da77C',
      value: 100000
    });
  };

  return <button onClick={onSendTransaction}>Send Transaction</button>;
}

Learn more about sending transactions with the embedded wallet. Privy enables you to take many actions on the embedded wallet, including sign a message, sign typed data, and sign a transaction.

Congratulations, you have successfully been able to integrate Privy authentication and wallet into your React application!