feat(ui): added logout functionality to epic

ui/src/Logout.tsx

@@ -1,29 +1,32 @@
 // Libraries
-import {PureComponent} from 'react'
+import {FC, useEffect} from 'react'
 import {withRouter, WithRouterProps} from 'react-router'
+import auth0js from 'auth0-js'
 
 // APIs
 import {postSignout} from 'src/client'
+import {getAuth0Config} from 'src/authorizations/apis'
 
 // Constants
 import {CLOUD, CLOUD_URL, CLOUD_LOGOUT_PATH} from 'src/shared/constants'
 
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
-type Props = WithRouterProps
-
-@ErrorHandling
-export class Logout extends PureComponent<Props> {
-  public componentDidMount() {
-    this.handleSignOut()
-  }
-
-  public render() {
-    return null
-  }
-
-  private handleSignOut = async () => {
+// Utils
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+
+const Logout: FC<WithRouterProps> = ({router}) => {
+  const handleSignOut = async () => {
+    if (CLOUD && isFlagEnabled('regionBasedLoginPage')) {
+      const config = await getAuth0Config()
+      const auth0 = new auth0js.WebAuth({
+        domain: config.domain,
+        clientID: config.clientID,
+      })
+      auth0.logout({})
+      return
+    }
     if (CLOUD) {
       window.location.href = `${CLOUD_URL}${CLOUD_LOGOUT_PATH}`
       return
@@ -34,9 +37,14 @@ export class Logout extends PureComponent<Props> {
         throw new Error(resp.data.message)
       }
 
-      this.props.router.push(`/signin`)
+      router.push(`/signin`)
     }
   }
+
+  useEffect(() => {
+    handleSignOut()
+  }, [])
+  return null
 }
 
-export default withRouter<Props>(Logout)
+export default ErrorHandling(withRouter<WithRouterProps>(Logout))

ui/src/authorizations/apis/index.ts

@@ -1,5 +1,5 @@
 import AJAX from 'src/utils/ajax'
-import {Authorization} from 'src/types'
+import {Authorization, Auth0Config} from 'src/types'
 
 export const createAuthorization = async (
   authorization
@@ -17,3 +17,14 @@ export const createAuthorization = async (
     throw error
   }
 }
+
+export const getAuth0Config = async (): Promise<Auth0Config> => {
+  try {
+    const response = await fetch('/api/v2private/oauth/clientConfig')
+    const data = await response.json()
+    return data
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}

ui/src/onboarding/containers/LoginPageContents.tsx

@@ -14,7 +14,7 @@ import {
   Panel,
   SelectGroup,
 } from '@influxdata/clockface'
-import auth0js from 'auth0-js'
+import auth0js, {WebAuth} from 'auth0-js'
 
 // Components
 import {LoginForm} from 'src/onboarding/components/LoginForm'
@@ -25,17 +25,10 @@ import {GoogleLogo, GithubLogo} from 'src/clientLibraries/graphics'
 // Types
 import {Auth0Connection, FormFieldValidation} from 'src/types'
 
-// Actions
+// APIs & Actions
 import {notify} from 'src/shared/actions/notifications'
 import {passwordResetSuccessfully} from 'src/shared/copy/notifications'
-
-// TODO: these are filler properties that will be populated on IDPE in a later iteration
-const auth0 = new auth0js.WebAuth({
-  domain: 'www.influxdata.com',
-  clientID: 'abc123',
-  redirectUri: 'www.influxdata.com',
-  responseType: 'code',
-})
+import {getAuth0Config} from 'src/authorizations/apis'
 
 interface ErrorObject {
   [key: string]: string | undefined
@@ -61,6 +54,8 @@ interface State {
 }
 
 class LoginPageContents extends PureComponent<DispatchProps> {
+  private auth0?: typeof WebAuth
+
   state: State = {
     activeTab: 'login',
     buttonStatus: ComponentStatus.Default,
@@ -76,6 +71,16 @@ class LoginPageContents extends PureComponent<DispatchProps> {
     confirmPasswordError: '',
   }
 
+  public async componentDidMount() {
+    const config = await getAuth0Config()
+    this.auth0 = auth0js.WebAuth({
+      domain: config.domain,
+      clientID: config.clientID,
+      redirectUri: config.redirectURL,
+      responseType: 'code',
+    })
+  }
+
   render() {
     const {
       buttonStatus,
@@ -273,7 +278,7 @@ class LoginPageContents extends PureComponent<DispatchProps> {
     this.setState({buttonStatus: ComponentStatus.Loading})
 
     if (activeTab === 'login') {
-      auth0.login(
+      this.auth0.login(
         {
           realm: Auth0Connection.Authentication,
           email,
@@ -289,7 +294,7 @@ class LoginPageContents extends PureComponent<DispatchProps> {
       return
     }
 
-    auth0.signup(
+    this.auth0.signup(
       {
         connection: Auth0Connection.Authentication,
         email,
@@ -304,7 +309,7 @@ class LoginPageContents extends PureComponent<DispatchProps> {
           return
         }
         // log the user into Quartz
-        auth0.login(
+        this.auth0.login(
           {
             realm: Auth0Connection.Authentication,
             email,
@@ -346,7 +351,7 @@ class LoginPageContents extends PureComponent<DispatchProps> {
   }
 
   private handleSocialClick = (connection: Auth0Connection) => {
-    auth0.authorize({
+    this.auth0.authorize({
       connection,
     })
   }
@@ -358,7 +363,7 @@ class LoginPageContents extends PureComponent<DispatchProps> {
       this.setState({emailError: 'Please enter a valid email address'})
       return
     }
-    auth0.changePassword(
+    this.auth0.changePassword(
       {
         email,
         connection: Auth0Connection.Authentication,

ui/src/types/auth.ts

@@ -5,3 +5,9 @@ export enum Auth0Connection {
   Github = 'github',
   Authentication = 'Username-Password-Authentication',
 }
+
+export type Auth0Config = {
+  clientID: string
+  domain: string
+  redirectURL: string
+}