OktaAuthServiceNotification

Hi,
I’m using OktaSignIn widget with angular.
Everything works if angular application located on local host.
There is a problem when I put angular application on amazon ec2 instance.

Here is a configuration:
1 EC2 instance run two dockers, one with angular, another with Spring.
2 I’m using https and have certificate(signed by real authority)
3 I have domain on amazon and route 53 redirect request into EC2 instance.

So, everything works except OKTA sign in

In client code:
this.oktaSignin.renderEl({
el:’#okta-sign-in-widget’}, // the same as div tag id
(response)=> {
if(response.status===‘SUCCESS’) {
console.log("**** Loging successfull")
alert(“login success”);
this.oktaAuthService.signInWithRedirect()
alert(“sign in”);

     } else {
       console.log("error:" + response.status)
     }
  },
  (error) => {
      throw error;
  }
)

I have successfully sign in. Okta logs also show that.
However , I register variable
this.oktaAuthService.$authenticationState.subscribe(
(result)=> {
alert(“authenticated:” + result);
this.isAuthenticated = result
this.getUserDetails();
}
);
and never get called from OKTA.
Again, the same code works on local host.

Any ideas?

Thanks,
Dmitriy

Is possible that your EC2 blocks some connection from OKTA?
Or did you configure correctly the app within OKTA?
In my case I am developing Flask app and I have to go through multiple steps to configure the applications on the platform.

Hi, it is definitely nothing to do with aws. Angular works inside browser and using aws ec2 to get app, login happened after that.

About configuration, I changed urls into local host in okta app, and evening works

Thanks,
Dmitriy

Hi Dmitriy,
While this works for localhost, for OIDC flows Okta does not recommend using renderEl(), rather use either showSignInToGetTokens() or showSignInAndRedirect(). My assumption is with your current code there are 2 /authorize calls happening, this can be verified in the browsers dev console network tab.

I suggest removing,

this.oktaSignin.renderEl({
el:’#okta-sign-in-widget’}, // the same as div tag id
(response)=> {
...
)

and using either of the two below. The Redirect will cause a page reload and showSignInToGetTokens will not.

this.oktaSignin.showSignInAndRedirect({el: ’#okta-sign-in-widget’})
.catch(err => {
  throw err;
});

or,

this.oktaSignin.showSignInToGetTokens({
  el: ’#okta-sign-in-widget’
}).then((tokens) => {
  // Add tokens to storage
  oktaAuth.handleLoginRedirect(tokens);
}).catch((err) => {
  throw err;
});

If you run into issues with the above it might be better to open a support case so support can ask for .har files and other information.

Hi, Eric
Thanks a lot , works as expected!
I used your second proposition.

ngOnInit(): void {
this.oktaSignin.remove();
this.oktaSignin.showSignInToGetTokens({
el: ‘#okta-sign-in-widget’}).then((tokens) => {
// Add tokens to storage
this.oktaAuthService.handleLoginRedirect(tokens);
}).catch((err) => {
throw err;
});
}

Actually, I could resolve this problem by subscribing on item in component , and after login could send event by myself with next() API.
But your decision definitely better.
OKTA works perfect!

Thanks,
Dmitriy

HI,
after make those changes everything works - thanks!
Only one issue - with signed up.
1 I clicked on signup, okta redirected me into signup widget
2 I registered new user, okta still on signup widget after pushing “register” button.
(is it expected behavior or okta should redirect me into login widget?)
3 I checked on okta apps - user successfully registered.
4 I click into “back to sign in link”- okta redirected me into sign in link
5 I signed in with new user credentials and it is hangs…

If I signed in with that credentials from new browser- everything works ok.
Any ideas?

Thanks,
Dmitriy