Can't Implement a basic sign-in widget

Questions
1

Hello team :slight_smile:

I’m trying to implement Okta Widget with Glitch. I’m working with index.html file to do it.

Here the code. I’m a novice and i don’t understand why it’s not working…

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Welcome to Okta Cert</title>
	<!-- Okta Sign-In Widget: Core js and css -->
	<script src="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.11.0/js/okta-sign-in.min.js" type="text/javascript"></script> 
	<link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.11.0/css/okta-sign-in.min.css" type="text/css" rel="stylesheet"> 
  <!-- Okta Sign-In Widget: Customizable css theme options. Link your own customized copy of this file or override styles in-line -->
	<link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.11.0/css/okta-theme.css" type="text/css" rel="stylesheet">
</head>
<body>
  <div class="title">Welcome to Okta Cert</div>
  <hr>
  <div class="title">Please enter your credentials below to continue to your Okta org.</div>

  <div id="okta-login-container"></div>

  <div class="footer">
    Copyright 2009-2022 Okta Cert. All rights reserved.
  </div>

  <script type="text/javascript">
		var signIn = new OktaSignIn(
  {
    baseUrl: 'https://{dev-prem-l0hw.oktapreview.com}',
    clientId: '{{0oa55nihmvUPd0qqH0x7}}',
    redirectUri: '{{dev-prem-l0hw.oktapreview.com}}',
    useClassicEngine: true
  }
);

signIn.showSignInToGetTokens({
  // Assumes there is an empty element on the page with an id of 'osw-container'
  el: '#osw-container'
}).then(function(tokens) {
  // Store tokens
}).catch(function(error) {
  // Handle error
});
	</script> 

  <!-- Default page style -->
  <style>
    .title {
      padding: 40px;
      font: normal 34px/1 Verdana, Geneva, sans-serif;
      color: black;
      text-align: center;
      letter-spacing: 7px;
    }
    .footer {
      font: normal 14px/1 Verdana, Geneva, sans-serif;
      padding: 10px;
      color: black;
      position: fixed;
      bottom: 0;
      width: 100%;
      background-color: #F0F0F0;
    }
  </style>
  <!-- Default page style -->
</body>
</html>

Do you see something wrong in what i’ve done?

Thank you for your help :slight_smile:
Regards

2

Couple of things I spotted.

  1. Update your CDN sources to the latest widget version
<!-- Latest CDN production Javascript and CSS -->
<script src="https://global.oktacdn.com/okta-signin-widget/7.5.2/js/okta-sign-in.min.js" type="text/javascript"></script>

<link href="https://global.oktacdn.com/okta-signin-widget/7.5.2/css/okta-sign-in.min.css" type="text/css" rel="stylesheet"/>
  1. Remove all of the curly braces from these values
  1. Set the redirectUri above to whatever domain and route you are hosting the widget on (http://localhost:8000, etc)
  2. Update the id for your div (where the Widget will be rendered) to match the el used by showSignInToGetTokens
  1. Add code into the then for showSignInToGetTokens so that tokens are stored in TokenManager
 oktaSignIn.authClient.tokenManager.setTokens(tokens);

You can check out an example config in our docs here (leave useClassicEngine: true in your config once you’re using the latest widget version): Embedded Okta Sign-In Widget fundamentals | Okta Developer

3

Thank you very much @andrea ,

It works fine now by matching the EL used by showSignInToGetTokens.

Thanks again :slight_smile:

Regards

1 Like
4

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.