DEV Community: Toni-Jan Keith Monserrat

How to build a server that authenticates requests from Google Appscript using OpenID

Toni-Jan Keith Monserrat — Tue, 13 Feb 2024 03:43:30 +0000

A simple way to authenticate your requests coming from Google Workspace Appscript is to use OpenID.

To do that, call the getIdentityToken from ScriptApp.

// Appscript.gs
const oAuthToken = ScriptApp.getIdentityToken()

And then put that as part of the request. In this example, I put it as a bearer token using the authorization header.

// Appscript.gs
const request = {
  method: 'POST',
  contentType: 'application/json',
  payload: JSON.stringify({
    ...
  }),
  headers: {
    Authorization: `Bearer ${oAuthToken}`
  } 
}
const results = UrlFetchApp.fetch(url, request);

On the backend, process the header and get the token by getting the email, if it is verified, the host, and the issuer. You can then use these data to verify the user.

// backend.js - middleware to process the header
  const { headers } = request;
  const { authorization } = headers;

  // if there is no authorization header, return 403
  if (!authorization) return response.unauthorized();

  // get the token by using "Bearer " as the splitting token
  const [, idToken] = authorization.split('Bearer ');

  // the OpenID is a JWT with a header and body.
  // we get the body and make it as a UTF8 string
  const [, item] = idToken.split('.');
  const buff = Buffer.from(item, 'base64');
  const jsonText = buff.toString();

  try {
    const {  
      email, 
      hd: host, 
      iss: issuer, 
      email_verified: emailVerified 
    } = JSON.parse(jsonText);

    // check email here
    if (!email || !emailVerified) return response.unauthorized();

    // check host here
    if (!host) return response.unauthorized();

    // issuer must be accounts.google.com
    if (issuer !== 'https://accounts.google.com') return response.unauthorized();

    // process email by checking it on db
    ...
  } catch (error) { ... }

Enjoy!

Journey to create my own website

Toni-Jan Keith Monserrat — Wed, 15 Dec 2021 11:50:54 +0000

Project repository: https://gitlab.com/tjmonsi/tjmonsi-server
Project last commit: https://gitlab.com/tjmonsi/tjmonsi-server/-/commit/712ea515263ca4ff41dc94f37d2c6791f00d818e

This is going to be my journey in creating a performant website that is deployed on Cloud Run, with both frontend and backend running on it.

I will just write here my thoughts on how I built in and the commits I did.

Some posts will be short, some posts will be long. I will appreciate the feedback that I will get and will take them into account while building the site.

My focus is on using Fastify with OpenAPI 3.1 specs as a way to train myself to focus on design first on API. Then I'll be using Lit Element and Webpack to compile the frontend.

As for the current main plan of the system, I plan on doing these:

add an issue and merge request templating system
configure the project settings to force me to do some good practices I have learned
add a CI/CD with static code analysis using SonarCloud
creating both the frontend and backend on in parallel

For now, my current thoughts and concerns are:

I am looking at best practices though on saving credentials for CI/CD without too much payment costs needed. This is to access secrets from Google Secret Manager to get .env variables or deploy to Cloud Run.

I'll do my research first, and then put into writing what I know.

A Short introduction on Promise.any

Toni-Jan Keith Monserrat — Thu, 15 Aug 2019 08:36:13 +0000

Note: You can see the current stage of this proposal at https://github.com/tc39/proposal-promise-any

Description

Promise.any takes an unspecified number of promises that need to be executed. It returns a promise that is fulfilled by the first promise to resolve successfully and the resulting value is passed back.

If all of them fail, Promise.any throws an exception and executes the reject portion of the promise with a list of all the exceptions.

Project.race can do this right?

Project.race operates similarly, but there is one main difference. If any of the passed in promises return an error, Project.race will reject, regardless of the state of other promises. A resolved promise, even if it executes first, will still result in a reject if any of the included promises return an error.

How do we do it before?

Prior to the introduction of Promise.any the pattern for accomplishing this functionality looked something like this.

const p1 = new Promise(/* ... */);
const p2 = new Promise(/* ... */);
const promises = 2;
const errorList = [];
let result = null;

const thenFn = (r) => {
  if (result) return;
  result = r;
  /* do something with result */
}

const errorHandler = (err) => {
  if (errorList.length !== promises) {
    return errorList.push(err);
  }
  /* handle all errors in errorList */
}

p1.then(thenFn).catch(errorHandler);
p2.then(thenFn).catch(errorHandler);

How can we do it now?

With Promise.any the syntax to accomplish the same thing looks like this. It is similar to using Promise.race or Promise.all.

const p1 = new Promise(/* ... */);
const p2 = new Promise(/* ... */);
const promises = [ p1, p2 ];

Promise.any(promises)
  .then(firstResult => { /* do whatever */ })
  .catch(allErrors => { /* do whatever */ })

// or when using async/await

try {
  const firstResult = await Promise.any(promises);
  /* do whatever */
} catch (allErrors) {
  /* do whatever */
}

In what situation would we want to use this?

Let's say you want to fetch several sources of data, including data coming from Cache API. The goal is to retrieve the data as quickly as possible, but you don't need to retrieve it more than once.

try {
  const url = 'https://example.com/api/v1/some-endpoint/data';
  const data = await Promise.any([
    fetch(url),
    fetch('https://example.com/api/v1/some-endpoint-that-hopefully-is-near/data'),
    cache.match(url)
  ]);

  /* render back to browser */
} catch (errors) {
  /* render all error or a general error  */
}

Shoutout

Shoutout to laurieontech for being the 2nd pair of eyes for this article, as well as the JS outreach group for giving me this opportunity.