chore: make auth and apollo a bit more reactive

plugins/auth.js

@@ -7,10 +7,10 @@ const DEFAULT_REDIRECT_CALLBACK = () =>
 
 let instance
 
-const params = new URL(window.location).searchParams
+const params = (new URL(window.location)).searchParams
 const domain = params.get('domain') || 'unbound.eu.auth0.com'
 
-export default (onRedirectCallback = DEFAULT_REDIRECT_CALLBACK) => {
+export const useAuth = (onRedirectCallback = DEFAULT_REDIRECT_CALLBACK) => {
   if (instance) {
     return toRefs(instance)
   }
@@ -34,23 +34,23 @@ export default (onRedirectCallback = DEFAULT_REDIRECT_CALLBACK) => {
       this.popupOpen = true
 
       try {
-        await instance.auth0Client.loginWithPopup(o)
+        await instance.auth0Client.then(client => client.loginWithPopup(o))
       } catch (e) {
         // eslint-disable-next-line
-        console.error(e);
+        console.error(e)
       } finally {
         instance.popupOpen = false
       }
 
-      instance.user = await instance.auth0Client.getUser()
+      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.handleRedirectCallback()
-        instance.user = await instance.auth0Client.getUser()
+        await instance.auth0Client.then(client => client.handleRedirectCallback())
+        instance.user = await instance.auth0Client.then(client => client.getUser())
         instance.isAuthenticated = true
       } catch (e) {
         instance.error = e
@@ -60,62 +60,73 @@ export default (onRedirectCallback = DEFAULT_REDIRECT_CALLBACK) => {
     },
     /** Authenticates the user using the redirect method */
     loginWithRedirect: o => {
-      return instance.auth0Client.loginWithRedirect(o)
+      return instance.auth0Client.then(client => client.loginWithRedirect(o))
     },
     /** Returns all the claims present in the ID token */
     getIdTokenClaims: o => {
-      return instance.auth0Client.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.getTokenSilently(o)
+      return instance.auth0Client.then(client => {
+        return client.getTokenSilently(o)
+      })
     },
     /** Gets the access token using a popup window */
     getTokenWithPopup: o => {
-      return instance.auth0Client.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.logout(o)
+      return instance.auth0Client.then(client => client.logout(o))
     }
   })
 
   const fetchUser = () => {
-    instance.auth0Client.isAuthenticated().then(a => {
-      instance.isAuthenticated = a
-      instance.auth0Client.getUser().then(u => {
-        instance.user = u
-        instance.loading = false
+    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
-  createAuth0Client(options).then(client => {
-    instance.loading = true
-    instance.auth0Client = client
-    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
-        instance.auth0Client.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
+// 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
+      // instance.auth0Client = client
+      try {
+        // If the user is returning to the app after authentication..
+        if (
+          window.location.search.includes('code=') &&
+          window.location.search.includes('state=')
+        ) {
+          console.log('location search', window.location.search)
+          // 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()
+            })
+            .catch(e => console.error('error handling redirect callback', e))
+        } else {
           fetchUser()
-        })
-      } else {
-        fetchUser()
+        }
+      } catch (e) {
+        instance.error = e
+      } finally {
+        instance.loading = false
       }
-    } catch (e) {
-      instance.error = e
-    } finally {
-      instance.loading = false
-    }
-  })
+    })
 
   return toRefs(instance)
 }