title: How to create PKCE code and verifier for auth code flow?
body: <p>Following Okta's auth code flow, <a href="https://developer.okta.com/docs/guides/implement-grant-type/authcodepkce/main/#flow-specifics" rel="nofollow noreferrer">they say I need to create a PKCE code</a> which contains a code verifier and challenger.</p>
  <p>It is not clear how to create the values like their example:</p>
  <pre><code>{
    &quot;code_verifier&quot;:&quot;M25iVXpKU3puUjFaYWg3T1NDTDQtcW1ROUY5YXlwalNoc0hhakxifmZHag&quot;,
    &quot;code_challenge&quot;:&quot;qjrzSW9gMiUgpUvqgEPE4_-8swvyCtfOVvg55o5S_es&quot;
  }
  </code></pre>
  <p>I know I can send the code challenge in the auth URL like so:</p>
  <pre><code>https://${ourOktaDomain}/oauth2/v1/authorize?idp=${idp}&amp;client_id=${clientId}&amp;response_type=code&amp;response_mode=query&amp;scope=openid%20email&amp;redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Flogin%2Fcallback&amp;state=${randomString}&amp;code_challenge=${codeChallenge}&amp;code_challenge_method=S256
  </code></pre>
  <p>But it is not clear what I do with the verifier. It says:</p>
  <blockquote>
  <p>Your app saves the code_verifier for later</p>
  </blockquote>
  <p>Where do I save it the verifier and how do I create these values?</p>
  <p>EDIT: Showing code where I set the code_verifier in localStorage</p>
  <pre><code>const Login = () =&gt; {
  
    const codeVerifier = useMemo(async () =&gt; {
      const s256 = await sha256(codeChallenge)
      const verifier = btoa(s256);
  
      window.localStorage.setItem(state, verifier);
      
      return verifier;
    }, [])
  
    if (!codeVerifier) {
      return &lt;div&gt;Loading...&lt;/div&gt;;
    }
  
    const queryParams = encode({
      client_id: CLIENT_ID,
      redirect_uri: encodeURI(REDIRECT_URI),
      response_type: 'code',
      response_mode: 'query',
      state,
      nonce,
      code_challenge: codeChallenge,
      code_challenge_method: 'S256',
      scope: 'openid email',
      idp: OKTA_IDP
    });
  
    const socialLoginURI = `${OKTA_AUTH_URI}?${queryParams}`;
  
    return (
      &lt;Button 
        component=&quot;a&quot;
        href={socialLoginURI}
        aria-label=&quot;Login Button&quot;
      &gt;
        Facebook Login
      &lt;/Button&gt;
    );
  };
  </code></pre>