Self hosted login widget not getting callback

Questions OAuth/OIDC
1

I am imbedding the v7 login widget into an MS MVC page. The login is working as I am receiving the access and Id tokens in the js and see the login event in the Okta system log, but the callback to the server side endpoint isn’t happening.

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

<script type="text/javascript">

$(function () {
	var oktaConfig = {
			redirectUri: 'https://localhost:8488/API/Login/SubmitLogin',
			issuer: 'https://XXX.okta.com/oauth2/default',
			clientId: 'XXX',
			useInteractionCodeFlow: true,
			i18n: {
				'en': {
					// Labels
					'primaryauth.submit': 'Login In',
					'primaryauth.title': 'Secure Sign In',
					'primaryauth.username.placeholder': 'Email Address',
					'customButton.createAccount': 'Create Account Now',
					@*'socialauth.divider.text': '@newToConMessage'*@
				}
			},
			features: {
				registration: true,                           // Enable self-service registration flow
				rememberMe: false,                      // 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 this demo
			}
		   }
	// Search for URL Parameters to see if a user is being routed to the application to recover password
	var searchParams = new URL(window.location.href).searchParams;
	oktaConfig.otp = searchParams.get('otp');
	oktaConfig.state = searchParams.get('state');

	const oktaSignIn = new OktaSignIn(oktaConfig);

	oktaSignIn.authClient.token.getUserInfo().then(function (user) {

	}, function (error) {
		oktaSignIn.showSignInToGetTokens({
			el: '#okta-login-container'
		}).then(function (tokens) {
			oktaSignIn.authClient.tokenManager.setTokens(tokens);
			oktaSignIn.remove();

			var data = {
				accessToken: tokens.accessToken.accessToken,
				idToken: tokens.idToken.idToken
			};

		}).catch(function (err) {
			console.error(err);
		});
	});
	});
</script>

Why isn’t the server side callback being made?

2

Maybe you want to use showSignInAndRedirect instead of showSignInToGetTokens.

Renders the widget to the DOM. On successful authentication, the browser will be redirected to Okta with information to begin a new session. Okta’s servers will process the information and then redirect back to your application’s redirectUri . If successful, an interaction code will exist in the URL as the interaction_code query parameter. If unsuccessful, there will be error and error_description query parameters in the URL. Whether successful or not, the state parameter which was passed to the widget will also be returned on redirect. This can be used by your server-side web application to match the callback with the correct user session.

2 Likes