After login Service Portal redirects to modalLogin page instead of home page - Support and Troubleshooting

After login Service Portal redirects to modalLogin page instead of home page Issue .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #00718f; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } }  When you log in through Service Portal, the relay URL redirects you to the modalLogin page instead of the expected home page (nav_page). This article explains how to resolve the issue.

Release .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #00718f; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } All supported releases

Cause .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #00718f; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } The default header widget includes the modalLogin Angular ng-template. If the template is no longer associated with the widget, the widget tries to go to the mmodalLogin instead. This value is added to the relay state, and after authentication, you are redirected to the modalLogin page.

Resolution .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #00718f; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } The Service Portal header bar that contains the Login link is called the Header widget. By default, this widget is the Stock Header widget and is stored in the sp_widget table. It is specifically designed to be the Service Portal header.

The Portal Theme contains the reference field that determines which widget the Service Portal uses.

To verify which header widget the portal uses:

Identify which Service Portal you are accessing. Check the URL and find the suffix after .com . For example, demonightlykingston.service-now.com/sp?id=sc_home is using the sp Service Portal. Go to the sp_portal list and search the URL suffix field. Open the portal record. In the Theme reference field, open the linked record to view the sp_theme record. In the theme record, check the Header reference field. By default, it should point to Stock Header, but this may have been modified. To confirm if the Header widget includes the modalLogin template:

Open the Header widget and scroll to the bottom of the page. In the Angular ng-templates related list, look for a record called modalLogin. If the modalLogin template is missing:

Go to the sp_ng_template list and search for modalLogin. If found, open the record and check the Widget reference field. Angular templates are one-to-one with widgets (one record per widget). If you clone the Stock Header widget, you must do one of the following:

Create a new Angular ng-template with a unique name. Because the widget calls modalLogin by name, update the Client controller function: $scope.openLogin = function () { $scope.modalInstance = $uibModal.open({ templateUrl: 'modalLogin', scope: $scope }); If the modalLogin sp_ng_template record does not exist, import it from the default system. Edit the Widget reference field so it points to the Header widget being used when you select Login. This issue occurs because the widget tries to open the modal window modalLogin. The widget is expected to have the Angular template. If the template does not exist, the widget instead tries to navigate to modalLogin via URL, which is added to the relay state. After authentication, you are redirected to the modalLogin page.