Next-auth: invalid_grant when using IdentityServer4

[reydevelop]

First of all thank you for this awesome project! I've using months ago in my project with the previous version. It is great to have sql database option further than mongoDB.
I having trouble with this new version to get access_token, first part of the flow goes fine and can login but I'm getting
[next-auth][error][callback_oauth_error] { statusCode: 400, data: '{"error":"invalid_grant"}' } after redirect back.

I just cloned the example project and add an IdentityServer4 provider and connect to the same idsvr4 that is now working with previous version using a passport-oauth2 strategy.

Apparently _code_ is lose at some point according to idsvr4
fail: IdentityServer4.Validation.TokenRequestValidator[0] Authorization code is missing, { "ClientId": "clientid", "ClientName": "clientname", "GrantType": "authorization_code", "Raw": { "grant_type": "authorization_code", "code": "", "client_id": "clientid", "client_secret": "***REDACTED***", "redirect_uri": "http://localhost:3000/api/auth/callback/identity-server4" } }

I tried using a custom OAuth provider but get same error.

[iaincollins]

Hmm thanks for the bug report.

I'll see if we can set up an example integration on the demo site and maybe work out what is going on.

It would be interesting to know if are able to use the Demo IdentityServer in the docs (to understand the scope):
https://next-auth.js.org/providers/identity-server4

[reydevelop]

Hi, thank for your quick response. Yes I tried with demo.identityserver.io following the documentation (for clientId: server.code) and I get
Sorry, there was an error : unauthorized_client Unknown client or client not enabled
Other clients demo.identityserver.io provides require PKCE and I have not implemented, in my case my client does not require PKCE

[iaincollins]

Thanks for the info! It's helpful to have feedback from someone else who's tried it too.

I'll try getting the demo client working and see if I have the same issue with it, and if I do, if I can work out what's wrong.

[thulstrup]

I managed to get a bit further using this configuration

Providers.IdentityServer4({
  id: "identity-server-4",
  name: "IdentityServer4",
  scope: "api",
  domain: "demo.identityserver.io",
  clientId: "m2m",
  clientSecret: "secret",
})

Now I get this which means that PKCE is required

Sorry, there was an error : invalid_request
code challenge required

@iaincollins do you know if PKCE support is on the roadmap?

[wjkawecki]

I managed to get a bit further using this configuration

Providers.IdentityServer4({
  id: "identity-server-4",
  name: "IdentityServer4",
  scope: "api",
  domain: "demo.identityserver.io",
  clientId: "m2m",
  clientSecret: "secret",
})

Now I get this which means that PKCE is required

Sorry, there was an error : invalid_request
code challenge required

@iaincollins do you know if PKCE support is on the roadmap?

Did anyone get it working?

[balazsorban44]

I think PKCE support is planned, but not currently available: https://github.com/nextauthjs/next-auth/issues/685#issuecomment-696845226

[creteurlouis]

Same problem here.

"Sorry, there was an error : invalid_request
code challenge required"

Did someone find a solution to get nextauth to work with identityserver4 ?

[balazsorban44]

We are using IDS4 without PKCE.

[creteurlouis]

I ripped out my hair trying to figure out how to make it work even without PKCE.
I don't understand what I am missing.
When I call my IDS4 from postman I get my access_token

curl --location --request POST 'https://localhost:5001/connect/token' \
--header 'Content-Type: application/x-www-form-urlencoded' \
--data-urlencode 'grant_type=password' \
--data-urlencode 'Username=RandomUser' \
--data-urlencode 'Password=RandomPassword!' \
--data-urlencode 'client_id=ro.client' \
--data-urlencode 'client_secret=secret' \
--data-urlencode 'scope=app.api.weather'

But i'm getting error using next-auth
Here is what I have so far :
My .env

NEXTAUTH_URL=http://localhost:3000
IdentityServer4_ID=API
IdentityServer4_NAME=IdentityServer4
IdentityServer4_SCOPE=openid profile email offline_access app.api.weather
IdentityServer4_DOMAIN=localhost:5001
IdentityServer4_CLIENT_ID=ro.client
IdentityServer4_CLIENT_SECRET=secret

My [...nextauth.js]

import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';

export default (req, res) =>
  NextAuth(req, res, {
    site: process.env.NEXTAUTH_URL,
    providers: [
      Providers.IdentityServer4({
        id: process.env.IdentityServer4_ID,
        name: process.env.IdentityServer4_NAME,
        scope: process.env.IdentityServer4_SCOPE,
        domain: process.env.IdentityServer4_DOMAIN,
        clientId: process.env.IdentityServer4_CLIENT_ID,
        clientSecret: process.env.IdentityServer4_CLIENT_SECRET,
      }),
    ],
    pages: {
      signIn: '/auth/credentials-signin',
      signOut: '/auth/signout',
      error: '/auth/error', // Error code passed in query string as ?error=
      newUser: null // If set, new users will be directed here on first sign in
    },
  });

My credentials-signin.js

import React from 'react'
import { useState } from "react";

import { csrfToken } from 'next-auth/client'
import { signIn, getSession } from "next-auth/client";


const handleSubmit = (e) => {
  e.preventDefault();
  console.log(username);
  console.log(password);
  signIn("IdentityServer4", { username, password });
};

export default function SignIn({ csrfToken }) {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  return (
    <form onSubmit={handleSubmit}>
    <div>
      <label htmlFor="username">Username</label>
      <input
        id="username"
        name="username"
        type="text"
        placeholder="Username"
        onChange={(e) => setUsername(e.target.value)}
        value={username}
      />
    </div>
    <div>
      <label htmlFor="password">Password</label>
      <input
        id="password"
        name="password"
        type="password"
        placeholder="Password"
        onChange={(e) => setPassword(e.target.value)}
        value={password}
      />
    </div>
    <button type="submit">
      Login
    </button>
  </form>
  )
}

SignIn.getInitialProps = async (context) => {
  return {
    csrfToken: await csrfToken(context)
  }
}

And my index

import Head from 'next/head';
import { signIn, signOut, useSession } from 'next-auth/client';

export default function Home() {
  const [session, loading] = useSession();

  if (loading) return null;
  return (
    <>
      <Head>
        <title>Next auth identity server</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <nav>
        {!session ? (
          <button onClick={() => signIn('IdentityServer4')}>Sign In</button>
        ) : (
          <button onClick={signOut}>Sign Out</button>
        )}
      </nav>
      <div>User name{session ? <span>{session.user.name}</span> : null}</div>
    </>
  );
}

Do you see something I am doing wrong?
any help greatly appreciated !