Programmatically logging user in via Credentials Provider on Server/RSC

[V01D-NULL]

Goals

1. signIn() functionality on a RSC or API route

Non-Goals

No response

Background

This was something that I came across at work.
We have multiple products & allow cross login (an account used to sign-up product A can be used to sign into product B & C and vice versa).

So, a sign-up form to create this generic email+password account (note: it is separate from next-auth, it is just a simple user.create() in a database) would exist on the company website, and after successful account creation the user is redirected to the product using next-auth.

The URL we redirected to was a RSC, so that we could run some server side logic right off the bat.

Now we have a valid account & credentials, but no clear way to actually authenticate the session from the server.
First idea that came to mind was convert the RSC into a client component and move all the logic to an API route. Then, we can call signIn() on component mount.
That adds more complexity than necessary so I did some more digging.

What I ended up doing was writing fetch requests to manually hit the endpoint.

The alternative was to simply redirect to the sign-in route, but that is just poor UX since they're prompted to do it twice (once on the website, now for the product) and it can lead to annoying issues such as two accounts because the user made a typo after we redirected them to the sign-in page powered by next-auth.

Proposal

Pretty straight forward, take the client side signIn function and allow for this functionality on the server:

await signInServer("credentials", {
    email: values.email,
    password: values.password,
    redirect: true,
    callbackUrl: "/",
})

I would be willing to create a PR for this since it's really just fetch requests, shouldn't take too long.
Just curious to see what the community/maintainers think, just looking through the documentation and discussions online I have not found any recommended solutions.

Last but not least.. this will only work with the credentials provider as far as I'm aware. There's just no way to truly automate oauth, but that should not be necessary anyways.

[krzysztofciombor-solidstudio]

Hello @V01D-NULL. I am trying to do something very similar. Would you be so kind and share the work you have done with the manual fetch requests as a reference point? Thank you!

[V01D-NULL]

I do not have that code anymore, it's been 3 weeks since I looked and I never committed it to git so there are no records of it. We ended up making our RSC a client component.

I jumped the gun on this Github issue I'll admit that.

It isn't as easy as I once thought either. After I opened this I did more digging the following day.
The issue with just making these fetch requests server side is that they will confuse next auth because the csrf token keeps changing on you. So despite you just needing one csrf token for multiple calls next js will just end up invalidating them.

Idk why, idk how, and idk if what I'm saying is 100% correct either. Memory is a bit fuzzy. Didn't read the next-auth source code in depth so idk how involved this feature would actually be now.

Sorry! Good luck!

[leog]

I have an example on how to do this if I understood the use case correctly: https://gist.github.com/leog/8f713ba75e83d1ddd220455e3a89ee0c