chore: refactor a lot, add codegen and upgrade vue

2022-08-03 18:40:05 +02:00
parent 0e1ce42af2
commit e24b65c85b
42 changed files with 3854 additions and 1073 deletions
@@ -1,7 +1,9 @@
-import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client/core'
+import {
+  ApolloClient,
+  InMemoryCache,
+  createHttpLink
+} from '@apollo/client/core'
 import { setContext } from '@apollo/client/link/context'
-import { provide } from '@vue/composition-api'
-import { DefaultApolloClient } from '@vue/apollo-composable'
 import { useAuth } from './auth'

 const apiUrl = process.env.graphqlApi || '/query'
@@ -12,12 +14,12 @@ const httpLink = createHttpLink({
  uri: apiUrl
 })

-const getToken = async (options) => {
+const getToken = (options) => {
  const { getTokenSilently } = useAuth()
-  return getTokenSilently.value(options)
+  return getTokenSilently(options)
 }

-const authLink = setContext(async (_, { headers }) => {
+const authLink = setContext((_, { headers }) => {
  return getToken().then((token) => ({
    headers: {
      ...headers,
@@ -42,8 +44,6 @@ const instance = new ApolloClient({
  }
 })

-export default function ({ app }) {
-  app.setup = () => {
-    provide(DefaultApolloClient, instance)
-  }
+export default function (_, inject) {
+  inject('apollo', instance)
 }
@@ -1,138 +0,0 @@
-import createAuth0Client from '@auth0/auth0-spa-js'
-import { reactive, toRefs } from '@vue/composition-api'
-
-/** Define a default action to perform after authentication */
-const DEFAULT_REDIRECT_CALLBACK = () =>
-  window.history.replaceState({}, document.title, window.location.pathname)
-
-let instance
-
-const params = new URL(window.location).searchParams
-const domain = params.get('domain') || 'unbound.eu.auth0.com'
-
-// eslint-disable-next-line import/prefer-default-export
-export const useAuth = (onRedirectCallback = DEFAULT_REDIRECT_CALLBACK) => {
-  if (instance) {
-    return toRefs(instance)
-  }
-
-  const options = {
-    domain,
-    client_id: 'orQfnvCPUR5C3mJkKoiWLQHOVQsBn60e',
-    audience: 'http://dancefinder.unbound.se',
-    redirect_uri: window.location.origin
-  }
-
-  instance = reactive({
-    loading: false,
-    isAuthenticated: false,
-    user: {},
-    auth0Client: null,
-    popupOpen: false,
-    error: null,
-    /** Authenticates the user using a popup window */
-    loginWithPopup: async (o) => {
-      this.popupOpen = true
-
-      try {
-        await instance.auth0Client.then((client) => client.loginWithPopup(o))
-      } catch (e) {
-        // eslint-disable-next-line
-        console.error(e)
-      } finally {
-        instance.popupOpen = false
-      }
-
-      instance.user = await instance.auth0Client.then((client) =>
-        client.getUser()
-      )
-      instance.isAuthenticated = true
-    },
-    /** Handles the callback when logging in using a redirect */
-    handleRedirectCallback: async () => {
-      instance.loading = true
-      try {
-        await instance.auth0Client.then((client) =>
-          client.handleRedirectCallback()
-        )
-        instance.user = await instance.auth0Client.then((client) =>
-          client.getUser()
-        )
-        instance.isAuthenticated = true
-      } catch (e) {
-        instance.error = e
-      } finally {
-        instance.loading = false
-      }
-    },
-    /** Authenticates the user using the redirect method */
-    loginWithRedirect: (o) => {
-      return instance.auth0Client.then((client) => client.loginWithRedirect(o))
-    },
-    /** Returns all the claims present in the ID token */
-    getIdTokenClaims: (o) => {
-      return instance.auth0Client.then((client) => client.getIdTokenClaims(o))
-    },
-    /** Returns the access token. If the token is invalid or missing, a new one is retrieved */
-    getTokenSilently: (o) => {
-      return instance.auth0Client.then((client) => {
-        return client.getTokenSilently(o)
-      })
-    },
-    /** Gets the access token using a popup window */
-    getTokenWithPopup: (o) => {
-      return instance.auth0Client.then((client) => client.getTokenWithPopup(o))
-    },
-    /** Logs the user out and removes their session on the authorization server */
-    logout: (o) => {
-      return instance.auth0Client.then((client) => client.logout(o))
-    }
-  })
-
-  const fetchUser = () => {
-    instance.auth0Client
-      .then((client) => client.isAuthenticated())
-      .then((a) => {
-        instance.isAuthenticated = a
-        instance.auth0Client.then((client) =>
-          client.getUser().then((u) => {
-            instance.user = u
-            instance.loading = false
-          })
-        )
-      })
-  }
-  // Create a new instance of the SDK client using members of the given options object
-  instance.auth0Client = createAuth0Client(options)
-  instance.auth0Client.then((client) => {
-    instance.loading = true
-    try {
-      // If the user is returning to the app after authentication..
-      if (
-        window.location.search.includes('code=') &&
-        window.location.search.includes('state=')
-      ) {
-        // handle the redirect and retrieve tokens
-        client
-          .handleRedirectCallback()
-          .then((appState) => {
-            // Notify subscribers that the redirect callback has happened, passing the appState
-            // (useful for retrieving any pre-authentication state)
-            onRedirectCallback(appState)
-            // Initialize our internal authentication state
-            fetchUser()
-          })
-          // eslint-disable-next-line no-console
-          .catch((e) => console.error('error handling redirect callback', e))
-      } else {
-        fetchUser()
-      }
-    } catch (e) {
-      instance.error = e
-    } finally {
-      instance.loading = false
-    }
-  })
-
-  return toRefs(instance)
-}
@@ -0,0 +1,139 @@
+import createAuth0Client, {
+  Auth0Client,
+  GetIdTokenClaimsOptions,
+  GetTokenSilentlyOptions,
+  IdToken,
+  LogoutOptions,
+  RedirectLoginOptions,
+  User
+} from '@auth0/auth0-spa-js'
+import { Ref, ref } from 'vue'
+
+/** Define a default action to perform after authentication */
+const DEFAULT_REDIRECT_CALLBACK = (_: any) =>
+  window.history.replaceState({}, document.title, window.location.pathname)
+
+interface Client {
+  loading: Ref<boolean>
+  isAuthenticated: Ref<boolean>
+  user: Ref<User | undefined>
+  auth0Client?: Promise<Auth0Client>
+  error: Ref
+  handleRedirectCallback: () => Promise<void>
+  loginWithRedirect: (o: RedirectLoginOptions) => Promise<void>
+  getIdTokenClaims: (o: GetIdTokenClaimsOptions) => Promise<void | IdToken | undefined>
+  getTokenSilently: (o: GetTokenSilentlyOptions) => Promise<string | void>
+  logout: (o: LogoutOptions) => Promise<void>
+}
+
+let instance: Client
+
+const params = (new URL(window.location.href)).searchParams
+const domain = params.get('domain') || 'unbound.eu.auth0.com'
+
+export const useAuth = (onRedirectCallback: (appState?: any) => void = DEFAULT_REDIRECT_CALLBACK) => {
+  if (instance) {
+    return instance
+  }
+  const options = {
+    domain,
+    client_id: 'orQfnvCPUR5C3mJkKoiWLQHOVQsBn60e',
+    audience: 'http://dancefinder.unbound.se',
+    redirect_uri: window.location.origin
+  }
+
+  instance = {
+    loading: ref(true),
+    isAuthenticated: ref(false),
+    user: ref(undefined),
+    auth0Client: undefined,
+    error: ref(null),
+    /** Handles the callback when logging in using a redirect */
+    handleRedirectCallback: () => {
+      instance.loading.value = true
+      return instance.auth0Client!.then(client => client.handleRedirectCallback())
+        .then(() => {
+          return instance.auth0Client?.then(client => client.getUser())
+            .then((user) => {
+                instance.user.value = user
+                instance.isAuthenticated.value = true
+                instance.error.value = null
+              }
+            )
+        })
+        .catch((e) => {
+          instance.error.value = e
+        })
+        .finally(() => {
+          instance.loading.value = false
+        })
+    },
+    /** Authenticates the user using the redirect method */
+    loginWithRedirect: (o: RedirectLoginOptions) => {
+      return instance.auth0Client!.then(client => client.loginWithRedirect(o))
+        .catch((e) => {
+          instance.error.value = e
+        })
+    },
+    /** Returns all the claims present in the ID token */
+    getIdTokenClaims: (o: GetIdTokenClaimsOptions) => {
+      return instance.auth0Client!.then(client => client.getIdTokenClaims(o))
+    },
+    /** Returns the access token. If the token is invalid or missing, a new one is retrieved */
+    getTokenSilently: (o: GetTokenSilentlyOptions) => {
+      return instance.auth0Client!.then(client => {
+        return client.getTokenSilently(o).catch(e => {
+          instance.error.value = e
+        })
+      })
+    },
+    /** Logs the user out and removes their session on the authorization server */
+    logout: (o: LogoutOptions) => {
+      return instance.auth0Client!.then(client => client.logout(o))
+    }
+  }
+
+  const fetchUser = () => {
+    return instance.auth0Client!.then(client => client.isAuthenticated())
+      .then(a => {
+        instance.auth0Client?.then(client => client.getUser()
+          .then(u => {
+            instance.isAuthenticated.value = a
+            instance.user.value = u
+            instance.error.value = null
+          }))
+      })
+  }
+// Create a new instance of the SDK client using members of the given options object
+  instance.auth0Client = createAuth0Client(options)
+  instance.auth0Client
+    .then(client => {
+      instance.loading.value = true
+      // If the user is returning to the app after authentication..
+      if (
+        window.location.search.includes('state=') && (
+          window.location.search.includes('code=') ||
+          window.location.search.includes('error=')
+        )
+      ) {
+        // handle the redirect and retrieve tokens
+        return client.handleRedirectCallback()
+          .then(result => {
+            // Notify subscribers that the redirect callback has happened, passing the appState
+            // (useful for retrieving any pre-authentication state)
+            onRedirectCallback(result.appState)
+            // Initialize our internal authentication state
+            return fetchUser()
+          })
+      } else {
+        return fetchUser()
+      }
+    })
+    .catch((e) => {
+      instance.error.value = e
+    })
+    .finally(() => {
+      instance.loading.value = false
+    })
+  return instance
+}
@@ -1,4 +0,0 @@
-import Vue from 'vue'
-import VueCompositionApi from '@vue/composition-api'
-
-Vue.use(VueCompositionApi)