# Sign in button grey?

**URL:** <https://community.auth0.com/t/sign-in-button-grey/82402>\
**Category:** Get Help\
**Tags:** auth0, lock, login\
**Created:** [April 26, 2022, 11:34am UTC](https://community.auth0.com/t/sign-in-button-grey/82402 "2022-04-26T11:34:16Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![heleneamlo](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/heleneamlo/32/36895_2.png) [@heleneamlo](https://community.auth0.com/u/heleneamlo)\
**Post date:** [April 26, 2022, 11:34am UTC](https://community.auth0.com/t/sign-in-button-grey/82402/1 "2022-04-26T11:34:16Z")

</div>

Hello, i am making my first website with auth0 and i followed the tutorial on the auth0 app page, the (quick start) one. however, when i open my website with nodemon, both the log in and log out button are gray, and i can’t click them  
 ![image](https://global.discourse-cdn.com/auth0/original/3X/c/c/cc4d7e9170dbe58f048ec4ae6b5e477a0356e177.png)  
any help would be greatly appreciated

```auto
html
<h2>Logg inn</h2>
    <button id="btn-login" disabled="true" onclick="login()">Log in</button>
    <button id="btn-logout" disabled="true" onclick="logout()">Log out</button>
JS
let auth0 = null;

const fetchAuthConfig = () => fetch("/auth_config.json");

const configureClient = async () => {
    const response = await fetchAuthConfig();
    const config = await response.json();
  
    auth0 = await createAuth0Client({
      domain: config.domain,
      client_id: config.clientId
    });
};

window.onload = async () => {
  
    updateUI();
  
    const isAuthenticated = await auth0.isAuthenticated();
  
    if (isAuthenticated) {
      document.getElementById("gated-content").classList.remove("hidden");
      return;
    }
  
    const query = window.location.search;
    if (query.includes("code=") && query.includes("state=")) {
  
      await auth0.handleRedirectCallback();
      
      updateUI();
  
      window.history.replaceState({}, document.title, "/");
    }
};

const updateUI = async () => { 
    const isAuthenticated = await auth0.isAuthenticated();
  

    
    if (isAuthenticated) {
      document.getElementById("gated-content").classList.remove("hidden");
    } else {
      document.getElementById("gated-content").classList.add("hidden");
    }
  };

const login = async () => {
    await auth0.loginWithRedirect({
      redirect_uri: window.location.origin
    });
};

const logout = () => {
    auth0.logout({
      returnTo: window.location.origin
    });
  };

```

---

<div class="post-metadata">

**Author:** ![heleneamlo](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/heleneamlo/32/36895_2.png) [@heleneamlo](https://community.auth0.com/u/heleneamlo)\
**Post date:** [April 26, 2022, 5:09pm UTC](https://community.auth0.com/t/sign-in-button-grey/82402/2 "2022-04-26T17:09:52Z")

</div>

i still need some help with this

---

<div class="post-metadata">

**Author:** ![lihua.zhang](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/lihua.zhang/32/39683_2.png) [@lihua.zhang](https://community.auth0.com/u/lihua.zhang)\
**Post date:** [April 26, 2022, 5:44pm UTC](https://community.auth0.com/t/sign-in-button-grey/82402/4 "2022-04-26T17:44:43Z")

</div>

Hi @heleneamlo ,

Welcome to the Auth0 Community!

```auto
<h2>Logg inn</h2>
    <button id="btn-login" disabled="true" onclick="login()">Log in</button>
    <button id="btn-logout" disabled="true" onclick="logout()">Log out</button>

```

The two buttons has disabled set as true. That’s why they are grey. [This](https://www.w3schools.com/tags/att_button_disabled.asp) article explained the disabled attribute. Hope this helps!

---

<div class="post-metadata">

**Author:** ![heleneamlo](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/heleneamlo/32/36895_2.png) [@heleneamlo](https://community.auth0.com/u/heleneamlo)\
**Post date:** [April 26, 2022, 5:50pm UTC](https://community.auth0.com/t/sign-in-button-grey/82402/5 "2022-04-26T17:50:59Z")

</div>

hello @lihua.zhang , i now removed it and the button doesn’t work now, i click it and it does not do anything

---

<div class="post-metadata">

**Author:** ![lihua.zhang](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/lihua.zhang/32/39683_2.png) [@lihua.zhang](https://community.auth0.com/u/lihua.zhang)\
**Post date:** [April 26, 2022, 6:05pm UTC](https://community.auth0.com/t/sign-in-button-grey/82402/6 "2022-04-26T18:05:22Z")

</div>

I believe both buttons are not greyed out after removing the disabled attribute.

From Quick Start, what type of application and which language you selected for your web app?

---

<div class="post-metadata">

**Author:** ![heleneamlo](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/heleneamlo/32/36895_2.png) [@heleneamlo](https://community.auth0.com/u/heleneamlo)\
**Post date:** [April 26, 2022, 6:06pm UTC](https://community.auth0.com/t/sign-in-button-grey/82402/7 "2022-04-26T18:06:16Z")

</div>

@lihua.zhang both are now white, i chose javascript

 ![image](https://global.discourse-cdn.com/auth0/original/3X/d/1/d1eb5f5675e353bb3b255ab9b0a17aca0150cfcf.png)

---

<div class="post-metadata">

**Author:** ![heleneamlo](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/heleneamlo/32/36895_2.png) [@heleneamlo](https://community.auth0.com/u/heleneamlo)\
**Post date:** [April 26, 2022, 7:08pm UTC](https://community.auth0.com/t/sign-in-button-grey/82402/8 "2022-04-26T19:08:09Z")

</div>

hello??? @lihua.zhang

---

<div class="post-metadata">

**Author:** ![lihua.zhang](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/lihua.zhang/32/39683_2.png) [@lihua.zhang](https://community.auth0.com/u/lihua.zhang)\
**Post date:** [April 26, 2022, 9:19pm UTC](https://community.auth0.com/t/sign-in-button-grey/82402/9 "2022-04-26T21:19:53Z")

</div>

I am still looking into this. Meantime, let’s see if anyone else in our community can provide help with this topic.

---

<div class="post-metadata">

**Author:** ![heleneamlo](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/heleneamlo/32/36895_2.png) [@heleneamlo](https://community.auth0.com/u/heleneamlo)\
**Post date:** [April 27, 2022, 6:43am UTC](https://community.auth0.com/t/sign-in-button-grey/82402/10 "2022-04-27T06:43:35Z")

</div>

Did you find out anything about this? @lihua.zhang

---

<div class="post-metadata">

**Author:** ![heleneamlo](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/heleneamlo/32/36895_2.png) [@heleneamlo](https://community.auth0.com/u/heleneamlo)\
**Post date:** [April 27, 2022, 1:04pm UTC](https://community.auth0.com/t/sign-in-button-grey/82402/11 "2022-04-27T13:04:53Z")

</div>

i still need help with this, please

---

<div class="post-metadata">

**Author:** ![konrad.sopala](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/konrad.sopala/32/13516_2.png) [@konrad.sopala](https://community.auth0.com/u/konrad.sopala)\
**Post date:** [April 27, 2022, 1:47pm UTC](https://community.auth0.com/t/sign-in-button-grey/82402/12 "2022-04-27T13:47:00Z")

</div>

Hey there @heleneamlo !

Lihua is still on your topic but as you can see she has been unresponsive for some time as she is based in a different timezone than yours so please wait patiently 🙂 She didn’t abandon the thread 🙂 Thank you!

---

<div class="post-metadata">

**Author:** ![heleneamlo](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/heleneamlo/32/36895_2.png) [@heleneamlo](https://community.auth0.com/u/heleneamlo)\
**Post date:** [April 27, 2022, 6:26pm UTC](https://community.auth0.com/t/sign-in-button-grey/82402/13 "2022-04-27T18:26:43Z")

</div>

@konrad.sopala Ok thanks, i will wait untill @lihua.zhang is online.

---

<div class="post-metadata">

**Author:** ![lihua.zhang](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/lihua.zhang/32/39683_2.png) [@lihua.zhang](https://community.auth0.com/u/lihua.zhang)\
**Post date:** [April 27, 2022, 8:03pm UTC](https://community.auth0.com/t/sign-in-button-grey/82402/15 "2022-04-27T20:03:50Z")

</div>

Hi @heleneamlo ,

Sorry about the delay. I did some research and found [this](https://auth0.com/docs/quickstart/spa/vanillajs/01-login#restoring-login-state-with-social-providers) article that explains how to set up the JavaScript SPA project. I followed the steps and it works for me. The buttons are enabled based on the authentication status as mentioned [here](https://auth0.com/docs/quickstart/spa/vanillajs/01-login#restoring-login-state-with-social-providers).

This is how the App looks like:

 ![image](https://global.discourse-cdn.com/auth0/original/3X/4/c/4c1075f2655a151485b6efe6e9b25567670841e9.jpeg)

 ![image](https://global.discourse-cdn.com/auth0/original/3X/0/f/0f605fb3a9487d0ae8dbc7faf96383c065c958f6.png)

 ![image](https://global.discourse-cdn.com/auth0/original/3X/7/c/7c8cda763d966b12dc08c9488e65fe6f9a7a86ad.jpeg)

To make this work, I suggest you follow the steps in the article I mentioned. If you need a copy of any files in this project, I can send them to you. Good Luck!

---

<div class="post-metadata">

**Author:** ![heleneamlo](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/heleneamlo/32/36895_2.png) [@heleneamlo](https://community.auth0.com/u/heleneamlo)\
**Post date:** [April 27, 2022, 8:04pm UTC](https://community.auth0.com/t/sign-in-button-grey/82402/16 "2022-04-27T20:04:45Z")

</div>

can i please get the files now?  
i have a deadline in 14 hours

---

<div class="post-metadata">

**Author:** ![heleneamlo](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/heleneamlo/32/36895_2.png) [@heleneamlo](https://community.auth0.com/u/heleneamlo)\
**Post date:** [April 27, 2022, 8:06pm UTC](https://community.auth0.com/t/sign-in-button-grey/82402/17 "2022-04-27T20:06:10Z")

</div>

@lihua.zhang i have already done this, i think i mentioned it in a previous post, for some reason it doesn’t work for me, files not necessary

---

<div class="post-metadata">

**Author:** ![lihua.zhang](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/lihua.zhang/32/39683_2.png) [@lihua.zhang](https://community.auth0.com/u/lihua.zhang)\
**Post date:** [April 27, 2022, 8:16pm UTC](https://community.auth0.com/t/sign-in-button-grey/82402/18 "2022-04-27T20:16:48Z")

</div>

I have shared the project folder with your gmail. Since it works for me, ideally it should work for you. Please give it a try in Chrome incognito mode.

---

<div class="post-metadata">

**Author:** ![heleneamlo](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/heleneamlo/32/36895_2.png) [@heleneamlo](https://community.auth0.com/u/heleneamlo)\
**Post date:** [April 27, 2022, 8:33pm UTC](https://community.auth0.com/t/sign-in-button-grey/82402/19 "2022-04-27T20:33:50Z")

</div>

Hi @lihua.zhang, the folder worked, but i don’t know how i did anything wrong, will try to find out, how long will you be working for? so i know when you are not here

---

<div class="post-metadata">

**Author:** ![lihua.zhang](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/lihua.zhang/32/39683_2.png) [@lihua.zhang](https://community.auth0.com/u/lihua.zhang)\
**Post date:** [April 27, 2022, 9:07pm UTC](https://community.auth0.com/t/sign-in-button-grey/82402/20 "2022-04-27T21:07:29Z")

</div>

I have a few meetings during the day and will work until 5:30 PM PST. Since the solution is provided, I will mark this topic as solved. You can DM me if any queries about this topic.

---

<div class="post-metadata">

**Author:** ![konrad.sopala](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/konrad.sopala/32/13516_2.png) [@konrad.sopala](https://community.auth0.com/u/konrad.sopala)\
**Post date:** [December 21, 2022, 6:10pm UTC](https://community.auth0.com/t/sign-in-button-grey/82402/21 "2022-12-21T18:10:23Z")

</div>