400: Bad Request BAD REQUEST Your request resulted in an error

[tinny10]

Hi,

I was reading through your documentation here to try and implement authentication on my react app.

I wanted users to be authenticated for all routes so i did the following:

<Router>
      <Security {...config}>
        <SecureRoute path="/" />
      </Security>
    </Router>

and my config object looks like this:

const config = {
  clientId: "{my_client_id}",
  issuer: "https://dev-531502.okta.com/oauth2/default",
  redirectUri: "http://localhost:3000/",
  scopes: ["openid", "profile", "email"],
  pkce: false,
}

the redirect URI matches up with what I have configured in the application but I keep getting a an error

400 Bad Request. Your request resulted in an error.

I have no idea what is causing it, can you help me? Thanks!

here is what the URL looks like from that error

https://dev-531502.okta.com/oauth2/default/v1/authorize?client_id={0oac9adt5M7Z3MHlb4x6}&
nonce=qgSPbKiANWbAyEcBL6ws7oY8OIPzFx5NC3r962jQPjwqBMDA6Vkp3wbNGdCinKXD&
redirect_uri=http%3A%2F%2Flocalhost%3A3000%2F&
response_type=id_token%20token&
state=FHW47dkKOGAGNZpaLKcUY1hH6KFvhttdtQ112klrD5ABwx5MqQb3rNxnii367Qjo&
scope=openid%20profile%20email

[tinny10]

@vijet can you help me out on this issue? thanks!

[vijet]

Hi @tinny10,

I’m not sure what the problem could be.
Try setting up this sample app in your environment - https://github.com/okta/samples-js-react/tree/master/okta-hosted-login
You can then modify it to fit your requirements probably.

[dragos]

Hi @tinny10

Can you please remove the curly brackets from the config object so that the URL would be something similar to

https://dev-531502.okta.com/oauth2/default/v1/authorize?client_id=0oac9adt5M7Z3MHlb4x6&nonce=qgSPbKiANWbAyEcBL6ws7oY8OIPzFx5NC3r962jQPjwqBMDA6Vkp3wbNGdCinKXD&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2F&response_type=id_token%20token&state=FHW47dkKOGAGNZpaLKcUY1hH6KFvhttdtQ112klrD5ABwx5MqQb3rNxnii367Qjo&scope=openid%20profile%20email

Please check that you have added also the redirect_uri http://localhost:3000/ under Admin >> Applications >> your OIDC application >> General tab >> Login Redirect URIs.