User Authentication in Google Apps Script web apps

In this tutorial, we’ll explore user authentication in Google Apps Script web apps. The system will use Google Account authentication and verify users against a list of authorized Gmail addresses stored in a Google Sheet. This setup ensures that only users with specific email addresses can access the web app, demonstrating an effective approach to user authentication in Google Apps Script projects.

Whether you’re building an internal tool or a private web app for a specific group, this method can help you manage access securely. You can also integrate this authentication system with the various types of Google Apps Script Web Apps we’ve previously explained on our blog.

Introduction to User Authentication in Google Apps Script web apps

Google Apps Script makes it easy to deploy web apps with built-in Google Account authentication. This means that you can require users to sign in with their Google Accounts to access your web app. We’ll take this a step further by restricting access to specific users based on a list of email addresses stored in a Google Sheets workbook.

In this setup, the user’s email is automatically captured using Google’s authentication system, and the script will verify if their email is authorized to access the app.

So, in this tutorial, we will develop a Google Apps Script web app that:

1. Shows a login instruction if the user is not logged in.
2. Displays a not authorized page if the user is logged in but not authorized.
3. Loads a dashboard with personalized content (including the user’s email) if the user is both logged in and authorized.

Step-by-Step Implementation

The steps involve creating a Google Sheets workbook to store the email addresses of authorized users, creating a Google Apps Script project, and deploying it for testing. You can also copy the Google Sheets workbook and the Apps Script project from the links below to your Google Drive to get a head start.

Step 1: Setting Up the Google Sheet

Create a new Google Sheet to store the list of authorized users’ email addresses. The following image shows the Google Sheet used in this example. When creating this Google Sheets workbook, avoid merging cells in the range and do not include any other characters below the user data table.

Step 2: Writing the Google Apps Script/ Make a copy of the Apps Script Project to your Drive

When creating a Google Apps Script project, you can do it as a bound script or an unbound script. The script you create through Google Sheets is called a bound script. In this tutorial, we will use the unbound script method.

To create the unbound script in your Google Drive, go to New > More > Google Apps Script as shown in the following image.

Alternatively, you can copy the Google Apps Script project to your Google Drive from the link provided above.

After duplicating the app script project, don’t forget to replace the Spreadsheet ID (SSID) with your Spreadsheet ID.

The above Google Apps Script project contains the following 7 files.

1. Code.gs : Contains server-side Google Apps Script functions for authentication, fetching HTML content, and checking user authorization.
2. Index.html : The main HTML file that initializes the app and dynamically loads different pages based on the user’s login and authorization status.
3. JavaScript.html : Contains the client-side JavaScript logic to determine the user’s status and inject the appropriate HTML content (login, not-authorized, or dashboard).
4. Login.html : Displays a message prompting the user to log in to their Google account to access the app.
5. NotAuthorized.html : This shows a message indicating that the user’s email is not authorized to access the app.
6. Dashboard.html : Provides a simple dashboard interface displaying the user’s email and placeholders for additional content.
7. Css.html: Contains the CSS for styling the web app, allowing you to define custom styles for your HTML elements.

Code snippets

The codes included in the above 7 files are given below. If you have created your own apps script project (Instead of making a copy of the app script project linked above), you may copy each code to the relevant file.

Explaining the Code: How This Google Apps Script Web App with Authentication Works

This Google Apps Script web app provides a login and authorization system that verifies users based on their Google account email, dynamically displaying different HTML pages depending on the user’s login and authorization status. Here’s how it works, with the relevant files highlighted:

1. Authentication and User Check (Code.gs): When the web app is accessed, the doGet() function in Code.gs renders the main HTML page (Index.html). Once the page loads, the client-side script in JavaScript.html calls the server-side function getUserStatus() from Code.gs. This function retrieves the active user’s email using Session.getActiveUser().getEmail().
2. User Authorization (Code.gs): In Code.gs, the checkUserAuthorization() function verifies if the user’s email exists in the specified range of a Google Sheet (Users sheet). The function fetches the emails listed in a specific column (RNG_USER_EMAILS) and checks if the logged-in user’s email is included.
3. Dynamic Page Loading (JavaScript.html): Based on the result of the login and authorization check from getUserStatus(), the script in JavaScript.html dynamically loads the appropriate HTML content into the main content area:
   • If the user is not logged in, the getLoginPage() function from Code.gs is called to load Login.html.
   • If the user is not authorized, the getNotAuthorizedPage() function from Code.gs loads NotAuthorized.html.
   • If the user is logged in and authorized, the getDashboardPage() function from Code.gs loads Dashboard.html, and the user’s email is displayed within the dashboard.
4. Client-Side and Styling (Css.html and JavaScript.html): The app uses JavaScript.html to handle the client-side logic, which communicates with the server to load different pages. Optionally, custom CSS can be included in Css.html to style the app’s interface.

Step 3: Deploying the Web App

Once your script is ready, you can deploy it as a web app:

1. Click on the Deploy button in the top-right corner.
2. Select New Deployments> Select type: Web app.
3. Select your email for Execute as field.
4. Set “Who has access” to “Anyone”.
5. Click Deploy.
6. Copy the web app URL provided after deployment.

You can try this URL on your browser to see how it works.

Wrapping Up

In this guide, we demonstrated how to set up user authentication in Google Apps Script by using Google Account sign-in and verifying users against a list of authorized Gmail addresses in a Google Sheet. This approach ensures that only specific users can access your web app securely.

By utilizing user authentication in Google Apps Script, you can manage access for internal or private apps efficiently, with dynamic content served based on the user’s login and authorization status. This method is easy to implement and adaptable for various project needs.

Feel free to customize and expand the code to suit your app’s requirements. Happy coding!