A Better Google Task App

Use the Google Tasks API and Google OAuth 2.0 to create your own task system!

Google has a JavaScript package that allows you to connect to the Google Tasks API directly. Using this and Google OAuth 2.0, you can display and modify your Google Tasks with your own design touches. The database is already there to connect to.

TL;DR

Using your own JavaScript framework, you can connect to the Google Tasks API using an OAuth 2.0 token and the googleapis Node JS package. Each user must have the Google Tasks API enabled. The API is extremely comprehensive and feature-rich.

Microsoft Hits the Spot

If you’re like me, you were paying attention when Microsoft decided to buy Wunderlist and completely dismantle, reengineer and rebrand it as Microsoft Todo.

Google, on the other hand … 🦗 🦗 🦗 (crickets).

Google Tasks Is Terrible IMO

The UI has not been updated for years. It does integrate with Google Calendar, but it is easy to tell Google Tasks is an afterthought for Google, with features that aren’t much different.

Building a Better Application

Countless task applications use an external database. However, why not use the free database already available to any Google user?

Configuration

Enable Google Tasks API

Unfortunately, an application cannot be built for any Google user without each user manually enabling the Google Tasks API. This means you can build a one-stop application that works. However, connecting to the API is one click. Click the following link and enable the Tasks API:

• Enable Google Tasks API in Google Cloud

Get a Key

While technically optional, getting an API key is the best way to get an OAuth 2.0 Client ID.

• Go to Credentials in Google Cloud
• Create an OAuth 2.0 Client ID
• Add the Authorized URLs for both local and production
  • http://localhost:5173/
  • https://mysite.com/
• Add the Authorized Redirect URI for both local and production
  • http://localhost:5173/auth/callback/google
  • https://mysite.com/auth/callback/google
• Copy the Client ID and Client Secret

Save to .env File

Save the API credentials.

PRIVATE_CLIENT_ID=...
PRIVATE_CLIENT_SECRET=...

📝 My application uses SvelteKit, but the process is the same in any JS Framework.

Install Google Package

Install the desired packages.

npm i -D googleapis

⚠️ The googleapis for Node.js will only work in Node environments. You must use the REST API directly with fetch for Deno, Vercel Edge, Cloudflare or Bun.

Google Auth Functions

Here, I created a few functions to connect to OAuth 2.0, and get permission for Google Tasks.

// google-auth.ts

import { google } from 'googleapis';
import type { OAuth2Client } from 'google-auth-library';
import { PRIVATE_CLIENT_ID, PRIVATE_CLIENT_SECRET } from '$env/static/private';

export const COOKIE_NAME = 'user';

const REDIRECT_URI = '/auth/callback/google';

export const createOAuth2Client = (origin: string) => {
    return new google.auth.OAuth2(
        PRIVATE_CLIENT_ID,
        PRIVATE_CLIENT_SECRET,
        origin + REDIRECT_URI
    );
};

export const getAuthUrl = (client: OAuth2Client) => {
    return client.generateAuthUrl({
        access_type: 'offline',
        scope: [
            'https://www.googleapis.com/auth/userinfo.profile',
            'https://www.googleapis.com/auth/userinfo.email',
            'https://www.googleapis.com/auth/tasks'
        ]
    });
};

The tasks scope allows users to connect to Google Tasks and general profile and email information.

Google Tasks Functions

There are different task lists and different tasks. We must get both in this app.

// tasks.ts

import { google } from 'googleapis';
import { type OAuth2Client } from 'google-auth-library';

export async function getTaskLists(auth: OAuth2Client) {

    try {
        const taskAPI = google.tasks({
            version: 'v1',
            auth
        });

        const taskList = await taskAPI.tasklists.list();

        return {
            data: taskList.data
        };
    } catch (error) {

        console.error('Error fetching tasks:', (error as Error).message);
        
        return {
            error
        };
    }
}

export async function getTasksByList(auth: OAuth2Client, tasklist: string) {

    try {
        const taskAPI = google.tasks({
            version: 'v1',
            auth
        });

        const tasks = await taskAPI.tasks.list({
            tasklist
        });

        return {
            data: tasks.data
        };
    } catch (error) {

        console.error('Error fetching tasks:', (error as Error).message);
        
        return {
            error
        };
    }
}

The tasks API can insert, patch, and remove tasks AND task lists. This is just getting started.

• See Google Tasks REST API.

Login

A login event is handled by redirecting to the appropriate Login with Google page.

// /routes/login/+server.ts

import { createOAuth2Client, getAuthUrl } from '$lib/google-auth';
import { redirect } from '@sveltejs/kit';
import type { RequestHandler } from './$types';

