How to share google gmail api authentication from client to node server - node.js

Question

I have a nodeserver serving two routes
/ = https://developers.google.com/gmail/api/quickstart/js
/json/ = {mydata: 'abc'};
node-server.js
import express from 'express';
import path from 'path';
const app = express();
app.set('view engine', 'ejs');
app.set('views', ['src/views']);
app.use('/', express.static(path.join(__dirname, '/')));
app.get('/', (req, res) => {
res.render('index');
});
app.get('/json', (req, res) => {
res.setHeader('Content-Type', 'application/json');
// if authenticated
res.end(JSON.stringify({mydata: 'abc'}));
// else
res.end(JSON.stringify({auth: false}));
});
src/views/index.ejs === (browser example) https://developers.google.com/gmail/api/quickstart/js
Question
After a user has authenticated via browser method, how can I share authenticated state with my nodeserver so that I only show json data if authenticated, otherwise an error?

Answer 1

ok I think it is not possible to access the token if created via the browser. Unless somone else can chip in with a solution.
Meanwhile I have created an alternative to the browser example provided by google quickstart but in node. That way I have control of the access_token from node server and can determine if user is signed in or not.
My solution:
Pre-requisites
Must have created a google workspace with a - first project
Must have created a client id and api key - https://developers.google.com/gmail/api/quickstart/js
Must downloaded the credentials.json file and keep local to nodeserver for use.
Must have supplied: [link OAuthClient Client] > Credentials] Authorised redirect URIs
http://localhost:8000/oauth2callback
This is a typescript implementation so will need cross-env or equivalent to transpile with babel wile running from package.json script.
nodeServer.ts
import yargs from 'yargs';
import express, { Response } from 'express';
import path from 'path';
import fs from 'fs';
import { google, Auth } from 'googleapis';
import url from 'url';
import { gmail_v1 } from 'googleapis/build/src/apis/gmail/v1';
type OAuth2Client = Auth.OAuth2Client;
interface Icredentials {
web: {
client_id: string;
project_id: string;
auth_uri: string;
token_uri: string;
auth_provider_x509_cert_url: string;
client_secret: string;
redirect_uris: string;
};
}
const SCOPES = ['https://www.googleapis.com/auth/gmail.readonly'];
const pathCredentials = path.resolve(__dirname, '../credentials/credentials-webserver.json');
const contentCredentials: string = fs.readFileSync(pathCredentials, 'utf8');
const credentials: Icredentials = JSON.parse(contentCredentials);
const { client_secret, client_id, redirect_uris } = credentials.web;
const oAuth2Client: OAuth2Client = new google.auth.OAuth2(
client_id,
client_secret,
redirect_uris[0]
);
const app = express();
app.set('view engine', 'ejs');
app.set('views', ['src/views']);
const { argv } = yargs;
const port = argv.port || 8000;
const host = argv.host || 'localhost';
const pathRoot = path.join(__dirname, '/');
type TgetSignedIn = (oAuth2Client: OAuth2Client) => Promise<boolean>;
const getSignedIn: TgetSignedIn = oAuth2Client =>
new Promise((resolve, reject) => {
if (!oAuth2Client.credentials.access_token) {
reject(Error('access_token does not exist'))
} else {
resolve(true);
}
});
type TgetLabels = (
auth: OAuth2Client
) => Promise<gmail_v1.Schema$ListLabelsResponse | gmail_v1.Schema$Label[]>;
const getLabels: TgetLabels = auth => {
const gmail = google.gmail({ version: 'v1', auth });
return gmail.users.labels.list({ userId: 'me' }).then(
res =>
// res.config.Authorization: 'Bearer Accesstoken....'
res.data.labels
);
};
type TrenderLabels = (res: Response, isSignedIn: boolean) => void;
const renderLabels: TrenderLabels = (res, isSignedIn) => {
getLabels(oAuth2Client)
.then(labels => {
res.render('index', { labels, isSignedIn });
})
.catch(err => {
res.render('index', { isSignedIn });
});
};
app.use('/', express.static(pathRoot));
app.get('/', (req, res) =>
getSignedIn(oAuth2Client)
.then(() => {
renderLabels(res, true);
})
.catch(() => {
res.render('index', { isSignedIn: false });
})
);
app.get('/getAuthCode', (req, res) => {
const authUrl = oAuth2Client.generateAuthUrl({
access_type: 'offline',
scope: SCOPES
});
res.render('index', { authUrl, isSignedIn: false });
});
app.get('/oauth2callback', (req, res) => {
const qs = url.parse(req.url, true).query;
const { code } = qs;
if (!code) {
return console.error('Error - unselected email');
}
const decodedCode = decodeURIComponent(code as string);
oAuth2Client.getToken(decodedCode, (err, token) => {
if (err) return console.error('Error retrieving access token', err);
oAuth2Client.setCredentials(token);
renderLabels(res, true);
});
});
app.get('/signout', (req, res) => {
delete oAuth2Client.credentials.access_token;
res.render('index', { isSignedIn: false });
});
app.get('/services', (req, res) => {
getSignedIn(oAuth2Client)
.then(() => {
res.setHeader('Content-Type', 'application/json');
res.end(JSON.stringify({ a: 1 }));
})
.catch(err => {
res.end(JSON.stringify({ error: err, custom: 'You are signed out!' }));
});
});
app.listen(port, host, () => {
// console.log('listening on ', host, ':', port);
});
index.ejs
<!DOCTYPE html>
<html>
<head>
<title>Gmail API Quickstart</title>
<meta charset="utf-8" />
<% if (typeof authUrl !== 'undefined') { %>
<meta http-equiv="refresh" content="0 url=<%= authUrl %>" />
<% } %>
</head>
<body>
<p>Gmail API Quickstart</p>
<button id="authorize_button" style="display: none;">Authorize</button>
<button id="signout_button" style="display: none;">Sign Out</button>
<% if (typeof labels !== 'undefined') { %>
<ul>
<% labels.forEach(item => { %>
<li><%= item.name %></li>
<% }) %>
</ul>
<% } %>
<script>
const handleAuthClick = () => {
location.href = '/getAuthCode';
};
const handleSignout = () => {
location.href = '/signout';
};
const init = (isSignedIn) => {
var authorizeButton = document.getElementById('authorize_button');
authorizeButton.style.display = isSignedIn ? 'none' : 'block';
authorizeButton.onclick = handleAuthClick;
var signoutButton = document.getElementById('signout_button');
signoutButton.style.display = isSignedIn ? 'block' : 'none';
signoutButton.onclick = handleSignout;
}
init(<%= isSignedIn %>);
</script>
</body>
</html>
This provides me the following paths:
It creates a similar experience as this: https://developers.google.com/gmail/api/quickstart/js
Now when user goes to /services/ path I display json if logged in or error if not.
Also if anyone has a better suggestion that just removing the access_token manually to detect if user is signed in, please advise.