How to use the solid-ui.authn function in solid-ui

var renderDetails = function () {
        containerDiv.appendChild(dom.createElement('h3')).textContent = 'Details of meeting'
        var form = $rdf.sym('https://solid.github.io/solid-panes/meeting/meetingDetailsForm.ttl#main')
        UI.widgets.appendForm(document, containerDiv, {}, meeting, form, meeting.doc(), complainIfBad)
        containerDiv.appendChild(tipDiv(
          'Drag URL-bar icons of web pages into the tab bar on the left to add new meeting materials.'))
        me = UI.authn.currentUser()
        if (me) {
          kb.add(meeting, ns.dc('author'), me, meetingDoc) // @@ should nly be on initial creation?
        }
        var context = {noun: 'meeting', me: me, statusArea: containerDiv, div: containerDiv, dom: dom}
        UI.authn.registrationControl(context, meeting, ns.meeting('Meeting')).then(function (context) {
          console.log('Registration control finsished.')
        })
        var options = {}
        UI.pad.manageParticipation(dom, containerDiv, meetingDoc, meeting, me, options)

        // "Make a new meeting" button
        var imageStyle = 'height: 2em; width: 2em; margin:0.5em;'
        var detailsBottom = containerDiv.appendChild(dom.createElement('div'))
        var spawn = detailsBottom.appendChild(dom.createElement('img'))
        spawn.setAttribute('src', UI.icons.iconBase + 'noun_145978.svg')
        spawn.setAttribute('title', 'Make a fresh new meeting')
        spawn.addEventListener('click', makeNewMeeting)
        spawn.setAttribute('style', imageStyle)

        // "Fork me on Github" button
        var forka = detailsBottom.appendChild(dom.createElement('a'))

false
        )

        clearElement(naviCenter)
        naviCenter.appendChild(refreshButton)
      }

      // @@ Give other combos too-- see schedule ontology
      // var possibleAvailabilities = [ SCHED('No'), SCHED('Maybe'), SCHED('Yes') ]

      // var me = UI.authn.currentUser()

      var dataPointForNT = []

      var loginContext = { div: naviCenter, dom: dom }
      UI.authn.logIn(loginContext).then(context => {
        const me = context.me
        var doc = resultsDoc
        options.set_y = options.set_y.filter(function (z) {
          return !z.sameTerm(me)
        })
        options.set_y.push(me) // Put me on the end

        options.cellFunction = function (cell, x, y, value) {
          if (value !== null) {
            kb.fetcher.nowOrWhenFetched(
              value.uri.split('#')[0],
              undefined,
              function (ok, _error) {
                if (ok) refreshCellColor(cell, value)
              }
            )

var context2 = {noun: 'chat room', me: menuOptions.me, statusArea: statusArea, div: preferencesArea, dom, kb}
        if (!menuOptions.me) alert('menu: no me!')
        preferencesArea.appendChild(UI.preferences.renderPreferencesForm(subject, mainClass, preferencesForm, context2))

        div.menuArea = menuArea
      } else { // Close menu  (hide or delete??)
        div.removeChild(div.menuArea)
      }
    } // menuHandler

    var div = dom.createElement('div')
    div.setAttribute('class', 'chatPane')
    let options = {infinite: true, menuHandler: menuHandler} // Like newestFirst
    let context = {noun: 'chat room', div, dom}
    context.me = UI.authn.currentUser() // If already logged on

    UI.preferences.getPreferencesForClass(subject, mainClass, preferenceProperties, context).then(prefMap => {
      for (let propuri in prefMap) {
        options[propuri.split('#')[1]] = prefMap[propuri]
      }
      div.appendChild(UI.infiniteMessageArea(dom, kb, subject, options))
    }, err => UI.widgets.complain(err))

    return div
  }
}

