Build Secure Login for Your Angular App
Build an Angular application with authentication, a step-by-step tutorial.
Madhav Phuyel
Hello, I follow exactly what you present in this article. when i run the app (ng serve -o), I got below error message. Please help
Component OktaCallbackComponent is not part of any NgModule or the module has not been imported into your module
Matt Raible
Are you using the Okta Angular SDK version 1.0.7? If you are, you might try comparing your code to the example on GitHub: https://github.com/oktadeve….
Madhav Phuyel
Hello Matt, Thanks for quick response. I’m using version 1.2.0 ("@okta/okta-angular": “^1.2.0”)
Madhav Phuyel
As you see in below screenshot, Its is saying there is no component called OktaCallbackComponent ({ path: ‘implicit/callback’, component: OktaCallbackComponent }) https://uploads.disquscdn.c…
Matt Raible
That might be the issue, but can you please check something else first? You may have missed this part of the tutorial:
Open src/app/app-routing.module.ts and add the following import to the top of the file.
import { OktaCallbackComponent, OktaAuthGuard } from ‘@okta/okta-angular’;
In the code above and in the Okta dashboard settings, you have specified that implicit/callback route should handle the login callback. To register the OktaCallbackComponent with this route, add the following entry to the routes setting.
{ path: ‘implicit/callback’, component: OktaCallbackComponent }
Madhav Phuyel
Hello Matt, I I did have this in my import. See screenshot below. Quick question, don’t we need to import this in the app.module.ts as well?
Madhav Phuyel
Matt Raible
Looking at the documentation for this component, it appears you need to include it in declarations as well. Can you please try that?
Madhav Phuyel
I did that but now i’m getting different error message "Unexpected directive ‘OktaCallbackComponent’ imported by the module ‘AppModule’"
Looking at documentation, why it declare route in “app.module” file? Also, Once it’s imported “OktaCallbackComponent” why it’s added in declarations instead of "imports’. This is so confusing.
Aaron Granick
It looks like you need to add OktaAuthModule to your @NgModule’s imports. This shows how to import the OktaAuthModule and provide the OKTA_CONFIG https://github.com/okta/okt…
Akash
Hello I am not able to register hashmap URL as a callbak URL getting error
Error: The redirect URIs must not contain a fragment identifier
My Application support lazy loading please help how can I go with hashmap URL
Matt Raible
You need to configure your Angular app to use history mode or configure your webserver to redirect from the callback URL to your index.html with the hash as part of the URL.
David Wood
Very nice article. Easy to follow. Was able to have it working with my existing app the first time through!
dennis602
I’m developing an Angular 8 application and putting the build into an MVC WebApi wwwroot folder. Trying to understand the OktaCallbackComponent. Like, how does it know where to go or what component to display?
I’m getting an error for the Login Redirect. I’m confused on this part. In my routes.ts I have : {path: ‘implicit/callback’, component: OktaCallbackComponent}
Error I’m getting: No webpage was found for the web address: http://localhost:4200/implicit/callback#id_token=
My Question is how does the application know where to route to wit the above route? It says co to OktaCallbackComponent but that is not a component I created.If I set the implicit/callback to an actual component I created will that not store the user data/tokens? I thought the OktaCallbackComponent stored user information?
Matt Raible
The default behavior is to redirect you back to where you came from. I’m not sure what you need to do specifically to change it to a different URL, but our Angular SDK docs might help. https://github.com/okta/okt…
Matt Raible
This is likely happening because you don’t have your web server configured to serve a SPA. Since Angular is using history mode routing, you need to tell your web server to route all 404 requests to index.html and let Angular handle the routes.
dennis602
I’m using Agnular 8 and putting the build into a Web Api project and using Okta within the Angular application and I’m deploying to IIS. Within the route folder there is a folder called wwwroot that has the index.html page. Not sure how I point the applicaiton to the index.html page. I’m currently getting an error:
page can’t be found
No webpage was found for the web address: http://mysite/implicit/callback#id_token=SuperLongToken
Matt Raible
Please don’t cross-post to Stack Overflow and our blog at the same time. We see both. 
I posted an answer to Stack Overflow, but I’ll repeat it here.
Angular 8 uses HTML5’s history mode by default, which means you have to configure your web server to send all 404s to index.html. This tutorial looks like it’ll help to configure IIS:
dv
Thanks for the article.
It’s not clear on the widget code what
this.oktaAuth.loginRedirect(’/’, { sessionToken: res.session.token });
is doing for me. If the auth guard from your app reroutes to the widget and they successfully log in, how do you redirect to where they were trying to go to originally?