diff --git a/src/auth/authenticationGuard.js b/src/auth/authenticationGuard.js index 43bae27..0010b6e 100644 --- a/src/auth/authenticationGuard.js +++ b/src/auth/authenticationGuard.js @@ -4,14 +4,6 @@ import { getInstance } from '@/plugins/auth0' export const authenticationGuard = (to, from, next) => { const authService = getInstance() - const guardAction = () => { - if (authService.isAuthenticated) { - return next() - } - - authService.loginWithRedirect({ appState: { targetUrl: to.fullPath } }); - }; - // If the Auth0Plugin has loaded already, check the authentication state if (!authService.isLoading) { return guardAction() @@ -22,4 +14,19 @@ export const authenticationGuard = (to, from, next) => { return guardAction() } }) -} \ No newline at end of file + + function guardAction() { + if (authService.isAuthenticated) { + return next() + } + + const options = { + appState: { + targetUrl: to.fullPath + } + } + authService.loginWithRedirect(options); + } +} + + diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue index 5848af8..94fa79e 100644 --- a/src/components/Navigation.vue +++ b/src/components/Navigation.vue @@ -95,7 +95,8 @@ export default { this.$router.push({ path: '/' }) } else { // https://auth0.github.io/auth0-spa-js/interfaces/redirectloginoptions.html - this.$auth.loginWithRedirect({ scope: 'openid profile email read:quotes read:authors' }) + const scope = 'openid profile email read:quotes read:authors' + this.$auth.loginWithRedirect({ scope }) } } } diff --git a/src/plugins/auth0.js b/src/plugins/auth0.js index ccbc2c0..6c5ec87 100644 --- a/src/plugins/auth0.js +++ b/src/plugins/auth0.js @@ -17,7 +17,7 @@ export const getInstance = () => instance export const useAuth0 = ({ onRedirectCallback = DEFAULT_REDIRECT_CALLBACK, redirectUri = DEFAULT_REDIRECT_URI, - ...pluginOptions + ...options }) => { if (instance) return instance @@ -59,37 +59,53 @@ export const useAuth0 = ({ this.isLoading = false } }, - loginWithRedirect(options) { + loginWithRedirect(opts) { + // always ensure that openid, profile and email are requested scopes. + const scopes = ['openid', 'profile', 'email'] + let options = {} + + if (typeof opts != 'object') { + options.scope = scopes.join(' ') + } else { + const scope = scopes + .concat(opts.hasOwnProperty('scope') ? opts.scope.split(' ') : []) + .filter((v,i,A) => A.indexOf(v) == i) + .join(' ') + options = Object.assign(opts, { scope }) + } + console.log(options) return this.auth0Client.loginWithRedirect(options) }, - getIdTokenClaims(options) { - return this.auth0Client.getIdTokenClaims(options) + getIdTokenClaims(opts) { + return this.auth0Client.getIdTokenClaims(opts) }, - getTokenSilently(options) { - return this.auth0Client.getTokenSilently(options) + getTokenSilently(opts) { + return this.auth0Client.getTokenSilently(opts) }, - getTokenWithPopup(options) { - return this.auth0Client.getTokenWithPopup(options) + getTokenWithPopup(opts) { + return this.auth0Client.getTokenWithPopup(opts) }, - logout(options) { + logout(opts) { + const options = Object.assign(typeof opts == 'object' ? opts : {}, { returnTo: process.env.VUE_APP_AUTH0_LOGOUTURL }) return this.auth0Client.logout(options) } }, async created() { this.auth0Client = await createAuth0Client({ - ...pluginOptions, - domain: pluginOptions.domain, - client_id: pluginOptions.clientId, - audience: pluginOptions.audience, + ...options, + client_id: options.clientId, redirect_uri: redirectUri, }) try { - if (window.location.search.includes("code=") && window.location.search.includes("state=")) { - const { appState } = await this.auth0Client.handleRedirectCallback() - - onRedirectCallback(appState) - } + if ( + window.location.search.includes('code=') && + window.location.search.includes('state=') + ) { + const { appState } = await this.auth0Client.handleRedirectCallback() + this.error = null + onRedirectCallback(appState) + } } catch (error) { this.error = error } finally { @@ -103,10 +119,6 @@ export const useAuth0 = ({ return instance } - /** - * Vue Plugin Definition - */ - export const Auth0Plugin = { install(Vue, options) { Vue.prototype.$auth = useAuth0(options)