docs: provide error context in authentication

docs/api/auth/index.js

@@ -4,48 +4,47 @@ module.exports = async function (context, req) {
   context.log('JavaScript HTTP trigger function processed a request.');
   // strava example:
   // https://www.strava.com/oauth/authorize?client_id=76033&response_type=code&redirect_uri=https://ohmyposh.dev/api/auth&approval_prompt=force&scope=read,activity:read&state=strava
-
+  const code = (req.query.code || req.query._code || (req.body && req.body.code));
+  const segment = (req.query.state || (req.body && req.body.state));
+  let tokens = {
+    access_token: '',
+    refresh_token: '',
+    expires_in: '',
+  };
   try {
-    const code = (req.query.code || req.query._code || (req.body && req.body.code));
-    const segment = (req.query.state || (req.body && req.body.state));
     if (!code || !segment) {
       context.log(`Issue processing request: missing code (${code}) or segment (${segment})`);
-      context.res = {
-        body: "not all query parameters are set",
-        status: 400
-      };
+      redirect(context, segment, tokens, 'missing code or segment');
       return;
     }
 
-    let body = null;
     switch (segment) {
       case "strava":
-        body = await strava.getStravaToken(code);
+        tokens = await strava.getStravaToken(code);
         break;
       default:
         context.log(`Unknown segment: ${segment}`);
-        context.res = {
-          body: "unknown segment",
-          status: 400
-        };
+        redirect(context, segment, tokens, `Unknown segment: ${segment}`);
         return;
     }
 
-    const url = `${process.env['DOCS_LOCATION']}/docs/auth?segment=${segment}&access_token=${body.access_token}&refresh_token=${body.refresh_token}`;
-
-    context.res = {
-      status: 302,
-      headers: {
-        Location: url
-      },
-      body: {}
-    }
-    context.done();
+    redirect(context, segment, tokens, '');
   } catch (error) {
-    context.log(`Issue processing request:\n${error}`);
-    context.res = {
-      body: error,
-      status: 500
-    };
+    context.log(`Error: ${error.stack}`);
+    let buff = new Buffer(error.stack);
+    let message = buff.toString('base64');
+    redirect(context, segment, tokens, message);
   }
 }
+
+function redirect(context, segment, tokens, error) {
+  const url = `${process.env['DOCS_LOCATION']}/docs/auth?segment=${segment}&access_token=${tokens.access_token}&refresh_token=${tokens.refresh_token}&expires_in=${tokens.expires_in}&error=${error}`;
+  context.res = {
+    status: 302,
+    headers: {
+      Location: url
+    },
+    body: {}
+  }
+  context.done();
+}

docs/docs/auth.mdx

@@ -1,11 +1,9 @@
 ---
 id: auth
-title: Authentication
+title: Segment Authentication
 sidebar_label: Authentication
 ---
 
 import CodeBlock from '../src/components/Auth.js';
 
-Use the following snippet to adjust your segment and enable the authentication.
-
 <CodeBlock/>

docs/docusaurus.config.js

@@ -9,12 +9,15 @@ module.exports = {
   organizationName: "jandedobbeleer",
   projectName: "oh-my-posh",
   onBrokenLinks: "ignore",
-  plugins: [path.resolve(__dirname, 'plugins', 'appinsights')],
+  plugins: [
+    path.resolve(__dirname, 'plugins', 'appinsights'),
+    'docusaurus-node-polyfills'
+  ],
   themeConfig: {
     prism: {
       theme: require("prism-react-renderer/themes/duotoneLight"),
       darkTheme: require("prism-react-renderer/themes/oceanicNext"),
-      additionalLanguages: ['powershell', 'lua'],
+      additionalLanguages: ['powershell', 'lua', 'jsstacktrace'],
     },
     navbar: {
       title: "Oh My Posh",

docs/package.json

@@ -12,11 +12,13 @@
     "@docusaurus/preset-classic": "^2.0.0-beta.9",
     "@docusaurus/theme-search-algolia": "^2.0.0-beta.ff31de0ff",
     "classnames": "^2.3.1",
+    "query-string": "^7.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "cross-env": "^7.0.3"
+    "cross-env": "^7.0.3",
+    "docusaurus-node-polyfills": "^1.0.0"
   },
   "browserslist": {
     "production": [

docs/src/components/Auth.js

@@ -1,29 +1,52 @@
 import React from 'react';
 import {useLocation} from "react-router-dom";
 import CodeBlock from '@theme/CodeBlock';
-import { URLSearchParams } from 'url';
+const queryString = require('query-string');
 
 function Auth() {
   const search = useLocation().search;
-  const segment = new URLSearchParams(search).get('segment');
-  const access_token = new URLSearchParams(search).get('access_token');
-  const refresh_token = new URLSearchParams(search).get('refresh_token');
+  const params = queryString.parse(search);
+
+  if (params.error) {
+    let buff = Buffer.from(params.error, 'base64');
+    let text = buff.toString('ascii');
+    return (
+      <div>
+        <p>
+          Error on authenticating with the <code>{params.segment}</code> API, please provide the following error message
+          in a <a href='https://github.com/JanDeDobbeleer/oh-my-posh/issues/new/choose'>ticket</a> in
+          case this was unexpected.
+        </p>
+        <CodeBlock className="language-jsstacktrace">
+          {text}
+        </CodeBlock>
+      </div>
+    );
+  }
 
   const config = `
   {
-    "type": "${segment}",
+    "type": "${params.segment}",
     ...
     "properties": {
-      "access_token":"${access_token}",
-      "refresh_token":"${refresh_token}"
+      // highlight-start
+      "access_token":"${params.access_token}",
+      "refresh_token":"${params.refresh_token}",
+      "expires_in":"${params.expires_in}"
+      // highlight-end
     }
   }
   `;
 
   return (
-    <CodeBlock className="language-json" title="config.omp.json">
-      {config}
-    </CodeBlock>
+    <div>
+        <p>
+          Use the following snippet to adjust your segment and enable the authentication.
+        </p>
+      <CodeBlock className="language-json" title="config.omp.json">
+        {config}
+      </CodeBlock>
+    </div>
   );
 }