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.
<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.
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.
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>
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.
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 https://developer.okta.com/blog/2017/04/17/angular-authentication-with-oidc. 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 = ‘https://dev-912250.oktapreview.com/oauth2/default’;
this.oauthService.tokenValidationHandler = new JwksValidationHandler();
this.oauthService.responseType = ‘id_token’;
this.oauthService.setStorage(localStorage);
this.oauthService.oidc = true; //this.oauthService.postLogoutRedirectUri=""; //this.oauthService.silentRefresh
this.oauthService.events.subscribe(({ type }: OAuthEvent) => {
switch (type) {
case ‘token_received’:
{
console.log(‘token received event firred’);
this.router.navigate([this.oauthService.state]);
break;
}
}
});
// Load Discovery Document and then try to login the user
this.oauthService.loadDiscoveryDocument().then(() => {
this.oauthService.tryLogin().then (() => {
console.log(‘login successful’);
this.oauthService.setupAutomaticSilentRefresh();
}
)
});
}
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.
I believe you need to use setOriginalUri these days (note that this link is to the AuthJS docs, which the Angular SDK is built on top of) to redirect somewhere specific after login is completed on the callback.