If you have created a web page with multiple authenticated DataPages, you’ve probably noticed that by default each DataPage loads with its own log-in screen. After a user logs into one, a session is created and all of the DataPages display as normal. Although this is occasionally the desired behavior, you have the option of hiding extra log-in pages when the web page loads. This article assumes that you already have enabled Authentication and have deployed your DataPages.

Steps to hide Login Screen

In this article, you hide multiple log-in screens by creating and configuring a new Authentication.

  1. In the Caspio Bridge homepage, select and open an app. In the App Overview page, click Authentications on the sidebar menu and click New Authentication.
  2. Select a table or view as the authentication data source and select Custom. Click Next.
  3. Next, select the authentication type. Select Caspio data source.Authentication3
  4. Select your username and password fields and configure them if needed. The password data type field is automatically set to show as a password and case sensitivity is enforced.Authentication4
  5. Next, insert a header and footer. Click the Insert button at the lower right of the DataPage Elements panel and select Header & Footer.
  6. Next, add a code to identify the log-in screens. In the Header, add the following code exactly as it appears. You can copy and paste this code directly from the area at the end of this article.
    <div name="cb-auth-box">

    In the Footer, insert the following:

  7. Next, add a JavaScript to your HTML to hide the extra log-in screens. Go to the HTML of your web page. Add the following lines of JavaScript after the Caspio Bridge deployment code sections. This script will locate the log-in screens on your web page, and hide all but the first one.
    if(document.getElementsByName("cb-auth-box")) {
    var v_box = document.getElementsByName("cb-auth-box").length ;
    for (i=1; i < v_box; i++) { document.getElementsByName("cb-auth-box")[i].style.display = "none" ; }

Note Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge’s standard feature set. These solutions are provided “as is” without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.