I am having the troubles starting with vue3 and auth0 - invalid_request: Missing required parameter: client_id

Help
,
1

I am having invalid_request : Missing required parameter: client_id on a new Vue3 Auth0-vue.

Can anyone help where is the problem?

I am using auth0-vue 2.1.0 and Vue 3.2.47.

Configuration of Auth on a auth0.js file:

import { createAuth0 } from '@auth0/auth0-vue';
import router from './router'

export default createAuth0({
    domain: "domain",
    client_id: "clientid",
    authorizationParams: {
        redirect_uri: window.location.origin
    },
    onRedirectCallback: appState => {
        router.push(
            appState && appState.targetUrl
                ? appState.targetUrl
                : window.location.pathname
        );
    },
    cache: {
        cacheLocation: 'localStorage', // This configures where your cache will be stored
        storeAuthStateInCookie: true, // Set this to "true" if you are having issues on IE11 or Edge
        secureCookies: false,
    }
})

on main.js I have:

....
import router from './router'

import store from './store'

import auth0 from './auth0'

const app = createApp(App)
app.use(auth0).use(vuetify).use(router).use(store).mount('#app')

and on the component where I have the button to request the login:

...
login() {
            alert('Login: ' + JSON.stringify(this.$auth0))
            this.$auth0.loginWithRedirect({
                appState: {
                    target: "/projects",
                }
            });
        },
...

on the alert above the auth0 appears to be correct with:

{"clientOptions":{"domain":"domain,"client_id":"clientid","authorizationParams":{"redirect_uri":"http://localhost:1337"},"cache":{"cacheLocation":"localStorage","storeAuthStateInCookie":true,"secureCookies":false}},"_isLoading":{"__v_isShallow":false,"__v_isRef":true,"_rawValue":true,"_value":true},"_isAuthenticated":{"__v_isShallow":false,"__v_isRef":true,"_rawValue":false,"_value":false},"_user":{"__v_isShallow":false,"__v_isRef":true,"_rawValue":{},"_value":{}},"_idTokenClaims":{"__v_isShallow":false,"__v_isRef":true},"_error":{"__v_isShallow":false,"__v_isRef":true,"_rawValue":null,"_value":null},"isLoading":{"__v_isShallow":false,"__v_isRef":true,"_rawValue":true,"_value":true},"isAuthenticated":{"__v_isShallow":false,"__v_isRef":true,"_rawValue":false,"_value":false},"user":{"__v_isShallow":false,"__v_isRef":true,"_rawValue":{},"_value":{}},"idTokenClaims":{"__v_isShallow":false,"__v_isRef":true},"error":{"__v_isShallow":false,"__v_isRef":true,"_rawValue":null,"_value":null},"_client":{"userCache":{},"defaultOptions":{"authorizationParams":{"scope":"openid profile email"},"useRefreshTokensFallback":false,"useFormData":true},"options":{"authorizationParams":{"scope":"openid profile email","redirect_uri":"http://localhost:1337"},"useRefreshTokensFallback":false,"useFormData":true,"domain":"domain","client_id":"clientid","cache":{"cacheLocation":"localStorage","storeAuthStateInCookie":true,"secureCookies":false},"auth0Client":{"name":"auth0-vue","version":"2.1.0"}},"httpTimeoutMs":10000,"cookieStorage":{},"orgHintCookieName":"auth0.undefined.organization_hint","isAuthenticatedCookieName":"auth0.undefined.is.authenticated","sessionCheckExpiryDays":1,"scope":"openid profile email","transactionManager":{"storage":{},"storageKey":"a0.spajs.txs.undefined","transaction":{"nonce":"UkxZVEFrRUpGVERncjNIVmtFOFVwQzFsZV9VZDR4WHpBbzJfUXAxNWdORA==","code_verifier":"a9PbGhGXl8UyxCQ0HdGgHaICjpdZz40xr9lY583aKTS","scope":"openid profile email","audience":"default","redirect_uri":"http://localhost:1337","state":"bXNYSnB1YjFNVy1NUEpJMXlLWkJhbU9QcHk3aVpUTTg0YlZuN0t1RGlVZA==","appState":{"target":"/projects"}}},"cacheManager":{"cache":{"cacheLocation":"localStorage","storeAuthStateInCookie":true,"secureCookies":false},"keyManifest":{"cache":{"cacheLocation":"localStorage","storeAuthStateInCookie":true,"secureCookies":false},"manifestKey":"@@auth0spajs@@::undefined"}},"domainUrl":"https://domain","tokenIssuer":"https://domain/"}}

Can anyone help me see where is the problem?

Best regards,

1 Like
2

You have to specify your own clientid and tenant information. See this tutorial :

3

I hide the value so they are not public but the values are the correct ones that appear in the Auth0 page:
Domain: dev-1flzkotdey2fm@@@.us.auth0.com
Client: OairsgbVMfSz5GNl6k0QuWXq4kmcm@@@

4

As far as I can see, although createAuth0 has the client_id parameter in the creation, it appears at the this.$auth0 variable, but it does not go to the URL for the loginWithRedirect:
https://dev-1flzkotdey2fm74y.us.auth0.com/authorize?scope=openid+profile+email&audience=https%3A%2F%2Fdev-1flzkotdey2fm74y.eu.auth0.com%2Fuserinfo&redirect_uri=http%3A%2F%2Flocalhost%3A1337&response_type=code&response_mode=query&state=OXZxQU1qOWFnM05uR0pnU1Jlc2N4OEFkdVZ5aG45N0NJY1lvemdTY1dKZA%3D%3D&nonce=aHFMQnJITGxsZ0U4TUNyfjdTWXFNSUdDVktlQVlpVDJyQS5DflVxQVVhdQ%3D%3D&code_challenge=DqvNFGsswMkTjOCRvQFVkqp1iKst5BxbhgK1vY7F2Kc&code_challenge_method=S256&auth0Client=eyJuYW1lIjoiYXV0aDAtdnVlIiwidmVyc2lvbiI6IjIuMS4wIn0%3D

5

And when I add &client_id=OairsgbVMfSz5GNl6k0QuWXq4kmcm@@@ to the connection string it works.

So my question is now why doesn’t createAuth0 in this context send the client_id parameter in the URL?

6

Ok I resolved the problem. It was a typo since I come from the Vue2. It is not client_id but clientId in the createAuth0

3 Likes
7

Ahh nice catch! Thanks for following up with the community :cowboy_hat_face:

8

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.