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


#1

Hi

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 if you need to see any other code fragments or setup.

Thanks much for your help.


#2

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

Cc @jmelberg and @mraible


#3

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.

Thanks.

Aakash.


#4

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.


#5

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.

    <!--Navbar-->
<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>
        <!-- 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>
            <li class="nav-item">
                <a class="nav-link waves-light" mdbRippleRadius>Consulting</a>
            </li>
            <li class="nav-item">
                <a class="nav-link waves-light" mdbRippleRadius>Blog</a>
            </li>
        </ul>
          <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>
                <li class="nav-item">
                        <a role="button" class="nav-link waves-light" mdbRippleRadius *ngIf="oktaAuth.isAuthenticated()" (click)="oktaAuth.logout()">Logout</a>
                </li>
                <li class="nav-item">
                        <a role="button" class="nav-link waves-light" mdbRippleRadius *ngIf="!oktaAuth.isAuthenticated()">Sign Up</a>
                </li>
              </ul>
        <!-- Links -->

    </links>

    <!-- Collapsible content -->
</mdb-navbar>
<!--/.Navbar-->

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.

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

#6

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

<p>
  userdashboard works!
</p>

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';

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

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

  ngOnInit() {
  }

}

#7

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: https://github.com/okta/okta-oidc-js/blob/master/packages/okta-angular/src/okta/okta.service.ts#L114:L116


#8

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.