Disable Clerk auth entirely inside embedded browsers

#1—Context

A large share of traffic to a portfolio arrives from social apps, which open links in in-app WebViews. Clerk's sign-in depends on popup/redirect OAuth flows that these WebViews block or mangle, leaving a visitor stranded on a broken sign-in screen before they ever see the work.

#2—Options considered

A
Force auth everywhere — Simplest, but strands every WebView visitor on a broken OAuth flow. The default visitor to a portfolio is unauthenticated — this fails them.
B
Detect embedded browser, skip Clerk — A ConditionalClerkProvider checks the UA and mounts Clerk only in real browsers. WebView visitors get the full public site; auth-only surfaces are hidden.
C
Build custom popup-free auth — Solves the WebView case but is a large amount of work and attack surface for a personal site whose auth only gates my own dashboard.

#3—Decision

ConditionalClerkProvider detects embedded browsers via user-agent and mounts the Clerk provider only in standalone browsers. Embedded visitors render the complete public portfolio; the dashboard and sign-in are simply absent for them. A useSafeClerk hook keeps components crash-free when Clerk isn't mounted.

#4—Trade-offs

Visitors inside embedded browsers cannot sign in or reach the dashboard at all. That's acceptable: the public portfolio is the product, and the dashboard exists only for me.

#5—Revisit trigger

If Clerk ships a WebView-safe auth flow, or if a real end-user audience ever needs to authenticate from inside a WebView, revisit the skip-entirely approach.

#6—Takeaways

01
In-app WebViews are a hostile environment for OAuth — detect and degrade gracefully rather than fighting the platform.
02
A portfolio's default visitor is unauthenticated; auth should never stand between a visitor and the content.
03
Guarding every Clerk hook behind a safe wrapper keeps the tree from crashing when the provider is intentionally absent.

#7—Full write-up

The problem

Most people who click a portfolio link are inside a social app — LinkedIn, Instagram, X. Those apps open links in an in-app WebView, not the system browser. Clerk's OAuth relies on popup and redirect flows that WebViews routinely block, so a visitor coming from social hit a broken sign-in wall before seeing a single project.

The call

Detect the embedded browser from the user-agent and never mount Clerk there. Real browsers get the full authenticated experience; WebView visitors get the entire public portfolio with the dashboard and sign-in simply not present. A useSafeClerk hook makes components that reference Clerk safe to render when the provider isn't there.

Why not just force auth

Because the default visitor to a portfolio is unauthenticated and always will be. Auth here gates exactly one thing — my own dashboard. Letting it break the experience for a large slice of real traffic to protect a page only I use is the wrong trade.

Chat with Shoaib

Chat with Shoaib

Disable Clerk auth entirely inside embedded browsers

The problem

The call

Why not just force auth