@jbrowse/plugin-authentication 2.2.0

package/src/HTTPBasicModel/model.tsx

@@ -0,0 +1,70 @@
+import { ConfigurationReference, getConf } from '@jbrowse/core/configuration'
+import { InternetAccount } from '@jbrowse/core/pluggableElementTypes/models'
+import { UriLocation } from '@jbrowse/core/util/types'
+import { HTTPBasicInternetAccountConfigModel } from './configSchema'
+import { Instance, types, getRoot } from 'mobx-state-tree'
+
+import { HTTPBasicLoginForm } from './HTTPBasicLoginForm'
+
+const stateModelFactory = (
+  configSchema: HTTPBasicInternetAccountConfigModel,
+) => {
+  return InternetAccount.named('HTTPBasicInternetAccount')
+    .props({
+      type: types.literal('HTTPBasicInternetAccount'),
+      configuration: ConfigurationReference(configSchema),
+    })
+    .views(self => ({
+      get validateWithHEAD(): boolean {
+        return getConf(self, 'validateWithHEAD')
+      },
+    }))
+    .actions(self => ({
+      getTokenFromUser(
+        resolve: (token: string) => void,
+        reject: (error: Error) => void,
+      ) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const { session } = getRoot<any>(self)
+        session.queueDialog((doneCallback: () => void) => [
+          HTTPBasicLoginForm,
+          {
+            internetAccountId: self.internetAccountId,
+            handleClose: (token: string) => {
+              if (token) {
+                resolve(token)
+              } else {
+                reject(new Error('user cancelled entry'))
+              }
+              doneCallback()
+            },
+          },
+        ])
+      },
+      async validateToken(token: string, location: UriLocation) {
+        if (!self.validateWithHEAD) {
+          return token
+        }
+        const newInit = self.addAuthHeaderToInit({ method: 'HEAD' }, token)
+        const response = await fetch(location.uri, newInit)
+        if (!response.ok) {
+          let errorMessage
+          try {
+            errorMessage = await response.text()
+          } catch (error) {
+            errorMessage = ''
+          }
+          throw new Error(
+            `Error validating token — ${response.status} (${
+              response.statusText
+            })${errorMessage ? ` (${errorMessage})` : ''}`,
+          )
+        }
+        return token
+      },
+    }))
+}
+
+export default stateModelFactory
+export type HTTPBasicStateModel = ReturnType<typeof stateModelFactory>
+export type HTTPBasicModel = Instance<HTTPBasicStateModel>

package/src/OAuthModel/configSchema.ts

@@ -0,0 +1,98 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import { Instance } from 'mobx-state-tree'
+import { BaseInternetAccountConfig } from '@jbrowse/core/pluggableElementTypes/models'
+
+/**
+ * #config OAuthInternetAccount
+ */
+function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
+
+const OAuthConfigSchema = ConfigurationSchema(
+  'OAuthInternetAccount',
+  {
+    /**
+     * #slot
+     */
+    tokenType: {
+      description: 'a custom name for a token to include in the header',
+      type: 'string',
+      defaultValue: 'Bearer',
+    },
+    /**
+     * #slot
+     */
+    authEndpoint: {
+      description: 'the authorization code endpoint of the internet account',
+      type: 'string',
+      defaultValue: '',
+    },
+    /**
+     * #slot
+     */
+    tokenEndpoint: {
+      description: 'the token endpoint of the internet account',
+      type: 'string',
+      defaultValue: '',
+    },
+    /**
+     * #slot
+     */
+    needsPKCE: {
+      description: 'boolean to indicate if the endpoint needs a PKCE code',
+      type: 'boolean',
+      defaultValue: false,
+    },
+    /**
+     * #slot
+     */
+    clientId: {
+      description: 'id for the OAuth application',
+      type: 'string',
+      defaultValue: '',
+    },
+    /**
+     * #slot
+     */
+    scopes: {
+      description: 'optional scopes for the authorization call',
+      type: 'string',
+      defaultValue: '',
+    },
+    /**
+     * #slot
+     */
+    state: {
+      description: 'optional state for the authorization call',
+      type: 'string',
+      defaultValue: '',
+    },
+    /**
+     * #slot
+     */
+    responseType: {
+      description: 'the type of response from the authorization endpoint',
+      type: 'string',
+      defaultValue: 'code',
+    },
+    /**
+     * #slot
+     */
+    hasRefreshToken: {
+      description: 'true if the endpoint can supply a refresh token',
+      type: 'boolean',
+      defaultValue: false,
+    },
+  },
+  {
+    /**
+     * #baseConfiguration
+     */
+    baseConfiguration: BaseInternetAccountConfig,
+    explicitlyTyped: true,
+  },
+)
+
+export type OAuthInternetAccountConfigModel = typeof OAuthConfigSchema
+export type OAuthInternetAccountConfig =
+  Instance<OAuthInternetAccountConfigModel>
+export default OAuthConfigSchema

