I was able to open the login page but once I use my credentials to login, it gave me 500 internal server error in the console. I checked my redirect_uri and I tried to put my localhost directly but it wont work…The issue in my log said server_error : Unable to issue redirect for OAuth 2.0 transaction. The web application uses Vue2 and auth0-spa-js 1.22.5. I tried to update the auth0-spa-js version but there was some compatible issues so I sticked to the older version.
Hi @hzhao1003,
Welcome to the Auth0 Community!
I can’t see the image you’ve attached because it is a link from a private source.
What request is returning the error? You can see the requests in your DevTools Network tab.
Let me know!
Hi Dan,
thank you so much for the reply, I tried to login, but once I clicked the continue button I received the 500 internal error and hope this image will show😂. I use vue2 and auth0-spa-js if that helps.
and here is what I got in the console
I suspect you may be pointing to the wrong domain. Can you confirm you are copying the domain property directly from the Application Settings in the dashboard?
Hi Dan,
I just checked my dashboard and copied domain again to my code. It still gave me the same error…
Can you please share the details of how you are making the request? A code snippet would be helpful.
- In auth0-plugin.js file:
import Vue from 'vue'
import createAuth0Client from '@auth0/auth0-spa-js'
/**
* Vue.js Instance Definition
*/
let instance
export const getInstance = () => instance
/**
* Vue.js Instance Initialization
*/
export const useAuth0 = ({
onRedirectCallback = () =>
window.history.replaceState({}, document.title, window.location.pathname),
redirectUri = window.location.origin,
// this ...options is for passing domain and client ID that saved in auth_config.json
...options
}) => {
if (instance) return instance
instance = new Vue({
data() {
return {
auth0Client: null,
isLoading: true,
isAuthenticated: false,
user: {},
error: null
}
},
async created() {
this.auth0Client = await createAuth0Client({
...options,
domain: options.domain,
client_id: options.clientId,
authorizationParams: {
redirect_uri: redirectUri
}
})
try {
if (
window.location.search.includes('code=') &&
window.location.search.includes('state=')
) {
const { appState } = await this.auth0Client.handleRedirectCallback()
onRedirectCallback(appState)
}
} catch (error) {
this.error = error
} finally {
this.isAuthenticated = await this.auth0Client.isAuthenticated()
this.user = await this.auth0Client.getUser()
this.isLoading = false
}
},
methods: {
async handleRedirectCallback() {
this.isLoading = true
try {
await this.auth0Client.handleRedirectCallback()
this.user = await this.auth0Client.getUser()
this.isAuthenticated = true
} catch (error) {
this.error = error
} finally {
this.isLoading = false
}
},
loginWithRedirect(options) {
return this.auth0Client.loginWithRedirect(options)
},
logout(options) {
return this.auth0Client.logout(options)
},
getTokenSilently(options) {
return this.auth0Client.getTokenSilently(options)
}
}
})
return instance
}
/**
* Vue.js Plugin Definition
*/
export const Auth0Plugin = {
install(Vue, options) {
Vue.prototype.$auth = useAuth0(options)
}
}
- I have auth_config.json to store my domain and clientID info
- In main.js:
import { domain, clientId } from '../auth_config.json'
Vue.use(Auth0Plugin, {
domain,
clientId,
onRedirectCallback: (appState) => {
router.push(
appState && appState.targetUrl
? appState.targetUrl
: window.location.pathname
)
}
})
- I have an AuthenticationButton.vue:
<template>
<!-- Check that the SDK client is not currently loading before accessing is methods -->
<div v-if="!$auth.loading">
<!-- show login when not authenticated -->
<button v-if="!$auth.isAuthenticated" @click="login">Log in</button>
<!-- show logout when authenticated -->
<button v-if="$auth.isAuthenticated" @click="logout">Log out</button>
</div>
</template>
<script>
export default {
name: 'AuthenticationButton',
methods: {
// Log the user in
login() {
this.$auth.loginWithRedirect()
},
// Log the user out
logout() {
this.$auth.logout({
logoutParams: {
returnTo: window.location.origin
}
})
}
}
}
</script>
No line of the codes throw error. but when I ran npm run dev and try to login from the web server it wont redirect and showed the error 500.
Do you mean I missed auth0 imports in AuthenticationButton.vue?
Thank you!
Yes, that’s correct.
Hi Dan,
I checked this page: Vue.js Authentication 2 By Example…_gcl_auNjAxNDM5NTkwLjE2OTk0OTAwOTI._gaMjAzOTU5NzUzMC4xNzAyNjUxMTAx*_ga_QKMSDV5369*MTcwNTExMDQ1OC4yMS4wLjE3MDUxMTA0NjUuNTMuMC4w
and it seems like on the login button I don’t need import anything. Did I miss something 
I just tested out the quickstart and everything is working. I didn’t need to import either, I think you are correct.
…
Also, I missed something initially that I’m concerned is the root of the problem:
These are major version differences and there are significant, breaking changes between the two versions. I would expect auth0-spa-js v1.x to cause problems if you are following a quickstart for version 2.x.
For what it’s worth, I didn’t have any trouble using "@auth0/auth0-spa-js": "^2.1.3", in my application.
1 Like
I see. Thank you Dan! I’ve actually used the 2.1.3 version and with that version I couldn’t even get to the login page but with the older version I can open the login page, it’s just after submit the credentials it won’t redirect…I will ask my manager to update the version and try again!
Sounds good. Let me know what you’re seeing with the new version.
If you absolutely must use V1, here are the changes that you’ll need to adapt from the quickstart.
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.