I'm also getting the same error. Can anyone help me with this issue?
The "pkceCodeVerifier value could not be parsed" issue occurs when a user accepts an invitation. However, for normal sign-in or sign-up, it works fine.
I have created a regular app in Auth0 and also set all the required URLs as referenced in the screenshot below.
I have also set the type of users in the Auth0 application.
Below is the code for the NextAuth configuration file and provider configuration for Auth0:
const authConfig = {
debug: true, // Enabled because we are in development
providers: [
Auth0Provider({
clientId: process.env.AUTH0_CLIENT_ID,
clientSecret: process.env.AUTH0_CLIENT_SECRET,
issuer: process.env.AUTH0_ISSUER,
authorization: {
params: {
prompt: "login",
},
},
}),
],
adapter: DrizzleAdapter(db, {
usersTable: users,
accountsTable: accounts,
sessionsTable: sessions,
verificationTokensTable: verificationTokens,
}),
callbacks: {
async signIn({ user, account, profile }: ISigninAuth0) {
const updates: IUpdateUser = {};
if (profile?.email_verified && !user?.emailVerified) {
updates.emailVerified = new Date();
}
if (Object.keys(updates).length > 0) {
await updateUserByEmail(user.email!, updates);
}
return true;
},
session: async ({ session, user }) => {
const userData = await getUser(user.id);
if (!userData) {
throw new Error("User data not found");
}
return {
...session,
user: {
id: user.id,
...{
name: userData.name,
email: userData.email,
emailVerified: userData.emailVerified,
}
},
};
},
},
trustHost: true,
} satisfies NextAuthConfig;
const { auth: uncachedAuth, handlers, signIn, signOut } = NextAuth(authConfig);
const auth = cache(uncachedAuth);
export { auth, handlers, signIn, signOut };
Organization admin invites user to join the organization by using Auth0 management API.
POST /api/v2/organizations/{id}/invitations
Body: {
"inviter": {
"name": "string"
},
"invitee": {
"email": "[email protected]"
},
"client_id": "string",
"user_metadata": {},
"ttl_sec": 0,
"roles": [
"string"
],
"send_invitation_email": true
}
The user receives an email with a link to join the organization. The user clicks on the link (which looks like https://example.com/api/authorize?invitation={invitation_id}&organization={organization_id}) and is redirected to our website.
There, we extract the invitation_id and organization_id from the query params and generate a new invitation link with the following code:
const baseUrl = `https://myauth0domain.com/authorize`;
const url = new URL(baseUrl);
url.searchParams.append("response_type", "code");
url.searchParams.append("client_id", clientId);
url.searchParams.append("redirect_uri", redirectUri);
url.searchParams.append("invitation", invitation);
url.searchParams.append("organization", organizationId);
url.searchParams.append("scope", "openid profile email");
const finalUrl = url.toString();
return NextResponse.redirect(new URL(finalUrl as string, baseURL));
The user is then redirected to the Auth0 login page, and after successful login, the user is redirected back to our website with the code in the query params. However, I get the error "pkceCodeVerifier can not be parsed," and the user is not logged in. I have checked the logs in Auth0, and all logs are fine. I'm using the regular Auth0 application, and the pkceCodeVerifier flow is handled by Auth0 itself in regular application.
I have also passed the code challenge, code challenge method, and state in the URL but am still getting the same error. Below is the code for the same:
Ref to create code verifier and code challenge: https://auth0.com/docs/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce/add-login-using-the-authorization-code-flow-with-pkce#create-code-verifier
// code verifier
function base64URLEncode(str: any) {
return str.toString('base64')
.replace(/\+/g, '-')
.replace(/\//g, '_')
.replace(/=/g, '');
}
const verifier = base64URLEncode(crypto.randomBytes(32));
// code challenge
function sha256(buffer) {
return crypto.createHash('sha256').update(buffer).digest();
}
const challenge = base64URLEncode(sha256(verifier));
url.searchParams.append('code_challenge', challenge);
url.searchParams.append('code_challenge_method', 'S256');
url.searchParams.append('state', state);
I have also tried to set the cookie options in the NextAuth configuration file but am still getting the same error. Below is the code for the same:
cookies: {
pkceCodeVerifier: {
name: "authjs.pkce.code_verifier",
options: {
httpOnly: true,
sameSite: "none",
path: "/",
secure: true, // Set to true in production
},
},
},
I have also added the code verifier in the cookies below is the code
const baseUrl = `https://myauth0domain.com/authorize`;
const url = new URL(baseUrl);
url.searchParams.append("response_type", "code");
url.searchParams.append("client_id", clientId);
url.searchParams.append("redirect_uri", redirectUri);
url.searchParams.append("invitation", invitation);
url.searchParams.append("organization", organizationId);
url.searchParams.append("scope", "openid profile email");
const finalUrl = url.toString();
const response = NextResponse.redirect(new URL(finalUrl as string, baseURL));
const cookieOptions = {
httpOnly: true,
secure: false,
maxAge: 900, // 15 minutes
path: '/',
};
response.headers.set(
'Set-Cookie',
serialize('authjs.pkce.code_verifier', verifier, cookieOptions)
);
return response
SignUp/SignIn flow Screenshot:
Invitation Screenshot:
Simple signUp/signIn Works fine but when I try to log in with the invitation link then i get the error.
