@jbrowse/plugin-authentication 2.5.0 → 2.6.1

package/src/OAuthModel/model.tsx

@@ -2,10 +2,16 @@ import { ConfigurationReference, getConf } from '@jbrowse/core/configuration'
 import { InternetAccount } from '@jbrowse/core/pluggableElementTypes/models'
 import { isElectron, UriLocation } from '@jbrowse/core/util'
 import { Instance, types } from 'mobx-state-tree'
-import jwtDecode, { JwtPayload } from 'jwt-decode'
 
 // locals
 import { OAuthInternetAccountConfigModel } from './configSchema'
+import {
+  fixup,
+  generateChallenge,
+  processError,
+  processTokenResponse,
+} from './util'
+import { getResponseError } from '../util'
 
 interface OAuthData {
   client_id: string
@@ -18,19 +24,27 @@ interface OAuthData {
   state?: string
 }
 
-function fixup(buf: string) {
-  return buf.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '')
-}
-
+/**
+ * #stateModel OAuthInternetAccount
+ */
 const stateModelFactory = (configSchema: OAuthInternetAccountConfigModel) => {
   return InternetAccount.named('OAuthInternetAccount')
     .props({
+      /**
+       * #property
+       */
       type: types.literal('OAuthInternetAccount'),
+      /**
+       * #property
+       */
       configuration: ConfigurationReference(configSchema),
     })
     .views(() => {
       let codeVerifier: string | undefined = undefined
       return {
+        /**
+         * #getter
+         */
         get codeVerifierPKCE() {
           if (codeVerifier) {
             return codeVerifier
@@ -43,61 +57,95 @@ const stateModelFactory = (configSchema: OAuthInternetAccountConfigModel) => {
       }
     })
     .views(self => ({
+      /**
+       * #getter
+       */
       get authEndpoint(): string {
         return getConf(self, 'authEndpoint')
       },
+      /**
+       * #getter
+       */
       get tokenEndpoint(): string {
         return getConf(self, 'tokenEndpoint')
       },
+      /**
+       * #getter
+       */
       get needsPKCE(): boolean {
         return getConf(self, 'needsPKCE')
       },
+      /**
+       * #getter
+       */
       get clientId(): string {
         return getConf(self, 'clientId')
       },
+      /**
+       * #getter
+       */
       get scopes(): string {
         return getConf(self, 'scopes')
       },
       /**
-       * OAuth state parameter: https://www.rfc-editor.org/rfc/rfc6749#section-4.1.1
+       * #method
+       * OAuth state parameter:
+       * https://www.rfc-editor.org/rfc/rfc6749#section-4.1.1
+       *
        * Can override or extend if dynamic state is needed.
        */
       state(): string | undefined {
-        return getConf(self, 'state') || undefined
+        return getConf(self, 'state')
       },
+      /**
+       * #getter
+       */
       get responseType(): 'token' | 'code' {
         return getConf(self, 'responseType')
       },
-      get hasRefreshToken(): boolean {
-        return getConf(self, 'hasRefreshToken')
-      },
+      /**
+       * #getter
+       */
       get refreshTokenKey() {
         return `${self.internetAccountId}-refreshToken`
       },
     }))
+
     .actions(self => ({
+      /**
+       * #action
+       */
       storeRefreshToken(refreshToken: string) {
         localStorage.setItem(self.refreshTokenKey, refreshToken)
       },
+      /**
+       * #action
+       */
       removeRefreshToken() {
         localStorage.removeItem(self.refreshTokenKey)
       },
+      /**
+       * #method
+       */
       retrieveRefreshToken() {
         return localStorage.getItem(self.refreshTokenKey)
       },
+      /**
+       * #action
+       */
       async exchangeAuthorizationForAccessToken(
         token: string,
         redirectUri: string,
       ): Promise<string> {
-        const data = {
-          code: token,
-          grant_type: 'authorization_code',
-          client_id: self.clientId,
-          code_verifier: self.codeVerifierPKCE,
-          redirect_uri: redirectUri,
-        }
-
-        const params = new URLSearchParams(Object.entries(data))
+        const params = new URLSearchParams(
+          Object.entries({
+            code: token,
+            grant_type: 'authorization_code',
+            client_id: self.clientId,
+            redirect_uri: redirectUri,
+            ...(self.needsPKCE ? { code_verifier: self.codeVerifierPKCE } : {}),
+          }),
+        )
 
         const response = await fetch(self.tokenEndpoint, {
           method: 'POST',
@@ -106,74 +154,61 @@ const stateModelFactory = (configSchema: OAuthInternetAccountConfigModel) => {
         })
 
         if (!response.ok) {
-          let errorMessage
-          try {
-            errorMessage = await response.text()
-          } catch (error) {
-            errorMessage = ''
-          }
           throw new Error(
-            `Failed to obtain token from endpoint: ${response.status} (${
-              response.statusText
-            })${errorMessage ? ` (${errorMessage})` : ''}`,
+            await getResponseError({
+              response,
+              reason: 'Failed to obtain token',
+            }),
           )
         }
 
-        const accessToken = await response.json()
-        if (accessToken.refresh_token) {
-          this.storeRefreshToken(accessToken.refresh_token)
-        }
-        return accessToken.access_token
+        const data = await response.json()
+        return processTokenResponse(data, token =>
+          this.storeRefreshToken(token),
+        )
       },
+      /**
+       * #action
+       */
       async exchangeRefreshForAccessToken(
         refreshToken: string,
       ): Promise<string> {
-        const data = {
-          grant_type: 'refresh_token',
-          refresh_token: refreshToken,
-          client_id: self.clientId,
-        }
-
-        const params = new URLSearchParams(Object.entries(data))
-
         const response = await fetch(self.tokenEndpoint, {
           method: 'POST',
           headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-          body: params.toString(),
+          body: new URLSearchParams(
+            Object.entries({
+              grant_type: 'refresh_token',
+              refresh_token: refreshToken,
+              client_id: self.clientId,
+            }),
+          ).toString(),
         })
 
         if (!response.ok) {
           self.removeToken()
-          let text = await response.text()
-          try {
-            const obj = JSON.parse(text)
-            if (obj.error === 'invalid_grant') {
-              this.removeRefreshToken()
-            }
-            text = obj?.error_description ?? text
-          } catch (e) {
-            /* just use original text as error */
-          }
-
+          const text = await response.text()
           throw new Error(
-            `Network response failure — ${response.status} (${
-              response.statusText
-            }) ${text ? ` (${text})` : ''}`,
+            await getResponseError({
+              response,
+              statusText: processError(text, () => this.removeRefreshToken()),
+            }),
           )
         }
-
-        const accessToken = await response.json()
-        if (accessToken.refresh_token) {
-          this.storeRefreshToken(accessToken.refresh_token)
-        }
-        return accessToken.access_token
+        const data = await response.json()
+        return processTokenResponse(data, token =>
+          this.storeRefreshToken(token),
+        )
       },
     }))
     .actions(self => {
-      let listener: (event: MessageEvent) => void
-      let refreshTokenPromise: Promise<string> | undefined = undefined
+      let listener: (event: MessageEvent) => void | undefined
+      let exchangedTokenPromise: Promise<string> | undefined = undefined
       return {
-        // used to listen to child window for auth code/token
+        /**
+         * #action
+         * used to listen to child window for auth code/token
+         */
         addMessageChannel(
           resolve: (token: string) => void,
           reject: (error: Error) => void,
@@ -185,9 +220,15 @@ const stateModelFactory = (configSchema: OAuthInternetAccountConfigModel) => {
           }
           window.addEventListener('message', listener)
         },
+        /**
+         * #action
+         */
         deleteMessageChannel() {
           window.removeEventListener('message', listener)
         },
+        /**
+         * #action
+         */
         async finishOAuthWindow(
           event: MessageEvent,
           resolve: (token: string) => void,
@@ -223,21 +264,25 @@ const stateModelFactory = (configSchema: OAuthInternetAccountConfigModel) => {
               )
               self.storeToken(token)
               return resolve(token)
-            } catch (error) {
-              return error instanceof Error
-                ? reject(error)
-                : reject(new Error(String(error)))
+            } catch (e) {
+              return e instanceof Error
+                ? reject(e)
+                : reject(new Error(String(e)))
             }
           }
           if (redirectUriWithInfo.includes('access_denied')) {
             return reject(new Error('OAuth flow was cancelled'))
           }
           if (redirectUriWithInfo.includes('error')) {
-            return reject(new Error('Oauth flow error: ' + queryStringSearch))
+            return reject(new Error('OAuth flow error: ' + queryStringSearch))
           }
           this.deleteMessageChannel()
         },
-        // opens external OAuth flow, popup for web and new browser window for desktop
+        /**
+         * #action
+         * opens external OAuth flow, popup for web and new browser window for
+         * desktop
+         */
         async useEndpointForAuthorization(
           resolve: (token: string) => void,
           reject: (error: Error) => void,
@@ -249,6 +294,7 @@ const stateModelFactory = (configSchema: OAuthInternetAccountConfigModel) => {
             client_id: self.clientId,
             redirect_uri: redirectUri,
             response_type: self.responseType || 'code',
+            token_access_type: 'offline',
           }
 
           if (self.state()) {
@@ -260,21 +306,10 @@ const stateModelFactory = (configSchema: OAuthInternetAccountConfigModel) => {
           }
 
           if (self.needsPKCE) {
-            const { codeVerifierPKCE } = self
-
-            const sha256 = await import('crypto-js/sha256').then(f => f.default)
-            const Base64 = await import('crypto-js/enc-base64')
-            const codeChallenge = fixup(
-              Base64.stringify(sha256(codeVerifierPKCE)),
-            )
-            data.code_challenge = codeChallenge
+            data.code_challenge = await generateChallenge(self.codeVerifierPKCE)
             data.code_challenge_method = 'S256'
           }
 
-          if (self.hasRefreshToken) {
-            data.token_access_type = 'offline'
-          }
-
           const params = new URLSearchParams(Object.entries(data))
 
           const url = new URL(self.authEndpoint)
@@ -296,51 +331,98 @@ const stateModelFactory = (configSchema: OAuthInternetAccountConfigModel) => {
             // eslint-disable-next-line @typescript-eslint/no-floating-promises
             this.finishOAuthWindow(eventFromDesktop, resolve, reject)
           } else {
-            const options = `width=500,height=600,left=0,top=0`
-            window.open(url, eventName, options)
+            window.open(url, eventName, `width=500,height=600,left=0,top=0`)
           }
         },
+        /**
+         * #action
+         */
         async getTokenFromUser(
           resolve: (token: string) => void,
           reject: (error: Error) => void,
-        ): Promise<void> {
-          const refreshToken =
-            self.hasRefreshToken && self.retrieveRefreshToken()
+        ) {
+          const refreshToken = self.retrieveRefreshToken()
+          let doUserFlow = true
+
+          // if there is a refresh token, then try it out, and only if that
+          // refresh token succeeds, set doUserFlow to false
           if (refreshToken) {
-            resolve(await self.exchangeRefreshForAccessToken(refreshToken))
+            try {
+              const token = await self.exchangeRefreshForAccessToken(
+                refreshToken,
+              )
+              resolve(token)
+              doUserFlow = false
+            } catch (e) {
+              console.error(e)
+              self.removeRefreshToken()
+            }
+          }
+          if (doUserFlow) {
+            this.addMessageChannel(resolve, reject)
+            // may want to improve handling
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            this.useEndpointForAuthorization(resolve, reject)
           }
-          this.addMessageChannel(resolve, reject)
-          // may want to improve handling
-          // eslint-disable-next-line @typescript-eslint/no-floating-promises
-          this.useEndpointForAuthorization(resolve, reject)
         },
-        async validateToken(
-          token: string,
-          location: UriLocation,
-        ): Promise<string> {
-          const decoded = jwtDecode<JwtPayload>(token)
-          if (decoded.exp && decoded.exp < Date.now() / 1000) {
-            const refreshToken =
-              self.hasRefreshToken && self.retrieveRefreshToken()
+        /**
+         * #action
+         */
+        async validateToken(token: string, location: UriLocation) {
+          const newInit = self.addAuthHeaderToInit({ method: 'HEAD' }, token)
+          const response = await fetch(location.uri, newInit)
+          if (!response.ok) {
+            self.removeToken()
+            const refreshToken = self.retrieveRefreshToken()
             if (refreshToken) {
               try {
-                if (!refreshTokenPromise) {
-                  refreshTokenPromise =
+                if (!exchangedTokenPromise) {
+                  exchangedTokenPromise =
                     self.exchangeRefreshForAccessToken(refreshToken)
                 }
-                const newToken = await refreshTokenPromise
-                return this.validateToken(newToken, location)
+                const newToken = await exchangedTokenPromise
+                exchangedTokenPromise = undefined
+                return newToken
               } catch (err) {
-                throw new Error(`Token could not be refreshed. ${err}`)
+                console.error('Token could not be refreshed', err)
+                // let original error be thrown
               }
             }
-          } else {
-            refreshTokenPromise = undefined
+
+            throw new Error(
+              await getResponseError({
+                response,
+                reason: 'Error validating token',
+              }),
+            )
           }
           return token
         },
       }
     })
+    .actions(self => {
+      const superGetFetcher = self.getFetcher
+      return {
+        /**
+         * #action
+         * Get a fetch method that will add any needed authentication headers to
+         * the request before sending it. If location is provided, it will be
+         * checked to see if it includes a token in it's pre-auth information.
+         *
+         * @param loc - UriLocation of the resource
+         * @returns A function that can be used to fetch
+         */
+        getFetcher(loc?: UriLocation) {
+          const fetcher = superGetFetcher(loc)
+          return async (input: RequestInfo, init?: RequestInit) => {
+            if (loc) {
+              await self.validateToken(await self.getToken(loc), loc)
+            }
+            return fetcher(input, init)
+          }
+        },
+      }
+    })
 }
 
 export default stateModelFactory

package/src/OAuthModel/util.ts

@@ -0,0 +1,33 @@
+export function fixup(buf: string) {
+  return buf.replaceAll('+', '-').replaceAll('/', '_').replaceAll('=', '')
+}
+
+export async function generateChallenge(val: string) {
+  const sha256 = await import('crypto-js/sha256').then(f => f.default)
+  const Base64 = await import('crypto-js/enc-base64')
+  return fixup(Base64.stringify(sha256(val)))
+}
+
+// if response is JSON, checks if it needs to remove tokens in error, or just plain throw
+export function processError(text: string, invalidErrorCb: () => void) {
+  try {
+    const obj = JSON.parse(text)
+    if (obj.error === 'invalid_grant') {
+      invalidErrorCb()
+    }
+    return obj?.error_description ?? text
+  } catch (e) {
+    /* response text is not json, just use original text as error */
+  }
+  return text
+}
+
+export function processTokenResponse(
+  data: { refresh_token?: string; access_token: string },
+  storeRefreshTokenCb: (str: string) => void,
+) {
+  if (data.refresh_token) {
+    storeRefreshTokenCb(data.refresh_token)
+  }
+  return data.access_token
+}

package/src/util.ts

@@ -0,0 +1,25 @@
+export async function getResponseError({
+  response,
+  reason,
+  statusText,
+}: {
+  response: Response
+  reason?: string
+  statusText?: string
+}) {
+  return [
+    `HTTP ${response.status}`,
+    reason,
+    statusText ?? (await getError(response)),
+  ]
+    .filter(f => !!f)
+    .join(' - ')
+}
+
+export async function getError(response: Response) {
+  try {
+    return response.text()
+  } catch (e) {
+    return response.statusText
+  }
+}