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

Veda Gangatkar

Thanks Matt. Its working with the previous version.
I have one more question. okta-login-container in the login screen loads after couple of seconds and also when user logs out, it will be redirected to login screen and again okta-login-container loads after some seconds. How do we avoid this?

Matt Raible

Are you on a slow internet connection? I haven’t seen this problem. I’m unsure what’s causing this. Are you able to reproduce the problem on multiple machines in various locations?

Veda Gangatkar

I am yet to try on multiple machines / locations. Let me try and will let you know.

Venkat Annapragada

How to make our logo appear on the Okta Sign In screen?

Matt Raible

You can use our Live Widget Demo to see customization options you can use for the Sign-In Widget.

Venkat Annapragada

Thanks Matt. It is working.

Venkat Annapragada

When deploying this on Server the Okta widget is not showing up. But locally it is working fine. We use the traditional angular AOT to bundle the file. Please let me know if I need to consider something?

Matt Raible

Do you have anything in your browser’s developer console that indicates what the error might be?

Venkat Annapragada

There are no errors in the console. The form is not loading up when we deploy it on Server.

Matt Raible

It’s very difficult for me to help you debug this situation if there are no errors. If you take the same application and run it locally, does it work? If so, I suspect you might have a Content Security Policy or something on your server that prevents it from loading some scripts.

Venkat Annapragada

Yes the same application is running in my local. I think we are using some policy like Content Security. Can you please guide me how to track which script is blocking?

Matt Raible

I’m not sure how to debug CSP headers, but you might try running your production URL through securityheaders.com. Or, if you’re loading scripts from a CDN: allow the CDN URL in your CSP settings. Finally, you could download the CDN files locally and update your HTML/CSS to point to them.

Venkat Annapragada

Actually we are not using CDN instead we are using NPM for our Angular application.

Matt Raible

At this point, it’s probably best to send an email to developers@okta.com to create a support ticket.

Venkat Annapragada

Sure thanks for helping me.

Raj

Hi, I am new to okta and angular as well, I have created account in okta and changed the baseurl by following steps mentioned in gihub. when I start the application and give my username and details, I see “We found some errors. Please review the form and make corrections.” when I debugged, it’s not hitting okta server. I am using npm to build the application.

Raj

issue resolved with changing baseUrl as domain.okta.com

Hilfi Tajul

Hi, im new to okta. im trying to use okta as my user management. im developing angular. my i know the difference between development setup and production setup for okta?

Matt Raible

It should be the same, except you’ll need to add login/logout redirect URIs and trusted origins (in Okta) for your production URLs.

dennis602

How would you pass roles? I created my groups and if I create an MVC application it works fine if I add [Authorize(Roles = “admin”)]. But, with an angular app and a web api I can figure it out. This example works just with [Authorize] but once I try to add a role it says I’m not authorized. Is there something that needs to be done in the web api, angular app, or both? I thought maybe I just needed to add “group” to the scope in the app.module but that didn’t work.