dancefinder-app/plugins/auth.js

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)
}