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