asp JQuery Setting Runtime Variables – undefined

I’m struggling to get this code to work. Basically I need to verify that the user is logged in before running the code block below:

$(document).ready(() => {
  const loggedIn = '<%#(UIContext.Current != null && !string.IsNullOrWhiteSpace(UIContext.Current.AuthTokens.IdToken))%>'.toLowerCase() === "true";

  if (!loggedIn) {
      $("#breadcrumbTableContainer").css("display", "none");
      $("#priNavContainer").css("display", "none");
      $("#priNavContainerWrap").css("display", "none");
      $(".headerContainer.stepsHeaderCont").css("display", "none");
  } else {
      // UserPilot
      var uiContext = '<%# UIContext.Current %>';

      if (uiContext != null) {
          console.log('UTCDateTime: <%# DateTime.UtcNow%>');
          console.log('Association:  <%# UIContext.Current.CurrentAssociation.Name %>');
          console.log('Association ID: <%# UIContext.Current.CurrentAssociation.ID %>');
          console.log('User Name: <%#UserName%>');
          console.log('User ID: <%# UIContext.Current.CurrentUser.ID%>');
          console.log('URL: ' + window.location);

          // End UserPilot
      }
...

I understand that I’m using serverside variables and that is what is causing the problem as UIContext.Current is null. What is the proper way to approach this?

In addition if I modify the code to:

console.log('Association: ' + uiContext.CurrentAssociation.Name);

uiContext is undefined.