package/src/OAuthModel/index.ts

@@ -0,0 +1,2 @@
+export { default as configSchema } from './configSchema'
+export { default as modelFactory } from './model'

package/src/OAuthModel/model.tsx

@@ -0,0 +1,357 @@
+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'
+
+interface OAuthData {
+  client_id: string
+  redirect_uri: string
+  response_type: 'token' | 'code'
+  scope?: string
+  code_challenge?: string
+  code_challenge_method?: string
+  token_access_type?: string
+  state?: string
+}
+
+function fixup(buf: string) {
+  return buf.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '')
+}
+
+function getGlobalObject(): Window {
+  // Based on window-or-global
+  // https://github.com/purposeindustries/window-or-global/blob/322abc71de0010c9e5d9d0729df40959e1ef8775/lib/index.js
+  return (
+    // eslint-disable-next-line no-restricted-globals
+    (typeof self === 'object' && self.self === self && self) ||
+    (typeof global === 'object' && global.global === global && global) ||
+    // @ts-ignore
+    this
+  )
+}
+
+const stateModelFactory = (configSchema: OAuthInternetAccountConfigModel) => {
+  return InternetAccount.named('OAuthInternetAccount')
+    .props({
+      type: types.literal('OAuthInternetAccount'),
+      configuration: ConfigurationReference(configSchema),
+    })
+    .views(() => {
+      let codeVerifier: string | undefined = undefined
+      return {
+        get codeVerifierPKCE() {
+          if (codeVerifier) {
+            return codeVerifier
+          }
+          const global = getGlobalObject()
+          const array = new Uint8Array(32)
+          global.crypto.getRandomValues(array)
+          codeVerifier = fixup(Buffer.from(array).toString('base64'))
+          return codeVerifier
+        },
+      }
+    })
+    .views(self => ({
+      get authEndpoint(): string {
+        return getConf(self, 'authEndpoint')
+      },
+      get tokenEndpoint(): string {
+        return getConf(self, 'tokenEndpoint')
+      },
+      get needsPKCE(): boolean {
+        return getConf(self, 'needsPKCE')
+      },
+      get clientId(): string {
+        return getConf(self, 'clientId')
+      },
+      get scopes(): string {
+        return getConf(self, 'scopes')
+      },
+      /**
+       * 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
+      },
+      get responseType(): 'token' | 'code' {
+        return getConf(self, 'responseType')
+      },
+      get hasRefreshToken(): boolean {
+        return getConf(self, 'hasRefreshToken')
+      },
+      get refreshTokenKey() {
+        return `${self.internetAccountId}-refreshToken`
+      },
+    }))
+    .actions(self => ({
+      storeRefreshToken(refreshToken: string) {
+        localStorage.setItem(self.refreshTokenKey, refreshToken)
+      },
+      removeRefreshToken() {
+        localStorage.removeItem(self.refreshTokenKey)
+      },
+      retrieveRefreshToken() {
+        return localStorage.getItem(self.refreshTokenKey)
+      },
+      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 response = await fetch(self.tokenEndpoint, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+          body: params.toString(),
+        })
+
+        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})` : ''}`,
+          )
+        }
+
+        const accessToken = await response.json()
+        if (accessToken.refresh_token) {
+          this.storeRefreshToken(accessToken.refresh_token)
+        }
+        return accessToken.access_token
+      },
+      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(),
+        })
+
+        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 */
+          }
+
+          throw new Error(
+            `Network response failure — ${response.status} (${
+              response.statusText
+            }) ${text ? ` (${text})` : ''}`,
+          )
+        }
+
+        const accessToken = await response.json()
+        if (accessToken.refresh_token) {
+          this.storeRefreshToken(accessToken.refresh_token)
+        }
+        return accessToken.access_token
+      },
+    }))
+    .actions(self => {
+      let listener: (event: MessageEvent) => void
+      let refreshTokenPromise: Promise<string> | undefined = undefined
+      return {
+        // used to listen to child window for auth code/token
+        addMessageChannel(
+          resolve: (token: string) => void,
+          reject: (error: Error) => void,
+        ) {
+          listener = event => {
+            this.finishOAuthWindow(event, resolve, reject)
+          }
+          window.addEventListener('message', listener)
+        },
+        deleteMessageChannel() {
+          window.removeEventListener('message', listener)
+        },
+        async finishOAuthWindow(
+          event: MessageEvent,
+          resolve: (token: string) => void,
+          reject: (error: Error) => void,
+        ) {
+          if (
+            event.data.name !== `JBrowseAuthWindow-${self.internetAccountId}`
+          ) {
+            return this.deleteMessageChannel()
+          }
+          const redirectUriWithInfo = event.data.redirectUri
+          const fixedQueryString = redirectUriWithInfo.replace('#', '?')
+          const redirectUrl = new URL(fixedQueryString)
+          const queryStringSearch = redirectUrl.search
+          const urlParams = new URLSearchParams(queryStringSearch)
+          if (urlParams.has('access_token')) {
+            const token = urlParams.get('access_token')
+            if (!token) {
+              return reject(new Error('Error with token endpoint'))
+            }
+            self.storeToken(token)
+            return resolve(token)
+          }
+          if (urlParams.has('code')) {
+            const code = urlParams.get('code')
+            if (!code) {
+              return reject(new Error('Error with authorization endpoint'))
+            }
+            try {
+              const token = await self.exchangeAuthorizationForAccessToken(
+                code,
+                redirectUrl.origin + redirectUrl.pathname,
+              )
+              self.storeToken(token)
+              return resolve(token)
+            } catch (error) {
+              if (error instanceof Error) {
+                return reject(error)
+              } else {
+                return reject(new Error(String(error)))
+              }
+            }
+          }
+          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))
+          }
+          this.deleteMessageChannel()
+        },
+        // opens external OAuth flow, popup for web and new browser window for desktop
+        async useEndpointForAuthorization(
+          resolve: (token: string) => void,
+          reject: (error: Error) => void,
+        ) {
+          const redirectUri = isElectron
+            ? 'http://localhost/auth'
+            : window.location.origin + window.location.pathname
+          const data: OAuthData = {
+            client_id: self.clientId,
+            redirect_uri: redirectUri,
+            response_type: self.responseType || 'code',
+          }
+
+          if (self.state()) {
+            data.state = self.state()
+          }
+
+          if (self.scopes) {
+            data.scope = self.scopes
+          }
+
+          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_method = 'S256'
+          }
+
+          if (self.hasRefreshToken) {
+            data.token_access_type = 'offline'
+          }
+
+          const params = new URLSearchParams(Object.entries(data))
+
+          const url = new URL(self.authEndpoint)
+          url.search = params.toString()
+
+          const eventName = `JBrowseAuthWindow-${self.internetAccountId}`
+          if (isElectron) {
+            const { ipcRenderer } = window.require('electron')
+            const redirectUri = await ipcRenderer.invoke('openAuthWindow', {
+              internetAccountId: self.internetAccountId,
+              data,
+              url: url.toString(),
+            })
+
+            const eventFromDesktop = new MessageEvent('message', {
+              data: { name: eventName, redirectUri: redirectUri },
+            })
+            this.finishOAuthWindow(eventFromDesktop, resolve, reject)
+          } else {
+            const options = `width=500,height=600,left=0,top=0`
+            window.open(url, eventName, options)
+          }
+        },
+        async getTokenFromUser(
+          resolve: (token: string) => void,
+          reject: (error: Error) => void,
+        ): Promise<void> {
+          const refreshToken =
+            self.hasRefreshToken && self.retrieveRefreshToken()
+          if (refreshToken) {
+            resolve(await self.exchangeRefreshForAccessToken(refreshToken))
+          }
+          this.addMessageChannel(resolve, reject)
+          this.useEndpointForAuthorization(resolve, reject)
+        },
+        async validateToken(
+          token: string,
+          location: UriLocation,
+        ): Promise<string> {
+          const decoded = jwtDecode<JwtPayload>(token)
+          if (decoded.exp && decoded.exp < new Date().getTime() / 1000) {
+            const refreshToken =
+              self.hasRefreshToken && self.retrieveRefreshToken()
+            if (refreshToken) {
+              try {
+                if (!refreshTokenPromise) {
+                  refreshTokenPromise =
+                    self.exchangeRefreshForAccessToken(refreshToken)
+                }
+                const newToken = await refreshTokenPromise
+                return this.validateToken(newToken, location)
+              } catch (err) {
+                throw new Error(`Token could not be refreshed. ${err}`)
+              }
+            }
+          } else {
+            refreshTokenPromise = undefined
+          }
+          return token
+        },
+      }
+    })
+}
+
+export default stateModelFactory
+export type OAuthStateModel = ReturnType<typeof stateModelFactory>
+export type OAuthModel = Instance<OAuthStateModel>

