feat: Add support for auto grabbing auth code

Allow assistant to pick-up OAuth authorization code automatically from post consent screen if redirect URI points to localhost (port 5754) - Add dep: express.js - Add page for successful authorization - Update link for dep `google-assistant` with prefix `github:` Addresses Authentication Failure #671
Melvin-Abraham · Sep 4, 2022 · 32be4ab · 32be4ab
1 parent 1bb0acb
commit 32be4ab
Show file tree

Hide file tree

Showing 8 changed files with 19,622 additions and 10,841 deletions.
diff --git a/app/src/auth/authHandler.js b/app/src/auth/authHandler.js
@@ -0,0 +1,49 @@
+const path = require('path');
+const express = require('express');
+
+const app = express();
+const port = 5754;
+const authHandleRedirectUri = '/auth/handler';
+const authSuccessPath = '/auth/success';
+
+const authSuccessPageServePath = path.join(__dirname, 'authSuccess');
+const authSuccessPageStaticServeRequestHandler = express.static(authSuccessPageServePath);
+
+app.use(authSuccessPath, authSuccessPageStaticServeRequestHandler);
+
+app.get(authHandleRedirectUri, (req, res) => {
+  const { query } = req;
+  const authCode = query.code;
+
+  const getTokenView = document.querySelector('[name=get-token]');
+
+  // If "Get Token" screen is currently not the active view
+  // No need to do anything
+  if (getTokenView === null) {
+    res.send('Invalid auth session. "Get Token" screen is not active...');
+    return;
+  }
+
+  // If auth code is not a part of URL query, do nothing
+  if (authCode === undefined) {
+    res.send('No auth code provided for authorization');
+    return;
+  }
+
+  /** @type {HTMLInputElement} */
+  const authCodeInputField = getTokenView.querySelector('#auth-code-input');
+  authCodeInputField.value = authCode;
+
+  const suggestionArea = document.querySelector('#suggestion-area');
+
+  /** @type {HTMLButtonElement} */
+  const submitAuthCodeButton = suggestionArea.querySelector('#submit-btn');
+  submitAuthCodeButton.click();
+
+  // Let the user know that the auth was successful
+  res.redirect(authSuccessPath);
+});
+
+app.listen(port, () => {
+  console.log(`Auth handler listener started in port: ${port}`);
+});
diff --git a/app/src/auth/authSuccess/auth.svg b/app/src/auth/authSuccess/auth.svg
diff --git a/app/src/auth/authSuccess/cloud_confetti.png b/app/src/auth/authSuccess/cloud_confetti.png
diff --git a/app/src/auth/authSuccess/index.html b/app/src/auth/authSuccess/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="./style.css">
+  <title>Authorization Successful | Google Assistant Unofficial Desktop Client</title>
+</head>
+<body>
+  <main>
+    <img src="./auth.svg" alt="">
+
+    <div>
+      <h1>
+        You have been successfully authorized
+      </h1>
+
+      <div>
+        The authorization code has been picked up by the client.
+        Your access tokens will be fetched shortly.
+        You may now close this window.
+      </div>
+    </div>
+  </main>
+</body>
+</html>
diff --git a/app/src/auth/authSuccess/style.css b/app/src/auth/authSuccess/style.css
@@ -0,0 +1,48 @@
+@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;700&display=swap');
+
+html {
+  background-color: #121212;
+  color: #ffffff;
+  font-family: 'Plus Jakarta Sans', sans-serif;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  width: 100vw;
+}
+
+html::before {
+  content: '';
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  background-image: url(./cloud_confetti.png);
+  background-repeat: no-repeat;
+  background-position: bottom left;
+  background-size: 25rem;
+}
+
+html::after {
+  content: '';
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  right: 0;
+  background-image: url(./cloud_confetti.png);
+  background-repeat: no-repeat;
+  background-position: bottom left;
+  background-size: 25rem;
+  transform: rotate(180deg);
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2rem;
+  width: 55ch;
+  text-align: center;
+}