title: Creating a code verifier and challenge for PKCE auth on Spotify API in ReactJS
body: <p>I'm trying to add Spotify auth to my single page react application following <a href="https://developer.spotify.com/documentation/general/guides/authorization-guide/#authorization-code-flow-with-proof-key-for-code-exchange-pkce" rel="nofollow noreferrer">the doc from their api</a>.</p>
  <p>So far this is how I generate the codes based on solutions I found online:</p>
  <pre><code>const generateVerifier = () =&gt; {
      return crypto.randomBytes(64).toString('hex');
  }
  
  const getChallenge = verifier =&gt; {
      return crypto.createHash('sha256')
          .update(verifier)
          .digest('base64')
          .replace(/\+/g, '-')
          .replace(/\//g, '_')
          .replace(/=/g, '')
  }
  </code></pre>
  <p>An example of a pair of codes I created using that technique:</p>
  <ul>
  <li>verifier: <code>e8c3745e93a9c25ce5c2653ee36f5b4fa010b4f4df8dfbad7055f4d88551dd960fb5b7602cdfa61088951eac36429862946e86d20b15250a8f0159f1ad001605</code></li>
  <li>challenge: <code>CxF5ZvoXa6Cz6IcX3VyRHxMPRXYbv4PADxko3dwPF-I</code></li>
  </ul>
  <p>An example of an old pair of codes I created:</p>
  <ul>
  <li>verifier: <code>1jp6ku6-16xxjfi-1uteidc-9gjfso-1mcc0wn-tju0lh-tr2d8k-1auq4zk</code></li>
  <li>challenge: <code>SRvuz5GW2HhXzHs6b3O_wzJq4sWN0W2ma96QBx_Z77s</code></li>
  </ul>
  <p>I then get a response from the API saying &quot;code_verifier was incorrect.&quot; What am I doing wrong here?</p>