Identity Server: Redirect after login and logout in Angular?

Question

I use IdentityServer in an Angular project based on .NET Core and I use the Identity Server razor login page by modifying it. Except from this login page, I use Angular pages and redirect the related pages using lazy-loading feature in Angular.

However, I need some different scenarios for after login and logout as explained below:

1. After user login, I want to redirect a specific page. How can I set this page? In the IdentityServer action methods, or in the login button's onClick action? I can also use href via a hperlink?

2. Should I use an ActionLink , etc as the login page is razor by redirecting the page to a Controller and then open an Angular page? Or is it better to use a href or routerlink property for the login button and call the related Angular route easily?

3. For the logout, I want to redirect an Angular page. Should I set it in the logout or logout callback properties of IdentityServer configuration?

Any help would be appreciated.

Update: Here is the constant file that can be used for redirect or callback setup:

export const LogoutActions = {
  LogoutCallback: 'logout-callback',
  Logout: 'logout',
  LoggedOut: 'logged-out'
};

export const LoginActions = {
  Login: 'login',
  LoginCallback: 'login-callback',
  LoginFailed: 'login-failed',
  Profile: 'profile',
  Register: 'register'
};

let applicationPaths: ApplicationPathsType = {
  DefaultLoginRedirectPath: '/',
  ApiAuthorizationClientConfigurationUrl: `/_configuration/${ApplicationName}`,
  Login: `authentication/${LoginActions.Login}`,
  LoginFailed: `authentication/${LoginActions.LoginFailed}`,
  LoginCallback: `authentication/${LoginActions.LoginCallback}`,
  Register: `authentication/${LoginActions.Register}`,
  Profile: `authentication/${LoginActions.Profile}`,
  LogOut: `authentication/${LogoutActions.Logout}`,
  LoggedOut: `authentication/${LogoutActions.LoggedOut}`,
  LogOutCallback: `authentication/${LogoutActions.LogoutCallback}`,
  LoginPathComponents: [],
  LoginFailedPathComponents: [],
  LoginCallbackPathComponents: [],
  RegisterPathComponents: [],
  ProfilePathComponents: [],
  LogOutPathComponents: [],
  LoggedOutPathComponents: [],
  LogOutCallbackPathComponents: [],
  IdentityRegisterPath: '/Identity/Account/Register',
  IdentityManagePath: '/Identity/Account/Manage'
};

applicationPaths = {
  ...applicationPaths,
  LoginPathComponents: applicationPaths.Login.split('/'),
  LoginFailedPathComponents: applicationPaths.LoginFailed.split('/'),
  RegisterPathComponents: applicationPaths.Register.split('/'),
  ProfilePathComponents: applicationPaths.Profile.split('/'),
  LogOutPathComponents: applicationPaths.LogOut.split('/'),
  LoggedOutPathComponents: applicationPaths.LoggedOut.split('/'),
  LogOutCallbackPathComponents: applicationPaths.LogOutCallback.split('/')
};

Answer 1

What you are going to want to do is set up your IdentityServer client configuration to to point to those different components via the RedirectUris and PostLogoutRedirectUris . Then within the Angular application, when you are configuring the UserManager instance set the redirect_uri and post_logout_redirect_uri where you want the Identity Server to redirect to after the Login/Logout methods complete. These configurations need to match up between the client and server otherwise IdentityServer will reject the request. A sample app from Brock Allen for Angular sheds some light on this, Angular oidc-client.js .

Once the configuration is completed the redirects should be automatic and you shouldn't need to modify the redirects in IdentityServer. That only covers the Login/Logout flows. I see you have register and failed login definitions within the Angular app. What you could do is modify the View Controllers to redirect the user via a return Redirect("some\url\to\angular\component"); to send the user to that component.

Answer 2

Identity Server: Redirect after login in Angular

api-authorization.constants.ts

let applicationPaths: ApplicationPathsType = {
  DefaultLoginRedirectPath: 'yourPath',
}