Add SIWE support for Next.js App Router

[alex-grover]

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.

[vercel]

@alex-grover is attempting to deploy a commit to the LFE Team on Vercel.

A member of the Team first needs to authorize it.

[alex-grover]

looks like iron-session supports app dir with the v8 release now, so will update this to account for that when I have a minute. should be much simpler!

I also stumbled upon the way that next-auth handles pages/app dir for API routes with the same interface which is cleaner than the current setup, will adapt as well:

https://next-auth.js.org/configuration/initialization#simple-initialization
https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/next/index.ts#L133-L149

[lochie]

looks like iron-session supports app dir with the v8 release now, so will update this to account for that when I have a minute. should be much simpler!

sounds awesome! thank you @alex-grover 🙌

[boogiewoogiewhoogie]

hey guys, any updade on this topic? I'd love to use connectkit but current version just doesn't work for nextjs with app approach, unless there is some workaround i can do in my code?

[alex-grover]

I don't have a ton of bandwidth to finish this out at the moment unfortunately, but you can find 2 examples of how to implement SIWE in the app router here: #316 (comment)