Skip to content

feat(mosaic): reopen the user profile modal after a connected account OAuth redirect - #10523

Draft
Ephem wants to merge 1 commit into
mainfrom
fredrik/return-to-connected-accounts
Draft

Ephem wants to merge 1 commit into
mainfrom
fredrik/return-to-connected-accounts

Conversation

@Ephem

@Ephem Ephem commented Oct 29, 2026 •

Copy link
Copy Markdown
Member

Description

This is an entirely agent-driven PR, including the description. Just throwing it up as a PoC to continue on.

Warning

Proof of concept. This is a minimal, temporary way to unblock the Mosaic profiles on the dashboard. A routing layer will replace it.

Stacked on #10514.

When a user starts Connect or Reconnect on a social account from the Mosaic user profile modal, the OAuth redirect now carries __clerk_mosaic_modal=user-profile/account. On the return, MosaicProvider strips the param from the URL and reopens the profile on the Account page, so the new account or its error is visible. Mosaic no longer writes the legacy __clerk_modal_state, which the clerk-js UI would act on.

Missing pieces

  • The modal content does not set modal mode yet. In feat(mosaic): export UserProfile and OrganizationProfile #10514, user-profile.modal-content.tsx renders <UserProfile>, which hardcodes UserProfileProvider mode='mounted', so inside the Mosaic modal the param is never written. That belongs in feat(mosaic): export UserProfile and OrganizationProfile #10514; this PR is written as if it were already fixed.
  • The UserButton's profile options are lost on return. mode, customPages, pageOrder, additionalOAuthScopes, organizationProfileProps and the portal container are only known to the UserButton at click time, so the reopened modal opens without them. The legacy __clerk_modal_state reopen has the same gap.
  • The reopen runs when MosaicProvider mounts. It only happens if the provider is mounted on the page the OAuth flow returns to.
  • Only social connected accounts. Enterprise accounts, the organization profile, and reverification are out of scope.

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@changeset-bot

changeset-bot Bot commented Oct 29, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: e5dd116

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

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

@vercel

vercel Bot commented Oct 29, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
clerk-js-sandbox Ready Ready Preview Oct 29, 2026 11:47am UTC
swingset Ready Ready Preview Oct 29, 2026 11:47am UTC

Request Review

@coderabbitai

coderabbitai Bot commented Oct 29, 2026

Copy link
Copy Markdown
Contributor

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

  • Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Comment @coderabbitai help to get the list of available commands.

… OAuth redirect

Connect and Reconnect from the Mosaic user profile modal now carry
__clerk_mosaic_modal=user-profile/account through the OAuth round trip.
MosaicProvider strips the param on mount and reopens the profile on the
Account page. Mosaic no longer writes the legacy __clerk_modal_state param,
which the clerk-js UI would act on.
@austincalvelage
austincalvelage force-pushed the fredrik/return-to-connected-accounts branch from 2c19a24 to e5dd116 Compare October 29, 2026 22:02
@austincalvelage

Copy link
Copy Markdown
Member

!snapshot

@pkg-pr-new

pkg-pr-new Bot commented Oct 29, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@10523

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@10523

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@10523

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@10523

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@10523

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@10523

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@10523

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@10523

@clerk/expo-biometrics

npm i https://pkg.pr.new/@clerk/expo-biometrics@10523

@clerk/expo-google-signin

npm i https://pkg.pr.new/@clerk/expo-google-signin@10523

@clerk/expo-native-components

npm i https://pkg.pr.new/@clerk/expo-native-components@10523

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@10523

@clerk/express

npm i https://pkg.pr.new/@clerk/express@10523

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@10523

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@10523

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@10523

@clerk/mosaic

npm i https://pkg.pr.new/@clerk/mosaic@10523

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@10523

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@10523

@clerk/react

npm i https://pkg.pr.new/@clerk/react@10523

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@10523

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@10523

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@10523

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@10523

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@10523

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@10523

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@10523

commit: e5dd116

@github-actions

Copy link
Copy Markdown
Contributor

Hey @austincalvelage - the snapshot version command generated the following package versions:

