Hey all -
We configured a Knack app to use our organization’s SSO and it is working fine. Is there a way to hide the Knack login prompt? We have many users that continue to try using the Knack login instead of SSO because the SSO button is small compared to the local login prompt.
My preference would be to remove Knack’s login prompt from the page and just have the SSO option.
Yes it can be hidden with CSS. I’m not near my computer but can post some instructions later today.
Alternative is to make the login fully automated so no need to click SSO button … it gets clicked on render of login page. That is what we are doing now. In which case no need to hide the Knack login as you never see it.
Try this. Change the view to your login page - its probably 3 though …
This will auto-click the SSO button for you …
$(document).on('knack-view-render.view_3', function(event, view, data) {
setTimeout(function() {
var ssoButton = $('a.kn-button.is-sso');
if (ssoButton.length) {
ssoButton[0].click();
} else {
}
}, 1000); // increase delay if needed
});
Another alternative, if you need to keep the normal Knack login for external users but want to force internal users to use the SSO button, is something like below.
If the internal user types an internal email address (@mycompany.com - modify for your email addresses) into the Knack login field it will make that field go red and disable the submit button. Forces them to use SSO, but allows non-company logins.
/**********************************************************************************
if "@mycompany.com" is typed into external email field, turn it red and hide the login button - force internal users to use the SSO button
**********************************************************************************/
$(document).on('knack-view-render.view_3', function(event, view, data) {
// Listener for changes in the email input field
$('#email').on('input', function() {
var emailValue = $(this).val();
// Check if the email contains the forbidden substring
if (emailValue.includes('@mycompany.com')) {
$(this).css('background-color', 'red'); // Turn the email field red
var submitButton = $('#view_3 > div > div.column.is-half > div.kn-login-form > form > input');
submitButton.hide(); // Hide the Submit button using the specific selector
submitButton.prop('disabled', true); // Disable the Submit button
} else {
$(this).css('background-color', ''); // Reset the background color
var submitButton = $('#view_3 > div > div.column.is-half > div.kn-login-form > form > input');
submitButton.show(); // Show the Submit button
submitButton.prop('disabled', false); // Enable the Submit button
}
});
});
And last idea, is just to hide the userid and password fields so they cant use them to log in. This CSS will do that:
/* Hide the email/password login on the LOGIN PAGE */
#view_3 > div > div.column.is-half > div.kn-login-form {
display: none;
}
#view_3 > div > div.column.is-half > div.view-header {
display: none;
}
@LeighBerre96926 Thanks! These are all very helpful! I am currently going with your CSS option because when I implemented the auto-click SSO version it would log the user right back in if they tried to log out. (Because they are still technically authenticated.)
There is probably a redirect on logout setting that I don’t know about. If I figure that out I will probably go with the auto-click version.
Yes that is how it will work… there is no real need for Logout and the user remains authenticated. In fact I even toyed with the idea of removing the Logout link, or changing its function to close the browser tab.
If you look at most (non Knack) corporate applications that use fully automated AD SSO like finance and hr systems they typically don’t promote a “Logout” function … most corporate users just close the browser when they are finished.
If you need users to log out, then by definition you also need them to log in … so your current approach is probably your best option.
Kevin,
If you really want to have a logout page, then here is how to achieve that. Add a public page called Logout or whatever, and ensure it is set with none of the options ticked:
On the Logout page, add a Rich Text view and a Menu view. The menu view should have one button, which directs to your existing home page, and is labelled Log In. This will kick users back to the Log In page if they wish. Add some instructions in the Rich text view, like below:
Now add some Javascript to completely hijack the Knack LOG OUT link, to direct the user to this new logout page. Note it does NOT actually log the user out - it just sends them to a “dead end” page. (Note this is edited from the original post because the original didn’t work as expected)
(function hijackLogoutLink() {
// Run once, keep watching
setInterval(() => {
const $logout = $('a.kn-log-out');
const $custom = $('#custom-logout-link');
if ($logout.length && $custom.length === 0) {
const $customLink = $('<a href="#" id="custom-logout-link">Log Out</a>');
$logout.replaceWith($customLink);
}
}, 500);
// Redirect when custom link is clicked
$(document).on('click', '#custom-logout-link', function (e) {
e.preventDefault();
window.location.href = 'https://XXX.knack.com/YYY#logout-page/';
});
})();
where XXX and YYY are appropriate for your app - i.e use the url of the newly created logout page
and add the following javascript to remove the Info bar from that logout page
$(document).on('knack-view-render.view_776', function(event, view, data) {
setTimeout(function() {
$('#knack-dist_1 > div.kn-info-bar').hide();
}, 200);
});
The view_776 will need to be adjusted for whatever the Rich text view on your logout page is.
And that should do it - when they log out they will see something like this:
As I said above, they aren’t really logged out but they are sitting on a “dead end” page with only one option - to “log in” again. (or close the browser)
Hope that is helpful?
Just to be clear: I have edited the above javascript as i found that some of the code wasn’t working as expected. It now fully hijacks the Log Out link and redirects to the new Logout page. It definitely does NOT log the user out. And I haven’t tested but I’m pretty sure it wont work on mobile menu - just on full screen “PC” devices.
