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.
1import { useState } from 'react';2import { useSignIn } from '@clerk/nextjs';34export default function SignInForm() {5const { isLoaded, signIn } = useSignIn();6const [firstName, setFirstName] = useState('');7const [userImage, setImageURL] = useState('');8const [emailAddress, setEmail] = useState('');910if (!isLoaded) {11return null;12}1314const sendSignInCode = async function () {15const signInAttempt = await signIn.create({16identifier: emailAddress17});1819const emailCodeFactor = signInAttempt.supportedFirstFactors.find(20(factor) => factor.strategy === 'email_code'21);2223setFirstName(signInAttempt.userData.firstName || '');24setImageURL(signInAttempt.userData.profileImageUrl);25await signInAttempt.prepareFirstFactor({26strategy: 'email_code',27emailAddressId: emailCodeFactor.emailAddressId28});29};3031return (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<input38label="Email"39name="emailAddress"40autoFocus41onChange={(e) => setEmail(e.target.value)}42/>43<div>44<button45onClick={(e) => {46e.preventDefault();47sendSignInCode();48}}49>50Submit51</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.