JS Sign-In Widget Quickstart hasTokensInUrl undefined

Hello,

I am testing a new single-page app with an Okta dev account.

I am following the instructions for the JavaScript widget at Okta Sign-In Widget Quickstart.

Per the instructions, I added the CDN links for version 3.2.0 of the Sign-In Widget to my HTML page. Next I added a <div id="okta-login-container"></div> and the example <script> block, replacing the placeholders yourOktaDomain and clientId with the appropriate values.

On load, the JavaScript console logs an error:

(index):21 Uncaught TypeError: Cannot read property 'hasTokensInUrl' of undefined

In the JS console, I can see that the oktaSignIn object does not have a property named session, as the sample code seems to expect.

Thank you.

Hi @stuart.sierra.drest

Can you please provide the full script that you are using in order to see what is the cause of the issue?

Hello,

I should clarify that I’m not seeking assistance. I only wanted to report that the sample code on this page does not work:
https://developer.okta.com/quickstart/#/widget/nodejs/express

The code I’m referring to is under the heading “Configure the Sign-In Widget” and begins with the following lines:

<script type="text/javascript">
  var oktaSignIn = new OktaSignIn({
    baseUrl: "https://${yourOktaDomain}",
    clientId: "{clientId}",
    authParams: {
      issuer: "https://${yourOktaDomain}/oauth2/default",
      responseType: ['token', 'id_token'],
      display: 'page'
    }
  });
  if (oktaSignIn.token.hasTokensInUrl()) {
    oktaSignIn.token.parseTokensFromUrl(

When I tried to use this sample code it failed with the error I reported. Perhaps this is due to a change in the public API of OktaSignIn since that example was written.

Hope this helps.
–S

Yes, I’m having the same issue.

It seems hasTokensInUrl works on the root oktaSignIn object but then fails again at the session property.

For anyone looking for the 3.0+ compatible API changes pending the guide update:


oktaSignIn.token.hasTokensInUrl
–>
oktaSignIn.hasTokensInUrl


oktaSignIn.token.parseTokensFromUrl
–>
oktaSignIn.authClient.token.parseFromUrl


oktaSignIn.session.get(function (res) {...
–>
oktaSignIn.authClient.session.get().then(function (res) {...

Thanks for the assist, that was my issue as well and is now fixed. It would be good to have this documentation page updated to the suggestion above to responding to the API change:

https://developer.okta.com/quickstart/#/widget/dotnet/aspnetcore

Thanks for detailing the fixes @rburrows. I created a PR to fix this. https://github.com/okta/okta-developer-docs/pull/883

@mraible this still doesn’t work for me. Before this fix the login didn’t show at all - with this fix I get a 400 error response when logging in
Error Code: invalid_request
Description: The ‘redirect_uri’ parameter must be an absolute URI that is whitelisted in the client app settings.

The redirect URI is, as specified in the guide, window.location.origin + "/implicit/callback". This logs localhost:3000 as it should

Your redirect URIs need to be added to your app on Okta. Add http://localhost:3000/implicit/callback to your app and it should work.

This is not the solution

When you see the 400 error in your browser, go to your address bar and look for the redirect_uri parameter that your app is sending. You might want to copy/paste the URL into a text editor so it’s easier to find. If you add this value to the Login redirect URIs in your Okta app, you should see the login form on Okta. At least, that’s how I solved it in the past.