Appearance
Logging users in
To have your user login to 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 new useLogin
interface! Read more here.