Content inside supertokenslib<br />
(The <a href='#raw'>raw file</a> follows this syntax highlighted file.)<br /><br />
<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.6.0/styles/stackoverflow-light.min.css">
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.6.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<pre><code>console.log(&#34;{{.Version}}&#34;)
import * as R from &#34;ramda&#34;;import anime from &#34;animejs/lib/anime.es.js&#34;;import {create} from &#34;free-style&#34;
const l=console.log;const neon=R.allPass([R.isNotNil,R.complement(R.isEmpty)]);const eon=R.anyPass([R.isNil,R.isEmpty])
const store=(o,...ihs)=&gt;{let s=o;let hs=ihs;return {state:()=&gt;s,setState:(o)=&gt;{
	if(R.equals(s,o)){return};s=o;R.map(R.call,hs)
},subscribe:(h)=&gt;hs=R.append(h,hs)}}
const d=document;const dce=(e)=&gt;d.createElement(e);const dctn=(e)=&gt;d.createTextNode(e)
const dhac=(c)=&gt;d.head.appendChild(c);const dbac=(c)=&gt;d.body.appendChild(c);const lcc=&#34;st&#34;&#43;crypto.randomUUID()
const mot=R.tap((e)=&gt;{if(eon(e[lcc].added)&amp;&amp;eon(e[lcc].removed)){return}
	(new MutationObserver((ms,o)=&gt;R.map((m)=&gt;{
			if(R.includes(e,m.addedNodes)&amp;&amp;neon(e[lcc].added)){e[lcc].added(e)}
			if(R.includes(e,m.removedNodes)&amp;&amp;neon(e[lcc].removed)){o.disconnect();e[lcc].removed(e)}
	})(ms))).observe(window.document,{childList:true,subtree:true})})
const e=(t,a,...cs)=&gt;{ // Based on hscrpt - use &#39;className&#39; for class and all lowercase for handlers
	const el=dce(t);
	R.mapObjIndexed((v,k)=&gt;el[k]=v,R.dissoc(&#34;lifecycle&#34;,a));
	el[lcc]={};R.mapObjIndexed((v,k)=&gt;el[lcc][k]=v,a.lifecycle);
	R.map((c)=&gt;{if(c){el.appendChild(R.is(String,c) ? dctn(c) : c)}},cs);
	return mot(el)}
const ge=(id)=&gt;d.getElementById(id);const valueByID=(id)=&gt;ge(id).value;const disableID=(id)=&gt;ge(id).disabled=true;
const focusIfVisible=(id)=&gt;{if(neon(ge(id))&amp;&amp;(ge(id).offsetParent!=null)){ ge(id).focus() }}
const ssw=(s)=&gt;&#34;{{.Cfg.SuperTokensWebLibBase}}&#34;&#43;s
const addjs=(src)=&gt;{const s=dce(&#34;script&#34;);s.setAttribute(&#34;src&#34;, src);s.async=false;dbac(s)}
addjs(ssw(&#34;/website.js&#34;));addjs(ssw(&#34;/supertokens.js&#34;));addjs(ssw(&#34;/session.js&#34;));addjs(ssw(&#34;/passwordless.js&#34;));addjs(ssw(&#34;/emailverification.js&#34;))
const addcss=(o)=&gt;{const s=create();const r=s.registerStyle(o);const se=dce(&#34;style&#34;);se.textContent=s.getStyles();dhac(se);return r}
const stWrapperClass=addcss({boxSizing:&#34;border-box&#34;,position:&#34;absolute&#34;,top:&#34;12px&#34;,right:&#34;12px&#34;,zIndex:999,
	display:&#34;flex&#34;,alignItems:&#34;flex-end&#34;,flexDirection:&#34;column&#34;})
const stMenuWrapperClass=addcss({backgroundColor:&#34;white&#34;,minWidth:&#34;10em&#34;,display:&#34;flex&#34;,flexDirection:&#34;column&#34;,
	border:&#34;black solid 1px&#34;,paddingTop:&#34;4px&#34;,div:{minHeight:&#34;10px&#34;,marginBottom:&#34;4px&#34;}})
const stPlainObj={padding:&#34;4px&#34;,cursor:&#34;pointer&#34;,marginLeft:&#34;12px&#34;,fontVariant:&#34;small-caps&#34;}
const stPlainClass=addcss(stPlainObj)
const stPlainMenuClass=addcss(R.mergeRight(stPlainObj,
	{marginLeft:&#34;0px&#34;,paddingLeft:&#34;12px&#34;,display:&#34;inline-block&#34;,width:&#34;calc(100% - 16px)&#34;,&#34;&amp;:hover&#34;:{backgroundColor:&#34;#e6e6e6&#34;}}))
const stButtonClass=addcss({width:&#34;32px&#34;,height:&#34;32px&#34;,padding:&#34;4px&#34;,border:0,cursor:&#34;pointer&#34;,borderRadius:&#34;16px&#34;,marginLeft:&#34;12px&#34;})
const stImgClass=addcss({width:&#34;24px&#34;,height:&#34;24px&#34;})
const stFormClass=addcss({display:&#34;flex&#34;,flexDirection:&#34;column&#34;,padding:&#34;4px&#34;,backgroundColor:&#34;white&#34;,&#34;input&#34;: {marginBottom:&#34;10px&#34;}})
const stInputCentered=addcss({textAlign:&#34;center&#34;});const stOpacity0=addcss({opacity:&#34;0%&#34;});const stMarginTop10=addcss({marginTop:&#34;10px&#34;})
const flexItemsCenter={display:&#34;flex&#34;,alignItems:&#34;center&#34;};const stFlexItemsCenter=addcss(flexItemsCenter)
const stNonPlainEmailWrapper=addcss(R.mergeRight(flexItemsCenter,{width:&#34;32px&#34;,height:&#34;32px&#34;,justifyContent:&#34;center&#34;}))
const fadeInOut=(t)=&gt;()=&gt;{anime({targets:t,opacity:[&#34;0%&#34;,&#34;100%&#34;],duration:1000,easing:&#34;easeInOutQuad&#34;,complete:()=&gt;{
	anime({targets:t,opacity:[&#34;100%&#34;,&#34;0%&#34;],duration:1000,delay:2000,easing:&#34;easeInOutQuad&#34;,complete:()=&gt;{anime.remove(t)}})}})}
const truncated=R.replace(/(.)[^@]*(.)@(.).*(.\.[^.]&#43;)/,&#34;$1-$2@$3-$4&#34;)
window.onload=()=&gt;{ // TODO - pull out as many funcs as possible
	const plain=R.equals(&#34;{{.Cfg.PlainUI}}&#34;, &#34;true&#34;);const prefixedPath=(s)=&gt;&#34;{{.Cfg.APIBasePath}}&#34;&#43;s;
	const isLoggedIn=()=&gt;R.equals(&#34;{{.LoggedIn}}&#34;,&#34;true&#34;);const userEmail=()=&gt;&#34;{{.UserEmail}}&#34;;const userID=()=&gt;&#34;{{.UserID}}&#34;
	const uuid=&#34;st&#34;&#43;crypto.randomUUID()
	const s=store({init:true,label:&#34;...&#34;,stState:&#34;init&#34;,showMenu:false,menuItems:[]})
	const mstate=(s,o)=&gt;s.setState(pre(R.mergeRight(s.state(),o)))
	const onEnter=(f)=&gt;(e)=&gt;{if(e.key===&#34;Enter&#34; || e.keyCode===13){f()}}
	const callSendOTP=()=&gt;{globalThis.stAuth.sendOTP(valueByID(uuid&#43;&#34;email&#34;));disableID(uuid&#43;&#34;email&#34;);disableID(uuid&#43;&#34;emailButton&#34;)}
	const callVerifyOTP=()=&gt;{globalThis.stAuth.verifyOTP(valueByID(uuid&#43;&#34;otp&#34;));disableID(uuid&#43;&#34;otp&#34;);disableID(uuid&#43;&#34;otpButton&#34;)}
	const handleClose=()=&gt;{s.setState(R.mergeRight(s.state(),{stState:&#34;init&#34;,displayState:c.init()}));h.state(&#34;loggedOut&#34;)}
	const c={init:()=&gt;null,
		enterEmail:()=&gt;e(&#34;div&#34;, {className:stFormClass},
			e(&#34;input&#34;, {id:uuid&#43;&#34;email&#34;,type:&#34;text&#34;,placeholder:&#34;your.email@address.com&#34;,onkeyup:onEnter(callSendOTP),className:stInputCentered}),
			e(&#34;button&#34;, {id:uuid&#43;&#34;emailButton&#34;,onclick:callSendOTP}, &#34;Request one-time code&#34;),
			e(&#34;button&#34;,{className:stMarginTop10,onclick:handleClose},&#34;Close&#34;)),
		enterOTP:()=&gt;e(&#34;div&#34;, {className:stFormClass},
			e(&#34;input&#34;, {id:uuid&#43;&#34;otp&#34;,type:&#34;text&#34;,placeholder:&#34;One-time code in email&#34;,onkeyup:onEnter(callVerifyOTP),className:stInputCentered}),
			e(&#34;button&#34;, {id:uuid&#43;&#34;otpButton&#34;,onclick:callVerifyOTP}, &#34;Verify code&#34;),
			e(&#34;button&#34;,{className:stMarginTop10,onclick:handleClose},&#34;Close&#34;)),
		showEmail:()=&gt;(plain
			? null
			: e(&#34;div&#34;, {className:stNonPlainEmailWrapper},
				e(&#34;div&#34;,{id:uuid&#43;&#34;userEmail&#34;,className:stOpacity0},userEmail()),
				e(&#34;button&#34;,{className:stButtonClass, onclick:fadeInOut(&#34;#&#34;&#43;uuid&#43;&#34;userEmail&#34;)},
					e(&#34;img&#34;,{className:stImgClass,src:(isLoggedIn() ? prefixedPath(&#34;/person_outline.svg&#34;) : null)}))))}
	const pre=(o)=&gt;({
		&#34;init&#34;:R.identity, // TODO - see if we can live without this...
		&#34;loggedOut&#34;:R.identity,
		&#34;checkEmail&#34;:R.mergeLeft({displayState:c.enterOTP()}),
		&#34;wrongOTP&#34;:R.identity, &#34;oldOTP&#34;:R.identity, &#34;failedOTP&#34;:R.identity,
		&#34;signUpSuccess&#34;:R.tap(()=&gt;window.location.reload()),
		&#34;signInSuccess&#34;:R.tap(()=&gt;window.location.reload()),
		&#34;loggedIn&#34;:R.mergeLeft({displayState:c.showEmail()}),
		&#34;logoutCompleted&#34;:R.tap(()=&gt;window.location.reload()),
	}[o.stState](o))
	const handleMenu=()=&gt;{if(!isLoggedIn()){handleClose()}mstate(s,({showMenu:!s.state().showMenu}))}
	const handleMenuMouseLeave=()=&gt;mstate(s,({showMenu:false}))
	const handle=()=&gt;{handleMenuMouseLeave();if(s.state().stState===&#34;loggedOut&#34;){ mstate(s,{displayState:c.enterEmail()})
			}else if(s.state().stState===&#34;loggedIn&#34;){globalThis.stAuth.logout()}}
	let etc=null
	const checkForMenuClose=(e)=&gt;{if(neon(etc)&amp;&amp;!etc.contains(e.target)){handleMenuMouseLeave()}}
	const removeClickOffTracker=(el)=&gt;{etc=el;document.removeEventListener(&#34;click&#34;,checkForMenuClose,true)}
	const addClickOffTracker=(el)=&gt;{etc=el;removeClickOffTracker(el);document.addEventListener(&#34;click&#34;,checkForMenuClose,true)}
	const setMenuItems=(mis)=&gt;mstate(s,{menuItems:R.map(
		([label,fn])=&gt;e(&#34;div&#34;,{},e(&#34;a&#34;,{href:&#34;#&#34;,className:stPlainMenuClass,onclick:()=&gt;{handleMenuMouseLeave();fn()}},label)),
		mis)})
	const aui=()=&gt;e(&#34;div&#34;,{id:uuid,className:stWrapperClass,
			style:&#34;opacity:&#34;&#43;(s.state().stState==&#34;init&#34; ? 0: 100)&#43;&#34;%;background:rgba(0,0,0,0)&#34;,
			onmouseleave:handleMenuMouseLeave,lifecycle:{added:addClickOffTracker,removed:removeClickOffTracker}},
		e(&#34;button&#34;,{style:&#34;width:32px;height:32px;padding:0;border:0;background-color:white;cursor:pointer&#34;,onclick:handleMenu},
			e(&#34;img&#34;,{style:&#34;width:32px;height:32px&#34;,src:prefixedPath(&#34;/menu.svg&#34;)})),
		s.state().displayState,
		(!s.state().showMenu ? null
			: e(&#34;div&#34;,{className:stMenuWrapperClass},
				(isLoggedIn() ? null : e(&#34;div&#34;,{},e(&#34;a&#34;,{href:&#34;#&#34;,className:stPlainMenuClass,onclick:handle},&#34;login&#34;))),
				(!isLoggedIn() ? null : e(&#34;div&#34;,{className:stPlainMenuClass,style:&#34;cursor:default;font-variant:normal&#34;},
					truncated(userEmail()))),
				...s.state().menuItems,
				(!isLoggedIn() ? null : e(&#34;div&#34;,{},e(&#34;a&#34;,{href:&#34;#&#34;,className:stPlainMenuClass,onclick:handle},&#34;logout&#34;))),
			)),
	)
	s.subscribe(()=&gt;{ge(uuid).replaceWith(aui());focusIfVisible(uuid&#43;&#34;email&#34;);focusIfVisible(uuid&#43;&#34;otp&#34;)})
	dbac(aui())
	const h={catch:(msg,err)=&gt;showError(msg,err), state:(state,data)=&gt;mstate(s,{stState:state,stData:data})}
	const hge=(msg,err)=&gt;h.catch(msg&#43;(err.isSuperTokensGeneralError ? &#34; (some other failure)&#34; : &#34;&#34;),err)
	supertokens.init({appInfo:{apiDomain:&#34;{{.Cfg.APIDomain}}&#34;,apiBasePath:&#34;{{.Cfg.APIBasePath}}&#34;,appName:&#34;{{.Cfg.AppName}}&#34;},
		recipeList:[supertokensEmailVerification.init(),supertokensSession.init(),supertokensPasswordless.init()]});
	const sendOTP=async(email)=&gt;{try{
			const resp=await supertokensPasswordless.createCode({email})
			if(resp.status != &#34;SIGN_IN_UP_NOT_ALLOWED&#34;){h.state(&#34;checkEmail&#34;)}
		}catch(err){hge(&#34;sendOTP&#34;,err)}}
	const verifyOTP=async(otp)=&gt;{try{
			const resp=await supertokensPasswordless.consumeCode({userInputCode:otp});
			if(resp.status === &#34;OK&#34;){
				if(resp.createdNewRecipeUser &amp;&amp; resp.user.loginMethods.length === 1){h.state(&#34;signUpSuccess&#34;,resp.user.id)
				}else{h.state(&#34;signInSuccess&#34;,resp.user.id)}
			}else if(resp.status === &#34;INCORRECT_USER_INPUT_CODE_ERROR&#34;){h.state(&#34;wrongOTP&#34;)
			}else if(resp.status === &#34;EXPIRED_USER_INPUT_CODE_ERROR&#34;){h.state(&#34;oldOTP&#34;)
			}else{h.state(&#34;failedOTP&#34;)}
		}catch(err){hge(&#34;handleOTP&#34;,err)}}
	const logout=async()=&gt;{await supertokensSession.signOut();h.state(&#34;logoutCompleted&#34;)}
	globalThis.stAuth={sendOTP,verifyOTP,logout,isLoggedIn,userEmail,userID,setMenuItems}
	if(neon(globalThis.authHooks)){globalThis.authHooks.forEach(([l,f])=&gt;{const p=h[l];h[l]=(a,b)=&gt;{p(a,b);f(a,b)}})}
	if(neon(globalThis.menuItems)){setMenuItems(globalThis.menuItems)}
	if(isLoggedIn()){h.state(&#34;loggedIn&#34;,userEmail())}else{h.state(&#34;loggedOut&#34;)}
	anime({targets:&#34;#&#34;&#43;uuid,opacity:&#34;100%&#34;,duration:1000,easing:&#34;easeInOutQuad&#34;,complete:()=&gt;anime.remove(&#34;#&#34;&#43;uuid)})
}
</code></pre>
<br /><br />
<div id='raw'>The raw file follows...</div>
<br /><br />
<div style="border:solid 1px black; padding:1em; overflow:scroll" contentEditable><pre>console.log(&#34;{{.Version}}&#34;)
import * as R from &#34;ramda&#34;;import anime from &#34;animejs/lib/anime.es.js&#34;;import {create} from &#34;free-style&#34;
const l=console.log;const neon=R.allPass([R.isNotNil,R.complement(R.isEmpty)]);const eon=R.anyPass([R.isNil,R.isEmpty])
const store=(o,...ihs)=&gt;{let s=o;let hs=ihs;return {state:()=&gt;s,setState:(o)=&gt;{
	if(R.equals(s,o)){return};s=o;R.map(R.call,hs)
},subscribe:(h)=&gt;hs=R.append(h,hs)}}
const d=document;const dce=(e)=&gt;d.createElement(e);const dctn=(e)=&gt;d.createTextNode(e)
const dhac=(c)=&gt;d.head.appendChild(c);const dbac=(c)=&gt;d.body.appendChild(c);const lcc=&#34;st&#34;&#43;crypto.randomUUID()
const mot=R.tap((e)=&gt;{if(eon(e[lcc].added)&amp;&amp;eon(e[lcc].removed)){return}
	(new MutationObserver((ms,o)=&gt;R.map((m)=&gt;{
			if(R.includes(e,m.addedNodes)&amp;&amp;neon(e[lcc].added)){e[lcc].added(e)}
			if(R.includes(e,m.removedNodes)&amp;&amp;neon(e[lcc].removed)){o.disconnect();e[lcc].removed(e)}
	})(ms))).observe(window.document,{childList:true,subtree:true})})
const e=(t,a,...cs)=&gt;{ // Based on hscrpt - use &#39;className&#39; for class and all lowercase for handlers
	const el=dce(t);
	R.mapObjIndexed((v,k)=&gt;el[k]=v,R.dissoc(&#34;lifecycle&#34;,a));
	el[lcc]={};R.mapObjIndexed((v,k)=&gt;el[lcc][k]=v,a.lifecycle);
	R.map((c)=&gt;{if(c){el.appendChild(R.is(String,c) ? dctn(c) : c)}},cs);
	return mot(el)}
const ge=(id)=&gt;d.getElementById(id);const valueByID=(id)=&gt;ge(id).value;const disableID=(id)=&gt;ge(id).disabled=true;
const focusIfVisible=(id)=&gt;{if(neon(ge(id))&amp;&amp;(ge(id).offsetParent!=null)){ ge(id).focus() }}
const ssw=(s)=&gt;&#34;{{.Cfg.SuperTokensWebLibBase}}&#34;&#43;s
const addjs=(src)=&gt;{const s=dce(&#34;script&#34;);s.setAttribute(&#34;src&#34;, src);s.async=false;dbac(s)}
addjs(ssw(&#34;/website.js&#34;));addjs(ssw(&#34;/supertokens.js&#34;));addjs(ssw(&#34;/session.js&#34;));addjs(ssw(&#34;/passwordless.js&#34;));addjs(ssw(&#34;/emailverification.js&#34;))
const addcss=(o)=&gt;{const s=create();const r=s.registerStyle(o);const se=dce(&#34;style&#34;);se.textContent=s.getStyles();dhac(se);return r}
const stWrapperClass=addcss({boxSizing:&#34;border-box&#34;,position:&#34;absolute&#34;,top:&#34;12px&#34;,right:&#34;12px&#34;,zIndex:999,
	display:&#34;flex&#34;,alignItems:&#34;flex-end&#34;,flexDirection:&#34;column&#34;})
const stMenuWrapperClass=addcss({backgroundColor:&#34;white&#34;,minWidth:&#34;10em&#34;,display:&#34;flex&#34;,flexDirection:&#34;column&#34;,
	border:&#34;black solid 1px&#34;,paddingTop:&#34;4px&#34;,div:{minHeight:&#34;10px&#34;,marginBottom:&#34;4px&#34;}})
const stPlainObj={padding:&#34;4px&#34;,cursor:&#34;pointer&#34;,marginLeft:&#34;12px&#34;,fontVariant:&#34;small-caps&#34;}
const stPlainClass=addcss(stPlainObj)
const stPlainMenuClass=addcss(R.mergeRight(stPlainObj,
	{marginLeft:&#34;0px&#34;,paddingLeft:&#34;12px&#34;,display:&#34;inline-block&#34;,width:&#34;calc(100% - 16px)&#34;,&#34;&amp;:hover&#34;:{backgroundColor:&#34;#e6e6e6&#34;}}))
const stButtonClass=addcss({width:&#34;32px&#34;,height:&#34;32px&#34;,padding:&#34;4px&#34;,border:0,cursor:&#34;pointer&#34;,borderRadius:&#34;16px&#34;,marginLeft:&#34;12px&#34;})
const stImgClass=addcss({width:&#34;24px&#34;,height:&#34;24px&#34;})
const stFormClass=addcss({display:&#34;flex&#34;,flexDirection:&#34;column&#34;,padding:&#34;4px&#34;,backgroundColor:&#34;white&#34;,&#34;input&#34;: {marginBottom:&#34;10px&#34;}})
const stInputCentered=addcss({textAlign:&#34;center&#34;});const stOpacity0=addcss({opacity:&#34;0%&#34;});const stMarginTop10=addcss({marginTop:&#34;10px&#34;})
const flexItemsCenter={display:&#34;flex&#34;,alignItems:&#34;center&#34;};const stFlexItemsCenter=addcss(flexItemsCenter)
const stNonPlainEmailWrapper=addcss(R.mergeRight(flexItemsCenter,{width:&#34;32px&#34;,height:&#34;32px&#34;,justifyContent:&#34;center&#34;}))
const fadeInOut=(t)=&gt;()=&gt;{anime({targets:t,opacity:[&#34;0%&#34;,&#34;100%&#34;],duration:1000,easing:&#34;easeInOutQuad&#34;,complete:()=&gt;{
	anime({targets:t,opacity:[&#34;100%&#34;,&#34;0%&#34;],duration:1000,delay:2000,easing:&#34;easeInOutQuad&#34;,complete:()=&gt;{anime.remove(t)}})}})}
const truncated=R.replace(/(.)[^@]*(.)@(.).*(.\.[^.]&#43;)/,&#34;$1-$2@$3-$4&#34;)
window.onload=()=&gt;{ // TODO - pull out as many funcs as possible
	const plain=R.equals(&#34;{{.Cfg.PlainUI}}&#34;, &#34;true&#34;);const prefixedPath=(s)=&gt;&#34;{{.Cfg.APIBasePath}}&#34;&#43;s;
	const isLoggedIn=()=&gt;R.equals(&#34;{{.LoggedIn}}&#34;,&#34;true&#34;);const userEmail=()=&gt;&#34;{{.UserEmail}}&#34;;const userID=()=&gt;&#34;{{.UserID}}&#34;
	const uuid=&#34;st&#34;&#43;crypto.randomUUID()
	const s=store({init:true,label:&#34;...&#34;,stState:&#34;init&#34;,showMenu:false,menuItems:[]})
	const mstate=(s,o)=&gt;s.setState(pre(R.mergeRight(s.state(),o)))
	const onEnter=(f)=&gt;(e)=&gt;{if(e.key===&#34;Enter&#34; || e.keyCode===13){f()}}
	const callSendOTP=()=&gt;{globalThis.stAuth.sendOTP(valueByID(uuid&#43;&#34;email&#34;));disableID(uuid&#43;&#34;email&#34;);disableID(uuid&#43;&#34;emailButton&#34;)}
	const callVerifyOTP=()=&gt;{globalThis.stAuth.verifyOTP(valueByID(uuid&#43;&#34;otp&#34;));disableID(uuid&#43;&#34;otp&#34;);disableID(uuid&#43;&#34;otpButton&#34;)}
	const handleClose=()=&gt;{s.setState(R.mergeRight(s.state(),{stState:&#34;init&#34;,displayState:c.init()}));h.state(&#34;loggedOut&#34;)}
	const c={init:()=&gt;null,
		enterEmail:()=&gt;e(&#34;div&#34;, {className:stFormClass},
			e(&#34;input&#34;, {id:uuid&#43;&#34;email&#34;,type:&#34;text&#34;,placeholder:&#34;your.email@address.com&#34;,onkeyup:onEnter(callSendOTP),className:stInputCentered}),
			e(&#34;button&#34;, {id:uuid&#43;&#34;emailButton&#34;,onclick:callSendOTP}, &#34;Request one-time code&#34;),
			e(&#34;button&#34;,{className:stMarginTop10,onclick:handleClose},&#34;Close&#34;)),
		enterOTP:()=&gt;e(&#34;div&#34;, {className:stFormClass},
			e(&#34;input&#34;, {id:uuid&#43;&#34;otp&#34;,type:&#34;text&#34;,placeholder:&#34;One-time code in email&#34;,onkeyup:onEnter(callVerifyOTP),className:stInputCentered}),
			e(&#34;button&#34;, {id:uuid&#43;&#34;otpButton&#34;,onclick:callVerifyOTP}, &#34;Verify code&#34;),
			e(&#34;button&#34;,{className:stMarginTop10,onclick:handleClose},&#34;Close&#34;)),
		showEmail:()=&gt;(plain
			? null
			: e(&#34;div&#34;, {className:stNonPlainEmailWrapper},
				e(&#34;div&#34;,{id:uuid&#43;&#34;userEmail&#34;,className:stOpacity0},userEmail()),
				e(&#34;button&#34;,{className:stButtonClass, onclick:fadeInOut(&#34;#&#34;&#43;uuid&#43;&#34;userEmail&#34;)},
					e(&#34;img&#34;,{className:stImgClass,src:(isLoggedIn() ? prefixedPath(&#34;/person_outline.svg&#34;) : null)}))))}
	const pre=(o)=&gt;({
		&#34;init&#34;:R.identity, // TODO - see if we can live without this...
		&#34;loggedOut&#34;:R.identity,
		&#34;checkEmail&#34;:R.mergeLeft({displayState:c.enterOTP()}),
		&#34;wrongOTP&#34;:R.identity, &#34;oldOTP&#34;:R.identity, &#34;failedOTP&#34;:R.identity,
		&#34;signUpSuccess&#34;:R.tap(()=&gt;window.location.reload()),
		&#34;signInSuccess&#34;:R.tap(()=&gt;window.location.reload()),
		&#34;loggedIn&#34;:R.mergeLeft({displayState:c.showEmail()}),
		&#34;logoutCompleted&#34;:R.tap(()=&gt;window.location.reload()),
	}[o.stState](o))
	const handleMenu=()=&gt;{if(!isLoggedIn()){handleClose()}mstate(s,({showMenu:!s.state().showMenu}))}
	const handleMenuMouseLeave=()=&gt;mstate(s,({showMenu:false}))
	const handle=()=&gt;{handleMenuMouseLeave();if(s.state().stState===&#34;loggedOut&#34;){ mstate(s,{displayState:c.enterEmail()})
			}else if(s.state().stState===&#34;loggedIn&#34;){globalThis.stAuth.logout()}}
	let etc=null
	const checkForMenuClose=(e)=&gt;{if(neon(etc)&amp;&amp;!etc.contains(e.target)){handleMenuMouseLeave()}}
	const removeClickOffTracker=(el)=&gt;{etc=el;document.removeEventListener(&#34;click&#34;,checkForMenuClose,true)}
	const addClickOffTracker=(el)=&gt;{etc=el;removeClickOffTracker(el);document.addEventListener(&#34;click&#34;,checkForMenuClose,true)}
	const setMenuItems=(mis)=&gt;mstate(s,{menuItems:R.map(
		([label,fn])=&gt;e(&#34;div&#34;,{},e(&#34;a&#34;,{href:&#34;#&#34;,className:stPlainMenuClass,onclick:()=&gt;{handleMenuMouseLeave();fn()}},label)),
		mis)})
	const aui=()=&gt;e(&#34;div&#34;,{id:uuid,className:stWrapperClass,
			style:&#34;opacity:&#34;&#43;(s.state().stState==&#34;init&#34; ? 0: 100)&#43;&#34;%;background:rgba(0,0,0,0)&#34;,
			onmouseleave:handleMenuMouseLeave,lifecycle:{added:addClickOffTracker,removed:removeClickOffTracker}},
		e(&#34;button&#34;,{style:&#34;width:32px;height:32px;padding:0;border:0;background-color:white;cursor:pointer&#34;,onclick:handleMenu},
			e(&#34;img&#34;,{style:&#34;width:32px;height:32px&#34;,src:prefixedPath(&#34;/menu.svg&#34;)})),
		s.state().displayState,
		(!s.state().showMenu ? null
			: e(&#34;div&#34;,{className:stMenuWrapperClass},
				(isLoggedIn() ? null : e(&#34;div&#34;,{},e(&#34;a&#34;,{href:&#34;#&#34;,className:stPlainMenuClass,onclick:handle},&#34;login&#34;))),
				(!isLoggedIn() ? null : e(&#34;div&#34;,{className:stPlainMenuClass,style:&#34;cursor:default;font-variant:normal&#34;},
					truncated(userEmail()))),
				...s.state().menuItems,
				(!isLoggedIn() ? null : e(&#34;div&#34;,{},e(&#34;a&#34;,{href:&#34;#&#34;,className:stPlainMenuClass,onclick:handle},&#34;logout&#34;))),
			)),
	)
	s.subscribe(()=&gt;{ge(uuid).replaceWith(aui());focusIfVisible(uuid&#43;&#34;email&#34;);focusIfVisible(uuid&#43;&#34;otp&#34;)})
	dbac(aui())
	const h={catch:(msg,err)=&gt;showError(msg,err), state:(state,data)=&gt;mstate(s,{stState:state,stData:data})}
	const hge=(msg,err)=&gt;h.catch(msg&#43;(err.isSuperTokensGeneralError ? &#34; (some other failure)&#34; : &#34;&#34;),err)
	supertokens.init({appInfo:{apiDomain:&#34;{{.Cfg.APIDomain}}&#34;,apiBasePath:&#34;{{.Cfg.APIBasePath}}&#34;,appName:&#34;{{.Cfg.AppName}}&#34;},
		recipeList:[supertokensEmailVerification.init(),supertokensSession.init(),supertokensPasswordless.init()]});
	const sendOTP=async(email)=&gt;{try{
			const resp=await supertokensPasswordless.createCode({email})
			if(resp.status != &#34;SIGN_IN_UP_NOT_ALLOWED&#34;){h.state(&#34;checkEmail&#34;)}
		}catch(err){hge(&#34;sendOTP&#34;,err)}}
	const verifyOTP=async(otp)=&gt;{try{
			const resp=await supertokensPasswordless.consumeCode({userInputCode:otp});
			if(resp.status === &#34;OK&#34;){
				if(resp.createdNewRecipeUser &amp;&amp; resp.user.loginMethods.length === 1){h.state(&#34;signUpSuccess&#34;,resp.user.id)
				}else{h.state(&#34;signInSuccess&#34;,resp.user.id)}
			}else if(resp.status === &#34;INCORRECT_USER_INPUT_CODE_ERROR&#34;){h.state(&#34;wrongOTP&#34;)
			}else if(resp.status === &#34;EXPIRED_USER_INPUT_CODE_ERROR&#34;){h.state(&#34;oldOTP&#34;)
			}else{h.state(&#34;failedOTP&#34;)}
		}catch(err){hge(&#34;handleOTP&#34;,err)}}
	const logout=async()=&gt;{await supertokensSession.signOut();h.state(&#34;logoutCompleted&#34;)}
	globalThis.stAuth={sendOTP,verifyOTP,logout,isLoggedIn,userEmail,userID,setMenuItems}
	if(neon(globalThis.authHooks)){globalThis.authHooks.forEach(([l,f])=&gt;{const p=h[l];h[l]=(a,b)=&gt;{p(a,b);f(a,b)}})}
	if(neon(globalThis.menuItems)){setMenuItems(globalThis.menuItems)}
	if(isLoggedIn()){h.state(&#34;loggedIn&#34;,userEmail())}else{h.state(&#34;loggedOut&#34;)}
	anime({targets:&#34;#&#34;&#43;uuid,opacity:&#34;100%&#34;,duration:1000,easing:&#34;easeInOutQuad&#34;,complete:()=&gt;anime.remove(&#34;#&#34;&#43;uuid)})
}
<pre></div>