connectkit icon indicating copy to clipboard operation
connectkit copied to clipboard

Add SIWE support for Next.js App Router

Open alex-grover opened this issue 7 months ago • 5 comments

This is a draft with some outstanding items remaining to get it ready for merge, but I'd like to get some feedback to make sure this approach works for you!

I aimed to keep the code as close to the original pages dir implementation as possible. The main changes necessary were:

  1. Update APIs to the app dir format, which means slightly different exports and route handlers with the shape (req: NextRequest) => Promise<NextResponse>
  2. Write a Session class that replaces some of the functionality of iron-session (getIronSession) that hasn't been updated for the app dir yet

Considerations

This implementation adds a second export to the existing connectkit-next-siwe package, configureServerSideSIWEAppRouter (open to feedback on naming). I went with this route because the client code is the same between pages and app dir, and a simpler package publishing setup seems nice vs. having a second package just for the app dir.

However, this has a couple implications:

  • Requires bumping the next.js peer dep version to >=13
  • The server setup is slightly different - app dir requires exporting GET and POST methods rather than one default export

These seem like okay trade-offs to me (next 13 has been out for a while now and the API difference is small), but the version bump is a breaking change.

Remaining TODOs

  • [ ] Update docs site
  • [ ] Consider adding examples of token gated pages/APIs to the docs/example projects, since they are slightly different in the pages vs app dirs
  • [ ] The Session implementation is not 1:1 with the one in iron-session, which does more error checking and sets some config defaults. We probably want a matching implementation, so users don't have to manually set things like session max-age in the app dir.
  • [ ] Thorough testing once I get my local dev env working properly. I'm having issues getting all the providers set up in the example app, I think it's due to mismatching versions of dependencies in the monorepo but I haven't been able to get it working yet. Would appreciate if someone could pull this down and see if the issues are just on my end or not.

alex-grover avatar Nov 10 '23 04:11 alex-grover