Tenemos una aplicación de reacción en la que estamos tratando de implementar el flujo de código de autenticación con inicios de sesión sociales con Facebook. Una vez autenticado, realizaremos solicitudes a nuestro backend que validará el token de acceso JWT en cada llamada.
Cuando intentamos iniciar sesión con Facebook, somos redirigidos a nuestro redirect_uri con éxito con nuestro código de autenticación, pero antes de que podamos cambiar el código de autenticación por un token de acceso, recibimos el siguiente error:
AuthSdkError: Unable to retrieve OAuth redirect params from storage
Tenemos un componente simple que maneja el URI de devolución de llamada y la configuración de Okta de la siguiente manera:
const oktaAuth = new OktaAuth({ clientId: CLIENT_ID, issuer: ISSUER, redirectUri: REDIRECT_URI, scopes: ['openid', 'profile', 'email'], pkce: true, disableHttpsCheck: OKTA_TESTING_DISABLEHTTPSCHECK, }); function App() { const history = useHistory(); const restoreOriginalUri = async (_oktaAuth: any, originalUri: any) => { history.replace(toRelativeUrl(originalUri || '/', window.location.origin)); }; return ( <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}> <UserDataProvider> <Switch> <Route path="/" exact component={isAuthenticated ? Home : Login} /> <SecureRoute path="/protected" exact component={Home} /> <Route path="/login/callback" component={LoginCallback} /> // LoginCallback from the Okta SDK (@okta/okta-react) <Redirect to="/" /> </Switch> </UserDataProvider> </Security> ); } El error parece provenir del componente LoginCallback en Okta SDK.
Tenemos una URL que maneja nuestro inicio de sesión y debería redirigirnos a nuestra aplicación: 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=${anotherRandomString}&code_challenge_method=S256
Resulta que debería haber estado usando el SDK de Okta para generar la cadena de autenticación en lugar de construirla yo mismo. El SDK maneja las cosas entre bastidores, específicamente para el PKCE, que requiere que se almacene un verificador de código en el almacenamiento local y luego se extraiga cuando el usuario es redirigido a la aplicación después de un inicio de sesión exitoso.
Así es como lo manejé con el SDK:
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 }); };