# Facing issues while implementing Okta login page for a angular application **URL:** \ **Category:** OAuth/OIDC\ **Tags:** angular\ **Created:** [January 10, 2024, 11:46am UTC](https://devforum.okta.com/t/facing-issues-while-implementing-okta-login-page-for-a-angular-application/26308 "2024-01-10T11:46:34Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![jaswanthteki](https://avatars.discourse-cdn.com/v4/letter/j/2acd7d/32.png) [@jaswanthteki](https://devforum.okta.com/u/jaswanthteki)\ **Post date:** [January 10, 2024, 11:46am UTC](https://devforum.okta.com/t/facing-issues-while-implementing-okta-login-page-for-a-angular-application/26308/1 "2024-01-10T11:46:34Z")
They gave me a application which has a home page says welcome and a utilites button which will display table to search when we click it . so i have to implement okta login page for this application. these are the step i have followed , in environment.ts file i have created a oktaconfig function intialized okta details in it i have given redirect uri as localhost:8080/authorization-code/callback in app.module.ts under imports i have added oktaauthmodule and in providers i have added okta\_config usevalue environmnet.oktaconfig in app.routing-module.ts file under routes i have added one route with path aauthorization-code/callback , component oktacallbackcomponent and added canactivate oktaauthguard to remaing routes like home and utilities . that the code i have added so the issue is i can see the okta login page but when i succesfully logged in i am not able to see the welcome page and utilites functions are also not working please help me out. ---
**Author:** ![alisaduncan](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/alisaduncan/32/3429_2.png) [@alisaduncan](https://devforum.okta.com/u/alisaduncan)\ **Post date:** [January 10, 2024, 2:58pm UTC](https://devforum.okta.com/t/facing-issues-while-implementing-okta-login-page-for-a-angular-application/26308/2 "2024-01-10T14:58:11Z")
Hi there @jaswanthteki ! Can you help me understand the layout of your app code? Is there a login button on the home page to start the authentication process? What route is your redirect callback set to? Can you share your routing module? In case you haven’t seen it, here’s an example Angular app with a home page, 2 separate routes, plus authentication: > **[GitHub - okta-samples/okta-angular-quickstart: Quickstart sample code for an...](https://github.com/okta-samples/okta-angular-quickstart)** > > Quickstart sample code for an Angular app using Okta redirect model - GitHub - okta-samples/okta-angular-quickstart: Quickstart sample code for an Angular app using Okta redirect model ---
**Author:** ![jaswanthteki](https://avatars.discourse-cdn.com/v4/letter/j/2acd7d/32.png) [@jaswanthteki](https://devforum.okta.com/u/jaswanthteki)\ **Post date:** [January 12, 2024, 12:30pm UTC](https://devforum.okta.com/t/facing-issues-while-implementing-okta-login-page-for-a-angular-application/26308/3 "2024-01-12T12:30:51Z")
Hi I am facing a issue , in my application i have added code for okta login page and and added canactivate oktaauthguard for home route then the home is not working its not going to /home map ---
**Author:** ![alisaduncan](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/alisaduncan/32/3429_2.png) [@alisaduncan](https://devforum.okta.com/u/alisaduncan)\ **Post date:** [January 13, 2024, 4:18am UTC](https://devforum.okta.com/t/facing-issues-while-implementing-okta-login-page-for-a-angular-application/26308/4 "2024-01-13T04:18:41Z")
Can you share your routing module path declaration? I’m having difficulty understanding if there’s a default route without the OktaAuthGuard. It sounds like a potential reason it’s not working is that you’re not authenticated before trying to navigate to `/home`. When you try navigating to `/home`, are you redirected to the Okta sign-in page? What happens if you enable route tracing to debug the routing for this path? ---
**Author:** ![jaswanthteki](https://avatars.discourse-cdn.com/v4/letter/j/2acd7d/32.png) [@jaswanthteki](https://devforum.okta.com/u/jaswanthteki)\ **Post date:** [January 16, 2024, 9:22am UTC](https://devforum.okta.com/t/facing-issues-while-implementing-okta-login-page-for-a-angular-application/26308/5 "2024-01-16T09:22:19Z")
Yes when i tried to hit the application url , i am getting okta login page but once i have logged in successfully i am unable to got to home page or any other functionaties button. const routes: Routes = [ { path: ‘authorization-code/callback’, component: OktaCallbackComponent, }, { path: ‘home’, component: HomeComponent, canActivate: [OktaAuthGuard] }, { path: ‘’, redirectTo: ‘/home’, pathMatch: ‘full’,canActivate: [OktaAuthGuard] }, { path: ‘utilities’, canActivate: [OktaAuthGuard], children: [ {path: ‘jms-hist’,component: JmsHistComponent}, { path: ‘pro-replay’, component: ProReplayComponent } ] }, { path: ‘\*\*’, redirectTo: ‘/home’,canActivate: [OktaAuthGuard] }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } this is my app-routing.module.ts ---
**Author:** ![alisaduncan](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/alisaduncan/32/3429_2.png) [@alisaduncan](https://devforum.okta.com/u/alisaduncan)\ **Post date:** [January 18, 2024, 6:22pm UTC](https://devforum.okta.com/t/facing-issues-while-implementing-okta-login-page-for-a-angular-application/26308/6 "2024-01-18T18:22:01Z")
Hi there @jaswanthteki , I tried this using the Angular Quickstart, and created a Home component housing the Okta login. I can sign in upon application load, sign in, and then see the menu (including Okta login). Please note, I did change your routing module code, as `CanActivate` guard cannot be combined with `redirect` in the path. I don’t think it’s in Angular documentation, but I see an error when trying to start the app. See this commit > > > Redirects in the router are processed before activations. This means that a canA…ctivate will > never execute if a route has a redirect. Rather than silently ignoring > the invalid config, developers should be notified so they know why it > doesn't work. > > Closes #18605 > The feature request for a function/class redirect is covered in #13373. > > PR Close #40067 There’s probably something else going on. Can you provide a repro, even a condensed one so I can investigate more? If not, you can try editing the Angular quickstart to match your setup > **[GitHub - okta-samples/okta-angular-quickstart: Quickstart sample code for an...](https://github.com/okta-samples/okta-angular-quickstart)** > > Quickstart sample code for an Angular app using Okta redirect model - GitHub - okta-samples/okta-angular-quickstart: Quickstart sample code for an Angular app using Okta redirect model Let us know how it goes! ---
**Author:** ![system](https://global.discourse-cdn.com/oktadev/original/1X/589c4c5f80de422d01f47cee7185a7fb8227835c.png) [@system](https://devforum.okta.com/u/system)\ **Post date:** [February 17, 2024, 6:22pm UTC](https://devforum.okta.com/t/facing-issues-while-implementing-okta-login-page-for-a-angular-application/26308/7 "2024-02-17T18:22:24Z")
Closed on February 17, 2024, 6:22pm UTC This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.