Siguiendo el flujo de código de autenticación de Okta, dicen que necesito crear un código PKCE que contenga un verificador de código y un retador.
No está claro cómo crear los valores como su ejemplo:
{ "code_verifier":"M25iVXpKU3puUjFaYWg3T1NDTDQtcW1ROUY5YXlwalNoc0hhakxifmZHag", "code_challenge":"qjrzSW9gMiUgpUvqgEPE4_-8swvyCtfOVvg55o5S_es" }Sé que puedo enviar el desafío del código en la URL de autenticación así:
https://${ourOktaDomain}/oauth2/v1/authorize?idp=${idp}&client_id=${clientId}&response_type=code&response_mode=query&scope=openid%20email&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Flogin%2Fcallback&state=${randomString}&code_challenge=${codeChallenge}&code_challenge_method=S256Pero no está claro qué hago con el verificador. Dice:
Su aplicación guarda el code_verifier para más tarde
¿Dónde guardo el verificador y cómo creo estos valores?
EDITAR: Muestra el código donde configuro code_verifier en localStorage
const Login = () => { const codeVerifier = useMemo(async () => { const s256 = await sha256(codeChallenge) const verifier = btoa(s256); window.localStorage.setItem(state, verifier); return verifier; }, []) if (!codeVerifier) { return <div>Loading...</div>; } 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 ( <Button component="a" href={socialLoginURI} aria-label="Login Button" > Facebook Login </Button> ); };El verifier se envía durante un intercambio del código por un token en una etapa posterior. Cómo lo almacenas, depende de ti. El mecanismo para producir el desafío de un verificador se describe en https://datatracker.ietf.org/doc/html/rfc7636#section-4.2
Resulta que estaba tratando de generar la cadena de autenticación manualmente. Hacer esto omite el paso que crea el code_verifier (como señaló @ philipp-grigoryev).
Debería haber estado usando Okta sdk para redirigir al usuario que se encarga de guardar el code_verifier en el almacenamiento local y cuando se redirige al usuario, extrae el valor del almacenamiento local nuevamente.
Así es como usé el SDK para redirigir al usuario a la autenticación
const onSocialLogin = () => { oktaAuth.signInWithRedirect({ originalUri: '/welcome', clientId: CLIENT_ID, redirectUri: encodeURI(REDIRECT_URI), responseType: 'code', responseMode: 'query', state, nonce, codeChallenge, codeChallengeMethod: 'S256', scopes: ['openid', 'email'], idp: FACEBOOK_APP_ID }); };