Skip to content

feat: display OIDC provider avatar (Google profile photo) in Console UI#1247

Open
chrisbaker2000 wants to merge 1 commit intojitsucom:newjitsufrom
chrisbaker2000:feat/oidc-avatar
Open

feat: display OIDC provider avatar (Google profile photo) in Console UI#1247
chrisbaker2000 wants to merge 1 commit intojitsucom:newjitsufrom
chrisbaker2000:feat/oidc-avatar

Conversation

@chrisbaker2000
Copy link

Summary

  • Propagate the picture claim from OIDC providers (Google Workspace, Auth0, Okta, etc.) and avatar_url from GitHub through NextAuth's JWT and session callbacks to session.user.image
  • Remove the explicit exclusion of googleusercontent.com URLs in UserProfileButton that prevented Google profile photos from rendering

Problem

When using OIDC authentication (e.g. Google Workspace SSO), user profile photos are never displayed in the Console — the avatar always shows the generic FaUserCircle icon. Two issues:

  1. nextauth.config.ts: The picture claim from the OIDC profile response isn't passed through the JWT and session callbacks, so session.user.image is always undefined
  2. WorkspacePageLayout.tsx: UserProfileButton has an explicit check user.image.indexOf("googleusercontent.com/") < 0 that filters out Google profile photo URLs even if they were available

Changes

webapps/console/lib/nextauth.config.ts

  • JWT callback: Capture picture from token or profile (supports Google's picture claim and GitHub's avatar_url)
  • Session callback: Pass picture through to session.user.image so the existing avatar rendering code can display it

webapps/console/components/PageLayout/WorkspacePageLayout.tsx

  • UserProfileButton: Remove the googleusercontent.com URL exclusion — render any valid user.image URL as an avatar

Scope

This is a minimal, backward-compatible change:

  • Users without a profile photo continue to see the generic icon
  • Works with any OIDC provider that returns a picture claim (Google, Auth0, Okta, Azure AD, Keycloak)
  • Also supports GitHub's avatar_url in the same code path
  • No database schema changes required
  • No new dependencies

Test plan

  • Verified Google OIDC returns picture claim in profile response
  • Confirmed UserProfileButton already has avatar <img> rendering — just needs the URL propagated
  • Confirmed the googleusercontent.com filter is the only blocker for Google avatars

Generated with Claude Code

Propagate the `picture` claim from OIDC providers (Google, Auth0, etc.)
and `avatar_url` from GitHub through NextAuth's JWT and session callbacks
to `session.user.image`, enabling the existing avatar rendering code in
UserProfileButton to display provider profile photos.

Also remove the explicit exclusion of `googleusercontent.com` URLs in
UserProfileButton — this filter prevented Google Workspace profile
photos from being displayed even if the image URL was available.

Changes:
- nextauth.config.ts: Add `picture` to JWT token from OIDC profile,
  pass through to `session.user.image`
- WorkspacePageLayout.tsx: Remove googleusercontent.com URL filter
  in UserProfileButton avatar rendering
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant