Specify redirectURI in getWithRedirect() Okta-auth-js library

Questions API
, , ,
1

What I want to accomplish:
A user signs into my app and lands on an authenticated page. I need to call various vendor specific authorization servers and apps (web app with client secret) from the UI to retrieve an auth code to send to the vendors when the user logs in. The vendor will need to call Okta server side using their client secret and retrieve an access token with limited scope and claims.

To get the auth code, I call Okta with the session cookie passed (so the client secret is not needed) to the vendor authZ endpoint and vendor app ID, and I get an auth code. There are 3 ways I tested to accomplish this; however, one added twist is that I need to append an additional dynamic query parameter to the URL that is sent to the vendor.

Issue
For the first two solutions, I am using the okta-auth-js SDK to get the auth code with the param responseType: code.

  1. getWithRedirect()
    This would be preferred to launch to the vendor directly without additional processing.
    However, I cannot dynamically add a parameter onto the redirect URI. This would require the redirect page to be a page I own to get the auth code and redirect to the vendor with an additional param (additional hop and complexity). Is there a way to pass a param in the getWithRedirect call to forwarded on the redirect call?

  2. getWithoutPrompt()
    I can get this to work by creating an event listener for the callback after the auth code call.
    The problem I face is that getWithoutPrompt tries to complete the auth flow and retrieve an access token. This causes the following exception to be thrown: Uncaught (in promise) AuthSdkError: The “codeVerifier” (generated and saved by your app) must be passed to /token

When I add an event listener, it intercepts the auth code response message passed from the iframe so the token retrieval is not completed. I can then grab the auth code and create my own endpoint appending the external account ID to it.

    window.addEventListener('message',function(event) {
      if ((event.data != undefined) && (event.data.code != undefined)){
        window.open('https://mydomain.com/authcode?dynamicparam=' + dynamicParam + '&code=' + event.data.code, '_self')
      }
    },false)
  1. The third option is to create my own IFrame and call the Okta /authorize endpoint to get the auth code like getWithoutPrompt(). This shouldn’t attempt the subsequent token call.

Are there other or better ways to accomplish this?
Is there a way to pass a param in the getWithRedirect call to forwarded on the redirect call?
For getWithoutPrompt(), is there a way to prevent the token flow from being completed?

2

Can you share a code snippet where you are trying to set a different redirectUri for getWithRedirect? Are you passing an options object as in our example here?

authClient.token.getWithRedirect({
  responseType: ['token', 'id_token'],
  state: 'any-string-you-want-to-pass-to-callback' // will be URI encoded
})
.catch(function(err) {
  // handle AuthSdkError (AuthSdkError will be thrown if app is in OAuthCallback state)
});
3

Thank you very much @andrea! I will add the dynamic parameters to the state option.
I thought the state param was used to only to prevent CSRF. I see it is noted to be used for that but also states “Your app can use this string to perform additional validation and/or pass information from the login page.” Does Okta set a length limit on that param? Or is it based on the overall length of the URL that could cause issues?

4

I think the latter, I don’t know of any char limit on our side for state but I could see an issue if the URL starts getting to long. We’ll often see folks use a JWT to hold the state information, so its able to be pretty long based on that!

1 Like