Build an Angular App with Okta's Sign-In Widget in 15 Minutes

Matt Raible

I’ve solved this in the past by adding a “groups” claim to my ID or access tokens that includes the groups. This is what we use in JHipster. I created an issue in our Angular SDK to add a directive to show/hide based on groups like JHipster does, but it’s still open.

Here’s what the groups claim instructions look like for JHipster:

Navigate to API > Authorization Servers, and click on the default server. Click the Claims tab and Add Claim. Name it groups, and include it in the ID Token. Set the value type to Groups and set the filter to be a Regex of .*. Click Create.

https://uploads.disquscdn.c…

Chris Roberton

Is this widget still supported?

leebrandt

Yes. You can see how to customize it on https://developer.okta.com (you have to scroll down a bit to get to it). Hope that helps.

Chris Roberton

Yeah, I’m not worried about that. It’s the code that’s giving me problems. The current version is 4.2 and I think this example was done with 2.8.ish. When I try the current version, it behaves just differently enough from the tutorial above to cause problems. For example, in the call to the constructor for OktaSignIn (see example above) the issuer parameter cannot be ‘default’. It has to be ‘https://oktadomain/oauth2/default’. Without this, I was getting a weird error that I couldn’t find documented anywhere. Also, the one I am currently fighting is in the ngOnInit (see example above, again), this.oktaSignIn.session is null when it gets to the line this.oktaSignIn.session.get((response) => {

I’m considering going back to try my code with version 2.8 to see if it works as-is rather than trying to figure out how it is supposed to work in 4.2.

Dmitriy Trubov

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")
this.oktaAuthService.signInWithRedirect()
} 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

Matt Raible

Please don’t ask your question in multiple locations. I see you asked this same question on our forums. It just creates more work for us to answer you multiple times.