How to replicate okta-hosted widget behavior with the auth-sdk?

[cstaber]

Today in Production we use the okta-hosted widget. We have hundreds of individual apps that redirect to it for user authentication. We need to be able to more fully customize the sign in experience so we’re trying to use the SDK.

In watching the Network traffic, at the end of signing in with the okta-hosted widget, the response from challenge/answer includes a redirect URL where the browser gets redirected to Okta where the session is established and then redirected back to the original app the user wanted to sign in to using the redirect_url it provided to the sign in widget with a “code” query param attached which the app uses to get the actual tokens. This is the behavior I’m trying to reproduce with the auth-sdk.

What I’m seeing is at the end, challenge/answer doesn’t contain a redirect but a successWithInteractionCode object. I also see a console error the SDK threw in the browser at the end:
OAuthError: Client authentication failed. Either the client or the client credentials are invalid.

Because we’re on Identity Engine and all the docs pointed me to using IDX, that is my current setup:

import { OktaAuth } from “@okta/okta-auth-js”;

const config = {
issuer: https://churchofjesuschrist.oktapreview.com/oauth2/default,
clientId: queryParams.client_id,
redirectUri: queryParams.redirect_uri,
pkce: true,
responseType: “code”,
codeChallenge: queryParams.code_challenge,
codeChallengeMethod: queryParams.code_challenge_method,
scopes: queryParams?.scope?.split(" "),
};

const authClient = new OktaAuth(config);

const res0 = await authClient.idx.authenticate();
console.log(“res0”, res0);

const res1 = await authClient.idx.proceed({ username: “username-here” });
console.log(“res1”, res1);

const res2 = await authClient.idx.proceed({authenticator: “okta_password”});
console.log(“res2”, res2);

const res3 = await authClient.idx.proceed({credentials: { passcode: “password-here” }});
console.log(“res3”, res3);

I imagine there’s some specific config I need in the beginning to get the SDK to return a redirect URL at the end of a completed sign in – but I can’t figure out what that config should be.

[cstaber]

Over the holidays and while digging through the code, I found that on the last proceed, you can also pass “exchangeCodeForTokens”. If I set that to false, I get the interactionCode back:

const res3 = await authClient.idx.proceed({credentials: { passcode: “password_here” }, exchangeCodeForTokens: false});

However, now I don’t know what to do with it. I assume I call “signInWithRedirect”, but when I do, I get redirected back to the beginning of our Okta Hosted widget on the username input screen.

Am I missing passing it something or passing the wrong state or need to call something else before calling it?

authClient.signInWithRedirect({
pkce: true,
clientId: queryParams.client_id,
redirectUri: queryParams.redirect_uri,
responseType: “code”,
nonce: queryParams?.nonce,
state: queryParams?.state,
codeChallenge: queryParams.code_challenge,
codeChallengeMethod: queryParams.code_challenge_method,
scopes: queryParams?.scope?.split(" "),
interactionCode: res3.interactionCode,
});

[cstaber]

My problem was I was running on localhost and the “idx” cookie wasn’t being set. Resolved now!