AuthSdkError: Unable to retrieve OAuth redirect params cookie while using org to org idp discovery

Questions
1

Hi

I have a React SPA and I am using the Okta widget to authenticate. When I am trying to authenticate a org to org user using idpDiscovery set to true, I get redirected to the following url coming up with error ‘AuthSdkError: Unable to retrieve OAuth redirect params cookie’

http://demourl.com/implicit/callback#id_token={tokenvalue}&access_token={tokenvalue}&token_type=Bearer&expires_in=3600&scope=openid+profile&state=xyz

Here’s the code for my onSuccess function:

    onSuccess = res => {
                if (res.status === 'SUCCESS') {
                    return this.props.auth.redirect({
                        sessionToken: res.session.token
                    });
                } else if  res.status === 'IDP_DISCOVERY' {
                    var username = document.getElementById("idp-discovery-username").value;
                    var xhttp = new XMLHttpRequest();
                    var orgUrl = "process.env.REACT_APP_OKTA_ORG_URL";
                    var webFingerUrl = orgUrl + ".well-known/webfinger?resource=" + encodeURIComponent("okta:acct:" + username);
                    var params = {
                        "oauth": "oauth2/default/v1/authorize",
                        "clientId": process.env.REACT_APP_OKTA_CLIENT_ID,
                        "scopes": ["openid", "profile"],
                        "responseMode": "fragment",
                        "responseType": ["token", "id_token"],
                        "redirectUri": process.env.REACT_APP_PROD_URL + '/implicit/callback',
                        "state": "xyz", // enter random char generator here.
                        "nonce": "xyz" // same as above.
                    };
                    var finalRedirectUrl = orgUrl + params["oauth"] + "?client_id=" + params["clientId"] + "&scope=" + params["scopes"][0] + " " + params["scopes"][1] + "&response_mode=" + params["responseMode"] + "&response_type=" + params["responseType"][0] + " " + params["responseType"][1] + "&redirect_uri=" + params["redirectUri"] + "&state=" + params["state"] + "&nonce=" + params["nonce"];
                    xhttp.open("GET", webFingerUrl, true);
                    xhttp.responseType = "json";
                    xhttp.send();
                    xhttp.onload = function () {
                        var response = xhttp.response;
                        var link = response.links[0].href;
                        console.log(link);

                        var idp = link.slice(0, (link.length - 1)); // slicing is required to remove the '#' from the end of the idp link.
                        console.log(idp);
                        window.location.href = idp + "&fromURI=" + encodeURIComponent(finalRedirectUrl);
                        console.log(window.location.href);
                    }
                }

            };

Any suggestions as to what to do next?

2

I think I might be able to help. We ran into a similar issue with the Okta React library that involved the exact same error message you’re getting and it has to do with the Okta library being unable to retrieve the cookie used to store the state string and redirect URI upon being redirected back to your site after signing in to Okta.

To give some background, as you know in a typical OAuth flow the client (your app) will generate a state string which it stores along with the redirect URI in a cookie. Then the client will redirect the resource owner (the user) to the authorization server (Okta) to sign in, after which the resource owner gets redirected back to the client with either an auth code (e.g. Auth Code flow) or the tokens (e.g. Implicit flow, which is what you’re using) along with the state string and redirect URI. Upon receiving those tokens with the state string and redirect URI, the client will verify that the returned state string and redirect URI match the ones stored in the cookie before accepting the tokens for security reasons. If those cookies don’t exist, the Okta library displays “AuthSdkError: Unable to retrieve OAuth redirect params cookie.”

With that in mind, it looks like you just forgot to store the redirect URI and state string in a cookie before redirecting over to Okta to sign in. In the true condition of your if block it looks like you might need to use res.session.setCookieAndRedirect(...) instead of this.props.auth.redirect(...) which I think will set the cookies for you. In the false condition you probably need to manually set the cookies for state and redirect URI (and potentially others if I’m missing something) since you’re redirecting by modifying window.location.href.

Here’s where I got the idea -> https://developer.okta.com/code/javascript/okta_sign-in_widget/#sign-in-to-okta-with-the-default-dashboard

3

Hi pushkar.singh

Can you please how you resolved the Issue in your single page application. Please reply to me