I made a chrome extension that renders my website onto the page of another website using an iframe. You can open the site up as a top level site, but its made to only be functional within the context of its parents site.

Anyways, I want users to be able to log in with twitter, or connect their twitter account to an existing account. However, twitter doesn’t allow their site to be opened inside iframes because of clickjacking, so I have to open the link to the twitter authorization page, the page where I get the authorization token, in a new tab. But the cookies that I use for my site are partitioned cookies, so when I open the auth page in a new tab, the cookies from iframe version of the site aren’t availalbe. It looks for cookies from the top level site instead.

I managed to get the OAuth flow working for a user who is already logged in with normal auth who wants to connect their twitter account to an existing account. I manage auth with json web tokens, and since I can’t send cookies the normal way, I decided to send the jwt data to my server within a request paramater. Once the user authorizes me to access their twitter account, I create a table in the twitter_users database, and I update the twitter_id column in the users table for the logged in user.

This works:

The problem comes when I try to log in or create an account with twitter. It’s starts with the exact same process as before. I can create the twitter_user and twitter_id. But since the user isn’t logged in already, I also have to send a cookie back containing the jwt data. But when I send a cookie back, it sets the cookie for the top level site, and the user remains logged out for the iframe version of the site. Is there any way around this? I’m a bit stuck.

This doesn’t work: