OktaAuthServiceNotification

Questions
1

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

2

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.

3

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

4

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.

5

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

6

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

7

Hello dtrvno,
Thanks for you explanation. I have the same problem which you described with the this.oktaAuthService.signInWithRedirect().
I tried to use your solution with the this.oktaAuthService.handleLoginRedirect(token);, but that not solve my problem.
In my project I use these versions:
“@okta/okta-angular”: “^3.0.1”,
“@okta/okta-signin-widget”: “^5.12.0”,

Please, could you tell me which versions are in the your project?

Maybe, if I use the same versions which you use in your angular project, I will have success which you had and described.

Thanks dtrvno!