Appearance
Login with Privy UIs ​
Privy supports easy onboarding with an out of the box user interface to log users in.
To have users login to your app with Privy's UIs in your app, use the login
method from the usePrivy
hook.
tsx
const {login} = usePrivy();
When invoked, this method will open the Privy modal and kick off the Privy login flow. From there, users can login with any of the login methods you've configured for your app.
If a user is already authenticated
when you call login
method, Privy will throw an error indicating that the user is already logged in. If you'd like the logged in user to add a new account type, you can prompt them to link that account instead.
As an example, you might attach login
as an event handler to a login button in your app:
tsx
import {usePrivy} from '@privy-io/react-auth';
function LoginButton() {
const {ready, authenticated, login} = usePrivy();
// Disable login when Privy is not ready or the user is already authenticated
const disableLogin = !ready || (ready && authenticated);
return (
<button disabled={disableLogin} onClick={login}>
Log in
</button>
);
}
TIP
You can easily attach callbacks to login
using the useLogin
interface! Read more here.
TIP
If email or SMS authentication are enabled for your app, you can pre-fill the email or SMS inputs using an optional prefill
property in your login
call:
tsx
function onLogin() {
// Pre-fill email
login({prefill: {type: 'email', value: '[email protected]'}});
// Pre-fill phone number
login({prefill: {type: 'phone', value: '+15551232222'}});
}
Enforcing login vs. sign-up ​
Depending on how your app's authentication flow is set up, you may want to provide separate routes for signing up to your app (e.g. creating their account for the first time) and logging in as a returning user (e.g. logging into an existing account). You can distinguish login vs. sign-up flows by passing an optional disableSignup
boolean to your login call like so:
tsx
<Button
onPress={() =>
login({
//
})
}
>
<Text>Login</Text>
</Button>