package/src/__snapshots__/index.test.js.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`initialized correctly 1`] = `
+Object {
+  "internetAccountId": "HTTPBasicTest",
+  "type": "HTTPBasicInternetAccount",
+}
+`;

package/src/index.test.js

@@ -0,0 +1,96 @@
+import Plugin from '@jbrowse/core/Plugin'
+import PluginManager from '@jbrowse/core/PluginManager'
+import InternetAccountType from '@jbrowse/core/pluggableElementTypes/InternetAccountType'
+import {
+  configSchema as OAuthConfigSchema,
+  modelFactory as OAuthInternetAccountModelFactory,
+} from './OAuthModel'
+import {
+  configSchema as ExternalTokenConfigSchema,
+  modelFactory as ExternalTokenInternetAccountModelFactory,
+} from './ExternalTokenModel'
+import {
+  configSchema as HTTPBasicConfigSchema,
+  modelFactory as HTTPBasicInternetAccountModelFactory,
+} from './HTTPBasicModel'
+import {
+  configSchema as DropboxOAuthConfigSchema,
+  modelFactory as DropboxOAuthInternetAccountModelFactory,
+} from './DropboxOAuthModel'
+import {
+  configSchema as GoogleDriveOAuthConfigSchema,
+  modelFactory as GoogleDriveOAuthInternetAccountModelFactory,
+} from './GoogleDriveOAuthModel'
+import { getSnapshot } from 'mobx-state-tree'
+
+// mock warnings to avoid unnecessary outputs
+beforeEach(() => {
+  jest.spyOn(console, 'warn').mockImplementation(() => {})
+})
+
+afterEach(() => {
+  console.warn.mockRestore()
+})
+
+class AuthenticationPlugin extends Plugin {
+  install(pluginManager) {
+    pluginManager.addInternetAccountType(() => {
+      return new InternetAccountType({
+        name: 'OAuthInternetAccount',
+        configSchema: OAuthConfigSchema,
+        stateModel: OAuthInternetAccountModelFactory(OAuthConfigSchema),
+      })
+    })
+    pluginManager.addInternetAccountType(() => {
+      return new InternetAccountType({
+        name: 'ExternalTokenInternetAccount',
+        configSchema: ExternalTokenConfigSchema,
+        stateModel: ExternalTokenInternetAccountModelFactory(
+          ExternalTokenConfigSchema,
+        ),
+      })
+    })
+    pluginManager.addInternetAccountType(() => {
+      return new InternetAccountType({
+        name: 'HTTPBasicInternetAccount',
+        configSchema: HTTPBasicConfigSchema,
+        stateModel: HTTPBasicInternetAccountModelFactory(HTTPBasicConfigSchema),
+      })
+    })
+    pluginManager.addInternetAccountType(() => {
+      return new InternetAccountType({
+        name: 'DropboxOAuthInternetAccount',
+        configSchema: DropboxOAuthConfigSchema,
+        stateModel: DropboxOAuthInternetAccountModelFactory(
+          DropboxOAuthConfigSchema,
+        ),
+      })
+    })
+    pluginManager.addInternetAccountType(() => {
+      return new InternetAccountType({
+        name: 'GoogleDriveOAuthInternetAccount',
+        configSchema: GoogleDriveOAuthConfigSchema,
+        stateModel: GoogleDriveOAuthInternetAccountModelFactory(
+          GoogleDriveOAuthConfigSchema,
+        ),
+      })
+    })
+  }
+}
+
+test('initialized correctly', () => {
+  const pm = new PluginManager([
+    new AuthenticationPlugin(),
+  ]).createPluggableElements()
+
+  expect(Object.values(pm.internetAccountTypes.registeredTypes).length).toEqual(
+    5,
+  )
+
+  const HTTPBasic = pm.getInternetAccountType('HTTPBasicInternetAccount')
+  const config = HTTPBasic.configSchema.create({
+    type: 'HTTPBasicInternetAccount',
+    internetAccountId: 'HTTPBasicTest',
+  })
+  expect(getSnapshot(config)).toMatchSnapshot()
+})