Invalid_request: Invalid parameter: client_id must be a string

[robliou01]

Hello,

I’m a new user and attempting to integrate Auth0 into my app, which is hosted on my local computer.

I believe I have followed the basic directions correctly. Using the Auth) instructions, I have set up a button on the ‘login’ page of my app which, upon clicking, redirects to the Auth0 login page. Here, the login procedures should be handed over. However, everytime I click the button, I instead get an error page and receive the error:

“invalid_request: Invalid parameter: client_id must be a string”

I have checked and re-checked that I correctly input my client-id and Domain variables into my index.js file. It was copy-pasted directly from my Auth0 screen. I believe I have confirmed that it has been correctly input, because the URL that is sent when the button is clicked as follows (added a few X’s in the middle for safety purposes):

https://dev-7-8i89hb.us.auth0.com/authorize?clientID=stYoaCVnntvAXXXXIdXnxX4riYXRnF&redirect_uri=http%3A%2F%2Flocalhost%3A4000%2Flogin%2Fredirect&_reactName=onClick&_targetInst=null&type=click&nativeEvent=[object%20PointerEvent]&target=[object%20HTMLButtonElement]&currentTarget=[object%20HTMLButtonElement]&eventPhase=3&bubbles=true&cancelable=true&timeStamp=17317.200000001118&defaultPrevented=false&isTrusted=true&view=[object%20Window]&detail=1&screenX=-905&screenY=332&clientX=695&clientY=229&pageX=695&pageY=229&ctrlKey=false&shiftKey=false&altKey=false&metaKey=false&getModifierState=function%20modifierStateGetter(keyArg)%20{ %20%20%20%20%20%20var%20syntheticEvent%20%3D%20this%3B %20%20%20%20%20%20var%20nativeEvent%20%3D%20syntheticEvent.nativeEvent%3B %20%20%20%20%20%20if%20(nativeEvent.getModifierState)%20{ %20%20%20%20%20%20%20%20return%20nativeEvent.getModifierState(keyArg)%3B %20%20%20%20%20%20} %20%20%20%20%20%20var%20keyProp%20%3D%20modifierKeyToProp[keyArg]%3B %20%20%20%20%20%20return%20keyProp%20%3F%20!!nativeEvent[keyProp]%20%3A%20false%3B %20%20%20%20}&button=0&buttons=0&relatedTarget=null&movementX=0&movementY=0&isDefaultPrevented=function%20functionThatReturnsFalse()%20{ %20%20%20%20%20%20return%20false%3B %20%20%20%20}&isPropagationStopped=function%20functionThatReturnsFalse()%20{ %20%20%20%20%20%20return%20false%3B %20%20%20%20}&scope=openid%20profile%20email&response_type=code&response_mode=query&state=b0JwbTBPRkFIWDVOMG1Hb0QzMS5CMTJaVzVGb01ZVUgzVk9yZjlvM0J2eQ%3D%3D&nonce=M3hBY2FEWHJNSkRHYnNpRnlvc2xzRnphY1VULTlfOVJaeS1HMlkxbFo2WA%3D%3D&code_challenge=5IFme86v8SaCrmK6BovzsAiUh7tpFkdqecnjfO8t8JM&code_challenge_method=S256&auth0Client=eyJuYW1lIjoiYXV0aDAtcmVhY3QiLCJ2ZXJzaW9uIjoiMS44LjAifQ%3D%3D

It would appear from the URL that the Client-ID is correctly formatted, so what gives for me receiving this error?

Thank you in advance,
Rob

[dan.woda]

Hi @robliou01,

It looks like your authorize URL is leaking some React code. Can you share the code snippet the call that generates that URL?

[robliou01]

Hi @dan.woda, sorry for the delayed response here.

I earlier adjusted my login.js to just use the default method as suggested by Auth0:

const { loginWithRedirect } = useAuth0();

Therefore, I don’t think there should be any memory leaks taking place anymore…