var newTrackerButton = function (thisTracker) {
      var button = UI.authn.newAppInstance(dom, { noun: 'tracker' }, function (ws, base) {
        var appPathSegment = 'issuetracker.w3.org' // how to allocate this string and connect to
        // console.log("Ready to make new instance at "+ws)
        var sp = UI.ns.space
        var kb = UI.store

        if (!base) {
          base = kb.any(ws, sp('uriPrefix')).value
          if (base.slice(-1) !== '/') {
            $rdf.log.error(appPathSegment + ': No / at end of uriPrefix ' + base)
            base = base + '/'
          }
          base += appPathSegment + '/' + timestring() + '/' // unique id
          if (!confirm('Make new tracker at ' + base + '?')) {
            return
          }
        }

let tr = outliner.propertyTR(dom,
            st, false)
          tr.firstChild.textContent = '' // Was initialized to 'Contains'
          tr.firstChild.style.cssText += 'min-width: 3em;'
          tr.appendChild(outliner.outlineObjectTD(obj, defaultpropview, undefined, st))
          // UI.widgets.makeDraggable(tr, obj)
          return tr
        })
      }
      mainTable.refresh = refresh
      refresh()
    }

    // Allow user to create new things within the folder
    var creationDiv = div.appendChild(dom.createElement('div'))
    var me = UI.authn.currentUser()
    var creationContext = {folder: subject, div: creationDiv, dom: dom, statusArea: creationDiv, me: me}
    creationContext.refreshTarget = mainTable
    UI.create.newThingUI(creationContext, panes) // Have to pass panes down  newUI

    // /////////// Allow new file to be Uploaded
    var droppedFileHandler = function (files) {
      UI.widgets.uploadFiles(kb.fetcher, files, subject.uri, subject.uri, function (file, uri) {
        // A file has been uploaded
        let destination = kb.sym(uri)
        console.log(' Upload: put OK: ' + destination)
        kb.add(subject, ns.ldp('contains'), destination, subject.doc())
        mainTable.refresh()
      })
    }

    UI.aclControl.preventBrowserDropEvents(dom)

if (src) {
      var img = dom.createElement('IMG')
      img.setAttribute('src', src.uri) // w640 h480
      // img.className = 'foafPic'
      img.style.cssText = foafPicStyle
      tools.appendChild(img)
    }
    var name = kb.anyValue(s, foaf('name')) || '???'
    var h3 = dom.createElement('H3')
    h3.appendChild(dom.createTextNode(name))

    var me = UI.authn.currentUser()
    var meUri = me ? me.uri : null

    // @@ Add: event handler to redraw the stuff below when me changes.
    const loginOutButton = UI.authn.loginStatusBox(dom, webIdUri => {
      me = kb.sym(webIdUri)
      // @@ To be written:   redraw as a function the new me
      // @@ refresh the sidebars
      UI.widgets.refreshTree(div) // this refreshes the middle at least
    })

    tips.appendChild(loginOutButton)

    var thisIsYou = me && kb.sameThings(me, s)

    var knows = foaf('knows')
    //        var givenName = kb.sym('http://www.w3.org/2000/10/swap/pim/contact#givenName')
    var familiar =
      kb.anyValue(s, foaf('givenname')) ||
      kb.anyValue(s, foaf('firstName')) ||
      kb.anyValue(s, foaf('nick')) ||

render: function (subject, CVdocument) { // 'subject' is the source of the document
    // 'document' is the HTML document element we are attaching elements to

    var kb = UI.store
    var me = UI.authn.currentUser()
    var foaf = UI.ns.foaf
    var myName = kb.any(me, foaf('family_name')) + kb.any(me, foaf('givenname'))

    var content = CVdocument.createElement('div')
    content.className = 'CVclass'

    // for a School:
    var schoolForm = CVdocument.createElement('form')
    // School:
    var school = CVdocument.createElement('input')
    school.type = 'text'
    var schoolString = CVdocument.createTextNode('school:')
    schoolForm.appendChild(schoolString)
    schoolForm.appendChild(school)
    // eduStartDate:
    var eduStartDate = CVdocument.createElement('input')

render: function (subject, dom) {
    const container = document.createElement('div')
    const shadow = document.createElement('div')
    container.appendChild(shadow)
    const wrapper = document.createElement('div')
    shadow.appendChild(wrapper)
    const link = document.createElement('link')
    link.rel = 'stylesheet'
    link.href = 'https://design.inrupt.com/css/main.css'
    shadow.appendChild(link)
    const loadResource = (resourcePath: string) => {
      panes.getOutliner(dom).GotoSubject($rdf.sym(resourcePath), true, undefined, true)
    }
    // TODO: Update the value of WebID when the user logs in/out:
    UI.authn.solidAuthClient.currentSession().then((session: any) => {
      ReactDOM.render(
        ,
        wrapper
      )
    })

    return container
  }
} // pane object

var checkOKSetACL = function (uri, ok) {
              if (!ok) {
                complain('Error writing new file ' + task.to)
                return reject(new Error('Error writing new file ' + task.to))
              }

              UI.authn.setACLUserPublic(dest, me, aclOptions)
                .then(() => doNextTask())
                .catch(err => {
                  let message = 'Error setting access permissions for ' +
                    task.to + ' : ' + err.message
                  complain(message)
                  return reject(new Error(message))
                })
            }