NextAuth Support

[Immortalin]

Preflight checklist

• I could not find a solution in the existing issues, docs, nor discussions.
• I agree to follow this project's Code of Conduct.
• I have read and am following this repository's Contribution Guidelines.
• This issue affects my Ory Cloud project.
• I have joined the Ory Community Slack.
• I am signed up to the Ory Security Patch Newsletter.

Describe your problem

Ory Kratos does not support https://next-auth.js.org/, Kratos currently requires a lot of custom code to integrate. NextAuth supports FusionAuth, Keycloak, and Auth0 as providers, but not Ory Kratos.

Describe your ideal solution

Ory should create a first party NextAuth provider and send a pull request to the NextAuth repo.

Workarounds or alternatives

N/A

Version

latest

Additional Context

No response

[xlanor]

I'd be open to take a look at this if @aeneasr is opento the idea - I'm just getting back into contributing back to OSS, been busy with life.

Correct me if I'm wrong though. Isn't this more on next-auth's repo than kratos?

[aeneasr]

Hey there! Great idea and we’d love contribs in this area! We also have guides for NextJS already (with video) that will be quite helpful I believe: https://www.ory.sh/login-spa-react-nextjs-authentication-example-api-open-source/

[vinckr]

Can we use the credentials provider @Immortalin ?
https://next-auth.js.org/configuration/providers/credentials

In any case, if someone wants to start working on this, I will be very happy to support.
Please feel free to ping me at any point.

[ShahriarKh]

Any updates on this?

[vinckr]

@ShahriarKh I suppose not.
Always open for contributions & also supporting them along the way!

[atreya2011]

The way I integrated with NextAuth is by creating a Custom OAuth Provider using Hydra and then integrating Hydra and Kratos.
Then all we have to do is add the custom provider to the NextAuth config

https://github.com/atreya2011/next-auth-kratos-hydra-test/blob/main/pages/api/auth/%5B...nextauth%5D.ts

However, integrating Hydra and Kratos together is a bit of a difficult task by itself 😅

Using the credentials provider to integrate only Kratos with NextAuth seems like a good idea, as @vinckr mentioned.

Will code contributions to this issue go to this repo or the example NextJS repo?

[vinckr]

Will code contributions to this issue go to this repo or the example NextJS repo?

Good question.
I think it would be best as guide / example integration in the docs!
https://github.com/ory/docs/

"Integrations/NextAuth" would make sense IMO, as we also have integration guides for other 3rd party services in the pipeline.

Let me know if you would be interested in contributing and if I can help with this.

[amorey]

I'm also trying to integrate kratos with next-auth and here are some of the approaches I'm considering:

1. Next-Auth CredentialsProvider with Kratos browser flow (h/t @vinckr)

   If you want to use the browser flow to login/register with kratos then I think the most straightforward way to initialize the next-auth session is to call signIn('credentials', {redirect: false}) from the client after obtaining a kratos session cookie. Then server-side you can call /sessions/whoami from the CredentialsProvider's authorize() method to obtain the user's identity and return it to next-auth (using the kratos cookie available to the request object). Overall, the drawback of using this method is that you have to maintain kratos and next-auth sessions simultaneously and deal with edge cases where one is expired but the other isn't.

2. Next-Auth CredentialsProvider with Kratos API flow

   To make it easier to manage the kratos and next-auth sessions simultaneously you can use the kratos API flow instead of the browser flow. This will allow you to perform kratos operations (e.g. logout) on behalf of the user server-side more easily (using the session token which can be saved in next-auth's encrypted JWT). Another benefit is that once the next-auth session expires or is deleted, the kratos session token will be erased automatically as well. The big drawback of using the API flow is that you have to implement security features yourself though you can at least piggy back on next-auth's CSRF protection by proxying login/registration calls to kratos through next-auth signIn() method.

3. Next-Auth Custom OAuth Provider with Kratos + Hydra (h/t @atreya2011)

   Next-Auth is designed to work with OAuth so this seems like the most robust way to integrate it with kratos but this will add another dependency which might make development more difficult. I haven't set up hydra before so maybe there's a way to set things up in a developer-friendly way though (e.g. run on docker and proxy through next?).

4. New next.js client-side library for kratos with similar behavior to next-auth

   Personally, I just want to use next-auth's client-side features with kratos as a back-end so maybe the best thing to do is to create a client-side library for kratos modeled on next-auth. The drawback here is the time it will take to write/test/maintain a new library.

What do you think? Do you have other suggestions for how to integrate kratos and next-auth?

[atreya2011]

@vinckr Sorry for not being able to reply sooner regarding this 🙇🏼 I have the following sample repo demonstrating Kratos+Hydra integration that works with Next-Auth.
https://github.com/atreya2011/next-auth-kratos-hydra-test/blob/main/pages/api/auth/%5B...nextauth%5D.ts
However, I am not sure that this can serve as a starting point to make a good guide...

@amorey Thank you for the detailed write-up on all the possible approaches!

I did try approaches 1 and 2 and it was just messy, to be honest.
As mentioned above, Next-Auth is designed to work well with OAuth; hence 1 and 2 seem like a roundabout way of using Next-Auth to achieve something which can be quickly done by just using Kratos!
As for no. 4, I think there is already a client-side library for Kratos that works well with Next.js.

From my understanding, Kratos by design is not an OIDC-compliant identity provider. We can however implement one by combining Kratos with Hydra.
This would make it easy to integrate such an implementation with a library such as Next-Auth which is designed to work well with OAuth 2/OIDC compliant Identity Provider.

[amorey]

@atreya2011 Thanks for your reply and for sharing your code! Here are some questions:

• Can you share your kratos+hydra setup?
• From your code it looks like you're using kratos-selfservice-node-ui for your login pages. Did you consider hosting the login pages in the Next app itself?
• I noticed that your logout method signs out from next-auth then redirects to http://localhost:4455/logout. Did you try to combine this into one step client-side? Can you use the oauth token to logout on the user's behalf in the next-auth signout event?
• What problems did you run into with approach 2?

[atreya2011]

@amorey

• This is the flow of my current kratos+hydra setup. Broker UI sample implementation can be found here: https://github.com/atreya2011/go-kratos-test/tree/hydra-consent (OAuth2 Client in the below flow is fulfilled by Next-Auth)

• I am not using kratos-selfservice-node-ui for my login pages. I use my implementation of the broker UI (link provided above ⬆️) which basically acts as a "broker" coordinating requests between kratos and hydra.
• I have indeed succeeded in implementing logout with just one step, I have to update my repository with that code! :) I use the id_token to logout the user.
• I didn't run into any problems with approach no. 2, but I found it counterintuitive because we have the power of the Next-Auth and I think API flows are more suited for pure SPA apps.

[amorey]

@atreya2011 Thanks! This is very helpful.

[aeneasr]

Wow great job @atreya2011 !! :)

I also wanted to inform you that we are actively working on a native integration between hydra and kratos and expect it to land relatively soon as the core things are working already but still need more testing as well as support for various flows (login, registration, mfa, ...)