Support Next.js 12 Middleware

[ramiel]

Description 📓

After watching the recent Nextjs conf, I'm wondering if there's a way to move authentication api (here it's the /session endpoint) to run on the edge instead that on server. Looking at this very basic example

https://youtu.be/PWi-49ODKAs?t=3203

maybe there's a way to take advantage of this in NextAuth too, even if in an opt-in way.

How to reproduce ☕️

Nothing to reproduce

Contributing 🙌🏽

Yes, I am willing to help implement this feature in a PR

[alessandrojcm]

I would also like this enhancement as well, edge functions look very useful. They could also be very useful to inject authorization headers for external API requests, right now our app does something very similar to this; if NextAuth could support edge functions that would render that unnecessary.

In fact, Vercel already has an example on doing that, but of course, this doesn't work with NextAuth since we can't call getSession on the edge. FWIW I could also lend a hand with this PR if necessary.

[balazsorban44]

I've gotten multiple related questions in the last 24 hours, so I will look into this more.

We are using jose under the hood which relies on the Web Cryptography API and Cloudflare Workers (the stuff behind Edge Functions) doesn't support all of it (yet?) See: panva/jose#265

#2857 is definitely the first step towards support here, but I'll have to check if it is important for us that those unimplemented things work in CF Workers or not.

If not, then exposing a new method for Middlewares would be very easy.

It can be much trickier otherwise because I really like jose. It is a high-quality library with stellar maintenance.

Most of our users who are asking about this are probably interested in a way that would make it possible to check the user session, and if it is valid, proceed to the page, otherwise redirect to the login page.

We have to consider two scenarios:

1. User sessions are JWTs. See above.
2. User sessions are saved in a database. In this case, the underlying ORM/Adapter/DB will probably be the bottleneck for the response, since we are doing two separate queries to the database (one for getting the session, and one for either updating the expiry date, or deleting the session from the DB if already expired.)

[alessandrojcm]

Thanks for your quick and detailed response, as always @balazsorban44 😁
Yes the use case you mentioned would be the most common ones I believe, session checking right now is done on every page so having a global middleware to take care of that would be super helpful. Also the use case I mentioned above, to inject authorization headers to outgoing requests.

But I have another question, what about support for applications not running on edge functions? According to the docs, middleware work both with edge functions and next start.

[balazsorban44]

If we start supporting middlewares, we will absolutely make sure it is both for Edge Functions AND next start. No point in only half support. I guess since the Edge Functions is the more restrictive, if we make sure that is supported, everything else will be as well.

[panva]

We are using jose under the hood which relies on the Web Cryptography API and Cloudflare Workers (the stuff behind Edge Functions) doesn't support all of it (yet?) See: panva/jose#265

jose supports everything that can be supported on CF Workers. jose makes use, exclusively, of native crypto runtime capabilities. What you're seeing in that linked matrix is as much that can be done given the runtime's capability.

I've opened vercel/next.js#30475 and vercel/next.js#30477 that currently block me from properly testing jose on this runtime.

[balazsorban44]

FYI there is a working example here nextauthjs/next-auth-example#40

it's only working with jwt sessions at the moment and there is no way to pass the session down as props to the page yet. So the client will have to make an additional API request and the authenticated page will experience a loading state, unlike if you use getServerSideProps. In my opinion, it means there is little gain using middleware here at the moment.

vercel/next.js#31093

Maybe when React Server Components (RSC) land, we would be able to read the server-side only cookie directly.

[ramiel]

That's great, a good starting point.
Is RSC "Rendered server components" or similar?

[ramiel]

Trying this by myself I get a TypeError: getCurves is not a function error on jose.

[balazsorban44]

React Server Components: https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html

You will need 4.0.0-beta.6 at least, jose is working fine for the use case we have in next-auth

[ramiel]

Sure,that one 😀. Version beta 6 has problems for me, so I cannot upgrade. I'll have another look later.