Angular Authentication with OpenID Connect and Okta in 20 Minutes

Matt Raible

To be honest, I’m not sure. I haven’t used the angular-oauth2-oidc package in a couple years. I use Okta’s Angular SDK these days.

Pooja Dabholker

Hi sir,I had an angular project,an i integrated your code.I am not getting any error as such,but i am not redirected to okta page.when i check my network log.I have 200 ok for this url.I have no idea how it is trying to hit this url and why its not getting redirected.please help.https://dev-82919577
.okta.com/oauth2/default/.well-known/openid-configuration

Matt Raible

This is part of the OIDC flow where that URL is fetched to see endpoints and capabilities of your authorization server. Learn more by checking out our Angular SDK:
https://github.com/okta/okt…

Pooja Dabholker

Thank you sir for your time and reply ,however i am still facing 302 error on this particular url shown in the image attached.i added cors in my okta app https://uploads.disquscdn.c…

Pooja Dabholker

Hence my page is not redirected to okta login page

Matt Raible

It seems you’re using React and not Angular because you have 3000 for your port number. Since I’m not sure your comment is relevant to this post, I kindly ask that you post your problem on our developer forums with steps to reproduce. You can tag me (@mraible) if you like.

If you think it’s a bug in the SDK you’re using, you’ll get faster results from entering an issue in its GitHub repository. Just google “Okta React SDK” (or something similar) to find it. Finally, if you think it’s a bug on the Okta side, please send an email to developers@okta.com to create a support ticket.

Pooja Dabholker

but it is redirecting to the redirect url configured in okta application

Pooja Dabholker

i am working on an existing angular 4 project.and used “angular-oauth2-oidc”: “^2.1.8”, as it was compatible.could the version be an issue?

Matt Raible

Possibly. I haven’t used that library in a few years. I switched to the Okta Angular SDK a while back. I’d suggest trying the latest version, which is 10.0.0.

Pooja Dabholker

hi sir,
I downloaded your project from https://github.com/oktadeve… and tried running yet,I faced the same issue that when i click on login button it redirects me to the login page instead of okta login page https://uploads.disquscdn.c…

Pooja Dabholker

however i see a 200 ok for the request url…I am not sure why I do not see the okta login page

Matt Raible

This post was written almost four years ago, so it’s quite outdated. You probably have to enable Implicit as a grant type on your Okta app for it to work. I’d recommend reading Build Secure Login for Your Angular App for an updated version. I just updated it last week. :slight_smile:

Pooja Dabholker

Hello Matt,
Thank you for your reply,I was successfully able to get redirected to okta login page,Also on getting authenticated I was redirected back to the app.
Currently I am facing just one issue,ie this.oauthService.hasValidIdToken() always returns me a null,even after successful login to okta.Could you please help me here.
I am trying to implement multi factor authentication where okta is the second level of authentication,hence I am not using the latest example which embeds the login form directly into your application.

Matt Raible

Do you have openid, email, and profile as your scopes in your Okta Angular SDK config?


const oktaConfig = {
issuer: ‘<%= issuer %>’,
redirectUri: ‘/callback’,
clientId: ‘<%= clientId %>’,
scopes: [‘openid’, ‘email’, ‘profile’]
};

If so, I’d suggest you enter an issue in the SDK’s GitHub repo for additional support.

M E

Hi Sir, How can we implement 2 factor okta authentication in angular app which uses a custom login page like the above one?

Brian Demers

Prompting for 2-factor [Okta calls this multi-factor (MFA)], is configured via the Okta Admin Console

This guide should walk you through the process of setting it up:
https://developer.okta.com/…