[SDK] Add name and picture fields to Profile type for Apple Sign In compliance#8681
[SDK] Add name and picture fields to Profile type for Apple Sign In compliance#8681AKSHEXXXX wants to merge 1 commit intothirdweb-dev:mainfrom
Conversation
…ompliance - Add optional name and picture fields to Profile type to support OAuth provider data - Update LinkedProfilesScreen to display user's name when available - Fixes thirdweb-dev#8673: Apple App Store rejection due to missing display name The Profile type now includes name and picture fields that OAuth providers like Google and Apple can populate. The UI prioritizes displaying the user's full name when available, improving Apple Sign In compliance with App Store Guideline 4.8.
🦋 Changeset detectedLatest commit: 535d0e7 The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
@akshatextreme is attempting to deploy a commit to the thirdweb Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThis PR extends the Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Tip Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull request overview
This PR adds optional name and picture fields to the Profile type to improve Apple Sign In compliance and better support OAuth provider data. The changes enable the SDK to receive and display user names from OAuth providers (Google, Apple) instead of falling back to email addresses.
Changes:
- Added optional
nameandpicturefields to theProfile.detailstype in the in-app wallet authentication system - Updated
getProfileDisplayName()to prioritize displaying the user's full name when available from OAuth providers - Added changeset documenting the minor version bump with appropriate description
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/thirdweb/src/wallets/in-app/core/authentication/types.ts | Added optional name and picture fields to Profile.details type |
| packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.tsx | Updated display name logic to prioritize user's full name from OAuth providers |
| .changeset/apple-profile-name-picture.md | Added changeset documenting the minor version bump |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // Prefer name if available (from OAuth providers like Google/Apple) | ||
| if (profile.details.name) { | ||
| return profile.details.name; | ||
| } |
There was a problem hiding this comment.
The new name field handling in getProfileDisplayName looks good and will correctly prioritize the user's full name from OAuth providers. However, there are no test cases added to verify this new behavior. Consider adding a test case that verifies when a profile has both name and email (e.g., for a Google profile), the name is displayed rather than the email address.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.tsx (2)
151-187:profile.details.pictureis unused in the avatar rendering chain.The new
picturefield onProfile.details(e.g., populated by Google/Apple OAuth) is never consulted here. The fallback chain jumps straight fromsocialProfilesavatar → address Blobbie → type icons, so a provider-supplied picture URL is silently dropped.Consider inserting a fallback that uses
profile.details.picturewhensocialProfilesreturns no avatar:♻️ Proposed enhancement
{socialProfiles?.some((p) => p.avatar) ? ( <Img client={client} height={iconSize.lg} loading="eager" src={socialProfiles?.find((p) => p.avatar)?.avatar} style={{ borderRadius: "100%" }} width={iconSize.lg} /> +) : profile.details.picture ? ( + <Img + client={client} + height={iconSize.lg} + loading="eager" + src={profile.details.picture} + style={{ borderRadius: "100%" }} + width={iconSize.lg} + /> ) : profile.details.address !== undefined ? (🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.tsx` around lines 151 - 187, The avatar rendering ignores profile.details.picture; update the conditional chain in LinkedProfilesScreen so that after checking socialProfiles for an avatar (socialProfiles?.some((p) => p.avatar) and src from socialProfiles?.find...), you fall back to profile.details.picture (use Img with src={profile.details.picture}) before falling back to Blobbie (profile.details.address) and the type icons (FingerPrintIcon, EmailIcon, PhoneIcon, getSocialIcon). Ensure you reference the existing Img, Blobbie, profile.details.picture, socialProfiles, and getSocialIcon symbols when adding this additional fallback.
26-49:getProfileDisplayNameis missing an explicit return type annotation.The
switch(true)pattern doesn't narrowprofile.details.email/profile.details.phonein case bodies, so TypeScript infers the return asstring | undefined. Adding an explicit return type makes the intent clear and surfaces potentialundefinedpaths.♻️ Proposed fix
-function getProfileDisplayName(profile: Profile) { +function getProfileDisplayName(profile: Profile): string { // Prefer name if available (from OAuth providers like Google/Apple) if (profile.details.name) { return profile.details.name; } switch (true) { case profile.type === "email" && profile.details.email !== undefined: - return profile.details.email; + return profile.details.email as string; case profile.type === "google" && profile.details.email !== undefined: - return profile.details.email; + return profile.details.email as string; case profile.type === "phone" && profile.details.phone !== undefined: - return profile.details.phone; + return profile.details.phone as string; case profile.details.address !== undefined: return shortenAddress(profile.details.address, 6); case (profile.type as string) === "cognito" && profile.details.email !== undefined: - return profile.details.email; + return profile.details.email as string; case (profile.type as string).toLowerCase() === "custom_auth_endpoint": return "Custom Profile"; default: return profile.type.slice(0, 1).toUpperCase() + profile.type.slice(1); } }As per coding guidelines: "Write idiomatic TypeScript with explicit function declarations and return types."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.tsx` around lines 26 - 49, Add an explicit return type to getProfileDisplayName (change signature to getProfileDisplayName(profile: Profile): string) and replace the switch(true) pattern with an if/else chain so TypeScript can properly narrow profile.details.email/phone before returning them; keep the same logic (check profile.details.name, then email/phone/address via shortenAddress, cognito, custom_auth_endpoint, then default capitalized profile.type) to guarantee every code path returns a string.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In
`@packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.tsx`:
- Around line 151-187: The avatar rendering ignores profile.details.picture;
update the conditional chain in LinkedProfilesScreen so that after checking
socialProfiles for an avatar (socialProfiles?.some((p) => p.avatar) and src from
socialProfiles?.find...), you fall back to profile.details.picture (use Img with
src={profile.details.picture}) before falling back to Blobbie
(profile.details.address) and the type icons (FingerPrintIcon, EmailIcon,
PhoneIcon, getSocialIcon). Ensure you reference the existing Img, Blobbie,
profile.details.picture, socialProfiles, and getSocialIcon symbols when adding
this additional fallback.
- Around line 26-49: Add an explicit return type to getProfileDisplayName
(change signature to getProfileDisplayName(profile: Profile): string) and
replace the switch(true) pattern with an if/else chain so TypeScript can
properly narrow profile.details.email/phone before returning them; keep the same
logic (check profile.details.name, then email/phone/address via shortenAddress,
cognito, custom_auth_endpoint, then default capitalized profile.type) to
guarantee every code path returns a string.
2 participants
Summary
Add optional
nameandpicturefields to theProfiletype to support additional OAuth provider data, improving Apple Sign In compliance.Fixes #8673
Changes
nameandpicturefields toProfiletype intypes.tsgetProfileDisplayName()to prioritize displaying user's full name when availableDetails
Type Changes
The
Profiletype now includes optionalnameandpicturestrings indetails, matching what Google already returns and what Apple should return on first authorization.UI Improvements
The
LinkedProfilesScreennow prioritizes displaying the user's name from OAuth providers (Google, Apple) instead of falling back to email addresses immediately.Why These Changes Matter
This resolves the Apple App Store rejection (Guideline 4.8) by:
Backend Note
For complete resolution of #8673, the backend (
embedded-wallet.thirdweb.com) must also capture Apple'sfullNameduring first authorization and return it in thelinkedAccountsAPI response. This SDK change creates the infrastructure to receive and display that data.Testing
PR-Codex overview
This PR introduces optional
nameandpicturefields to theProfiletype, enhancing support for OAuth provider data, particularly for Apple and Google. It also updates the UI to display the user's name when available, improving compliance with Apple Sign In.Detailed summary
nameandpicturefields to theProfiletype inpackages/thirdweb/src/wallets/in-app/core/authentication/types.ts.getProfileDisplayNamefunction inpackages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.tsxto prioritizenamefrom OAuth providers..changeset/apple-profile-name-picture.mdto reflect changes.Summary by CodeRabbit