How to Create a Login Page using Google Apps Script in Google Sheet (Step-by-Step Guide)

By /
subscribe, registration, signup, software, applications, tablet, device, subscribe button, login, account, business, coffee, smart, security, credential, information, user, password, subscribe, registration, software, software, login, login, login, login, login, account

How to Create a Login Page using Google Apps Script in Google Sheet.

Creating a login system without a complex backend is now possible using Google Apps Script and Google Sheets. Whether you’re a beginner or a non-developer, this guide will help you build a secure login page connected to a Google Sheet in just a few steps.

In this tutorial, we’ll create a login page that checks a Serial Number and Activation Code stored in Google Sheets, then shows a welcome message upon successful login.

📋 What You’ll Need:

  • A Google account
  • A Google Sheet to store user credentials
  • Basic knowledge of Google Apps Script (no coding experience required)

🔧 Step 1: Create the Google Sheet

  1. Open Google Sheets and create a new spreadsheet.
  2. Rename the sheet as LoginData.
  3. In the first row, enter the following headers: nginxCopyEditSerialNumber | ActivationCode | Name
  4. Fill in some sample user data: nginxCopyEditSN1234 | CODE5678 | John Doe SN4321 | CODE8765 | Jane Smith

This sheet will act as your mini-database.

💻 Step 2: Open Google Apps Script

  1. In your Google Sheet, click on Extensions → Apps Script.
  2. A new tab will open — this is your project dashboard.
  3. Rename your project (e.g., “Login System”).

🧾 Step 3: Create the Login Form (HTML)

  1. In the Apps Script editor, click on the + icon → HTML → Name it: Login.
  2. Paste the following code:
htmlCopyEdit<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
        margin-top: 100px;
      }
      input {
        margin: 10px;
        padding: 10px;
        width: 250px;
      }
      button {
        padding: 10px 20px;
      }
      #message {
        color: red;
      }
    </style>
  </head>
  <body>
    <h2>Login Page</h2>
    <input type="text" id="serial" placeholder="Enter Serial Number"><br>
    <input type="text" id="code" placeholder="Enter Activation Code"><br>
    <button onclick="login()">Login</button>
    <p id="message"></p>

    <script>
      function login() {
        const serial = document.getElementById("serial").value;
        const code = document.getElementById("code").value;

        google.script.run.withSuccessHandler(function(response) {
          if (response.success) {
            document.body.innerHTML = `<h2>Welcome, ${response.name}!</h2>`;
          } else {
            document.getElementById("message").innerText = "Invalid credentials!";
          }
        }).checkLogin(serial, code);
      }
    </script>
  </body>
</html>

⚙️ Step 4: Add Backend Script

Now go back to the Code.gs file and paste the following script:

javascriptCopyEditfunction doGet() {
  return HtmlService.createHtmlOutputFromFile('Login');
}

function checkLogin(serial, code) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("LoginData");
  const data = sheet.getDataRange().getValues();

  for (let i = 1; i < data.length; i++) {
    if (data[i][0] === serial && data[i][1] === code) {
      return { success: true, name: data[i][2] };
    }
  }

  return { success: false };
}

This script connects your HTML login form with the credentials stored in your Google Sheet.

🚀 Step 5: Deploy as a Web App

  1. Click Deploy → Manage Deployments
  2. Click + New Deployment
  3. Choose:
    • Select type → Web App
    • Description → Login System
    • Execute as → Me
    • Who has access → Anyone
  4. Click Deploy and Authorize the script.
  5. Copy the Web App URL and open it in a browser.

✅ Final Result

You’ll now see a simple and clean login form. Enter the correct Serial Number and Activation Code — if they match the sheet, you’ll see a welcome message with the user’s name.

🔒 Tips to Improve Your Login System:

  • Add password encryption (Base64 or SHA hashing)
  • Add new user registration form
  • Redirect users to a dashboard or protected page
  • Track login attempts using another Google Sheet

🎯 Conclusion

This simple login system using Google Apps Script and Google Sheets is perfect for beginners, small tools, or internal apps. It’s fast, secure for small use cases, and completely free to host.

