- KEM (Key Encapsulation Mechanism): DHKEM\_P256\_HKDF\_SHA256
- KDF (Key Derivation Function): HKDF\_SHA256
- AEAD (Authenticated Encryption with Associated Data): CHACHA20\_POLY1305
- Mode: BASE
User {user?.id} is logged in.
; } } ```Loading...
;
}
if (!authenticated) {
return Please log in through your authentication provider
;
}
return (
Welcome, authenticated user!
User ID: {user.id}
Loading...
;
if (!authenticated) {
return ;
}
return Connected Accounts
{customAccounts?.map((account) => (
{account.type.replace('custom:', '')}
))}
Username: {account.username}
Email: {account.email}
setEmail(e.currentTarget.value)} value={email} />
setCode(e.currentTarget.value)} value={code} />
);
}
```
## Tracking Flow State
Track the state of the OTP flow via the `state` variable returned by the
`useLoginWithEmail` hook.
```ts theme={"system"}
type OtpFlowState =
| {status: 'initial'}
| {status: 'error'; error: Error | null}
| {status: 'sending-code'}
| {status: 'awaiting-code-input'}
| {status: 'submitting-code'}
| {status: 'done'};
```
{/* Prompt your user to enter their phone number */}
setPhoneNumber(e.currentTarget.value)} value={phoneNumber} />
{/* Once a phone number has been entered, send the OTP to it on click */}
{/* Prompt your user to enter the OTP */}
setCode(e.currentTarget.value)} value={code} />
{/* Once an OTP has been entered, submit it to Privy on click */}
);
}
```
## Tracking Flow State
Track the state of the OTP flow via the `state` variable returned by the
`useLoginWithSms` hook.
```ts theme={"system"}
type OtpFlowState =
| {status: 'initial'}
| {status: 'error'; error: Error | null}
| {status: 'sending-code'}
| {status: 'awaiting-code-input'}
| {status: 'submitting-code'}
| {status: 'done'};
```
Enable your passkeys for MFA
{user.linkedAccounts
.filter((account): account is PasskeyWithMetadata => account.type === 'passkey')
.map((account) => (
{account.credentialId}
))}
{/* QR code for the user to scan */}
{totpAuthUrl && totpSecret ?
{/* If TOTP values have been generated... */}
<>
{/* ...show the user a QR code with the `authUrl` that they can scan... */}
);
}
```
Enter the code from your authenticator app below.
setMfaCode(event.target.value)}/>
{/* This `MFAModal` component includes all logic for completing the MFA flow with Privy's `useMfa` hook */}
);
};
```
Enter your MFA code below
setMfaCode(event.target.value)} />{error}
}Why is this required?
Certain flows within the Privy authentication process require Privy to register allowed callback URLs with third-party service providers. The plainest example of this is social login flows using the OAuth 2.0 Protocol, where Privy must register allowed callback URLs with Google, Apple, and other OAuth login providers. Configuring your allowed URL schemes in the Privy Dashboard ensures Privy updates the appropriate settings with these third-party service providers!#### Can I delete my custom credentials and go back to using the Privy default ones? You can remove your credentials from the same page you configured them to go back to using Privy's defaults. We only recommend doing this if you are experiencing an issue with your own credentials as migrating to your own credentials is the best practice. For Apple, LinkedIn, and TikTok, once your credentials are in use, you will not be able to reset them due to user migration (see below). #### Will migrating to custom credentials impact my users? For most providers, the change will be undetectable by end users, other than their seeing your app's name next time the log in (rather than Privy's). For Apple, LinkedIn, and TikTok, if your app currently uses Privy's default credentials, we do not support updating to custom credentials. This process requires a migration which we have not yet built. #### Can I configure my own custom OAuth provider to work with Privy? No, we do not support the use of OAuth providers outside of our supported set. If you'd like to use a different provider, you may be able to through the use of [custom auth](/authentication/user-authentication/jwt-based-auth/overview).
Loading...
; return (
{wallets.map((wallet: ConnectedStandardSolanaWallet) => (
{wallet.standardWallet.name}
))}
);
}
```
#### Sign and send via hooks (with optional UI configuration)
```tsx theme={"system"}
import {
useWallets,
useSignMessage,
useSignTransaction,
useSignAndSendTransaction
} from '@privy-io/react-auth/solana';
export function Actions() {
const {wallets} = useWallets();
const {signMessage} = useSignMessage();
const {signTransaction} = useSignTransaction();
const {signAndSendTransaction} = useSignAndSendTransaction();
const wallet = wallets[0];
if (!wallet) return null;
return (
{wallet.address}
setEmail(e.currentTarget.value)} value={email} />
setCode(e.currentTarget.value)} value={code} />
);
}
```
## 2. Create an embedded wallet for the user
Your app can configure Privy to [**automatically** create wallets](/basics/react/advanced/automatic-wallet-creation) 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](/wallets/wallets/create/create-a-wallet) for users when required.
Loading...
;
}
// Now it's safe to use other Privy hooks and state
return Privy is ready!
;
}
```