Kouver Bingham
Seems the most recent versions of @okta/okta-auth-js (tried 4.0.0 and 4.0.2) don’t seem to support the expression constructable OktaAuth({ … }) used in the okta.auth.wrapper.ts
I’m getting the following error:
Type ‘typeof import(“C:…/node_modules/@okta/okta-auth-js/lib/browser/index”)’ has no construct signatures.
I have implemented the suggested script tag to remedy this found here
Below is the only html page, that I have changed in cloning your github repo of this example (added the script tag to the okta cdn tag, as suggested above).
<html lang=“en”>
<head>
<meta charset=“utf-8”>
<title>NgDemo</title>
<script src=“https://global.oktacdn.com/okta-auth-js/4.0.0/okta-auth-js.min.js” type=“text/javascript”></script>
<base href="/">
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
<link rel=“icon” type=“image/x-icon” href=“favicon.ico”>
</head>
<body>
<app-root></app-root>
</body>
</html>
What gives??
Matt Raible
You’re using different libraries than this tutorial uses. If you use the same versions that I used in this tutorial, I’m confident things will work. To use the latest versions of our Angular SDK and Auth JS, I’d recommend using the following guides:
* Okta Sign-In Widget and Angular
* Okta Auth JS and Angular
Please let me know if you have any issues with these guides. I helped write them and can fix them if there’s issues.
Kouver Bingham
Thank you for responding so quickly. I appreciate it.
However, I’ve followed the second guide you offered line by line, and get the exact same error. Could there be a bigger issue here with the constructable expression OktaAuth({ … }) ?
https://uploads.disquscdn.c…
Okta Developers
I can try it myself tomorrow. However, I just tried it recently and it worked fine. I’m using Node.js 14.x. What version are you using?
Kouver Bingham
I’m using Node 12.19.0, the “recommended for most users” version currently on nodejs.org. But I can retry with 14.x.
Here is my complete setup I’m using.
https://uploads.disquscdn.c…
Kouver Bingham
Just tried it with node 14.13.1, still same error. You can see both these in the following error
https://uploads.disquscdn.c…
Kouver Bingham
Tried this also on my mac machine, same error. See set up and error in the image below. https://uploads.disquscdn.c…
Matt Raible
You are correct. Kouver. We’ve found issues in this guide and we’re working on fixing them. In the meantime, you can try these steps:
1. Change the import to import { OktaAuth } from ‘@okta/okta-auth-js’;
2. Replace the tokens.forEach block in handleAuthentication() with:
const tokenContainer = await this.oktaAuth.token.parseFromUrl();
this.oktaAuth.tokenManager.add(‘idToken’, tokenContainer.tokens.idToken);
this.oktaAuth.tokenManager.add(‘accessToken’, tokenContainer.tokens.accessToken);
3. Change app.component.html to update the login and logout buttons:
<button *ngif="!isAuthenticated" (click)=“oktaAuth.loginRedirect(’/’)”> Login </button>
<button *ngif=“isAuthenticated” (click)=“oktaAuth.logout(’/’)”> Logout </button>
Kouver Bingham
Thank you. Seriously thanks for being so prompt
One quirk though:
Testing this on my Mac machine, exactly as you have described produces no errors.
Testing this on my Windows machine, produces the following error in the app.component.html
Property ‘loginRedirect’ does not exist on type ‘OktaAuthService’.
Changing this back to the original button
<button *ngif="!isAuthenticated" (click)=“oktaAuth.login(’/’)”> Login </button>
Fixes the error.
I’m guessing I can just use the latter implementation? It seems to work as expected.
Matt Raible
Yes, using oktaAuth.login(’/’) should work just fine. I’m not sure why you’re getting the 401, but you might want to make sure you have http://localhost:4200 as a Trusted Origin. You can add it under API > Trusted Origins.
Matt Raible
Hello Kouver,
We’ve updated our Okta Auth JS and Angular guide to use Okta Auth JS 4.x. You can see the change in this pull request.
Kouver Bingham
I’m still getting these 401 errors. I don’t understand the “Trusted Origins” section. I’m not using the API. Why should I need to use the API, if just implementing the above guide exactly as it says? I’m just building a single stactic page. Furthermore, the origin I’m using is the “Login Initiate URI” just like guide says. Can you clarify what is happening here?
Kouver Bingham
Furthermore, when clicking the “Login” button on the home page, redirects straight to the callback component, without prompting a login page.
Kouver Bingham
This was working before those pull changes were made, and simply making the changes you suggested above. Now its not
Matt Raible
Looking closer at your Okta URL above, it seems that you’re not using your “org” auth server rather than a “custom” auth server, which comes by default with developer accounts (and is badly-named “default”).
If you change the issuer to the following, does it work?
ISSUER = 'https://{yourOktaDomain}/oauth2/default’
If you don’t have a default authorization server, you can get one for free with a developer account at developer.okta.com/signup.
You can read more about this in the Difference between Okta as an Authorization Server vs Custom Authorization Server.
Kouver Bingham
Same error. Although, this time i’m able to arrive at Callback component after logging in, but can’t hit protected.
Kouver Bingham
I’ll reach out to our support team to address this.
Kouver Bingham
@mattraible There aren’t a lot of people at my org who support angular. We’re doing a lot of work with you guys, but thus far not in angular. Is there a Angular support rep I can get in contact with to help? And perhaps take this thread off this page?
Matt Raible
If you send an email to developers@okta.com with your issue, they should be able to help you. I work with our support team regularly so I’ll be in the loop as well.
You should be able to delete any of your comments you’ve posted here. If you can’t please let me know and I can do it. I think your first few comments will be helpful for developers trying to use the latest version.
Utsav Bhakre
I have used the angular-oauth2-oidc package And working fine. I am successfully Authenticating and getting user claims, id token, access token, etc.
But when I implement HashLocationStrategy then I am authenticating properly but not getting user claims, id token, access token, etc.
I got one workaround to set ‘initialNavigation: false’ in the Routing module.
Is there any alternate solution for this issue?
