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.