Angular Authentication with OpenID Connect and Okta in 20 Minutes

Matt Raible

Hello Octavio! The OIN only supports SAML and our proprietary SWA (Secure Web Authentication) at this point. We plan to add OIDC support before the end of the year.

Octavio

Awesome news Matt, thanks for your feedback!
Btw cool 21 window! 68 KG vert waiting in my garage to complete restoration. =)

Matt Raible

It looks like this URL has changed to https://manfredsteyer.githu…

Chuck Canning

Does this work anymore? I downloaded from Git and started from the OAuth section but I keep getting

angular-oauth2-oidc.js:1043 Error in initImplicitFlow TypeError: Cannot read property ‘responseType’ of null
at angular-oauth2-oidc.js:943
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
at Object.onInvoke (core.js:4071)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
at Zone.push…/node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
at zone.js:872
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4062)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push…/node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)

Matt Raible

Hello Chuck: I tried grabbing the code from this example’s GitHub repo, ran npm install, then changed the following files to use my Okta domain and client ID.


src/app/app.component.ts
src/app/shared/auth/okta.auth.wrapper.ts

I’m unable to reproduce this issue. Did you update your files with your app’s settings?

Chuck Canning

I did. I am using all the latest libraries. Could that be the issue? I haven’t made as far as the auth wrapper. It is still failing right after the auth.guard.service.ts.

Matt Raible

Can you please enter a bug in this project’s GitHub repo with steps to reproduce the problem? If you include your package.json, maybe I can figure out what’s causing the problem.

Krzysztof Rak

I have the same issue.

Matt Raible

This happens when you’re using a newer version of angular-oauth2-oidc than I used to create this post. I’ll update it soon to specify the version numbers to everything works.

In the meantime, here’s the code you need in app.component.ts to work with recent versions:


import { OAuthService, JwksValidationHandler, AuthConfig } from ‘angular-oauth2-oidc’;

export const authConfig: AuthConfig = {
issuer: ‘https://{yourOktaDomain}/oauth2/default’,
redirectUri: window.location.origin,
clientId: ‘{yourClientId}’,
scope: ‘openid profile email’
};


export class AppComponent {

constructor(private oauthService: OAuthService) {
this.oauthService.configure(authConfig);
this.oauthService.tokenValidationHandler = new JwksValidationHandler();
this.oauthService.loadDiscoveryDocumentAndTryLogin();
}
}

Phanikumar Balla

I have followed the same steps, but Am getting below error, Please help…
error: "invalid_scope"
error_description: "One+or+more+scopes+are+not+configured+for+the+authorization+server+resource."
state: "yG1uD8EEveWpFTEqCSVRa5hBWNDNAIhYgxE34w7b"

ERROR Error: Uncaught (in promise): OAuthErrorEvent: {“type”:“token_error”,“reason”:{},“params”:{“state”:“yG1uD8EEveWpFTEqCSVRa5hBWNDNAIhYgxE34w7b”,“error”:“invalid_scope”,“error_description”:“One+or+more+scopes+are+not+configured+for+the+authorization+server+resource.”}}
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:16147)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push…/node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
at ZoneTask.push…/node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
at invokeTask (zone.js:1540)

Matt Raible

Hello,

This happens when you use angular-oauth2-oidc v5 with this tutorial. I updated it today to specify the version numbers I used. If you’d like to see how to use angular-oauth2-oidc v5, please see this post.

Phanikumar Balla

Thank you its working with respective versions

Gilles Morieux

Hi Matt
Thanks for your works
After misunderstood why… does not return all my claims …and some research it seems by default Manfred’s oidc lib used hard codes response type to ‘id_token token’ which is not correct. The response type for implicit is ‘token’, ‘id_token’ or ‘id_token token’ . So because I need to use groups scope (for rbac) Fat token is required and scope ‘id_token token’ return only Thin token with basic claims . No hope
I think will have to use another library, which does not help me, your work was precious …
Regards

Mark M

I had this error and it disappeared when I got to the chapter Authentication with the Okta Auth SDK, the responseType etc isn’t yet declared before that.
Probably that, otherwise it was because I didn’t use the specific versions at npm install angular-oauth2-oidc@3.1.4 rxjs-compat@6.1.0

Gilles Morieux

and fyi : working fine with Okta SDK: oidc middleware & others based on express samples

Matt Raible

Hello Gilles,

You can configure the scopes sent. Here’s the documentation.

NOTE: This is the latest documentation and might not be the latest version used in this post.

You could also use our Okta Angular SDK.

Archana Patil

hi, I did the same implementation but when I click on login button i am getting 404 okta error page. what can goes wrong here?

priyanka raikhere

https://uploads.disquscdn.c…

hello sir
getting same error after Javascript is enabled in my windows 10 google chrome .

Matt Raible

Usually when there’s a 400 error it means that the Login redirect URI that you’re sending from your app doesn’t match what’s configured in Okta. The URI that it’s trying to use can be found in the request as a parameter.

Matt Raible

Are you using an Okta developer account? An Okta IT Trial account won’t work for this tutorial.