Implicit Callback redirects to the Angular component and then to homepage automatically

Question

So I connected my Angular App to Okta login functionality.

Here is the scenario - Below is the routes setup. When the user lands on the site localhost home is displayed - works fine. User clicks on Login button on Navbar, the redirect to Okta login page works as well. Then the Users enters the credentials and authenticates successfully the redirect to localhost implicit/callback is triggered and it should now display the localhost secureuserhome and stop, instead it automatically redirects to localhost home again. At this point if I press the browser back button i can see the secureuserhome page that the callback should have stopped at. I need some help why the callback redirects to the homepage and not just the callback component.

const routes: Routes = [
  {path: '', redirectTo: '/home', pathMatch: 'full'},
  { path: 'home', component: ToolsComponent },
  { path: 'tool1lm', component: Tool1learnmoreComponent },
  { path: 'tool1try', component: Tool1trialComponent},
  { path: 'implicit/callback', redirectTo: '/secureuserhome', pathMatch: 'full'},
  { path: 'secureuserhome', component: SecureuserhomeComponent}
];

Here is the app.component.html setup.

<app-navbar></app-navbar>
<br>
<p class = "lead text-center">{{headermessage}}</p>
<router-outlet></router-outlet>

The secureuserhome template is below. My understanding is when secureuserhome gets called this html should be displayed in place of the router outlet along with the other stuff in app component html above.

<!--Card-->
<div class="container">
<div class="card card-cascade">
    <!--Card image-->
    <div class="view gradient-card-header blue-gradient">
        <h2 class="h2-responsive">Hello!</h2>
        <p>I am Authenticated...</p>
    </div>
    <!--/Card image-->
    <!--Card content-->
    <div class="card-body text-center">
        <p class="card-text">Okta Login Successful</p>
    </div>
    <!--/.Card content-->
</div>
</div>
<!--/.Card-->

Let me know I should provide any other code fragments or setup.

score 0 · Answer 1 · answered May 04 '18 at 17:45

The problem seems to be with routing and redirect URL. I have implemented Okta exampleand this is what my routing looks like

export function onAuthRequired({ oktaAuth, router }) {
  // Redirect the user to your custom login page
     router.navigate(['/login']);
}

const appRoutes: Routes = [
  {
    path: 'implicit/callback',
    component: OktaCallbackComponent
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'protected',
    component: ProtectedComponent,
    canActivate: [ OktaAuthGuard ],
    data: {
      onAuthRequired
    }
  }

Hope this helps :)

Implicit Callback redirects to the Angular component and then to homepage automatically

1 Answers1