How to use Auth0 with Node.js and Express

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

        document.getElementById("btn-logout").disabled = !isAuthenticated;
        document.getElementById("btn-login").disabled = isAuthenticated;

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

          document.getElementById(
            "ipt-access-token"
          ).innerHTML = await auth0.getTokenSilently();

          document.getElementById("ipt-user-profile").textContent = JSON.stringify(
            await auth0.getUser()
          );

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

window.onload = async () => {
        await configureClient();
        updateUI();
        const isAuthenticated = await auth0.isAuthenticated();
        if (isAuthenticated) {
          return;
        }

        const query = window.location.search;
        if (query.includes("code=") && query.includes("state=")) {
          await auth0.handleRedirectCallback();
          updateUI();
          window.history.replaceState({}, document.title, "/");
        }
    };

Listing 6. Finalizing the auth scripts on the client

Add the changes in Listing 6 to the log-in/log-out scripts, and consider them one by one. First we define an updateUI() function to handle enforcing our auth-related UI changes (this method derives from the one in the Auth0 docs). This function uses the auth0.isAuthenticated() method to determine if the user is logged in, and based on that info, shows or hides the appropriate log-in/log-out buttons.

Next, you use the authentication status to show/hide the content at the end of the page, and populate it with user info from the log-in.

After that, the onload method is defined, and we first configure the client, then call the new updateUI() function.

You then use isAuthenticated again, and if it is true, the onload is done. However, if the user is not logged in, some extra logic is required to handle if the user is being redirected back from log-in. The code and state variables will be in the URL query in that case. The auth0.handleRedirectCallback() method will handle the heavy lifting here, and all we need to do is update the UI and clear the query parameters off the URL.

Test it out

Now everything is ready to go. You can refresh the app and log-in — create your account however you wish. Upon redirection back to your app, you’ll see the log-out button is active and the user info section at the bottom is visible.

Now click the “Members Only API” button, and you should see the results. But if you click the “Protected API” button, you’ll find it still errors out. That’s because your new user doesn’t have the “read:protected” permission — yet.

Add permission to the user via the Auth0 web UI

Return to the Auth0 dashboard and select users on the left. Notice our new user is in the list. This is another nice feature of IDaaS; you get sophisticated user management out of the box. Note that Auth0 also supports RBAC (role-based access control).

Click your user, then click “Permissions,” and add the “read:protected” permission.

Now when you log out and back in, you will be able to click the “Protected API” button.

Authentication and authorization is a complex and central need. Auth0 makes it far easier to create enterprise-worthy support. This article has just scratched the surface, but already the foundation is laid and more powerful options like RBAC and federated SSO (single sign-on) are available to be added on top of it.