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


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.

<p class = "lead text-center">{{headermessage}}</p>

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.

<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>
    <!--/Card image-->
    <!--Card content-->
    <div class="card-body text-center">
        <p class="card-text">Okta Login Successful</p>
    <!--/.Card content-->

Let me know if you need to see any other code fragments or setup.

Thanks much for your help.

Are you using @okta/okta-angular, or a different package?

Cc @jmelberg and @mraible

Hi Nate,

Yes I am using @okta/okta-angular.

Here is my import { OktaAuthModule, OktaCallbackComponent} from ‘@okta/okta-angular’; in app.module.ts

Let me know if you need any other information.



Do you have an example of the problem on GitHub or somewhere else? It can be tricky to see the issue without all of the code.

Hi Nate,

Sorry for the delay in replying. I do not have a public repo for this project, but here is some more explanation.

I have a navbar with the login and logout buttons. below is the template for the navbar. You will notice that the Login, Logout and SignUp buttons are displayed on the navbar based on authentication state. It works when I use the OktaCallbackComponent as the component in routes /implicit/callback. However once the user is authenticated I was trying to load a new component UserDashboardComponent for /implicit/callback. This is when the trouble starts. Once authenticated this component is displayed but the navbar button state does not change anymore.

<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark #880e4f pink darken-4">
    <!-- Navbar brand -->
    <logo><nav><a routerLink="/home" class="navbar-brand">{{navbar.title}}</a></nav></logo>
    <!-- Collapsible content -->
        <!-- Links -->
        <ul class="navbar-nav mr-auto">
         <!--   <li class="nav-item">
                <nav><a routerLink="/home" class="nav-link waves-light" mdbRippleRadius>Home<span class="sr-only">(current)</span></a></nav>
            </li> -->
            <li class="nav-item">
                <a class="nav-link waves-light" mdbRippleRadius>Pricing</a>
            <li class="nav-item">
                <a class="nav-link waves-light" mdbRippleRadius>Consulting</a>
            <li class="nav-item">
                <a class="nav-link waves-light" mdbRippleRadius>Blog</a>
          <ul class="navbar-nav navbar-right">
                <li class="nav-item">
                  <a role="button" class="nav-link waves-light" mdbRippleRadius *ngIf="!oktaAuth.isAuthenticated()" (click)="oktaAuth.loginRedirect()">Login</a>
                <li class="nav-item">
                        <a role="button" class="nav-link waves-light" mdbRippleRadius *ngIf="oktaAuth.isAuthenticated()" (click)="oktaAuth.logout()">Logout</a>
                <li class="nav-item">
                        <a role="button" class="nav-link waves-light" mdbRippleRadius *ngIf="!oktaAuth.isAuthenticated()">Sign Up</a>
        <!-- Links -->


    <!-- Collapsible content -->

This navbar is included in the rootapp template where the router outlet is located. Do I need to do anything inside the UserDashboardComponent class or how do I display userdashboard component if I am using OktaCallbackComponent for /implicit/callback. Thanks for your help.

<p class = "lead text-center">{{headermessage}}</p>

I have another update. I have my /implicit/callback route set to UserDashboardComponent. Below is the template for the UserDashboardComponent.

  userdashboard works!

Below is the component class. Once the authentication happens I want to display this component along with the navbar buttons toggled based on if authenticated is true or false. Notice once I added the oktaAuth.handleAuthentication(); the navbar buttons are toggling fine based on authentication state but now the UserDashboardComponent automatically redirects to the root localhost:3000.

import { Component, OnInit } from '@angular/core';
import { OktaAuthService } from '@okta/okta-angular';

  selector: 'app-userdashboard',
  templateUrl: './userdashboard.component.html',
  styleUrls: ['./userdashboard.component.scss']
export class UserdashboardComponent implements OnInit {

  constructor(private oktaAuth: OktaAuthService) { oktaAuth.handleAuthentication(); }

  ngOnInit() {


The default behavior is to redirect back to the page the kicked off the login flow. You should be able to override that by calling this function to set the referrerPath:

1 Like

Sorry for the delay in replying to this. @mraible thanks a lot setFromUri works exactly how I wanted it. This resolves the issue and answers my question.



I am implementing the Okta implicit authentication workflow as mentioned in I am able to implement the authentication successfully, however after authenticating the site is not getting redirected back to the request url. I have the following configuration in appcomponent

constructor(private oauthService: OAuthService, private router: Router) {
this.oauthService.redirectUri = window.location.origin;
this.oauthService.clientId = ‘0oadqq’;
this.oauthService.scope = ‘openid profile email’;
this.oauthService.issuer = ‘’;
this.oauthService.tokenValidationHandler = new JwksValidationHandler();
this.oauthService.responseType = ‘id_token’;
this.oauthService.oidc = true;
//this.oauthService.silentRefresh{ type }: OAuthEvent) => {
switch (type) {
case ‘token_received’:
console.log(‘token received event firred’);
// Load Discovery Document and then try to login the user
this.oauthService.loadDiscoveryDocument().then(() => {
this.oauthService.tryLogin().then (() => {
console.log(‘login successful’);

Routing file
const routes: Routes = [
path: ‘protected’,
component: ProtectedComponent,
canActivate: [AuthGuardService]
{path: ‘login’, component: LoginComponent},
{path: ‘’, redirectTo: ‘login’, pathMatch: ‘full’},
{path: ‘**’, redirectTo: ‘login’},

Can you please help to check what is the issue? After logging in, it always goes to ‘’ path

I’d try changing this.oauthService.redirectUri = window.location.origin; to be a hard-coded URL for your app. Maybe something like this.oauthService.redirectUri = 'http://localhost:4200';

If I change to constant path like this.oauthService.redirectUri = ‘http://localhost:4200’ it is working. Is it possible to have the redirect url dynamically changing or capture what was the requested url and redirect to the requested url after logging in?

We have a requirement to launch the angular application from another application and when it is being launched after logging in, I want the site to get redirected to the same url which was being called

Hi guys I having the same issue as @alicehelen84. We are launching the application from another app. Then we as for login. When we launch from other app, we are hitting with a particular URL. After logging I need to direct to the URL that we are hit from the another app.

Have you tried my recommendation from above?

I have tried but that did not work. So I had to use custom Auth Guard and store the previous URL, instead of using OktaAuthGuard.