CINXE.COM
Sign in with LiveChat | Text Platform Docs & API Reference
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><title>Sign in with LiveChat | Text Platform Docs & API Reference</title><link rel="canonical" href="https://platform.text.com/docs/authorization/sign-in-with-livechat"/><link rel="preconnect" href="https://LATDYRDX9J-dsn.algolia.net" crossorigin="true"/><meta name="description" content="Some apps you build may need to access data from users accounts. Learn how to achieve that by installing the "Sign in with LiveChat" button."/><meta property="og:title" content="Sign in with LiveChat"/><meta property="og:description" content="Some apps you build may need to access data from users accounts. Learn how to achieve that by installing the "Sign in with LiveChat" button."/><meta property="og:type" content="website"/><meta property="og:image" content="https://platform.text.com/docs/images/text-docs-og.png"/><link rel="icon" href="/docs/images/favicon.ico"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@textplatform"/><meta name="twitter:title" content="Sign in with LiveChat"/><meta name="twitter:description" content="Some apps you build may need to access data from users accounts. Learn how to achieve that by installing the "Sign in with LiveChat" button."/><meta name="twitter:image" content="https://platform.text.com/docs/images/livechat-docs-og.png"/><script type="text/javascript"> window.__lc = window.__lc || {}; window.__lc.license = 1520; ;(function(n,t,c){function i(n){return e._h?e._h.apply(null,n):e._q.push(n)}var e={_q:[],_h:null,_v:"2.0",on:function(){i(["on",c.call(arguments)])},once:function(){i(["once",c.call(arguments)])},off:function(){i(["off",c.call(arguments)])},get:function(){if(!e._h)throw new Error("[LiveChatWidget] You can't use getters before load.");return i(["get",c.call(arguments)])},call:function(){i(["call",c.call(arguments)])},init:function(){var n=t.createElement("script");n.async=!0,n.type="text/javascript",n.src="https://cdn.livechatinc.com/staging/tracking.js",t.head.appendChild(n)}};!n.__lc.asyncInit&&e.init(),n.LiveChatWidget=n.LiveChatWidget||e}(window,document,[].slice)) </script><meta name="next-head-count" content="17"/><link rel="preload" href="/docs/_next/static/css/5c94b719b441ef6e576e.css" as="style"/><link rel="stylesheet" href="/docs/_next/static/css/5c94b719b441ef6e576e.css" data-n-g=""/><noscript data-n-css=""></noscript><link rel="preload" href="/docs/_next/static/chunks/webpack-af19fbe32e13fc779465.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/framework.57a22ac5870571c2eff5.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/commons.0889bf71124535c6c4cd.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/main-7bb61c4f8d40f1e634e9.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/pages/_app-cdbe91fdfdbd305577ef.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/f66b9295.f9eceaafe4216b86326e.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/b31dc3a52fd33fe1943f491eae223576a0413e10.ac30430b2138b8fefed8.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/067aff065064306958fa97cea949633bebf95d70.dede6f8249fbb82aff52.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/pages/authorization/sign-in-with-livechat-5c4f25c245661d071d42.js" as="script"/> <script>!function(e){var n="https://s.go-mpulse.net/boomerang/";if("False"=="True")e.BOOMR_config=e.BOOMR_config||{},e.BOOMR_config.PageParams=e.BOOMR_config.PageParams||{},e.BOOMR_config.PageParams.pci=!0,n="https://s2.go-mpulse.net/boomerang/";if(window.BOOMR_API_key="SWHJY-Y2PHV-NVPM2-PDH42-VMPQS",function(){function e(){if(!o){var e=document.createElement("script");e.id="boomr-scr-as",e.src=window.BOOMR.url,e.async=!0,i.parentNode.appendChild(e),o=!0}}function t(e){o=!0;var n,t,a,r,d=document,O=window;if(window.BOOMR.snippetMethod=e?"if":"i",t=function(e,n){var t=d.createElement("script");t.id=n||"boomr-if-as",t.src=window.BOOMR.url,BOOMR_lstart=(new Date).getTime(),e=e||d.body,e.appendChild(t)},!window.addEventListener&&window.attachEvent&&navigator.userAgent.match(/MSIE [67]\./))return window.BOOMR.snippetMethod="s",void t(i.parentNode,"boomr-async");a=document.createElement("IFRAME"),a.src="about:blank",a.title="",a.role="presentation",a.loading="eager",r=(a.frameElement||a).style,r.width=0,r.height=0,r.border=0,r.display="none",i.parentNode.appendChild(a);try{O=a.contentWindow,d=O.document.open()}catch(_){n=document.domain,a.src="javascript:var d=document.open();d.domain='"+n+"';void(0);",O=a.contentWindow,d=O.document.open()}if(n)d._boomrl=function(){this.domain=n,t()},d.write("<bo"+"dy onload='document._boomrl();'>");else if(O._boomrl=function(){t()},O.addEventListener)O.addEventListener("load",O._boomrl,!1);else if(O.attachEvent)O.attachEvent("onload",O._boomrl);d.close()}function a(e){window.BOOMR_onload=e&&e.timeStamp||(new Date).getTime()}if(!window.BOOMR||!window.BOOMR.version&&!window.BOOMR.snippetExecuted){window.BOOMR=window.BOOMR||{},window.BOOMR.snippetStart=(new Date).getTime(),window.BOOMR.snippetExecuted=!0,window.BOOMR.snippetVersion=12,window.BOOMR.url=n+"SWHJY-Y2PHV-NVPM2-PDH42-VMPQS";var i=document.currentScript||document.getElementsByTagName("script")[0],o=!1,r=document.createElement("link");if(r.relList&&"function"==typeof r.relList.supports&&r.relList.supports("preload")&&"as"in r)window.BOOMR.snippetMethod="p",r.href=window.BOOMR.url,r.rel="preload",r.as="script",r.addEventListener("load",e),r.addEventListener("error",function(){t(!0)}),setTimeout(function(){if(!o)t(!0)},3e3),BOOMR_lstart=(new Date).getTime(),i.parentNode.appendChild(r);else t(!1);if(window.addEventListener)window.addEventListener("load",a,!1);else if(window.attachEvent)window.attachEvent("onload",a)}}(),"".length>0)if(e&&"performance"in e&&e.performance&&"function"==typeof e.performance.setResourceTimingBufferSize)e.performance.setResourceTimingBufferSize();!function(){if(BOOMR=e.BOOMR||{},BOOMR.plugins=BOOMR.plugins||{},!BOOMR.plugins.AK){var n=""=="true"?1:0,t="",a="bdpnbet4tppcaz2hhaza-f-39e8ce4ee-clientnsv4-s.akamaihd.net",i="false"=="true"?2:1,o={"ak.v":"39","ak.cp":"1461330","ak.ai":parseInt("908031",10),"ak.ol":"0","ak.cr":1,"ak.ipv":4,"ak.proto":"http/1.1","ak.rid":"1528afeb","ak.r":6099,"ak.a2":n,"ak.m":"b","ak.n":"essl","ak.bpcip":"8.222.208.0","ak.cport":46398,"ak.gh":"124.155.222.130","ak.quicv":"","ak.tlsv":"tls1.2","ak.0rtt":"","ak.0rtt.ed":"","ak.csrc":"-","ak.acc":"reno","ak.t":"1732720690","ak.ak":"hOBiQwZUYzCg5VSAfCLimQ==SEvrW2q58Mbms2Utd6LUzqt/OU42KGoO/ss3oqxp8YTWJ7o4tN75RAdUoa6bc7Yep9/nAc49fyIFxkIZSDgV2pgRze53sLVF5IAf5sv2LIyUSEe2Rn9PnLGtsj7s25cNrvy/LfKM1RYiB+nBaelMQStWG3EulXUa+BnmluAYASwgzI0fCo1UT9qr4xVqCmrKVn6Y7luBRsNb9xxjWOdEuBrYkgQN7qUTjNwTDr75HPr5eCoYg/BlnNQcI8M7FOjKyQd6oT6nQ2z8jQfcjx9YN0HVCmJHrZeOKFMiSU+M097AykvHbBD9dl5Hmtl2CBLP2fgWSthUdktbpTXaRB0orxaAmuxN8MWBauDK4r/F81KMcsjVL2sYHke1GhudYD3QGdLrNfD4uxCWQ1/0tcn65RHauQxjnuZv54r0Sb/F/aU=","ak.pv":"55","ak.dpoabenc":"","ak.tf":i};if(""!==t)o["ak.ruds"]=t;var r={i:!1,av:function(n){var t="http.initiator";if(n&&(!n[t]||"spa_hard"===n[t]))o["ak.feo"]=void 0!==e.aFeoApplied?1:0,BOOMR.addVar(o)},rv:function(){var e=["ak.bpcip","ak.cport","ak.cr","ak.csrc","ak.gh","ak.ipv","ak.m","ak.n","ak.ol","ak.proto","ak.quicv","ak.tlsv","ak.0rtt","ak.0rtt.ed","ak.r","ak.acc","ak.t","ak.tf"];BOOMR.removeVar(e)}};BOOMR.plugins.AK={akVars:o,akDNSPreFetchDomain:a,init:function(){if(!r.i){var e=BOOMR.subscribe;e("before_beacon",r.av,null,null),e("onbeacon",r.rv,null,null),r.i=!0}return this},is_complete:function(){return!0}}}}()}(window);</script></head><body><div id="__next"><style data-emotion-css="cvn8wj">.css-cvn8wj{font-family:Colfax,colfax-web,Proxima Nova,Open Sans,Gill Sans MT, Gill Sans,Corbel,Arial,sans-serif;background-color:#4a4a55;height:60px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:fixed;top:0;width:100%;z-index:99;}@media (min-width:768px){.css-cvn8wj{height:60px;}}</style><div class="css-cvn8wj"><style data-emotion-css="y9662z">.css-y9662z{background:#4a4a55;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}</style><div class="css-y9662z"><style data-emotion-css="qqcdow">.css-qqcdow{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:15px;margin:0 20px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:60px;}.css-qqcdow > a > svg{margin:0;display:block;height:24px;}</style><nav class="css-qqcdow"><style data-emotion-css="c2yzgf">.css-c2yzgf{color:white;-webkit-text-decoration:none;text-decoration:none;font-weight:500;white-space:nowrap;margin-left:8px;}.css-c2yzgf:hover{-webkit-text-decoration:none;text-decoration:none;color:white;}</style><a href="https://text.com/" class="css-c2yzgf"><style data-emotion-css="ofqsza">.css-ofqsza{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;justify-items:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.8em;height:40px;}.css-ofqsza .logo{margin:0;font-size:2em;font-weight:500;-webkit-letter-spacing:-0.01em;-moz-letter-spacing:-0.01em;-ms-letter-spacing:-0.01em;letter-spacing:-0.01em;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-ofqsza .adjacent{margin:0;font-size:1.8em;font-weight:500;line-height:34px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-letter-spacing:-0.5px;-moz-letter-spacing:-0.5px;-ms-letter-spacing:-0.5px;letter-spacing:-0.5px;}.css-ofqsza .carrier{font-weight:500;-webkit-animation-name:blink;animation-name:blink;-webkit-animation-duration:0.9s;animation-duration:0.9s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}</style><header class="css-ofqsza"><span class="logo">text<span class="carrier">|</span></span></header></a><a href="/docs" class="css-c2yzgf">Platform Docs</a></nav><style data-emotion-css="16b59id">.css-16b59id{margin:0;padding:0;max-width:calc(100% - 60px);width:calc(100% - 60px);overflow-x:auto;overflow-y:hidden;display:none;margin-right:10px;margin-left:40px;}@media (min-width:1024px){.css-16b59id{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:32px;}}</style><div class="css-16b59id"><style data-emotion-css="11hjr56">.css-11hjr56{font-family:Colfax,colfax-web,Proxima Nova,Open Sans,Gill Sans MT, Gill Sans,Corbel,Arial,sans-serif;position:relative;display:inline-block;height:100%;color:#ffffff;font-weight:400;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-11hjr56:hover{cursor:default;}</style><div class="css-11hjr56">Platform<svg width="24" height="24" fill="#FFFFFF" class="rmi rmi-chevron-down undefined" viewBox="0 0 24 24"><path d="M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6 1.41-1.42z"></path></svg></div><div class="css-11hjr56">APIs & SDKs<svg width="24" height="24" fill="#FFFFFF" class="rmi rmi-chevron-down undefined" viewBox="0 0 24 24"><path d="M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6 1.41-1.42z"></path></svg></div><div class="css-11hjr56">Resources<svg width="24" height="24" fill="#FFFFFF" class="rmi rmi-chevron-down undefined" viewBox="0 0 24 24"><path d="M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6 1.41-1.42z"></path></svg></div></div><style data-emotion-css="1hppjzv">.css-1hppjzv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1hppjzv"><style data-emotion-css="7wgbw1">.css-7wgbw1{display:none;}@media (min-width:1024px){.css-7wgbw1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:192px;margin-right:16px;}}</style><div class="DocSearch-Button-Desktop css-7wgbw1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><style data-emotion-css="1i8rrts">.css-1i8rrts{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;}@media (min-width:1024px){.css-1i8rrts{display:none;}}</style><div class="DocSearch-Button-Mobile css-1i8rrts"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><p>...</p><style data-emotion-css="pskeb7">@media (min-width:1024px){.css-pskeb7{display:none;}}</style><style data-emotion-css="19rp0xe">.css-19rp0xe{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-right:16px;cursor:pointer;}@media (min-width:1024px){.css-19rp0xe{display:none;}}@media (min-width:1024px){.css-19rp0xe{display:none;}}</style><svg width="32px" height="28px" fill="#ffffff" class="rmi rmi-menu css-19rp0xe" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"></path></svg></div></div></div><style data-emotion-css="ov1ktg">.css-ov1ktg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><div class="css-ov1ktg"><style data-emotion-css="hpx2k5">.css-hpx2k5{border-right:1px solid #e2e2e4;height:50px;position:fixed;-webkit-transition:height 300ms;transition:height 300ms;display:block;bottom:0%;width:100%;opacity:1;z-index:10;box-shadow:0px 0px 8px rgba(0,0,0,0.25);background-color:white;}@media (min-width:768px){.css-hpx2k5{box-shadow:none;height:100vh;max-height:100vh;position:-webkit-sticky;position:sticky;top:60px;-webkit-transition:all 0s;transition:all 0s;width:260px;}}</style><aside class="css-hpx2k5"><style data-emotion-css="y8dejn">.css-y8dejn{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:white;padding:10px 14px;cursor:pointer;}@media (min-width:768px){.css-y8dejn{display:none;}}</style><div class="css-y8dejn"><svg style="transform:rotate(270deg);transition:transform 300ms" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="currentColor"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>Sign in with LiveChat</div><style data-emotion-css="v8mm6">.css-v8mm6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}@media (min-width:768px){.css-v8mm6{display:none;}}</style><div class="css-v8mm6"><style data-emotion-css="1pjh3pd">.css-1pjh3pd{width:100%;color:#62626D;}.css-1pjh3pd:hover{cursor:pointer;-webkit-text-decoration:none;text-decoration:none;background-color:#f6f6f7;}</style><a class="css-1pjh3pd"><style data-emotion-css="1yw2pv4">.css-1yw2pv4{padding:4px 14px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:16px;}</style><div class="css-1yw2pv4"><style data-emotion-css="5c7uuc">.css-5c7uuc{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:start;-ms-flex-pack:start;justify-content:start;}</style><div class="css-5c7uuc"><svg width="24" height="20px" fill="#62626D" class="rmi rmi-home undefined" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8h5z"></path></svg></div>Home</div></a></div><style data-emotion-css="1ln71vl">.css-1ln71vl{overflow:scroll;height:calc(100% - 90px);}@media (min-width:768px){.css-1ln71vl{height:calc(100% - 60px);position:fixed;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;max-height:100vh;position:-webkit-sticky;position:-webkit-sticky;position:sticky;top:0;margin-top:8px;}}</style><div class="css-1ln71vl"><style data-emotion-css="1psvkz3">.css-1psvkz3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;margin-right:10px;font-weight:500;font-size:16px;border-radius:0px 8px 8px 0px;}.css-1psvkz3:hover{background-color:#f6f6f7;}</style><div class="css-1psvkz3"><style data-emotion-css="19nl305">.css-19nl305{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#62626D;width:100%;}.css-19nl305:hover{color:#4284F5;cursor:pointer;-webkit-text-decoration:none;text-decoration:none;}</style><a class="css-19nl305"><style data-emotion-css="2hhlpj">.css-2hhlpj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:6px 16px 6px 20px;margin-right:10px;font-weight:500;font-size:16px;border-radius:0px 8px 8px 0px;width:100%;}.css-2hhlpj:hover{background-color:#f6f6f7;}</style><div class="css-2hhlpj"><style data-emotion-css="oe3dsw">.css-oe3dsw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:8px;}</style><div class="css-oe3dsw"><svg fill="#424D57" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><path d="M1.5,0.5 C0.675,0.5 0.0075,1.175 0.0075,2 L0,14 C0,14.825 0.6675,15.5 1.4925,15.5 L10.5,15.5 C11.325,15.5 12,14.825 12,14 L12,5 L7.5,0.5 L1.5,0.5 Z M6.75,5.75 L6.75,1.625 L10.875,5.75 L6.75,5.75 Z" fill-rule="nonzero" fill="currentColor"></path></svg></div>Authorization Overview</div></a></div><div class="css-1psvkz3"><a class="css-19nl305"><div class="css-2hhlpj"><div class="css-oe3dsw"><svg fill="#424D57" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><path d="M1.5,0.5 C0.675,0.5 0.0075,1.175 0.0075,2 L0,14 C0,14.825 0.6675,15.5 1.4925,15.5 L10.5,15.5 C11.325,15.5 12,14.825 12,14 L12,5 L7.5,0.5 L1.5,0.5 Z M6.75,5.75 L6.75,1.625 L10.875,5.75 L6.75,5.75 Z" fill-rule="nonzero" fill="currentColor"></path></svg></div>Authorizing API calls</div></a></div><div class="css-1psvkz3"><a class="css-19nl305"><div class="css-2hhlpj"><div class="css-oe3dsw"><svg fill="#424D57" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><path d="M1.5,0.5 C0.675,0.5 0.0075,1.175 0.0075,2 L0,14 C0,14.825 0.6675,15.5 1.4925,15.5 L10.5,15.5 C11.325,15.5 12,14.825 12,14 L12,5 L7.5,0.5 L1.5,0.5 Z M6.75,5.75 L6.75,1.625 L10.875,5.75 L6.75,5.75 Z" fill-rule="nonzero" fill="currentColor"></path></svg></div>Agent Authorization</div></a></div><div class="css-1psvkz3"><a class="css-19nl305"><div class="css-2hhlpj"><div class="css-oe3dsw"><svg fill="#424D57" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><path d="M1.5,0.5 C0.675,0.5 0.0075,1.175 0.0075,2 L0,14 C0,14.825 0.6675,15.5 1.4925,15.5 L10.5,15.5 C11.325,15.5 12,14.825 12,14 L12,5 L7.5,0.5 L1.5,0.5 Z M6.75,5.75 L6.75,1.625 L10.875,5.75 L6.75,5.75 Z" fill-rule="nonzero" fill="currentColor"></path></svg></div>Customer Authorization</div></a></div><div class="css-1psvkz3"><a class="css-19nl305"><div class="css-2hhlpj"><div class="css-oe3dsw"><svg fill="#424D57" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><path d="M1.5,0.5 C0.675,0.5 0.0075,1.175 0.0075,2 L0,14 C0,14.825 0.6675,15.5 1.4925,15.5 L10.5,15.5 C11.325,15.5 12,14.825 12,14 L12,5 L7.5,0.5 L1.5,0.5 Z M6.75,5.75 L6.75,1.625 L10.875,5.75 L6.75,5.75 Z" fill-rule="nonzero" fill="currentColor"></path></svg></div>Scopes</div></a></div><style data-emotion-css="1gg9bms">.css-1gg9bms{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;margin-right:10px;font-weight:600;font-size:16px;border-radius:0px 8px 8px 0px;}.css-1gg9bms:hover{background-color:#f6f6f7;}</style><div class="css-1gg9bms"><style data-emotion-css="17iyluq">.css-17iyluq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#4284F5;width:100%;}.css-17iyluq:hover{color:#4284F5;cursor:pointer;-webkit-text-decoration:none;text-decoration:none;}</style><a class="css-17iyluq"><div class="css-2hhlpj"><div class="css-oe3dsw"><svg fill="#424D57" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><path d="M1.5,0.5 C0.675,0.5 0.0075,1.175 0.0075,2 L0,14 C0,14.825 0.6675,15.5 1.4925,15.5 L10.5,15.5 C11.325,15.5 12,14.825 12,14 L12,5 L7.5,0.5 L1.5,0.5 Z M6.75,5.75 L6.75,1.625 L10.875,5.75 L6.75,5.75 Z" fill-rule="nonzero" fill="currentColor"></path></svg></div>Sign in with LiveChat</div></a></div><div class="css-1psvkz3"><a class="css-19nl305"><div class="css-2hhlpj"><div class="css-oe3dsw"><svg fill="#424D57" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><path d="M1.5,0.5 C0.675,0.5 0.0075,1.175 0.0075,2 L0,14 C0,14.825 0.6675,15.5 1.4925,15.5 L10.5,15.5 C11.325,15.5 12,14.825 12,14 L12,5 L7.5,0.5 L1.5,0.5 Z M6.75,5.75 L6.75,1.625 L10.875,5.75 L6.75,5.75 Z" fill-rule="nonzero" fill="currentColor"></path></svg></div>Authorization in practice</div></a></div><div class="css-1psvkz3"><a class="css-19nl305"><div class="css-2hhlpj"><div class="css-oe3dsw"><svg fill="#424D57" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><path d="M1.5,0.5 C0.675,0.5 0.0075,1.175 0.0075,2 L0,14 C0,14.825 0.6675,15.5 1.4925,15.5 L10.5,15.5 C11.325,15.5 12,14.825 12,14 L12,5 L7.5,0.5 L1.5,0.5 Z M6.75,5.75 L6.75,1.625 L10.875,5.75 L6.75,5.75 Z" fill-rule="nonzero" fill="currentColor"></path></svg></div>Authorization FAQ</div></a></div><div class="css-1psvkz3"><a class="css-19nl305"><div class="css-2hhlpj"><div class="css-oe3dsw"><svg fill="#424D57" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><path d="M1.5,0.5 C0.675,0.5 0.0075,1.175 0.0075,2 L0,14 C0,14.825 0.6675,15.5 1.4925,15.5 L10.5,15.5 C11.325,15.5 12,14.825 12,14 L12,5 L7.5,0.5 L1.5,0.5 Z M6.75,5.75 L6.75,1.625 L10.875,5.75 L6.75,5.75 Z" fill-rule="nonzero" fill="currentColor"></path></svg></div>Global Accounts</div></a></div><div class="css-1psvkz3"><a class="css-19nl305"><div class="css-2hhlpj"><div class="css-oe3dsw"><svg fill="#424D57" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><path d="M1.5,0.5 C0.675,0.5 0.0075,1.175 0.0075,2 L0,14 C0,14.825 0.6675,15.5 1.4925,15.5 L10.5,15.5 C11.325,15.5 12,14.825 12,14 L12,5 L7.5,0.5 L1.5,0.5 Z M6.75,5.75 L6.75,1.625 L10.875,5.75 L6.75,5.75 Z" fill-rule="nonzero" fill="currentColor"></path></svg></div>Global Accounts API</div></a></div><div class="css-1psvkz3"><a class="css-19nl305"><div class="css-2hhlpj"><div class="css-oe3dsw"><svg fill="#424D57" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><path d="M1.5,0.5 C0.675,0.5 0.0075,1.175 0.0075,2 L0,14 C0,14.825 0.6675,15.5 1.4925,15.5 L10.5,15.5 C11.325,15.5 12,14.825 12,14 L12,5 L7.5,0.5 L1.5,0.5 Z M6.75,5.75 L6.75,1.625 L10.875,5.75 L6.75,5.75 Z" fill-rule="nonzero" fill="currentColor"></path></svg></div>Customer Accounts API</div></a></div></div></aside><style data-emotion-css="1g06r20">.css-1g06r20{padding-bottom:30vh;position:relative;width:100%;}@media (min-width:768px){.css-1g06r20{width:calc(100% - 258px);max-width:900px;}}</style><div class="css-1g06r20"><style data-emotion-css="c8i9h7">.css-c8i9h7{margin-top:120px;padding:0px 30px;}@media (min-width:768px){.css-c8i9h7{padding:0px 60px;}}.css-c8i9h7.redoc{margin-top:60px;display:block;}</style><article class=" css-c8i9h7"><style data-emotion-css="1lyzzun">.css-1lyzzun{margin:3em 0 1em;padding:2em 0 1em;}</style><div class="css-1lyzzun"><style data-emotion-css="12qxxrf">.css-12qxxrf{margin:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;font-weight:500;text-rendering:optimizeLegibility;font-size:2.25rem;line-height:1.1;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;}@media (min-width:768px){.css-12qxxrf{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}}</style><h2 id="sign-in-with-livechat" class="css-12qxxrf"><span>Sign in with LiveChat</span><style data-emotion-css="1g0dr3m">.css-1g0dr3m{margin-top:8px;}.css-1g0dr3m > label{margin:0 0 5px 0;}.css-1g0dr3m label + div{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}</style></h2></div><style data-emotion-css="1679d3t">.css-1679d3t{border-bottom:1px solid #e0e4e9;padding-bottom:0.5em;}</style><h2 class="heading css-1679d3t"><style data-emotion-css="180507a">.css-180507a{color:inherit;-webkit-text-decoration:none;text-decoration:none;position:relative;}.css-180507a:hover{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-180507a:hover:before{content:"#";position:absolute;font-weight:300;left:-1em;top:1px;opacity:0.3;}.css-180507a:focus-visible{outline-width:0px;}</style><a id="introduction" href="#introduction" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#introduction"><span class="icon icon-link"></span></a>Introduction</a></h2><p>The <strong>Sign in with LiveChat</strong> flow is the easiest way to get access to basic information in LiveChat and HelpDesk accounts. It allows you to quickly build an app that can access that info.</p><h3 class="heading"><a id="user-flow" href="#user-flow" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#user-flow"><span class="icon icon-link"></span></a>User flow</a></h3><p>Users start the flow by clicking the <strong>Sign in with LiveChat</strong> button:</p><div style="max-width:200px"><style data-emotion-css="v3memn">.css-v3memn{display:block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin-top:0;margin-left:0;margin-right:0;margin-bottom:10px;}</style><div class="css-v3memn"><style data-emotion-css="1dm3bs3">.css-1dm3bs3{box-sizing:border-box;display:block;max-width:100%;padding-top:calc(110 / 270 * 100%);}</style><div class="css-1dm3bs3"><style data-emotion-css="5r33xa">.css-5r33xa{position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;}</style><img alt="Log in to LiveChat view" src="/docs/images/authorization/signin-with-livechat-button.png" decoding="async" class="css-5r33xa"/></div></div></div><p>If a user is not signed in to LiveChat, they'll be asked to do that:</p><div style="max-width:550px"><div class="css-v3memn"><style data-emotion-css="uf8i7j">.css-uf8i7j{box-sizing:border-box;display:block;max-width:100%;padding-top:calc(612 / 550 * 100%);}</style><div class="css-uf8i7j"><img alt="Log in to LiveChat view" src="/docs/images/authorization/log-in-livechat.png" decoding="async" class="css-5r33xa"/></div></div></div><p>Then, the user must give the app access to the specified parts of their LiveChat account:</p><div style="max-width:700px"><div class="css-v3memn"><style data-emotion-css="1kv5x8s">.css-1kv5x8s{box-sizing:border-box;display:block;max-width:100%;padding-top:calc(612 / 700 * 100%);}</style><div class="css-1kv5x8s"><img alt="Grant access to LiveChat app" src="/docs/images/authorization/grant-access-livechat.png" decoding="async" class="css-5r33xa"/></div></div></div><p>Finally, the app receives an <code>access_token</code> that allows it to perform different API calls, limited to what the user agreed to in the prompt.</p><p>For example, you can display the LiveChat tracking code which already includes the user's account license number:</p><style data-emotion-css="16prjg8">.css-16prjg8{border:1px solid #e8e8e8;border-radius:6px;background-color:#505671;color:white;margin:0 0 20px;max-width:100%;--code-color:#f5fbff;--code-background:#505671;--code-string-color:#56d4bc;}</style><div class="css-16prjg8"><style data-emotion-css="13hnul0">.css-13hnul0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:5px 15px;background-color:#383f54;border-radius:8px 8px 0 0;color:#dee5e8;}.css-13hnul0 code{font-size:12px;max-width:100%;-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2;word-break:break-all;}.css-13hnul0 .code-sample-header{border:none;background-color:#383f54;color:#dee5e8;padding:0.2em 0;}</style><div class="css-13hnul0"><code class="code-sample-header">TRACKING CODE</code><style data-emotion-css="1sg2lsz">.css-1sg2lsz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1sg2lsz"><style data-emotion-css="1wp1vo7">.css-1wp1vo7{position:relative;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;width:45px;}</style><div class="css-1wp1vo7"><style data-emotion-css="xnt8k0">.css-xnt8k0{position:relative;min-height:18px;}</style><div class="css-xnt8k0"><style data-emotion-css="6oazep">.css-6oazep{position:absolute;top:0;left:0;right:0;text-align:right;text-transform:capitalize;line-height:20px;font-size:13px;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;opacity:0;-webkit-transition-delay:0.25s;transition-delay:0.25s;-webkit-transition:none;transition:none;}</style><div class="css-6oazep"><style data-emotion-css="11ycufd">.css-11ycufd{-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2;max-width:100%;overflow-x:auto;}</style><div class="css-11ycufd">Copied!</div></div><style data-emotion-css="139ndot">.css-139ndot{position:absolute;top:0;right:0;text-align:right;max-width:24px;opacity:1;-webkit-transition-delay:0.25;transition-delay:0.25;-webkit-transition:opacity 0.25s ease-in-out;transition:opacity 0.25s ease-in-out;}.css-139ndot:hover{cursor:pointer;}</style><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><style data-emotion-css="ju12u0">.css-ju12u0{min-height:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;max-width:100%;overflow:scroll;}.css-ju12u0 code{display:inline-block;}</style><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token maybe-class-name">Start</span> <span class="token keyword">of</span> <span class="token function"><span class="token maybe-class-name">LiveChat</span></span> <span class="token punctuation">(</span>www<span class="token punctuation">.</span><span class="token property-access">livechat</span><span class="token punctuation">.</span><span class="token property-access">com</span><span class="token punctuation">)</span> code <span class="token operator">--</span><span class="token operator">></span> <span class="token operator"><</span>script<span class="token operator">></span> <span class="token dom variable">window</span><span class="token punctuation">.</span><span class="token property-access">__lc</span> <span class="token operator">=</span> <span class="token dom variable">window</span><span class="token punctuation">.</span><span class="token property-access">__lc</span> <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token dom variable">window</span><span class="token punctuation">.</span><span class="token property-access">__lc</span><span class="token punctuation">.</span><span class="token property-access">license</span> <span class="token operator">=</span> <span class="token number">11069052</span><span class="token punctuation">;</span> <span class="token punctuation">;</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">n<span class="token punctuation">,</span>t<span class="token punctuation">,</span>c</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token keyword">function</span> <span class="token function">i</span><span class="token punctuation">(</span><span class="token parameter">n</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token keyword control-flow">return</span> e<span class="token punctuation">.</span><span class="token property-access">_h</span><span class="token operator">?</span>e<span class="token punctuation">.</span><span class="token method function property-access">_h</span><span class="token punctuation">.</span><span class="token method function property-access">apply</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">,</span>n<span class="token punctuation">)</span><span class="token operator">:</span>e<span class="token punctuation">.</span><span class="token property-access">_q</span><span class="token punctuation">.</span><span class="token method function property-access">push</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token keyword">var</span> e<span class="token operator">=</span><span class="token punctuation">{</span><span class="token literal-property property">_q</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token literal-property property">_h</span><span class="token operator">:</span><span class="token keyword null nil">null</span><span class="token punctuation">,</span><span class="token literal-property property">_v</span><span class="token operator">:</span><span class="token string">"2.0"</span><span class="token punctuation">,</span><span class="token function-variable function">on</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token function">i</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"on"</span><span class="token punctuation">,</span>c<span class="token punctuation">.</span><span class="token method function property-access">call</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token function-variable function">once</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token function">i</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"once"</span><span class="token punctuation">,</span>c<span class="token punctuation">.</span><span class="token method function property-access">call</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token function-variable function">off</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token function">i</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"off"</span><span class="token punctuation">,</span>c<span class="token punctuation">.</span><span class="token method function property-access">call</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token function-variable function">get</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token keyword control-flow">if</span><span class="token punctuation">(</span><span class="token operator">!</span>e<span class="token punctuation">.</span><span class="token property-access">_h</span><span class="token punctuation">)</span><span class="token keyword control-flow">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">"[LiveChatWidget] You can't use getters before load."</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword control-flow">return</span> <span class="token function">i</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"get"</span><span class="token punctuation">,</span>c<span class="token punctuation">.</span><span class="token method function property-access">call</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token function-variable function">call</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token function">i</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"call"</span><span class="token punctuation">,</span>c<span class="token punctuation">.</span><span class="token method function property-access">call</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token function-variable function">init</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token keyword">var</span> n<span class="token operator">=</span>t<span class="token punctuation">.</span><span class="token method function property-access">createElement</span><span class="token punctuation">(</span><span class="token string">"script"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>n<span class="token punctuation">.</span><span class="token property-access">async</span><span class="token operator">=</span><span class="token operator">!</span><span class="token number">0</span><span class="token punctuation">,</span>n<span class="token punctuation">.</span><span class="token property-access">type</span><span class="token operator">=</span><span class="token string">"text/javascript"</span><span class="token punctuation">,</span>n<span class="token punctuation">.</span><span class="token property-access">src</span><span class="token operator">=</span><span class="token string">"https://cdn.livechatinc.com/tracking.js"</span><span class="token punctuation">,</span>t<span class="token punctuation">.</span><span class="token property-access">head</span><span class="token punctuation">.</span><span class="token method function property-access">appendChild</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token operator">!</span>n<span class="token punctuation">.</span><span class="token property-access">__lc</span><span class="token punctuation">.</span><span class="token property-access">asyncInit</span><span class="token operator">&&</span>e<span class="token punctuation">.</span><span class="token method function property-access">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>n<span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">LiveChatWidget</span></span><span class="token operator">=</span>n<span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">LiveChatWidget</span></span><span class="token operator">||</span>e<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token dom variable">window</span><span class="token punctuation">,</span><span class="token dom variable">document</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token property-access">slice</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span>noscript<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://www.livechat.com/chat-with/11069052/"</span> rel<span class="token operator">=</span><span class="token string">"nofollow"</span><span class="token operator">></span><span class="token maybe-class-name">Chat</span> <span class="token keyword">with</span> us<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token punctuation">,</span> powered by <span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://www.livechat.com/?welcome"</span> rel<span class="token operator">=</span><span class="token string">"noopener nofollow"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span><span class="token maybe-class-name">LiveChat</span><span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>noscript<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token maybe-class-name">End</span> <span class="token keyword">of</span> <span class="token maybe-class-name">LiveChat</span> code <span class="token operator">--</span><span class="token operator">></span> </code></pre></div></div></div><h3 class="heading"><a id="use-cases" href="#use-cases" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#use-cases"><span class="icon icon-link"></span></a>Use cases</a></h3><p>With the <strong>Sign in with LiveChat</strong> flow, you can easily build an app that:</p><ul><li>Gets access to the LiveChat user's email, account ID, or organization ID.</li><li>Receives an <code>access_token</code> that can be used to perform LiveChat or HelpDesk API calls.</li><li>Receives a <code>code</code> using the PKCE extension, which could be then used to obtain the account's <code>refresh_token</code> and <code>access_token</code>.</li></ul><style data-emotion-css="1qhzmwg">.css-1qhzmwg{border:1px solid #ffbb00;border-radius:6px;padding:1.5em 1.5em 0;margin-bottom:1.5em;background-color:#ffd000;}</style><div class="css-1qhzmwg"><p>Make sure you test your integration on <a rel="noopener nofollow" target="_blank" href="https://www.livechat.com/help/stay-mobile-with-livechat/">the LiveChat mobile app</a>, which requires Accounts SDK v2.0.1 or higher. Consider migrating if you use an older version of the SDK.</p></div><h2 class="heading css-1679d3t"><a id="setup" href="#setup" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#setup"><span class="icon icon-link"></span></a>Setup</a></h2><h3 class="heading"><a id="step-1-create-a-new-app" href="#step-1-create-a-new-app" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#step-1-create-a-new-app"><span class="icon icon-link"></span></a>Step 1: Create a new app</a></h3><p>Create a new <strong>LiveChat OAuth 2.1 Client</strong> app in <a rel="noopener nofollow" target="_blank" href="https://platform.text.com/console/">Developer Console</a>. You will receive a new <code>client_id</code> that can be used in the next steps.</p><p>Please note that <strong>Redirect URI</strong> field must match the URL of the website that has the <strong>Sign in with LiveChat</strong> button installed. The button will not work with any other URL addresses.</p><h3 class="heading"><a id="step-2-include-the-sdk-library" href="#step-2-include-the-sdk-library" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#step-2-include-the-sdk-library"><span class="icon icon-link"></span></a>Step 2: Include the SDK library</a></h3><p>You can install the SDK from NPM.</p><h4 class="heading"><a id="npm-module" href="#npm-module" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#npm-module"><span class="icon icon-link"></span></a>NPM module</a></h4><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">NPM module installation</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> --save @livechat/accounts-sdk@^2.0.0 </code></pre></div></div></div><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">NPM module import</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">AccountsSDK</span></span> <span class="token keyword module">from</span> <span class="token string">'@livechat/accounts-sdk'</span><span class="token punctuation">;</span> </code></pre></div></div></div><p>If you build an app using Webpack, you can just import the <code>AccountsSDK</code> module from NPM.</p><h3 class="heading"><a id="step-3-prepare-button-container" href="#step-3-prepare-button-container" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#step-3-prepare-button-container"><span class="icon icon-link"></span></a>Step 3: Prepare button container</a></h3><p>Prepare the login button, which will invoke the authorization flow when a user clicks it.</p><div class="remark-highlight"><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>login-button<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>.../livechat_sign_in.png<span class="token punctuation">)</span></span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre></div><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">Prepare the button container</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token comment">// javascript</span> <span class="token keyword">const</span> instance <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">AccountsSDK</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">client_id</span><span class="token operator">:</span> <span class="token string">'<your_app_client_id>'</span><span class="token punctuation">,</span> <span class="token literal-property property">redirect_uri</span><span class="token operator">:</span> <span class="token string">'<your_app_redirect_uri>'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">getElementById</span><span class="token punctuation">(</span><span class="token string">'login-button'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">onclick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>e <span class="token operator">&&</span> e<span class="token punctuation">.</span><span class="token property-access">preventDefault</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> e<span class="token punctuation">.</span><span class="token method function property-access">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> instance<span class="token punctuation">.</span><span class="token method function property-access">popup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">authorize</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">authorizeData</span><span class="token punctuation">)</span><span class="token arrow operator">=></span><span class="token punctuation">{</span> <span class="token keyword">const</span> transaction <span class="token operator">=</span> instance<span class="token punctuation">.</span><span class="token method function property-access">verify</span><span class="token punctuation">(</span>authorizeData<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>transaction <span class="token operator">!=</span> <span class="token keyword null nil">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// authorization success</span> <span class="token comment">// authorizeData contains `accessToken` or `code`</span> <span class="token comment">// transaction contains state and optional code_verifier (code + PKCE)</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">"User access token: "</span> <span class="token operator">+</span> transaction<span class="token punctuation">.</span><span class="token property-access">accessToken</span><span class="token punctuation">)</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">getElementById</span><span class="token punctuation">(</span><span class="token string">'login-button'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token property-access">style</span><span class="token punctuation">.</span><span class="token property-access">display</span> <span class="token operator">=</span> <span class="token string">"none"</span> <span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">"Redirect state doesn't match the previous one"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span><span class="token arrow operator">=></span><span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span><span class="token string">"Failed to authorize user"</span><span class="token punctuation">,</span> e<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre></div></div></div><p>During the creation of the Sign in LiveChat button, you can use <a href="https://livechat.design/">LiveChat Designs</a>.</p><div class="css-1qhzmwg"><p><a href="/docs/monetization/app-review-process#common-problems"><strong>Don't forget to test the give consent step</strong></a>. Use <code>prompt: "consent"</code> to force the app to <strong>ask you for access</strong> to certain resources. It’s necessary for you to test the app as if you were a user who installs the app from Marketplace.</p></div><h2 class="heading css-1679d3t"><a id="accounts-sdk" href="#accounts-sdk" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#accounts-sdk"><span class="icon icon-link"></span></a>Accounts SDK</a></h2><h3 class="heading"><a id="classes" href="#classes" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#classes"><span class="icon icon-link"></span></a>Classes</a></h3><ul><li><a href="/docs/authorization/sign-in-with-livechat#accountssdk">AccountsSDK</a></li><li><a href="/docs/authorization/sign-in-with-livechat#popup-1">Popup</a></li><li><a href="/docs/authorization/sign-in-with-livechat#redirect-1">Redirect</a></li></ul><h3 class="heading"><a id="accountssdk" href="#accountssdk" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#accountssdk"><span class="icon icon-link"></span></a>AccountsSDK</a></h3><p>The main instance of the SDK used to authorize users in LiveChat Accounts.</p><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">Example class creation</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> instance <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">AccountsSDK</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">client_id</span><span class="token operator">:</span> <span class="token string">'<your_app_client_id>'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div><p>The constructor accepts an <code>options</code> object with the following properties:</p><style data-emotion-css="q76ucn">.css-q76ucn{width:100%;overflow-x:auto;}</style><div class="css-q76ucn"><table><thead><tr><th>Property</th><th>Required</th><th>Data type</th><th>Description</th></tr></thead><tbody><tr><td><code>client_id</code></td><td>yes</td><td><code>string</code></td><td>Application <strong>Client Id</strong> (can be found in <a rel="noopener nofollow" target="_blank" href="https://platform.text.com/console/">Developer Console</a>)</td></tr><tr><td><code>prompt</code></td><td>no</td><td><code>string</code></td><td>Use <code>consent</code> to force the consent prompt in a popup and the redirect flows. (<a href="/docs/authorization/sign-in-with-livechat#step-3-prepare-button-container">See the warning.</a>). Default: <code>''</code></td></tr><tr><td><code>response_type</code></td><td>no</td><td><code>string</code></td><td>OAuth response type. Possible values: <code>token</code> or <code>code</code>. Default: <code>token</code></td></tr><tr><td><code>popup_flow</code></td><td>no</td><td><code>string</code></td><td><code>auto</code> – close the popup automatically if the user is already logged in; <code>manual</code> - always show the popup that requires the user to provide their credentials; default: <code>auto</code></td></tr><tr><td><code>state</code></td><td>no</td><td><code>string</code></td><td>OAuth state parameter. Use it for better security.</td></tr><tr><td><code>verify_state</code></td><td>no</td><td><code>bool</code></td><td>Check if <code>state</code> matches after the redirect; default: <code>true</code></td></tr><tr><td><code>scope</code></td><td>no</td><td><code>string</code></td><td>The scopes your application will request from the user; if not provided, then all application scopes will be requested. It must be configured for a given <code>client id</code>, a comma-separated string, default: <code>null</code></td></tr><tr><td><code>redirect_uri</code></td><td>yes</td><td><code>string</code></td><td>OAuth redirect URI; default: the current location</td></tr><tr><td><code>email_hint</code></td><td>no</td><td><code>bool</code></td><td>Fill in email in forms</td></tr><tr><td><code>server_url</code></td><td>no</td><td><code>string</code></td><td>Authorization server URL</td></tr><tr><td><code>tracking</code></td><td>no</td><td><code>object</code></td><td>Object with tracking query string params</td></tr><tr><td><code>transaction</code><sup><strong>1</strong></sup></td><td>no</td><td><code>object</code></td><td>An object with options for the transaction manager</td></tr><tr><td><code>pkce</code><sup><strong>2</strong></sup></td><td>no</td><td><code>object</code></td><td>An object with the PKCE configuration</td></tr></tbody></table></div><p><strong>1)</strong> The <code>transaction</code> object consists of the following parameters:</p><div class="css-q76ucn"><table><thead><tr><th>Property</th><th>Required</th><th>Data type</th><th>Description</th></tr></thead><tbody><tr><td><code>namespace</code></td><td>no</td><td><code>string</code></td><td>Transaction key prefix; default: <code>'com.livechat.accounts'</code></td></tr><tr><td><code>key_length</code></td><td>no</td><td><code>string</code></td><td>Transaction random state length; default: <code>32</code></td></tr><tr><td><code>force_local_storage</code></td><td>no</td><td><code>bool</code></td><td>Try to use localStorage instead of cookies; default: <code>false</code></td></tr></tbody></table></div><p>💡 You need to use the PKCE extension if your JavaScript application will try to acquire the authorization <code>code</code> in order to exchange it for tokens.</p><p><strong>2)</strong> In the <code>pkce</code> object, define the following configuration properties:</p><div class="css-q76ucn"><table><thead><tr><th>Property</th><th>Required</th><th>Data type</th><th>Description</th></tr></thead><tbody><tr><td><code>enabled</code></td><td>yes</td><td><code>bool</code></td><td>Enable OAuth 2.1 PKCE extension; default: <code>true</code></td></tr><tr><td><code>code_verifier</code></td><td>no</td><td><code>string</code></td><td>Override the auto-generated code verifier.</td></tr><tr><td><code>code_verifier_length</code></td><td>no</td><td><code>integer</code></td><td>Define the length of the code verifier. It should be between 43 and 128 characters; default: <code>128</code>. <a target="_blank" rel="noopener noreferrer" href=" https://tools.ietf.org/html/rfc7636#section-4.1">Read more...</a></td></tr><tr><td><code>code_challange_method</code></td><td>no</td><td><code>string</code></td><td>Define the code challenge method. Possible values: <code>S256</code> or <code>plain</code>; default: <code>S256</code></td></tr></tbody></table></div><p><strong>Available class methods:</strong></p><ul><li><a href="/docs/authorization/sign-in-with-livechat#popup">popup</a></li><li><a href="/docs/authorization/sign-in-with-livechat#redirect">redirect</a></li><li><a href="/docs/authorization/sign-in-with-livechat#authorizeurl">authorizeURL</a></li><li><a href="/docs/authorization/sign-in-with-livechat#verify">verify</a></li></ul><h4 class="heading"><a id="popup" href="#popup" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#popup"><span class="icon icon-link"></span></a>popup</a></h4><p>Returns a <code>Popup</code> object instance built on top of <code>sdk</code>.</p><div class="css-q76ucn"><table><thead><tr><th>Parameter</th><th>Data type</th><th>Description</th></tr></thead><tbody><tr><td><code>options</code></td><td><code>object</code></td><td>An object with the same parameters as provided in <code>AccountsSDK</code></td></tr></tbody></table></div><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">popup(options={})</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js"> <span class="token keyword">const</span> popup <span class="token operator">=</span> instance<span class="token punctuation">.</span><span class="token method function property-access">popup</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">client_id</span><span class="token operator">:</span> <span class="token string">'<your_app_client_id>'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div><h4 class="heading"><a id="redirect" href="#redirect" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#redirect"><span class="icon icon-link"></span></a>redirect</a></h4><p>Returns a <code>Redirect</code> object instance built on top of <code>sdk</code>.</p><div class="css-q76ucn"><table><thead><tr><th>Parameter</th><th>Data type</th><th>Description</th></tr></thead><tbody><tr><td><code>options</code></td><td><code>object</code></td><td>An object with the same parameters as provided in <code>AccountsSDK</code></td></tr></tbody></table></div><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">redirect(options={})</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js"> <span class="token keyword">const</span> redirect <span class="token operator">=</span> instance<span class="token punctuation">.</span><span class="token method function property-access">redirect</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">client_id</span><span class="token operator">:</span> <span class="token string">'<your_app_client_id>'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div><h4 class="heading"><a id="authorizeurl" href="#authorizeurl" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#authorizeurl"><span class="icon icon-link"></span></a>authorizeURL</a></h4><p>Creates an authorization URL for the given flow and parameters.</p><div class="css-q76ucn"><table><thead><tr><th>Parameter</th><th>Data type</th><th>Description</th></tr></thead><tbody><tr><td><code>options</code></td><td><code>object</code></td><td>An object with the same parameters as provided in <code>AccountsSDK</code></td></tr><tr><td><code>flow</code></td><td><code>string</code></td><td><code>code</code> or <code>token</code>. <code>code</code> can only be used with the <code>PKCE</code> flow</td></tr></tbody></table></div><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">authorizeURL(options={},flow)</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js"> <span class="token keyword">const</span> authURL <span class="token operator">=</span> instance<span class="token punctuation">.</span><span class="token method function property-access">authorizeURL</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">client_id</span><span class="token operator">:</span> <span class="token string">'<your_app_client_id>'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">"token"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div><h4 class="heading"><a id="verify" href="#verify" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#verify"><span class="icon icon-link"></span></a>verify</a></h4><p>Verifies if the <code>state</code> parameter from the redirect matched the one provided upon initialization, If it does, the method returns <code>Transaction</code>, which is used under the hood for <code>state</code> verification. Otherwise, it returns <code>null</code>.</p><p>In all methods of the <code>AccountsSDK</code> object, the <code>options</code> objects is used to overwrite the data provided upon initialization.</p><div class="css-q76ucn"><table><thead><tr><th>Parameter</th><th>Data type</th><th>Description</th></tr></thead><tbody><tr><td><code>authorizeData</code></td><td><code>object</code></td><td>Data returned from the redirect</td></tr></tbody></table></div><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">verify(authorizeData)</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js"> <span class="token keyword">const</span> transactionData <span class="token operator">=</span> instance<span class="token punctuation">.</span><span class="token method function property-access">verify</span><span class="token punctuation">(</span>authorizeData<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>transactionData<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">"Verified correctly"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">"Url/state mismatch"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre></div></div></div><h3 class="heading"><a id="popup-1" href="#popup-1" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#popup-1"><span class="icon icon-link"></span></a>Popup</a></h3><p>A class responsible for acquiring the user authorization data through a popup window.</p><div class="css-q76ucn"><table><thead><tr><th>Parameter</th><th>Data type</th><th>Description</th></tr></thead><tbody><tr><td><code>options</code></td><td><code>object</code></td><td>An object with the same parameters as provided in <code>AccountsSDK</code></td></tr><tr><td><code>sdk</code></td><td><code>object</code></td><td>An <code>sdk</code> instance</td></tr></tbody></table></div><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">constructor(sdk, options)</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> instance <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">AccountsSDK</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">client_id</span><span class="token operator">:</span> <span class="token string">'<your_app_client_id>'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> popup <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Popup</span><span class="token punctuation">(</span>instance<span class="token punctuation">,</span> instance<span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div><p>A popup object instance could be also created via <code>sdk</code> with:</p><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> popup <span class="token operator">=</span> instance<span class="token punctuation">.</span><span class="token method function property-access">popup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><p> <strong>Available class methods:</strong></p><ul><li><a href="/docs/authorization/sign-in-with-livechat#authorize">authorize</a></li></ul><h4 class="heading"><a id="authorize" href="#authorize" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#authorize"><span class="icon icon-link"></span></a>authorize</a></h4><p>Returns a promise that resolves with the user authorization data or an error.</p><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">authorize()</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js"> popup<span class="token punctuation">.</span><span class="token method function property-access">authorize</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">authorizeData</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">"authorize data acquired: "</span> <span class="token operator">+</span> authorizeData<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span><span class="token string">"Failed to acquire authorization data: "</span> <span class="token operator">+</span> e<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div><h4 class="heading"><a id="sample-app-with-the-popup-flow" href="#sample-app-with-the-popup-flow" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#sample-app-with-the-popup-flow"><span class="icon icon-link"></span></a>Sample app with the popup flow</a></h4><p>The <a target="_blank" href="https://github.com/livechat/sample-app-popup-auth">Sample app with the popup flow</a> has a fully implemented authorization flow. You can test it, experiment with it, or modify its code and extend its functionality.</p><h3 class="heading"><a id="redirect-1" href="#redirect-1" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#redirect-1"><span class="icon icon-link"></span></a>Redirect</a></h3><p>A class responsible for acquiring the user authorization data through the <code>redirect</code> method.</p><div class="css-q76ucn"><table><thead><tr><th>Parameter</th><th>Data type</th><th>Description</th></tr></thead><tbody><tr><td><code>options</code></td><td><code>object</code></td><td>An object with the same parameters as provided in <code>AccountsSDK</code></td></tr><tr><td><code>sdk</code></td><td><code>object</code></td><td>An <code>sdk</code> instance</td></tr></tbody></table></div><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">constructor(sdk, options)</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> instance <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">AccountsSDK</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">client_id</span><span class="token operator">:</span> <span class="token string">'<your_app_client_id>'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> redirect <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Redirect</span><span class="token punctuation">(</span>instance<span class="token punctuation">,</span> instance<span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div><div class="css-11ycufd"><p>A redirect object instance could be also created via <code>sdk</code> with:</p></div><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">redirect()</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> redirect <span class="token operator">=</span> instance<span class="token punctuation">.</span><span class="token method function property-access">redirect</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div><p> <strong>Available class methods:</strong></p><ul><li><a href="/docs/authorization/sign-in-with-livechat#authorize-1">authorize</a></li><li><a href="/docs/authorization/sign-in-with-livechat#authorizedata">authorizeData</a></li></ul><h4 class="heading"><a id="authorize-1" href="#authorize-1" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#authorize-1"><span class="icon icon-link"></span></a>authorize</a></h4><p>Starts the redirect authorization flow.</p><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">authorize()</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js"> redirect<span class="token punctuation">.</span><span class="token method function property-access">authorize</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div><h4 class="heading"><a id="authorizedata" href="#authorizedata" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#authorizedata"><span class="icon icon-link"></span></a>authorizeData</a></h4><p>Checks if a user was redirected to the current origin with the authorization data. It returns a promise that resolves with the user authorization data or with an error.</p><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">authorizeData()</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js"> redirect<span class="token punctuation">.</span><span class="token method function property-access">authorizeData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">authorizeData</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">"Authorization data acquired: "</span> <span class="token operator">+</span> authorizeData<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span><span class="token string">"Failed to acquire authorization data: "</span> <span class="token operator">+</span> e<span class="token punctuation">)</span><span class="token punctuation">;</span> redirect<span class="token punctuation">.</span><span class="token method function property-access">authorize</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Try to redirect user to authorization once more</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div><h4 class="heading"><a id="sample-app-with-the-redirect-flow" href="#sample-app-with-the-redirect-flow" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#sample-app-with-the-redirect-flow"><span class="icon icon-link"></span></a>Sample app with the redirect flow</a></h4><p>The <a target="_blank" href="https://github.com/livechat/sample-app-redirect-auth">Sample app with the redirect flow</a> has a fully implemented authorization flow. You can test it, experiment with it, or modify its code and extend its functionality.</p><h3 class="heading"><a id="exchanging-code-for-tokens-with-the-pkce-extension" href="#exchanging-code-for-tokens-with-the-pkce-extension" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#exchanging-code-for-tokens-with-the-pkce-extension"><span class="icon icon-link"></span></a>Exchanging code for tokens with the PKCE extension</a></h3><p>In order to acquire both <code>access_token</code> and <code>refresh_token</code> by a frontend application, you should use the <a rel="noopener nofollow" target="_blank" href="https://www.oauth.com/oauth2-servers/oauth-native-apps/pkce/">PKCE Extension</a>, which prevents the usage of a hijacked redirect by malicious apps.</p><ol><li>Start by enabling PKCE. To do so, provide <code>AccountsSDK</code> instance with PKCE options.</li></ol><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">Enable PKCE</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js"> <span class="token keyword">const</span> instance <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">AccountsSDK</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">client_id</span><span class="token operator">:</span> <span class="token string">'<your_app_client_id>'</span><span class="token punctuation">,</span> <span class="token literal-property property">redirect_uri</span><span class="token operator">:</span> <span class="token string">'<your_app_redirect_uri>'</span><span class="token punctuation">,</span> <span class="token literal-property property">response_type</span><span class="token operator">:</span> <span class="token string">"code"</span><span class="token punctuation">,</span> <span class="token literal-property property">pkce</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">enabled</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div><ol start="2"><li>Then, using the <code>redirect</code> flow, you're able to receive the <code>code</code> authorization data:</li></ol><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">Receive authorization code data</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js"> instance<span class="token punctuation">.</span><span class="token method function property-access">redirect</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">authorizeData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">authorizeData</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> transactionData <span class="token operator">=</span> instance<span class="token punctuation">.</span><span class="token method function property-access">verify</span><span class="token punctuation">(</span>authorizeData<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>transactionData <span class="token operator">===</span> <span class="token keyword null nil">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">"Failed to verify authorization data"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword control-flow">return</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">fetch</span><span class="token punctuation">(</span>instance<span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">.</span><span class="token property-access">server_url</span> <span class="token operator">+</span> <span class="token string">"/v2/token"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">headers</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string-property property">'Accept'</span><span class="token operator">:</span> <span class="token string">'application/json'</span><span class="token punctuation">,</span> <span class="token string-property property">'Content-Type'</span><span class="token operator">:</span> <span class="token string">'application/json'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">"POST"</span><span class="token punctuation">,</span> <span class="token literal-property property">body</span><span class="token operator">:</span> <span class="token known-class-name class-name">JSON</span><span class="token punctuation">.</span><span class="token method function property-access">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">grant_type</span><span class="token operator">:</span> <span class="token string">"authorization_code"</span><span class="token punctuation">,</span> <span class="token literal-property property">code</span><span class="token operator">:</span> authorizeData<span class="token punctuation">.</span><span class="token property-access">code</span><span class="token punctuation">,</span> <span class="token literal-property property">client_id</span><span class="token operator">:</span> transactionData<span class="token punctuation">.</span><span class="token property-access">client_id</span><span class="token punctuation">,</span> <span class="token literal-property property">redirect_uri</span><span class="token operator">:</span> transactionData<span class="token punctuation">.</span><span class="token property-access">redirect_uri</span><span class="token punctuation">,</span> <span class="token literal-property property">code_verifier</span><span class="token operator">:</span> transactionData<span class="token punctuation">.</span><span class="token property-access">code_verifier</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> res<span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">"User tokens: "</span> <span class="token operator">+</span> data<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">"Failed to exchange code: "</span> <span class="token operator">+</span> e<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// As we don't have any authorization data, then we can try o authorize user</span> <span class="token keyword">const</span> wasRedirected <span class="token operator">=</span> <span class="token dom variable">sessionStorage</span><span class="token punctuation">.</span><span class="token method function property-access">getItem</span><span class="token punctuation">(</span><span class="token string">'lc_accounts'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>wasRedirected <span class="token operator">===</span> <span class="token string">"yes"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span><span class="token string">"Couldn't authorize user: "</span> <span class="token operator">+</span> e<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword control-flow">return</span> <span class="token punctuation">}</span> <span class="token dom variable">sessionStorage</span><span class="token punctuation">.</span><span class="token method function property-access">setItem</span><span class="token punctuation">(</span><span class="token string">'lc_accounts'</span><span class="token punctuation">,</span> yes<span class="token punctuation">)</span><span class="token punctuation">;</span> instance<span class="token punctuation">.</span><span class="token method function property-access">redirect</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">authorize</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Initiate authorization redirect flow</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div></div></div><h3 class="heading"><a id="response-format" href="#response-format" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#response-format"><span class="icon icon-link"></span></a>Response format</a></h3><p>All <code>authorize</code> methods return the user authorization data when resolving with success, or return an error when something goes wrong.</p><h4 class="heading"><a id="success" href="#success" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#success"><span class="icon icon-link"></span></a>Success</a></h4><p>For successful user authorization processes, the returned data will consists of the following elements:</p><div class="css-q76ucn"><table><thead><tr><th>Field</th><th>Returned</th><th>Description</th></tr></thead><tbody><tr><td><code>access_token</code></td><td>only for <code>response_type: token</code></td><td>Used for authorizing LiveChat API calls.</td></tr><tr><td><code>code</code></td><td>only for <code>response_type: code</code></td><td>Must be exchanged for <code>access_token</code> and <code>refresh_token</code></td></tr><tr><td><code>scope</code></td><td>for both response types</td><td>An array of scopes that <code>access_token</code> has.</td></tr><tr><td><code>expires_in</code></td><td>for both response types</td><td>Defines for how long <code>access_token</code> will be valid.</td></tr><tr><td><code>account_id</code></td><td>only for <code>response_type: code</code></td><td>LiveChat Accounts user ID (can be found in <a rel="noopener nofollow" target="_blank" href="https://platform.text.com/console/">Developer Console</a>)</td></tr><tr><td><code>organization_id</code></td><td>only for <code>response_type: code</code></td><td>LiveChat Accounts organization ID to which the account is logged in.</td></tr><tr><td><code>client_id</code></td><td>only for <code>response_type: code</code></td><td><code>client_id</code> that you passed in the <code>init</code> method.</td></tr></tbody></table></div><p>💡 You can validate an access token by calling <code>/v2/info</code>. <a href="/docs/authorization/authorizing-api-calls#validating-the-access-token">Read more...</a></p><h4 class="heading"><a id="error" href="#error" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#error"><span class="icon icon-link"></span></a>Error</a></h4><p>If the authorization process fails, the promise will be rejected with an error. The error will have the following properties:</p><div class="remark-highlight"><pre class="language-js"><code class="language-js"> <span class="token punctuation">{</span> <span class="token string-property property">"oauth_exception"</span><span class="token operator">:</span> <span class="token string">"<exception_name>"</span> <span class="token string-property property">"identity_exception"</span><span class="token operator">:</span> <span class="token string">"<exception_name>"</span> <span class="token string-property property">"description"</span><span class="token operator">:</span> <span class="token string">"<exception_description>"</span> <span class="token punctuation">}</span> </code></pre></div><h5 class="heading"><a id="authentication-errors" href="#authentication-errors" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#authentication-errors"><span class="icon icon-link"></span></a>Authentication errors</a></h5><h6 class="heading"><a id="identity_exception" href="#identity_exception" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#identity_exception"><span class="icon icon-link"></span></a>identity_exception</a></h6><p>Possible values:</p><ul><li><code>unauthorized</code> – The resource owner identity is unknown or the consent is missing.</li></ul><h5 class="heading"><a id="authorization-errors" href="#authorization-errors" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#authorization-errors"><span class="icon icon-link"></span></a>Authorization errors</a></h5><h6 class="heading"><a id="oauth_exception" href="#oauth_exception" class="reference css-180507a"><a href="/docs/authorization/sign-in-with-livechat#oauth_exception"><span class="icon icon-link"></span></a>oauth_exception</a></h6><p>Possible values:</p><ul><li><code>invalid_request</code> – The request is missing a required parameter, includes an invalid parameter value, includes a parameter more than once, or is otherwise malformed. Examples: wrong HTTP method, invalid HTTP body encoding.</li><li><code>unauthorized_client</code> – The client is not authorized to request a token using this method. Examples: missing <code>client_id</code> param, incorrect <code>client_id</code> value, <code>refresh_token</code> not found, invalid <code>client_secret</code>, invalid <code>redirect_uri</code>.</li><li><code>access_denied</code> – The resource owner or authorization server denied the request. For example, the requested scope includes a scope not originally granted by the resource owner.</li><li><code>unsupported_response_type</code> – The authorization server doesn't support acquiring a token using this method. For example, <code>response_type</code> is not <code>token</code> or <code>code</code>.</li></ul><style data-emotion-css="1fsewzh">.css-1fsewzh{margin-top:50px;}.css-1fsewzh > label{margin:0 0 5px 0;}.css-1fsewzh label + div{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}</style></article></div><p>...</p></div><style data-emotion-css="1mpu5jj">.css-1mpu5jj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:space-evenly;-webkit-justify-content:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;background-color:#f6f6f7;color:#424d57;min-height:248px;margin-bottom:45px;}@media (min-width:768px){.css-1mpu5jj{margin-bottom:0px;}}</style><div class="css-1mpu5jj"><style data-emotion-css="dtzkur">.css-dtzkur{width:100%;padding:20px;}@media (min-width:768px){.css-dtzkur{margin-top:75px;padding:0;width:160px;}}</style><div class="css-dtzkur"><style data-emotion-css="r8rj3w">.css-r8rj3w{font-weight:600;font-size:16px;line-height:24px;color:#424d57;}</style><div class="css-r8rj3w">Join the community</div><style data-emotion-css="1ws0nkq">.css-1ws0nkq{font-weight:400;font-size:12px;line-height:20px;color:#424d57;}</style><div class="css-1ws0nkq">Get in direct contact with us through Discord.</div><style data-emotion-css="652pjx">.css-652pjx:hover{-webkit-text-decoration:none;text-decoration:none;}</style><a href="https://discord.gg/MGFyhbdFxt" target="_blank" rel="noopener noreferrer" class="css-652pjx"><style data-emotion-css="y77wuh">.css-y77wuh{margin-top:5px;}</style><button class="lc-btn lc-btn--secondary lc-btn--compact css-y77wuh" type="button"><i class="lc-btn__icon lc-btn__icon-left"><svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_613_10386)"><path d="M16.9308 1.63294C15.6561 1.04804 14.2892 0.617109 12.8599 0.370298C12.8339 0.365535 12.8079 0.377439 12.7945 0.401247C12.6187 0.713926 12.4239 1.12184 12.2876 1.44246C10.7503 1.21232 9.22099 1.21232 7.71527 1.44246C7.57887 1.11471 7.37707 0.713926 7.20048 0.401247C7.18707 0.378233 7.16107 0.366329 7.13504 0.370298C5.70659 0.616321 4.33963 1.04725 3.06411 1.63294C3.05307 1.6377 3.04361 1.64564 3.03732 1.65595C0.444493 5.52959 -0.265792 9.30801 0.0826501 13.0396C0.0842267 13.0578 0.0944749 13.0753 0.108665 13.0864C1.81934 14.3427 3.47642 15.1054 5.10273 15.6109C5.12876 15.6188 5.15634 15.6093 5.1729 15.5879C5.55761 15.0625 5.90054 14.5086 6.19456 13.926C6.21192 13.8919 6.19535 13.8514 6.15989 13.838C5.61594 13.6316 5.098 13.38 4.59977 13.0943C4.56037 13.0713 4.55721 13.015 4.59347 12.988C4.69831 12.9094 4.80318 12.8277 4.9033 12.7451C4.92141 12.7301 4.94665 12.7269 4.96794 12.7364C8.24107 14.2308 11.7846 14.2308 15.0191 12.7364C15.0404 12.7261 15.0657 12.7293 15.0846 12.7443C15.1847 12.8269 15.2895 12.9094 15.3952 12.988C15.4314 13.015 15.4291 13.0713 15.3897 13.0943C14.8914 13.3856 14.3735 13.6316 13.8288 13.8372C13.7933 13.8507 13.7775 13.8919 13.7949 13.926C14.0952 14.5078 14.4381 15.0617 14.8157 15.5871C14.8315 15.6093 14.8599 15.6188 14.8859 15.6109C16.5201 15.1054 18.1772 14.3427 19.8879 13.0864C19.9028 13.0753 19.9123 13.0586 19.9139 13.0404C20.3309 8.72626 19.2154 4.97883 16.9568 1.65674C16.9513 1.64564 16.9419 1.6377 16.9308 1.63294ZM6.68335 10.7674C5.69792 10.7674 4.88594 9.86274 4.88594 8.75167C4.88594 7.6406 5.68217 6.7359 6.68335 6.7359C7.69239 6.7359 8.49651 7.64855 8.48073 8.75167C8.48073 9.86274 7.68451 10.7674 6.68335 10.7674ZM13.329 10.7674C12.3435 10.7674 11.5316 9.86274 11.5316 8.75167C11.5316 7.6406 12.3278 6.7359 13.329 6.7359C14.338 6.7359 15.1421 7.64855 15.1264 8.75167C15.1264 9.86274 14.338 10.7674 13.329 10.7674Z" fill="#424D57"></path></g><defs><clipPath id="clip0_613_10386"><rect width="20" height="15.493" fill="white" transform="translate(0 0.25354)"></rect></clipPath></defs></svg></i><div>Discord</div></button></a></div><div class="css-dtzkur"><div class="css-r8rj3w">Follow us</div><div class="css-1ws0nkq">Follow our insightful tweets and interact with our content.</div><a href="https://twitter.com/TextPlatform" target="_blank" rel="noopener noreferrer" class="css-652pjx"><button class="lc-btn lc-btn--secondary lc-btn--compact css-y77wuh" type="button"><i class="lc-btn__icon lc-btn__icon-left"><svg width="24" height="24" class="rmi rmi-twitter undefined" viewBox="0 0 24 24"><path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"></path></svg></i><div>Twitter</div></button></a></div><div class="css-dtzkur"><div class="css-r8rj3w">Contribute</div><div class="css-1ws0nkq">See something that's wrong or unclear? Submit a pull request.</div><a href="https://github.com/livechat/livechat-public-docs" target="_blank" rel="noopener noreferrer" class="css-652pjx"><button class="lc-btn lc-btn--secondary lc-btn--compact css-y77wuh" type="button"><i class="lc-btn__icon lc-btn__icon-left"><svg width="24" height="24" class="rmi rmi-github undefined" viewBox="0 0 24 24"><path d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z"></path></svg></i><div>GitHub</div></button></a></div><div class="css-dtzkur"><div class="css-r8rj3w">Contact us</div><div class="css-1ws0nkq">Want to share feedback? Reach us at:<!-- --> <a href="mailto:developers@text.com">developers@text.com</a></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/authorization/sign-in-with-livechat","query":{},"buildId":"mT926s0W5VyhfFaApGsyO","assetPrefix":"/docs","runtimeConfig":{},"nextExport":true,"autoExport":true,"isFallback":false}</script><script nomodule="" src="/docs/_next/static/chunks/polyfills-c2dc1d9251306528e50c.js"></script><script src="/docs/_next/static/chunks/webpack-af19fbe32e13fc779465.js" async=""></script><script src="/docs/_next/static/chunks/framework.57a22ac5870571c2eff5.js" async=""></script><script src="/docs/_next/static/chunks/commons.0889bf71124535c6c4cd.js" async=""></script><script src="/docs/_next/static/chunks/main-7bb61c4f8d40f1e634e9.js" async=""></script><script src="/docs/_next/static/chunks/pages/_app-cdbe91fdfdbd305577ef.js" async=""></script><script src="/docs/_next/static/chunks/f66b9295.f9eceaafe4216b86326e.js" async=""></script><script src="/docs/_next/static/chunks/b31dc3a52fd33fe1943f491eae223576a0413e10.ac30430b2138b8fefed8.js" async=""></script><script src="/docs/_next/static/chunks/067aff065064306958fa97cea949633bebf95d70.dede6f8249fbb82aff52.js" async=""></script><script src="/docs/_next/static/chunks/pages/authorization/sign-in-with-livechat-5c4f25c245661d071d42.js" async=""></script><script src="/docs/_next/static/mT926s0W5VyhfFaApGsyO/_buildManifest.js" async=""></script><script src="/docs/_next/static/mT926s0W5VyhfFaApGsyO/_ssgManifest.js" async=""></script></body></html>