Package Version
@clerk/astro 4.1.20-snapshot.v20261029220359
@clerk/backend 3.26.5-snapshot.v20261029220359
@clerk/chrome-extension 3.1.103-snapshot.v20261029220359
@clerk/clerk-js 6.42.1-snapshot.v20261029220359
@clerk/electron 0.1.8-snapshot.v20261029220359
@clerk/electron-passkeys 0.0.4-snapshot.v20261029220359
@clerk/eslint-plugin 0.2.1-snapshot.v20261029220359
@clerk/expo 4.14.5-snapshot.v20261029220359
@clerk/expo-biometrics 1.1.1-snapshot.v20261029220359
@clerk/expo-google-signin 1.1.1-snapshot.v20261029220359
@clerk/expo-native-components 0.4.3-snapshot.v20261029220359
@clerk/expo-passkeys 2.1.5-snapshot.v20261029220359
@clerk/express 2.1.86-snapshot.v20261029220359
@clerk/fastify 3.1.96-snapshot.v20261029220359
@clerk/hono 0.1.96-snapshot.v20261029220359
@clerk/localizations 4.24.4-snapshot.v20261029220359
@clerk/mosaic 0.1.16-snapshot.v20261029220359
@clerk/msw 0.0.84-snapshot.v20261029220359
@clerk/nextjs 7.9.23-snapshot.v20261029220359
@clerk/nuxt 3.1.20-snapshot.v20261029220359
@clerk/react 6.18.4-snapshot.v20261029220359
@clerk/react-router 3.6.41-snapshot.v20261029220359
@clerk/shared 4.43.1-snapshot.v20261029220359
@clerk/swingset 0.0.67-snapshot.v20261029220359
@clerk/tanstack-react-start 1.7.9-snapshot.v20261029220359
@clerk/testing 2.2.53-snapshot.v20261029220359
@clerk/ui 1.42.2-snapshot.v20261029220359
@clerk/upgrade 2.0.10-snapshot.v20261029220359
@clerk/vue 2.5.17-snapshot.v20261029220359

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/astro

npm i @clerk/astro@4.1.20-snapshot.v20261029220359 --save-exact

@clerk/backend

npm i @clerk/backend@3.26.5-snapshot.v20261029220359 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.1.103-snapshot.v20261029220359 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.42.1-snapshot.v20261029220359 --save-exact

@clerk/electron

npm i @clerk/electron@0.1.8-snapshot.v20261029220359 --save-exact

@clerk/electron-passkeys

npm i @clerk/electron-passkeys@0.0.4-snapshot.v20261029220359 --save-exact

@clerk/eslint-plugin

npm i @clerk/eslint-plugin@0.2.1-snapshot.v20261029220359 --save-exact

@clerk/expo

npm i @clerk/expo@4.14.5-snapshot.v20261029220359 --save-exact

@clerk/expo-biometrics

npm i @clerk/expo-biometrics@1.1.1-snapshot.v20261029220359 --save-exact

@clerk/expo-google-signin

npm i @clerk/expo-google-signin@1.1.1-snapshot.v20261029220359 --save-exact

@clerk/expo-native-components

npm i @clerk/expo-native-components@0.4.3-snapshot.v20261029220359 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@2.1.5-snapshot.v20261029220359 --save-exact

@clerk/express

npm i @clerk/express@2.1.86-snapshot.v20261029220359 --save-exact

@clerk/fastify

npm i @clerk/fastify@3.1.96-snapshot.v20261029220359 --save-exact

@clerk/hono

npm i @clerk/hono@0.1.96-snapshot.v20261029220359 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.24.4-snapshot.v20261029220359 --save-exact

@clerk/mosaic

npm i @clerk/mosaic@0.1.16-snapshot.v20261029220359 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.84-snapshot.v20261029220359 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.9.23-snapshot.v20261029220359 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@3.1.20-snapshot.v20261029220359 --save-exact

@clerk/react

npm i @clerk/react@6.18.4-snapshot.v20261029220359 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.6.41-snapshot.v20261029220359 --save-exact

@clerk/shared

npm i @clerk/shared@4.43.1-snapshot.v20261029220359 --save-exact

@clerk/swingset

npm i @clerk/swingset@0.0.67-snapshot.v20261029220359 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.7.9-snapshot.v20261029220359 --save-exact

@clerk/testing

npm i @clerk/testing@2.2.53-snapshot.v20261029220359 --save-exact

@clerk/ui

npm i @clerk/ui@1.42.2-snapshot.v20261029220359 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.10-snapshot.v20261029220359 --save-exact

@clerk/vue

npm i @clerk/vue@2.5.17-snapshot.v20261029220359 --save-exact

This branch was successfully deployed

2 active (outdated) deployments
Preview – swingset — 2c19a241 Deployed Oct 29, 2026 by vercel[bot]
Preview – clerk-js-sandbox — 2c19a241 Deployed Oct 29, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants