Theo's Typesafe Cult•8mo ago

Embedding T3 + Clerk in another site via iframe (error: uat-missing)

Hi, I'm trying to embed a T3 + Clerk site in another page via iframe, but I'm running into issues with Clerk. Looking at the debug, it looks like Clerk is refusing to give cookies to the embedded version of the site. Any ideas on what I might be doing wrong would be greatly appreciated. I've been stuck on this all day (I'm new to Next/T3). middleware.ts

import { authMiddleware } from "@clerk/nextjs";

export default authMiddleware({
  publicRoutes: ["/", "/api/trpc/post.getLatest"],
  beforeAuth(req, evt) {
    console.log('\n\n\n\Request', req, '\n\n\nEnd Request\n\n\n')
  },
  debug: true,
});

export const config = {
  matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};

import { authMiddleware } from "@clerk/nextjs";

export default authMiddleware({
  publicRoutes: ["/", "/api/trpc/post.getLatest"],
  beforeAuth(req, evt) {
    console.log('\n\n\n\Request', req, '\n\n\nEnd Request\n\n\n')
  },
  debug: true,
});

export const config = {
  matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};

Request / Debug output https://pastebin.com/raw/Q9xEnFty server.ts https://pastebin.com/wC8Urcqf

Pastebin

server.ts - Pastebin.com

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

Solution:

I ended up switching to NextAuth. After tweaking cookie settings and handling storage access stuff I was able to get this working. Some good resources: https://developers.google.com/privacy-sandbox/3pcd/storage-access-api https://github.com/nextauthjs/next-auth/discussions/1585...

Google for Developers

Storage Access API | Privacy Sandbox | Google for Developers

The Storage Access API allows specific cross-site access to be provided with minimal burden to the end user, while still preventing generic cross-site access as is often used for user tracking.

GitHub

HOC for Apps in iframe · nextauthjs next-auth · Discussion #1585

Hi there, I want to share my hoc that I had to create for my app to support authentication for my embedded protected pages. I use the suggested Storage Access API that is supported for Safari, Fire...

Jump to solution

1 Reply

Solution

Mike•7mo ago