Facing issues while implementing Okta login page for a angular application

Questions OAuth/OIDC
1

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.

2

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:

2 Likes
3

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

4

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?

5

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

6

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

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

Let us know how it goes!

1 Like
7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.