We built an app based on Rainbowkit and Next.js. It authenticates users using rainbowkit-siwe-next-auth. Next-auth uses several cookies to keep track of the session, and set them during sign-in.

Recently, we wanted to enable users to use our app as safe app (meaning they can use a smart contract account to sign in and do so through https://app.safe.global). Luckily, rainbowkit just added support for this. But we realized that the web2 approach ("we have a backend that stores sensitive data and require users to authenticate before accessing it, keeping track of their session using a cookie") and loading an app inside the iframe of https://app.safe.global collided. The browser prevented our app from reading it's cookies, because it was running INSIDE an iframe in the app.safe.global tab, and next-auth is rightly enforcing sameSite: 'lax' on it's cookies.

I tested that everything works when I set sameSite: 'none' on the cookies, but consider that unsafe because it comes with a higher risk of session highjacking and cross-site scripting.

After all of this, I have 2 questions I am hoping to find answers to:

  1. How can I transform my next.js app into a (custom) safe app without sacrificing security along the way?
  2. How did other projects solve similar issues? So far I have only found web3 native safe apps that are stateless except for the state on the blockchain. Are there safe app that keep a private, sensitive state in the backend and require users to login?

Some more information:


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.