Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.devGet API keys

Public user data

Overview

During the sign-in process, the user's public data is populated with a name and photo. This can be used to customize the sign-in experience for your user.

Example

In this example, I want to have a user sign-in using a code sent to their email address. Once the user has entered their email address and the sign-in attempt has begun, we can display the user's name and profile image in the welcome message.

1
import { useState } from 'react';
2
import { useSignIn } from '@clerk/nextjs';
3
4
export default function SignInForm() {
5
const { isLoaded, signIn } = useSignIn();
6
const [firstName, setFirstName] = useState('');
7
const [userImage, setImageURL] = useState('');
8
const [emailAddress, setEmail] = useState('');
9
10
if (!isLoaded) {
11
return null;
12
}
13
14
const sendSignInCode = async function () {
15
const signInAttempt = await signIn.create({
16
identifier: emailAddress
17
});
18
19
const emailCodeFactor = signInAttempt.supportedFirstFactors.find(
20
(factor) => factor.strategy === 'email_code'
21
);
22
23
setFirstName(signInAttempt.userData.firstName || '');
24
setImageURL(signInAttempt.userData.profileImageUrl);
25
await signInAttempt.prepareFirstFactor({
26
strategy: 'email_code',
27
emailAddressId: emailCodeFactor.emailAddressId
28
});
29
};
30
31
return (
32
<div>
33
<h1>Sign in to your account</h1>
34
{userImage && <img height="50" width="50" src={userImage} />}
35
<h3>{`Welcome back ${firstName}`}</h3>
36
<form>
37
<input
38
label="Email"
39
name="emailAddress"
40
autoFocus
41
onChange={(e) => setEmail(e.target.value)}
42
/>
43
<div>
44
<button
45
onClick={(e) => {
46
e.preventDefault();
47
sendSignInCode();
48
}}
49
>
50
Submit
51
</button>
52
</div>
53
</form>
54
</div>
55
);
56
}
57

Conclusion

Clerk's prepopulated user data can be used to customize your sign-in flow to leverage user information for a more individual experience.

Check out our customization docs for more information.

Was this helpful?

Clerk © 2022