How do I get the Auth0 log in button component to work on localhost as well?

[gtrman97]

I have my app hosted on netlfiy and the Auth0 log in button component redirects me to the correct place but only on the hosted site. When I start up my server on local host and click the same button I get an error saying

Callback URL mismatch.
The provided redirect_uri is not in the list of allowed callback URLs.
Please go to the [Application Settings page](https://manage.auth0.com/#/applications/DRMrKJJq4Mi1Vnu3gTqDCx0UVZWezAVQ/settings) and make sure you are sending a valid callback URL from your application.

[tyf]

Hey there @gtrman97!

@gtrman97

When I start up my server on local host and click the same button I get an error saying

Have you added the localhost callback url in your application settings in Auth0? For example, our React sample app requires that http://localhost:3000 is added as an allowed callback url in application settings.

https://auth0.com/docs/quickstart/spa/react#configure-callback-urls

[gtrman97]

Hi, yes I have added it. Are they supposed to be separated by commas like this?

https://bug-tracker-2.netlify.app, http://localhost:5173

I still have the same issue.

[tyf]

Thanks for confirming - Yes, that should be fine!

Do you mind sharing an example of what the /authorize request looks like?

[gtrman97]

Not entirely sure what you mean by authorize request. Here is my main.jsx:

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from "./App";
import { Auth0Provider } from "@auth0/auth0-react";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Auth0Provider
      domain="xxxxxxzxzxzxzxzxzxzxzxzx.us.auth0.com"
      clientId="lkajshgklshkdshfglksdfhxmbjkfhdslioeusry"
      redirectUri={window.location.origin}
    >
      <BrowserRouter>
        <Routes>
          <Route path="/*" element={<App />}></Route>
        </Routes>
      </BrowserRouter>
    </Auth0Provider>
  </React.StrictMode>
);

and the button component I rendered on a page from the docs:

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";

const LoginButton = () => {
  const { loginWithRedirect } = useAuth0();

  return <button onClick={() => loginWithRedirect()}>Log In</button>;
};

export default LoginButton;

[gtrman97]

Now I tried running the readiness check and it tells me

Allowed Callback URLs should not include Localhost

[tyf]

Thanks for sharing your code - It’s hard to know for sure, but everything looks OK to me here.

@gtrman97

Not entirely sure what you mean by authorize request

If you capture a har file during the attempted login file I should be able to see the authorize request itself - Alternatively, you could inspect the network requests and extract it that way. I am just looking for the request that begins https://{YOUR_DOMAIN}.us.auth0.com/authorize?scope=XXX.

Have you had the chance to take a look at our React sample and test the login flow using localhost there?

GitHub - auth0-samples/auth0-react-samples: Auth0 Integration Samples for...

Keep us posted!

[tyf]

@gtrman97

Now I tried running the readiness check and it tells me

Allowed Callback URLs should not include Localhost

This makes sense for production.

[gtrman97]

This is all I see in the dev tools network tab after clicking on the log in button that is supposed to take me to the Auth0 log in form.

[tyf]

Hey @gtrman97 I apologize for the delayed response here - Were you ever able to get this working?

If not, feel free to DM a har file of your login flow and I’d be happy to take a closer look to see if there is anything I can see that stands out.

Thanks!