Next-auth: Is "Authorization Code + PKCE" Supported?

[garnerp]

Your question
Does next-auth support "Authorization Code + PKCE"?

What are you trying to do
Trying to add a new provider using the "Authorization Code + PKCE" flow (Akamai, using a Public Client). I was able to generate a code_challenge and send that into the auth endpoint. I couldn't figure out how to send in the code_verifier though. I tried in the provider.params as it looks like that is what gets added to the postData, but its throwing an error.

• [ ] Found the documentation helpful
• [ ] Found documentation but was incomplete
• [X] Could not find relevant documentation
• [ ] Found the example project helpful
• [ ] Did not find the example project helpful

[LoriKarikari]

@garnerp PKCE is currently not supported.

[iaincollins]

Yeah, sorry @garnerp.

We intend to add support for it, as I appreciate it is now required for Open ID compliance.

[IkeLutra]

@iaincollins is there any way we can get involved in helping to implement PKCE?

[TommySorensen]

@iaincollins I very much need the "Authorization Code + PKCE" on a project i am working on. I can't login with the IdentityServer4 because of "code challenge" is needed. When will this be implemented in NextAuth or does anyone know a workaround to the code challenge with a custom provider?

[creteurlouis]

Did someone successfully get nextauth + identityserver4 to work ?

[TommySorensen]

Did someone successfully get nextauth + identityserver4 to work ?

Yes works fine, but never got the PKCE to work since its not supported in this package. Basically you just need to follow the examples in the documentation and you will have something to start with.

[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 !

[balazsorban44]

@IkeLutra your insights are welcome on #941!

@creteurlouis I recommend you create a separate question in the Discussions, or an issue with a public reproduction repository. This would accelerate the process of helping you! 🙂

[nick-myers-dt]

We're at a decisive juncture on our project, and PKCE support is a deciding factor for us. We'd like to use next-auth in combination with Okta, using PKCE. I wondered whether the team or community had a sense of whether the linked PR (#941) was likely to make it into a release 'soon' (weeks) or not? We'd also be happy to test and contribute in any way we can.

[balazsorban44]

@nick-myers-dt If you want to test it out right now, I think you could clone the branch feature/pkce in your projects' node_modules, cd into it, npm install, and npm build.

We are aiming for a canary (unstable) release this month, but cannot promise this PR will make it. I JUST started it, and there are some things we need to figure out. Feel free to try the above-mentioned method, and please come with feedback in the PR's comment section.