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
any help would be greatly appreciated
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
});
};
i still need some help with this
Hi @heleneamlo ,
Welcome to the Auth0 Community!
<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 article explained the disabled attribute. Hope this helps!
1 Like
hello @lihua.zhang , i now removed it and the button doesn’t work now, i click it and it does not do anything
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?
1 Like
@lihua.zhang both are now white, i chose javascript
I am still looking into this. Meantime, let’s see if anyone else in our community can provide help with this topic.
1 Like
Did you find out anything about this? @lihua.zhang
i still need help with this, please
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!
1 Like
@konrad.sopala Ok thanks, i will wait untill @lihua.zhang is online.
Hi @heleneamlo ,
Sorry about the delay. I did some research and found this 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.
This is how the App looks like:
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!
can i please get the files now?
i have a deadline in 14 hours
@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
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.
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
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.
1 Like
