Exception type : Key error ; Exception Value: 'okta-oauth-state'

bob-43 commented 3 years ago

Hi,

I am receiving exception while library is trying to get the value from cookie which is not present.

In my setup - I did not have any cookie set with below attribute: okta-oauth-state okta-oauth-nonce

AzMoo commented 3 years ago

Hi Bob,

Are you using the Okta Sign-In widget? The cookie should be created when you load the javascript for that.

If not, are you intending to use a custom login form and landing page?

bob-43 commented 3 years ago

Hi Matt, Thank you for the response. If I use provided widget template in the readme file then login page does not render for me. So I have copy the template from Okta site, it render but does not set any cookie with name specified. (https://developer.okta.com/code/javascript/okta_sign-in_widget/)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <title>Simple Web Page</title>
    <style>
      h1 {
        margin: 2em 0;
      }
    </style>
    <!-- widget stuff here -->
    <script src="https://global.oktacdn.com/okta-signin-widget/4.3.2/js/okta-sign-in.min.js" type="text/javascript"></script>
    <link href="https://global.oktacdn.com/okta-signin-widget/4.3.2/css/okta-sign-in.min.css" type="text/css" rel="stylesheet"/>
  </head>
  <body>
    <div class="container">
      <h1 class="text-center">Simple Web Page</h1>
      <div id="messageBox" class="jumbotron">
        You are not logged in. Get outta here! Shoo! >:S
      </div>
      <!-- where the sign-in form will be displayed -->
      <div id="okta-login-container"></div>
      <button id="logout" class="button" onclick="logout()" style="display: none">Logout</button>
    </div>
    <script type="text/javascript">
      var oktaSignIn = new OktaSignIn({
        baseUrl: "https://${yourOktaDomain}",
        clientId: "${yourClientId}",
        authParams: {
          issuer: "https://${yourOktaDomain}/oauth2/default",
          responseType: ['token', 'id_token'],
          display: 'page'
        }
      });

      if (oktaSignIn.hasTokensInUrl()) {
        oktaSignIn.authClient.token.parseFromUrl().then(
          // If we get here, the user just logged in.
          function success(res) {
            var accessToken = res.tokens.accessToken;
            var idToken = res.tokens.idToken;

            oktaSignIn.authClient.tokenManager.add('accessToken', accessToken);
            oktaSignIn.authClient.tokenManager.add('idToken', idToken);

            document.getElementById("messageBox").innerHTML = "Hello, " + idToken.claims.email + "! You just logged in! :)";
            document.getElementById("logout").style.display = 'block';
          },
          function error(err) {
            console.error(err);
          }
        );
      } else {
        oktaSignIn.authClient.token.getUserInfo().then(function(user) {
          document.getElementById("messageBox").innerHTML = "Hello, " + user.email + "! You are *still* logged in! :)";
          document.getElementById("logout").style.display = 'block';
        }, function(error) {
          oktaSignIn.renderEl(
            { el: '#okta-login-container' },
            function success(res) {},
            function error(err) {
              console.error(err);
            }
          );
        });
      }

      function logout() {
        oktaSignIn.authClient.signOut();
        location.reload();
      }
    </script>
  </body>
</html>

.

AzMoo commented 3 years ago

Are you setting values for variables like ${yourOktaDomain} and ${yourClientId}? You can't just copy and paste the code verbatim and expect it to work, you will need to modify it for your particular use-case.

bob-43 commented 3 years ago

Yes, I have set the values.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="https://global.oktacdn.com/okta-signin-widget/4.1.1/js/okta-sign-in.min.js" type="text/javascript"></script>
        <link href="https://global.oktacdn.com/okta-signin-widget/4.1.1/css/okta-sign-in.min.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
        <div id="okta-login-container"></div>

        <script>
        var oktaSignIn = new OktaSignIn({
            baseUrl: '{{config.url}}',
            clientId: '{{config.clientId}}',
            redirectUri: '{{config.redirectUri}}',
            authParams: {
                issuer: '{{config.issuer}}',
                responseType: ['code'],
                scopes: "{{config.scope}}".split(" ")
            },
        });
        oktaSignIn.renderEl(
            {el: '#okta-login-container'},
            function (res) {
                console.log(res);
            }
        );

        </script>

    </body>
</html>

Here is the exception I am getting

Also please change the sample template in readme file. It does not contains "oktaSignIn.renderEl" block. without that it won't render on the browser.

bob-43 commented 3 years ago

Seems like it works in Mozilla only

AzMoo commented 3 years ago

Hi bob, can you check it now using the updated instructions changed in #3 please?

bob-43 commented 3 years ago

It is working, thank you

crunchmasterdeluxe commented 2 years ago

Hi, thanks for putting this package together. It's made Okta integration a lot easier. My only issue is that I'm still getting this error. I also tried updating the js to https://global.oktacdn.com/okta-signin-widget/6.6.2/js/okta-sign-in.min.js in the login html. When I print out request.COOKIES, the only keys in the dict are username-localhost-8888, _xsrf, and csrftoken. Any ideas how to get okta_oauth_state and okta_oauth_nonce to appear in the cookies?

AzMoo / django-okta-auth

Exception type : Key error ; Exception Value: 'okta-oauth-state' #1