Self hosted sign-in widget - showSignInAndRedirect - authorization request not found error

I’m trying to implement self hosted sign-in widget - for web application - using authorization code flow- wrt GitHub - okta/okta-signin-widget: Okta SignIn widget that renders the new login/auth/recovery flows

I’ve used showSignInAndRedirect() option hoping okta would send the response back to the redirectURI.

On the java side, I’ve a controller which is mapped to the requestMapping with the redirectURI - so hoping it would get the control back with the authentication principal. However after the /authorization call where it sends back the code in the URL, I’m getting error [authorization_request_not_found].

Error screenshot
image

am I missing anything here? Any help is appreciated.

Code =
login.html page
In the head tag, have below

<link href="https://global.oktacdn.com/okta-signin-widget/5.3.1/css/okta-sign-in.min.css" type="text/css" rel="stylesheet"/>

and then in the script tag

var config = { el : '#sign-in-widget',
	 baseUrl: /*[[${oktaBaseUrl}]]*/ 'https://{yourOktaDomain}',
	  //el: '#okta-login-container',
	  clientId: /*[[${oktaClientId}]]*/ '{clientId}',
	  redirectUri: /*[[${redirectUri}]]*/ '{redirectUri}',
	  authParams: {
	    issuer: /*[[${issuerUri}]]*/ '{issuerUri}',
	    pkce: false,
	    responseType: ['code'],
	    scopes: ['openid', 'email', 'profile'],
	   pkce: false
	  }

};
const oktaSignIn = new OktaSignIn(config);
oktaSignIn.showSignInAndRedirect();
</sc ript>

Controller java code
@GetMapping("/")
public ModelAndView login(Authentication principal,HttpServletRequest request,
HttpServletResponse response) throws MalformedURLException {
//Check the principal and do something here
}

I’d suggesting looking at our Spring Java Samples, particularly the custom-login example. This uses the Sign-In Widget with Spring Boot.

@mraible - that’s the one I’m referring to. However as with many examples, it’s not suited for prod ready applications and so have customized it a little bit. But it shows the error that I mentioned above.

Do we’ve any examples for showSignInAndRedirect() usage or signInWithCredentials()

Hey @pramod!

A couple of things I want to point out. I’d strongly recommend redirecting to Okta instead of hosting the sign-in widget.

This is NOTE Okta specific advice, redirecting to an OAuth IdP is a more secure option:

  • Your application (front-end and backend) never handles a user’s passwords
  • You can change login policies without affecting your application (no code changes), e.g. enable MFA, or any other new login options.
  • The IdP can manage the login page code (and keep it up to date)

Once you customize your Okta domain (and related branding/theming), your users won’t know it’s actually Okta under the covers (example: https://:login.your-domain.com):
https://developer.okta.com/docs/guides/custom-url-domain/overview/

That said, you may have use-cases that are a better fit for managing the login page yourself, in that case, back to your question.

Spring Security’s logging is sparse by default (intentionally, as typical login errors could cause log spam).
Turn up the logging by setting the following property:

logging.level.org.springframework.security: DEBUG

Let us know what the related exception is and we can point you in the right direction

There may be some info encoded in the URL too (if so include that too).

1 Like

Thanks @bdemers for the above points, I’m going to share this in our internal meet to see if we all agree to go for the Okta hosted screen.

I did enable all the logging - but it did not log anything specific -
logging.level.org.springframework.web.client=DEBUG
logging.level.web=DEBUG
logging.level.org.springframework.security=DEBUG
logging.level.org.springframework.security.oauth2=DEBUG

Here is what I see in the browser console and in the network tab
image

and

URL call details from the n/w tab
globalpay-dev-6161360 - Sign In email profile

responseHeader for mfaCallBack?code call
image

responseHeader for login?error call
image

browser display
image

@bdemers - Did you get a chance to look into this?

Also I forgot to mention earlier that I’ve not downloaded the js & css files on my local but rather referring them from the cdn
https://global.oktacdn.com/okta-signin-widget/5.3.1/js/okta-sign-in.min.js” type=“text/javascript”>

My understanding is when showSignInAndredirect() is called, it in turn invokes /authorize and /token calls.