Want to create an advanced version with user registration, role-based access, or email verification? Let me know in the comments or contact me for a full tutorial!

Creating a login system without a complex backend is now possible using Google Apps Script and Google Sheets. Whether you’re a beginner or a non-developer, this guide will help you build a secure login page connected to a Google Sheet in just a few steps.

In this tutorial, we’ll create a login page that checks a Serial Number and Activation Code stored in Google Sheets, then shows a welcome message upon successful login.

📋 What You’ll Need:

  • A Google account
  • A Google Sheet to store user credentials
  • Basic knowledge of Google Apps Script (no coding experience required)

🔧 Step 1: Create the Google Sheet

  1. Open Google Sheets and create a new spreadsheet.
  2. Rename the sheet as LoginData.
  3. In the first row, enter the following headers: nginxCopyEditSerialNumber | ActivationCode | Name
  4. Fill in some sample user data: nginxCopyEditSN1234 | CODE5678 | John Doe SN4321 | CODE8765 | Jane Smith

This sheet will act as your mini-database.

💻 Step 2: Open Google Apps Script

  1. In your Google Sheet, click on Extensions → Apps Script.
  2. A new tab will open — this is your project dashboard.
  3. Rename your project (e.g., “Login System”).

🧾 Step 3: Create the Login Form (HTML)

  1. In the Apps Script editor, click on the + icon → HTML → Name it: Login.
  2. Paste the following code:
htmlCopyEdit<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
        margin-top: 100px;
      }
      input {
        margin: 10px;
        padding: 10px;
        width: 250px;
      }
      button {
        padding: 10px 20px;
      }
      #message {
        color: red;
      }
    </style>
  </head>
  <body>
    <h2>Login Page</h2>
    <input type="text" id="serial" placeholder="Enter Serial Number"><br>
    <input type="text" id="code" placeholder="Enter Activation Code"><br>
    <button onclick="login()">Login</button>
    <p id="message"></p>

    <script>
      function login() {
        const serial = document.getElementById("serial").value;
        const code = document.getElementById("code").value;

        google.script.run.withSuccessHandler(function(response) {
          if (response.success) {
            document.body.innerHTML = `<h2>Welcome, ${response.name}!</h2>`;
          } else {
            document.getElementById("message").innerText = "Invalid credentials!";
          }
        }).checkLogin(serial, code);
      }
    </script>
  </body>
</html>

⚙️ Step 4: Add Backend Script

Now go back to the Code.gs file and paste the following script:

javascriptCopyEditfunction doGet() {
  return HtmlService.createHtmlOutputFromFile('Login');
}

function checkLogin(serial, code) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("LoginData");
  const data = sheet.getDataRange().getValues();

  for (let i = 1; i < data.length; i++) {
    if (data[i][0] === serial && data[i][1] === code) {
      return { success: true, name: data[i][2] };
    }
  }

  return { success: false };
}

This script connects your HTML login form with the credentials stored in your Google Sheet.

🚀 Step 5: Deploy as a Web App

  1. Click Deploy → Manage Deployments
  2. Click + New Deployment
  3. Choose:
    • Select type → Web App
    • Description → Login System
    • Execute as → Me
    • Who has access → Anyone
  4. Click Deploy and Authorize the script.
  5. Copy the Web App URL and open it in a browser.

✅ Final Result

You’ll now see a simple and clean login form. Enter the correct Serial Number and Activation Code — if they match the sheet, you’ll see a welcome message with the user’s name.

🔒 Tips to Improve Your Login System:

  • Add password encryption (Base64 or SHA hashing)
  • Add new user registration form
  • Redirect users to a dashboard or protected page
  • Track login attempts using another Google Sheet

🎯 Conclusion

This simple login system using Google Apps Script and Google Sheets is perfect for beginners, small tools, or internal apps. It’s fast, secure for small use cases, and completely free to host.

Want to create an advanced version with user registration, role-based access, or email verification? Let me know in the comments or contact me for a full tutorial!

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top