OAuth_Error with Okta's Angular sign in widget

[pabhishek09]

Hi, I used Okta’s SPA sign in widget as documented. I am getting the following error -
error.errorCode: unsupported_response_type, error.description: The authorization server does not support the requested response type. Why is this

Error details

r {name: "OAUTH_ERROR", message: "The authorization server does not support the requested response type."}
message
:
"The authorization server does not support the requested response type."
name
:
"OAUTH_ERROR"

[tom]

Mind sharing your widget initialization code? Also, what are you using the widget for (so we can understand what you are building towards)? Are you building a login for the end-user tile screen for Okta or login for your application?

[pabhishek09]

Hi Tom. My attempt here is to configure the okta authentication using the widget. The application will have two access routes - one via okta home page(where we have an ecosystem of existing applications) and another when the user wants to go the application directly. The users who will have have the application access will be configured by the okta-admin team.

[tom]

Can you share your widget initialization code?

[pabhishek09]

The code is as documented in https://developer.okta.com/blog/2017/03/27/angular-okta-sign-in-widget

This is the login component where I want the authentication to happen

import { Component, OnInit, ViewChild } from ‘@angular/core’;
import { LoginService } from ‘./login.service’;
import { LoginDetailsService } from ‘…/Shared/Services/LoginDetailsServices/login-details.service’;
import { InternalisationService } from ‘…/Shared/Internationalisation/internationalisation.service’;
import { Okta } from ‘…/Shared/Services/OktaService/okta.service’;
@Component({
selector: ‘app-login’,
templateUrl: ‘./login.component.html’,
styleUrls: [’./login.component.css’]
})

export class LoginComponent implements OnInit {

title = ‘app works!’;
user;
oktaSignIn;

constructor(private okta: Okta) {
this.oktaSignIn = okta.getWidget();
}

showLogin() {
this.oktaSignIn.renderEl({el: ‘#okta-login-container’}, (response) => {
if (response.status === ‘SUCCESS’) {
this.user = response.claims.email;
}
});
}

ngOnInit() {
this.oktaSignIn.session.get((response) => {
if (response.status !== ‘INACTIVE’) {
this.user = response.login
} else {
this.showLogin();
}
});
}

logout() {
this.oktaSignIn.signOut(() => {
this.showLogin();
this.user = undefined;
});
}
}

The login html component -

Hello {{user}}

<button (click)=“logout()”>Logout

The Okta service is same as documented. Really appreciate you taking a look at this.

[mraible]

Hello,

This error is somewhat misleading. It can happen when you don’t have your OIDC app setup correctly on Okta. Can you confirm you’ve configured it with the following settings?

Login to your Okta account and navigate to Admin > Add Applications and click on the Create New App button. Select Single Page App (SPA) for the Platform and OpenID Connect for the sign on method. Click the Create button and give your application a name. On the next screen, add http://localhost:4200 as a Redirect URI and click Finish. You should see settings like the following.

Note: These are the same as what’s posted in the blog post: https://developer.okta.com/blog/2017/03/27/angular-okta-sign-in-widget#create-an-openid-connect-app-in-okta.