Handle auth errors client-side

3 files changed, 18 insertions, 9 deletions

diff --git a/application/components/app.vue b/application/components/app.vue
index 6136a9c..f675e57 100644
--- a/application/components/app.vue
+++ b/application/components/app.vue
@@ -53,8 +53,7 @@ export default {
       this.layers.splice(0, this.layers.length, ...keymap.layers)
     },
     handleGithubAuthorize() {
-      localStorage.removeItem('auth_token')
-      location.href = `${config.apiBaseUrl}/github/authorize`
+      github.beginLoginFlow()
     },
     handleCommitChanges() {
       const keymap = Object.assign({}, this.keymap, { layers: this.layers })
diff --git a/application/config.js b/application/config.js
index b4cb7f4..a8375fe 100644
--- a/application/config.js
+++ b/application/config.js
@@ -1,5 +1,3 @@
-const params = [...new URLSearchParams(location.search).keys()]
-
 function parseBoolean (val) {
   return val && ['1', 'on', 'yes', 'true'].includes(val.toString().toLowerCase())
 }
@@ -10,5 +8,3 @@ export const appBaseUrl = process.env.APP_BASE_URL
 export const githubAppName = process.env.GITHUB_APP_NAME
 export const enableGitHub = parseBoolean(process.env.ENABLE_GITHUB)
 export const enableLocal = parseBoolean(process.env.ENABLE_LOCAL)
-
-console.log({ enableGitHub, enableLocal })
diff --git a/application/github.js b/application/github.js
index 5e60ee7..8ec9a2c 100644
--- a/application/github.js
+++ b/application/github.js
@@ -4,6 +4,15 @@ let token
 let installation
 let repositories
 
+function request (...args) {
+  return fetch(...args).then(res => {
+    return res.status !== 401 ? res : (
+      console.error('Authentication failure. Retrying login'),
+      beginLoginFlow()
+    )
+  })
+}
+
 export async function init () {
   const param = new URLSearchParams(location.search).get('token')
   if (!localStorage.auth_token && param) {
@@ -13,7 +22,7 @@ export async function init () {
 
   if (localStorage.auth_token) {
     token = localStorage.auth_token
-    const data = await fetch(`${config.apiBaseUrl}/github/installation`, {
+    const data = await request(`${config.apiBaseUrl}/github/installation`, {
       headers: {
         Authorization: `Bearer ${token}`
       }
@@ -39,12 +48,17 @@ export async function init () {
   }
 }
 
+export function beginLoginFlow () {
+  localStorage.removeItem('auth_token')
+  location.href = `${config.apiBaseUrl}/github/authorize`
+}
+
 export function isGitHubAuthorized() {
   return !!token && installation && repositories && repositories.length
 }
 
 export async function fetchLayoutAndKeymap() {
-  const data = await fetch(
+  const data = await request(
     `${config.apiBaseUrl}/github/keyboard-files/${encodeURIComponent(installation.id)}/${encodeURIComponent(repositories[0].full_name)}`,
     { headers: { Authorization: `Bearer ${localStorage.auth_token}`} }
   ).then(res => res.json())
@@ -60,7 +74,7 @@ export function commitChanges(layout, keymap) {
   const repository = encodeURIComponent(repositories[0].full_name)
   const url = `${config.apiBaseUrl}/github/keyboard-files/${installationId}/${repository}`
 
-  return fetch(url, {
+  return request(url, {
     method: 'POST',
     headers: {
       Authorization: `Bearer ${token}`,