@okta/okta-signin-widget not working with Angular 17

Hey team, I am trying to integrate the okta custom login flow with Angular 17. I installed the latest version of @okta/okta-signin-widget but the build is failing while running locally.

I am getting the below error:

[vite] Error when evaluating SSR module /main.server.mjs: window object is not defined.

I am hoping that someone can point me in the right directions.

Hi there @praveenr ,

Welcome to the community!

It sounds like the project might have SSR enabled. Can you remove SSR and try again?

Let us know!

Hey @alisaduncan , do you have any working example for okta sign-in widget implemented in an Angular 17 application (standalone)?

I am facing a few issues so if you have a working example it will be great.
Btw the previous error is gone after disabling SSR.

Hey @alisaduncan, I managed to get the sign in widget working with standalone. Thanks a lot for all the help.

1 Like

Awesome, glad to hear it!

1 Like

Hey @alisaduncan I need your help.

So my company is building an application which will have 2 kinds of users:

  1. Customer users which will be using the custom sign in flow
  2. Internal users which are part of ORG to ORG group and for these users okta is always redirecting the users to the corporate login page.

The first part is working fine with the custom login flow. For the second part, as soon as we enter our company email address it redirects us to okta sign in page and when we successfully login it takes us back to login/callback page and following error is shown:

“OAuthError: Your client is configured to use the interaction code flow and user interaction is required to complete the request.”

Do you have any idea regarding how to solve it?

Thanks in advance!

Hi @praveenr!

I’m not knowledgeable about setting up org to org sign in. If you see an Interaction code grant error, though, it may be that it needs to be enabled in your Okta org. I believe it’s enabled by default for certain new org types, but you may need to enable it explicitly. Here’s the doc on how you’d step through doing so

@andrea, do you have any further recommendations for this question?

Are you using the Org2Org OIN integration to connect the two orgs, or have you set up the other Okta org as an OIDC IdP?

For the error you see, is that being thrown on the hub org (where your target OIDC app lives) or on the spoke org (where the users are sourced)? Are you just relying on the Routing Rules in your Hub/Target org to handle redirection to the Spoke/Source org? Is that when you see the error?

I’m a little surprised you only see that error crop up for Federated users. Is your widget already configured to use Interaction Code Flow?

Hi @andrea ,

We are seeing this error on hub org for the internal users. Yes our widget is handled to use interaction code flow. But we are seeing this error only for ORG-ORG connected users. Could you please guide us how to proceed further.

Hi @praveenr,

So this is for Org2org connected users only then, and not users that are local to the org. Do you have any other IdPs set up on this org and if so do they have similar issues? Do you know if both Orgs in this setup are running Okta Identity Engine?

You might try using a fresh install of the standard Angular sample as well to see if this still happens: GitHub - okta/samples-js-angular: samples-js-angular

Hi @praveenr
How did you get it to work with standalone app?
Can you send me the code or guide me ?