Is it possible to sign in a user with a REST API call when using Credentials provider?

[maksonlee]

Question 💬

We are creating an API-only application, means that there is no UI, if we use the Credentials provider, is it possible to sign in a user with a REST API call and then get a token back?

How to reproduce ☕️

Create an API-only Next.js application and use NextAuth.js for authentication.

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[ericvrp]

Could someone post some pointers to a solution/tutorial/guide here please?

[Dragate]

Yes, it is possible (as documented by docs). On a recent project I had a similar requirement, where the next.js API serves both the authentication of the site itself and of a react native app. The basic idea was to check the session endpoint to validate whether the user is authenticated and have 2 functions that do the sign in/out. The functions look something like this:

    const signIn = async (credentials) => {
        return fetch(`${basePath}/api/auth/csrf`)
            .then(r => r.json())
            .then(({ csrfToken }) =>
                fetch(`${basePath}/api/auth/callback/credentials`, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ ...credentials, csrfToken, json: "true" }),
                })
            )
    }

    const signOut = async () => {
        return fetch(`${basePath}/api/auth/csrf`)
            .then(r => r.json())
            .then(({ csrfToken }) =>
                fetch(`${basePath}/api/auth/signout`, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ csrfToken, json: "true" }),
                })
            )
    }

You may also take inspiration from https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/react/index.tsx#L212

[JWPapi]

Hey I’m trying to connect to api/auth/callback/credentials

But I only get this back {"url":"http://localhost:3000/api/auth/signin?csrf=true"} (wrong or correct credentials)

my credentials authorize function is not even running (checking with console.log)

Could you show how your [...nextauth.js] looks like?

[ericvrp]

Thank you @Dragate! That was very helpful.

Just like the original poster I am working on an API-only application. In my case it's not a NextJs one but a more barebones NodeJs script. Because my code is not running in the browser I had some more hurdles to take. For anyone in the future attempting to do the same I will post a list of facts, opinions (my own traps), and though processes.

1. I find it strange to call this the next-auth REST API. I got used to REST API's returning (most often) json data. This REST API returns webpages by default.
2. adding json="true" works to make it do what I need it for. But this feature flag is not documented on the REST documentation page as far as I can see.
3. I forgot to add headers: { "Content-Type": "application/json" }, to the POST requests
4. because my fetch commands are not running in the browser I think cookies are not handled automatically. I hope someone can point me to the fetch docs that explains this!
5. to fix point 4. I now use https://github.com/valeriangalliat/fetch-cookie

Happy sailing with this great library from now on! 👍

[cryptofreedom]

next-auth doc is awful