OKTA - OAuthError: Illegal value for redirect_uri parameter

I am working in my Developer Account in OKTA.

I am trying to get a Very Simple SPA App to obtain a JWT From OKTA.

I login with authClient.signIn({}) and that returns a transaction.sessionToken/
With that Session Token I should be able to call authClient.token.getWithoutPrompt({}) but I can never reach that code.

I get the following error: OAuthError: Illegal value for redirect_uri parameter.

How do I get beyond this OAuth Error so I can finally get back a JWT. I have tried examples on OKTA GIT but cannot get anything to work.

function getJWT()
{
  var orgUrl = 'https://MYXXXXXXX.oktapreview.com'; 
  var keyID = "MY CLIENT ID";

  var user = "MYUSER ID";
  var pwd =  "MY PASWORD"

  var appScope = ['openid', 'email', 'profile', 'phone', 'groups'];  

  var authClient = new OktaAuth({url: orgUrl, clientId: keyID,});

  $('#tokendiv').html('');

  authClient.signIn({
          username: user,
          password: pwd,
          redirectUri:  "http://localhost:5656/test.html"  //THIS IS SETUP IN MY OKTA ID
        })
        .then(function(transaction) {
          if (transaction.status === 'SUCCESS') {
            authClient.session.setCookieAndRedirect(transaction.sessionToken); // Sets a cookie on redirect
            console.log(transaction.sessionToken);
            $('#tokendiv').append('<h4>Session Token</h4>' + transaction.sessionToken);

            /// THIS IS NEVER REACHED, I Always Get OAuthError: Illegal value for redirect_uri parameter.
            authClient.token.getWithoutPrompt({     
              responseType: 'id_token', // or array of types            
              scopes: appScope,
              sessionToken: transaction.sessionToken
            })
              .then(function(res) {
                console.log("JWT: " + jwt);
                $('#tokendiv').append('<h4>JWT</h4>' + res.idToken);
              })
              .fail(function(err) {
                console.log("ERROR " + err);
                $('#tokendiv').append('<h4>Error</h4>' + err);
              })                        

          } else {
            throw 'We cannot handle the ' + transaction.status + ' status';
          }
        })
        .fail(function(err) {
          console.error(err);
        });
}

Solution

As long as your redirectUri is included in the approved Redirect URIs in your Okta Developer organization, you should not be receiving that error.

Below I was able to successfully return an id_token running on localhost:5656.

<!-- index.html -->

<html>
    <body>
        <button onClick="getJWT()">Button</button>
        <div id="tokendiv"></div>
    </body>
</html>

<script>
    function getJWT(){
        var orgUrl = 'https://{{org}}.oktapreview.com'; 
        var keyID = "{{clientId}}";

        var user = "{{user}}";
        var pwd =  "{{password}}"

        var appScope = ['openid', 'email', 'profile', 'phone', 'groups'];  

        var authClient = new OktaAuth(
            {
                url: orgUrl,
                clientId: keyID,
                redirectUri: "http://localhost:5656/index.html"
            });

        $('#tokendiv').html('');

        authClient.signIn({
                username: user,
                password: pwd,
        })
        .then(function(transaction) {
            if (transaction.status === 'SUCCESS') {
                authClient.token.getWithoutPrompt({     
                    responseType: 'id_token', // or array of types            
                    scopes: appScope,
                    sessionToken: transaction.sessionToken
                })
                .then(function(res) {
                    $('#tokendiv').append('<h4>JWT</h4>' + res.idToken);
                    console.log("JWT: " + JSON.stringify(res));
                })
                .fail(function(err) { /* err */ })                        
            } else { /* throw error */ }
        })
        .fail(function(err) { /* err */ });
    }
</script>