Hi again @wsmetz72
Thanks for the further updates, no worries about removing the solution mark, that is encouraged if the proposed solution did not fix the issue.
I believe that the âLoading Boxâ hang is being caused by a JavaScript crash due to mixing two different code structures since you are using Vite which comes pre-packaged in the Auth0 quickstart download.
You should use the import { createAuth0Client } syntax inside your JavaScript file. Also,when you added let auth0Client = null; alongside the existing quickstart code, it likely caused a âvariable already declaredâ error. When JavaScript crashes, the code that hides the Loading Box never runs, leaving you stuck on that screen.
Since you are using the official Vite quickstart, letâs try to wire your custom Members Only HTML directly into the standard, clean Vite setup without causing conflicts.
Make sure your custom members-only content has a specific ID and is hidden by default:
<!-- The default Quickstart Login UI -->
<div id="login-ui">
<button id="btn-login">Log In</button>
</div>
<!-- Your Custom Content -->
<div id="members-only-content" style="display: none;">
<h1>Members Only Dashboard</h1>
<p>Your secure organization data here.</p>
<button id="btn-logout">Log Out</button>
</div>
In your main JavaScript file (usually main.js or app.js in the Vite quickstart), you can safely use the import syntax at the very top. Replace the initialization logic with this version:
import { createAuth0Client } from '@auth0/auth0-spa-js';
let auth0Client = null;
window.onload = async () => {
const auth0Client = await createAuth0Client({
domain: import.meta.env.VITE_AUTH0_DOMAIN,
clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
authorizationParams: {
redirect_uri: window.location.origin
}
});
if (location.search.includes("state=") &&
(location.search.includes("code=") || location.search.includes("error="))) {
await auth0Client.handleRedirectCallback();
window.history.replaceState({}, document.title, "/");
}
await updateUI();
};
const updateUI = async () => {
const isAuthenticated = await auth0Client.isAuthenticated();
const loadingDiv = document.getElementById("loading");
if (loadingDiv) loadingDiv.style.display = "none";
if (isAuthenticated) {
document.getElementById("login-ui").style.display = "none";
document.getElementById("members-only-content").style.display = "block";
} else {
document.getElementById("login-ui").style.display = "block";
document.getElementById("members-only-content").style.display = "none";
}
};
document.getElementById("btn-login").addEventListener("click", async () => {
await auth0Client.loginWithRedirect();
});
document.getElementById("btn-logout").addEventListener("click", () => {
auth0Client.logout({
logoutParams: { returnTo: window.location.origin }
});
});
The communication between your server and Auth0 is likely fine. The hang-up might be happening directly inside your web browser because the browser doesnât know how to read the raw Vite code you uploaded to GoDaddy.
Also, because you are using a standard GoDaddy webserver, you have two choices on how to fix this:
->If you want to just write HTML and JS files and upload them straight to GoDaddy without dealing with Node.js, Vite, or âbuildingâ your app, you must remove the import statements entirely and use the CDN.
<script src="https://cdn.auth0.com/js/auth0-spa-js/2.1/auth0-spa-js.production.js"></script>
In your app.js , remove the import line at the top, and change how you initialize Auth0:**
window.onload = async () => {
const auth0Client = await auth0.createAuth0Client({
domain: "YOUR_DOMAIN.auth0.com",
clientId: "YOUR_CLIENT_ID",
authorizationParams: {
redirect_uri: window.location.origin
}
});
// ... the rest of the code to hide the loading box and show the UI
document.getElementById("loading").style.display = "none";
};
â If you want to keep using Vite (with the import statements and import.meta.env ), you cannot upload the raw files to GoDaddy.
- You must run
npm run build in your terminal on your local computer.
- Vite will compile all your code into standard, browser-readable files and put them in a new folder named
dist .
- You then upload only the contents of the
dist folder to GoDaddy.
For further troubleshooting, if none of the proposed solutions above work, do you see any errors inside the browserâs network trace during the authentication process which state any kind of error? If the authentication works, you will not see any error within Auth0 logs since it might be an issue with the application itself and not Auth0 related configuration/integration.
Kind Regards,
Nik