export const GET: RequestHandler = async ({ url }) => {

  // Redirect to Google login page
  
  const client = createOAuth2Client(url.origin);

  const authUrl = getAuthUrl(client);

  return redirect(307, authUrl);
};

Our functions handle the nitty-gritty; we only need to redirect to the appropriate URL.

Handle the Return Function

We must get the code from the URL, translate it to a token and save it to cookies.

// /routes/auth/callback/google

import { COOKIE_NAME, createOAuth2Client } from '$lib/google-auth';
import { google } from 'googleapis';
import type { RequestHandler } from './$types';
import { redirect } from '@sveltejs/kit';

export const GET: RequestHandler = async ({ url, cookies }) => {

    const code = url.searchParams.get('code');

    if (!code) {
        return new Response('No code returned from Google', { status: 400 });
    }

    try {
        const client = createOAuth2Client(url.origin);

        // Exchange the code for tokens
        const { tokens } = await client.getToken(code);

        client.setCredentials(tokens);

        // Fetch user info
        const oauth2 = google.oauth2({
            auth: client,
            version: 'v2'
        });

        const userInfo = await oauth2.userinfo.get();

        const session = {
            user: userInfo.data,
            tokens
        };

        // Store user data in a cookie or session as needed
        cookies.set(COOKIE_NAME, JSON.stringify(session), { path: '/' });

    } catch (error) {
        console.error('Error during authentication:', error);
        return new Response('Authentication failed', { status: 500 });
    }

    // Redirect to the homepage or a dashboard
    return redirect(302, '/');
};

We can save the user information with the token.

Handle Session

We need to get the cookie for each server request, if applicable.

// hooks.server.ts

import { COOKIE_NAME, createOAuth2Client } from "$lib/google-auth";
import type { Handle } from "@sveltejs/kit";

export const handle: Handle = async ({ event, resolve }) => {

    event.locals.getGoogleSession = () => {

        const session = event.cookies.get(COOKIE_NAME);

        if (!session) {
            return null;
        }

        const client = createOAuth2Client(event.url.origin);

        const data = JSON.parse(session) as GoogleSession;

        client.setCredentials(data.tokens);

        return {
            data,
            client
        };
    };

    return resolve(event);
};

📝 SvelteKit handles this in hooks, but Next or other Frameworks may use middleware. In all cases, the pattern is the same.

Get the Task Lists

This example uses an endpoint, but you could easily load this directly with the data.

// routes/task

import { getTaskLists } from '$lib/tasks';
import { error } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';

export const load = (async ({ locals: { getGoogleSession } }) => {

    const session = getGoogleSession();

    if (!session) {
        return error(401, 'Not Logged In!');
    }

    const { data, error: taskError } = await getTaskLists(session.client);

    if (taskError) {
        return error(404, (taskError as Error).message);
    }

    if (!data || !data.items) {
        return error(404, 'No Tasks Apparently!');
    }

    return {
        taskLists: data.items
    };

}) as PageServerLoad;

Get the List of Tasks

We must get the tasks for each task list as well.

// /routes/task/[id]

import { getTasksByList } from "$lib/tasks";
import { error } from "@sveltejs/kit";
import type { PageServerLoad } from "./$types";

export const load = (async ({ params, locals: { getGoogleSession } }) => {

    const id = params.id;

    const session = getGoogleSession();

    if (!session) {
        return error(401, 'Not Logged In!');
    }

    const { data, error: taskError } = await getTasksByList(session.client, id);

    if (taskError) {
        return error(404, (taskError as Error).message);
    }

    if (!data || !data.items) {
        return error(404, 'No Tasks Apparently!');
    }

    return {
        tasks: data.items
    };

}) satisfies PageServerLoad;

Display the Data

Now we can build a UI however we like!

Going Further

Google Tasks, like Microsoft Todo, has many features for repeated events, calendar integrations and tasks with subtasks. You could build a habit tracker or even a kanban board on top of this API. You could also use this base code to connect to other Google APIs in your JavaScript Application.

Live Data

Google Tasks does not have webhooks to create web sockets or live data. You could build one manually or sync it with a Firebase Todo App to emulate it in real-time.

Bonus: Microsoft Todo

You could do something similar with Microsoft Todo.

• Create a MS Azure App
• Install MSAL.js to connect to Microsoft Oauth 2.0
• Use the scopes openid, profile, User.Read
• Fetch with the Microsoft Graph API

There is no demo for this, but the pattern would be the same.

Google Demo

• Repo: GitHub
• Demo: Vercel Serverless

About the Demo

1. Before you login, you must enable Google Tasks API in Google Console.
2. Because the app is for demo purposes only, it is not registered. Make sure to hit Advanced, then proceed to login anyway to avoid the warning.