PKCE Code Generator

Random
Custom

Number of random bytes use to generate code verifier

Enter a value to use for generating the code verifier

Plain

S256 (SHA256)

Code-Verifier (base64url encoded, 0 chars)

Code-Challenge (base64url encoded, 0 chars)

Code-Challenge-Method

PHP
JavaScript

/* Number of random bytes use to generate code verifier (min 32, max 96 bytes) */
function generate_code_challenge_verifier($nbytes,$method) {
  $code_verifier = base64_url_encode_without_padding(random_bytes($nbytes));    
  if($method=='S256'){            
    $hash = hash('sha256', $code_verifier);
    $pack_data = pack('H*', $hash);
    $code_challenge =  base64_url_encode_without_padding($pack_data);
  }else{
    $code_challenge = $code_verifier;
  }
  return $reponse = array(
        'code_verifier' => $code_verifier, 
        'code_challenge' => $code_challenge,
    );
}
function base64_url_encode_without_padding($arg){
    $code_verifier = base64_encode($arg);
    $code_verifier = str_replace('=', '', $code_verifier);
    $code_verifier = str_replace('+', '-', $code_verifier);
    $code_verifier = str_replace('/', '_', $code_verifier);
    return $code_verifier; 
}
$reponse = generate_code_challenge_verifier(96, 'S256');
echo 'Code verifier:'.$reponse['code_verifier'];
echo ' #### ';
echo 'Code challenge:'.$reponse['code_challenge'];

The error might occur because your development / local server is not using a secure origin. A secure origin is one that loads resources either from the local machine or from a server that has cryptographic authentication. The digest function is part of the Web Crypto API, which you can access through the window.crypto.subtle property. However, this property is only available in secure origins, such as https:// pages. This is according to the Chromium Projects page here and the spec, which states that crypto.subtle should be undefined in insecure contexts.

Some examples of secure origins are:

(https, *, *)
(wss, *, *)
(*, localhost, *)
(*, 127/8, *)
(*, ::1/128, *)
(file, *, —)
(chrome-extension, *, —)

These patterns match the (scheme, host, port) of the origin. For example, https://example.com:443 is a secure origin because it matches the first pattern. However, http://example.com:80 (domain / virtual host) is not a secure origin because it does not use https.

Other supported secure origins are http://localhost and http://127.0.0.1, which match the third and fourth patterns respectively. These origins refer to the local machine and are considered trusted.

function randomIntFromInterval(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}
function generateCodeVerifier(length) {
  const characters =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~";
  let codeVerifier = "";
  for (let i = 0; i < length; i++) {
    const randomIndex = Math.floor(Math.random() * characters.length);
    codeVerifier += characters.charAt(randomIndex);
  }
  return codeVerifier;
}
function sha256(plain) {
  const encoder = new TextEncoder();
  const data = encoder.encode(plain);
  return window.crypto.subtle.digest("SHA-256", data);
}
function base64UrlEncode(buffer) {
  const padding = "=".repeat((4 - (buffer.length % 4)) % 4);
  const base64 = btoa(String.fromCharCode.apply(null, new Uint8Array(buffer)));
  return (
    base64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "") + padding
  );
}
async function generateCodeChallenge(codeVerifier) {
  const hashedBuffer = await sha256(codeVerifier);
  const codeChallenge = base64UrlEncode(hashedBuffer);
  return codeChallenge;
}
/* Number of random bytes use to generate code verifier (min 32, max 96 bytes) */
const randomByte = randomIntFromInterval(32, 96);
const codeVerifier = generateCodeVerifier(randomByte);
/* Generate Code Challenge */
generateCodeChallenge(codeVerifier)
  .then((codeChallenge) => {
    console.log("Code Verifier:", codeVerifier);
    console.log("Code Challenge:", codeChallenge);
  })
  .catch((error) => {
    console.error("An error occurred:", error);
  });

Sample code