diff --git a/.changeset/poor-knives-laugh.md b/.changeset/poor-knives-laugh.md new file mode 100644 index 0000000000..14f5344b76 --- /dev/null +++ b/.changeset/poor-knives-laugh.md @@ -0,0 +1,6 @@ +--- +'@clerk/backend': patch +'@clerk/nextjs': patch +--- + +Fixes a bug where Clerk's Handshake mechanism would not run when an application is rendered in an iframe. diff --git a/packages/backend/src/tokens/request.ts b/packages/backend/src/tokens/request.ts index 9248e2c887..d9f91531b3 100644 --- a/packages/backend/src/tokens/request.ts +++ b/packages/backend/src/tokens/request.ts @@ -48,7 +48,8 @@ function isRequestEligibleForHandshake(authenticateContext: { secFetchDest?: str const { accept, secFetchDest } = authenticateContext; // NOTE: we could also check sec-fetch-mode === navigate here, but according to the spec, sec-fetch-dest: document should indicate that the request is the data of a user navigation. - if (secFetchDest === 'document') { + // Also, we check for 'iframe' because it's the value set when a doc request is made by an iframe. + if (secFetchDest === 'document' || secFetchDest === 'iframe') { return true; } diff --git a/packages/nextjs/src/server/protect.ts b/packages/nextjs/src/server/protect.ts index f2d957e746..9499cca42d 100644 --- a/packages/nextjs/src/server/protect.ts +++ b/packages/nextjs/src/server/protect.ts @@ -121,6 +121,7 @@ const isServerActionRequest = (req: Request) => { const isPageRequest = (req: Request): boolean => { return ( req.headers.get(constants.Headers.SecFetchDest) === 'document' || + req.headers.get(constants.Headers.SecFetchDest) === 'iframe' || req.headers.get(constants.Headers.Accept)?.includes('text/html') || isAppRouterInternalNavigation(req) || isPagesRouterInternalNavigation(req)