Okta Self Hosted Sign-In Widget in jsp file

[pramod]

Hello,
I tried to follow the self hosted sign-in widget (for a web app, not a SPA) and was trying to build one in jsp however I’m getting below error while loading the page.

Uncaught SyntaxError: invalid range in character class
Uncaught ReferenceError: OktaSignIn is not defined

Basically it fails to load okta-sign-in-min.js, throws invalid range in character class error and so does not show sign in & password fields.

Did anyone face similar issue? If so what did you do to fix it.

[pramod]

JSP Code -

Code is as below -
<%@ page language=“java” contentType=“text/html; charset=utf-8”
%>

open html tag

Insert title here

<script src="https://global.oktacdn.com/okta-signin-widget/5.1.5/js/okta-sign-in.min.js" type="text/javascript"></script>
<link href="https://global.oktacdn.com/okta-signin-widget/5.1.5/css/okta-sign-in.min.css" type="text/css" rel="stylesheet"/>
    
<!-- where the sign-in form will be displayed -->
  <div id="okta-login-container"></div>

script tag starts here

	 signInWidgetConfig = {
		  // Enable or disable widget functionality with the following options. Some of these features require additional configuration in your Okta admin settings. Detailed information can be found here: https://github.com/okta/okta-signin-widget#okta-sign-in-widget
		  // Look and feel changes:
		  logo: '//logo.clearbit.com/someValidCompany.com', // Try changing "okta.com" to other domains, like: "workday.com", "splunk.com", or "delmonte.com"
		  language: 'en',                       // Try: [fr, de, es, ja, zh-CN] Full list: https://github.com/okta/okta-signin-widget#language-and-text
		  i18n: {
		    //Overrides default text when using English. Override other languages by adding additional sections.
		    'en': {
		      'primaryauth.title': 'Sign In',   // Changes the sign in text
		      'primaryauth.submit': 'Sign In',  // Changes the sign in button
		      // More e.g. [primaryauth.username.placeholder,  primaryauth.password.placeholder, needhelp, etc.].
		      // Full list here: https://github.com/okta/okta-signin-widget/blob/master/packages/@okta/i18n/dist/properties/login.properties
		    }
		  },
		  // Changes to widget functionality
		  features: {
		    registration: true,                 // Enable self-service registration flow
		    rememberMe: true,                   // Setting to false will remove the checkbox to save username
		    //multiOptionalFactorEnroll: true,  // Allow users to enroll in multiple optional factors before finishing the authentication flow.
		    //selfServiceUnlock: true,          // Will enable unlock in addition to forgotten password
		    //smsRecovery: true,                // Enable SMS-based account recovery
		    //callRecovery: true,               // Enable voice call-based account recovery
		    router: true,                       // Leave this set to true for the API demo
		  },
		  baseUrl: 'https://dev-61xxx.okta.com',
		  el: '#okta-login-container',
		  clientId: 'clientID',
		  redirectUri: 'xxxRedirectURL',
		  authParams: {
		    issuer: 'https://dev-61xxx.okta.com/oauth2/default',
		    responseType: ['code'],
		    pkce: false,
		   // responseType: ['id_token', 'token'],
		    scopes: ['openid', 'email', 'profile'],
		  },
		};

  const oktaSignIn = new OktaSignIn(signInWidgetConfig); 
  oktaSignIn.showSignInAndRedirect({
	  el: '#okta-login-container'
  }).catch(function(error) {
	  // This function is invoked with errors the widget cannot recover from:
	  // Known errors: CONFIG_ERROR, UNSUPPORTED_BROWSER_ERROR
	  alert('Catch unknown errors here which widget does not support');
	});

script tag ends here

</he ad>


</bo dy>
close html tag

[pramod]

Below is the error screenshot (chrome as well as FF) - also note that, if I do similar thing, using .html file, it works fine.

[mraible]

Hello @pramod,

I tried this myself with this Sign-In Widget example. I found that when I first copied and pasted it into a JSP, it didn’t work and the following error was rendered in my console.

I added the following to the top of the page and it fixed it.

<%@ page session="false" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>

[pramod]

Thanks @mraible
I checked the example that you pointed out and it shows me the login page if include it in the jsp as is. I’m going to play with that a little bit and will let you know how it goes.

Also I observed that in the example we are using the token & id_token - so I guess the implicit flow. Can we not use authorization flow (the 2 step process with /authorize call response_type=code & then calling the /token call)?

[mraible]

The Gist I linked to uses authorization code flow with PKCE.