Move authentication to external client

ui/package-lock.json

@@ -828,6 +828,14 @@
       "integrity": "sha512-I2EjI9TbEFJNLziNPFfpo64PNanOaK17iL2kTW/jGlGOa4bvHw4VEied83kOEB7NJjXf1KfvmsQ2aEjy3xjiGg==",
       "dev": true
     },
+    "@influxdata/influx": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@influxdata/influx/-/influx-0.1.1.tgz",
+      "integrity": "sha512-ANHGcrjXc5PRZfeAknkGIvQbNb8eI3I8iqTxPLKZHQvqQm3SD3brbE5CV+Qt/iRsszu3beIL2CjUBrU+wQLcWg==",
+      "requires": {
+        "axios": "^0.18.0"
+      }
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",

ui/package.json

@@ -114,6 +114,7 @@
     "typescript": "^3.1.3"
   },
   "dependencies": {
+    "@influxdata/influx": "^0.1.1",
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",
     "bignumber.js": "^4.0.2",

ui/src/Logout.tsx

@@ -3,7 +3,7 @@ import {PureComponent} from 'react'
 import {withRouter, WithRouterProps} from 'react-router'
 
 // APIs
-import {logout} from 'src/me/apis'
+import {client} from 'src/utils/api'
 
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -21,7 +21,7 @@ export class Logout extends PureComponent<Props> {
   }
 
   private handleSignOut = async () => {
-    await logout()
+    await client.auth.signout()
 
     this.props.router.push(`/signin`)
   }

ui/src/me/apis/index.ts

@@ -1,5 +1,5 @@
-import {baseAPI} from 'src/utils/api'
+import {client} from 'src/utils/api'
 
 export const logout = async (): Promise<void> => {
-  await baseAPI.signoutPost()
+  await client.auth.signout()
 }

ui/src/onboarding/actions/index.ts

@@ -5,10 +5,11 @@ import {SetupSuccess, SetupError} from 'src/shared/copy/notifications'
 // Actions
 import {notify} from 'src/shared/actions/notifications'
 
+import {client} from 'src/utils/api'
+
 // Types
 import {
   SetupParams,
-  signin as signinAJAX,
   setSetupParams as setSetupParamsAJAX,
 } from 'src/onboarding/apis'
 
@@ -75,10 +76,9 @@ export const setupAdmin = (setupParams: SetupParams) => async dispatch => {
     dispatch(setOrganizationID(orgID))
     dispatch(setBucketID(bucketID))
 
-    await signinAJAX({
-      username: setupParams.username,
-      password: setupParams.password,
-    })
+    const {username, password} = setupParams
+
+    await client.auth.signin(username, password)
     dispatch(notify(SetupSuccess))
   } catch (err) {
     console.error(err)

ui/src/onboarding/apis/index.ts

@@ -1,7 +1,7 @@
 // Libraries
 import _ from 'lodash'
 
-import {baseAPI, setupAPI, sourcesAPI} from 'src/utils/api'
+import {setupAPI, sourcesAPI} from 'src/utils/api'
 
 // Utils
 import {
@@ -10,6 +10,7 @@ import {
   writeAPI,
   scraperTargetsApi,
 } from 'src/utils/api'
+
 import {
   Telegraf,
   WritePrecision,
@@ -68,19 +69,6 @@ export const setSetupParams = async (
   }
 }
 
-export const signin = async (params: {
-  username: string
-  password: string
-}): Promise<void> => {
-  const {username, password} = params
-  try {
-    await baseAPI.signinPost({auth: {username, password}})
-  } catch (error) {
-    console.error('Sign in has failed', error)
-    throw error
-  }
-}
-
 export const trySources = async (): Promise<boolean> => {
   try {
     await sourcesAPI.sourcesGet('')

ui/src/onboarding/components/SigninForm.tsx

@@ -20,7 +20,7 @@ import {
 } from 'src/clockface'
 
 // APIs
-import {signin} from 'src/onboarding/apis'
+import {client} from 'src/utils/api'
 
 // Actions
 import {notify as notifyAction} from 'src/shared/actions/notifications'
@@ -107,7 +107,7 @@ class SigninForm extends PureComponent<Props, State> {
     const {username, password} = this.state
 
     try {
-      await signin({username, password})
+      await client.auth.signin(username, password)
       this.handleRedirect()
     } catch (error) {
       const message = get(error, 'response.data.msg', '')

ui/src/utils/api.ts

@@ -18,8 +18,12 @@ import {
   LabelsApi,
 } from 'src/api'
 
+import Client from '@influxdata/influx'
+
 const basePath = '/api/v2'
 
+export const client = new Client(basePath)
+
 export const baseAPI = new DefaultApi({basePath})
 export const viewsAPI = new ViewsApi({basePath})
 export const taskAPI = new TasksApi({basePath})