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

**URL:** <https://community.auth0.com/t/how-do-i-get-the-auth0-log-in-button-component-to-work-on-localhost-as-well/96385>\
**Category:** Get Help\
**Tags:** login-experience, new-universal-login-experience\
**Created:** [December 13, 2022, 9:41pm UTC](https://community.auth0.com/t/how-do-i-get-the-auth0-log-in-button-component-to-work-on-localhost-as-well/96385 "2022-12-13T21:41:53Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![gtrman97](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/gtrman97/32/41712_2.png) [@gtrman97](https://community.auth0.com/u/gtrman97)\
**Post date:** [December 13, 2022, 9:41pm UTC](https://community.auth0.com/t/how-do-i-get-the-auth0-log-in-button-component-to-work-on-localhost-as-well/96385/1 "2022-12-13T21:41:54Z")

</div>

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

```auto
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.

```

---

<div class="post-metadata">

**Author:** ![ty.frith](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/ty.frith/32/58484_2.png) [@ty.frith](https://community.auth0.com/u/ty.frith)\
**Post date:** [December 13, 2022, 10:50pm UTC](https://community.auth0.com/t/how-do-i-get-the-auth0-log-in-button-component-to-work-on-localhost-as-well/96385/3 "2022-12-13T22:50:32Z")

</div>

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](https://auth0.com/docs/quickstart/spa/react#configure-callback-urls)

---

<div class="post-metadata">

**Author:** ![gtrman97](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/gtrman97/32/41712_2.png) [@gtrman97](https://community.auth0.com/u/gtrman97)\
**Post date:** [December 13, 2022, 11:42pm UTC](https://community.auth0.com/t/how-do-i-get-the-auth0-log-in-button-component-to-work-on-localhost-as-well/96385/4 "2022-12-13T23:42:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ty.frith](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/ty.frith/32/58484_2.png) [@ty.frith](https://community.auth0.com/u/ty.frith)\
**Post date:** [December 14, 2022, 12:08am UTC](https://community.auth0.com/t/how-do-i-get-the-auth0-log-in-button-component-to-work-on-localhost-as-well/96385/5 "2022-12-14T00:08:02Z")

</div>

Thanks for confirming - Yes, that should be fine!

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

---

<div class="post-metadata">

**Author:** ![gtrman97](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/gtrman97/32/41712_2.png) [@gtrman97](https://community.auth0.com/u/gtrman97)\
**Post date:** [December 14, 2022, 5:10am UTC](https://community.auth0.com/t/how-do-i-get-the-auth0-log-in-button-component-to-work-on-localhost-as-well/96385/6 "2022-12-14T05:10:58Z")

</div>

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

```auto
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:

```auto
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;

```

---

<div class="post-metadata">

**Author:** ![gtrman97](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/gtrman97/32/41712_2.png) [@gtrman97](https://community.auth0.com/u/gtrman97)\
**Post date:** [December 15, 2022, 1:16am UTC](https://community.auth0.com/t/how-do-i-get-the-auth0-log-in-button-component-to-work-on-localhost-as-well/96385/7 "2022-12-15T01:16:13Z")

</div>

Now I tried running the readiness check and it tells me

> Allowed Callback URLs should not include Localhost

---

<div class="post-metadata">

**Author:** ![ty.frith](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/ty.frith/32/58484_2.png) [@ty.frith](https://community.auth0.com/u/ty.frith)\
**Post date:** [December 15, 2022, 1:27am UTC](https://community.auth0.com/t/how-do-i-get-the-auth0-log-in-button-component-to-work-on-localhost-as-well/96385/8 "2022-12-15T01:27:04Z")

</div>

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](https://auth0.com/docs/troubleshoot/troubleshooting-tools/generate-and-analyze-har-files) 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...](https://github.com/auth0-samples/auth0-react-samples)**
>
> Auth0 Integration Samples for React Applications. Contribute to auth0-samples/auth0-react-samples development by creating an account on GitHub.

Keep us posted!

---

<div class="post-metadata">

**Author:** ![ty.frith](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/ty.frith/32/58484_2.png) [@ty.frith](https://community.auth0.com/u/ty.frith)\
**Post date:** [December 15, 2022, 1:31am UTC](https://community.auth0.com/t/how-do-i-get-the-auth0-log-in-button-component-to-work-on-localhost-as-well/96385/9 "2022-12-15T01:31:44Z")

</div>

> [@gtrman97](#):
>
> Now I tried running the readiness check and it tells me
> 
> > Allowed Callback URLs should not include Localhost

This makes sense for production.

---

<div class="post-metadata">

**Author:** ![gtrman97](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/gtrman97/32/41712_2.png) [@gtrman97](https://community.auth0.com/u/gtrman97)\
**Post date:** [December 15, 2022, 1:55am UTC](https://community.auth0.com/t/how-do-i-get-the-auth0-log-in-button-component-to-work-on-localhost-as-well/96385/10 "2022-12-15T01:55:37Z")

</div>

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.

 ![Screen Shot 2022-12-14 at 7.54.03 PM](https://global.discourse-cdn.com/auth0/original/3X/8/0/80c9ff7ac5f6213f106a7c4bdba9db209d7b5f9f.jpeg)

---

<div class="post-metadata">

**Author:** ![ty.frith](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/ty.frith/32/58484_2.png) [@ty.frith](https://community.auth0.com/u/ty.frith)\
**Post date:** [December 24, 2022, 12:36am UTC](https://community.auth0.com/t/how-do-i-get-the-auth0-log-in-button-component-to-work-on-localhost-as-well/96385/11 "2022-12-24T00:36:57Z")

</div>

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](https://auth0.com/docs/troubleshoot/troubleshooting-tools/generate-and-analyze-har-files) 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!

---

<div class="post-metadata">

**Author:** ![ty.frith](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/ty.frith/32/58484_2.png) [@ty.frith](https://community.auth0.com/u/ty.frith)\
**Post date:** [January 8, 2023, 12:37am UTC](https://community.auth0.com/t/how-do-i-get-the-auth0-log-in-button-component-to-work-on-localhost-as-well/96385/12 "2023-01-08T00:37:26Z")

</div>

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