Microsoft-authentication-library-for-js: Better workaround for silent token refresh failure in Safari

Created on 14 May 2020 · 4Comments · Source: AzureAD/microsoft-authentication-library-for-js

Library

[x] [email protected] or @azure/[email protected]
[ ] @azure/[email protected]
[ ] @azure/[email protected]
[ ] @azure/[email protected]
[ ] @azure/[email protected]

Description

Current work around for silent token renewal failure in safari requires user intervention i.e to completely disable the third party cookie blocking in Safari Preferences.However it appears a better alternative exists in the form of Storage Access API.

From MDN doc

In addition, sandboxed s cannot be granted storage access by default for security reasons. The API therefore also adds the allow-storage-access-by-user-activation sandbox token. The embedding website needs to add this to allow storage access requests to be successful, along with allow-scripts and allow-same-origin to allow it to call the API, and execute in an origin that can have cookies</p> </blockquote> <p>From <a rel="nofollow noopener" target="_blank" href="https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/">webkit blog</a></p> <blockquote> <p>To keep supporting cross-site integration, we shipped the Storage Access API two years ago to provide the means for authenticated embeds to get cookie access with mandatory user control.</p> </blockquote> <p>Is this something we can look into as a possible alternative ?</p> </div> <div> <span class="badge badge-primary">question</span> <div class="float-right"> <a class="text-muted" href="https://www.github.com/AzureAD/microsoft-authentication-library-for-js/issues/1656" rel="nofollow noreferrer" target="_blank" onclick="dataLayer.push({'event': 'GAEvent', 'eventCategory': 'click', 'eventAction': 'source_bottom', 'eventLabel': 'Source Bottom', 'eventValue': undefined});">Source</a> </div> </div> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/3107922?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt=" picture"> <strong>niwsa</strong> </div> <div class="col text-right"> </div> </div> </div> </div> </div> <div class="col-12"> <div id="ph-above-best-comment"> </div> </div> <div class="col-12"> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="9295564578" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="col-12 d-flex align-items-center mb-4"> <h2>All 4 comments</h2> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@niwsa</strong> Thanks for posting this. We have looked at the Storage API and we are currently exploring options that will require changes to both the auth client library and server. </p> <p>The current workaround we are using is to introduce the authorization code flow for browsers, which limits the usage of iframes. We have introduced this in the @azure/msal-browser package which is currently in beta. We recommend using this package to get token exchange working in Safari browsers.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/6913227?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="pkanher617 picture"> <strong>pkanher617</strong> <span class="text-muted ml-1">on 14 May 2020</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@pkanher617</strong> Thanks for the reply.However I understand that @azure/msal-browser is not available for B2C tenants which is really my use case.For now thinking of using <a rel="nofollow noopener" target="_blank" href="https://github.com/AzureAD/passport-azure-ad">https://github.com/AzureAD/passport-azure-ad</a> with server side rendering (Next JS).</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/3107922?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="niwsa picture"> <strong>niwsa</strong> <span class="text-muted ml-1">on 14 May 2020</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@niwsa</strong> We are hoping to have support for B2C tenants by the end of this month, keep an eye out for new releases!</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/6913227?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="pkanher617 picture"> <strong>pkanher617</strong> <span class="text-muted ml-1">on 14 May 2020</span> </div> <div class="col text-right"> 👀<span class="ml-2 mr-3">1</span> 🚀<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@pkanher617</strong> - re your comment on 14th May - are B2C tenants now supported please?</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/4604271?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="HockeyJustin picture"> <strong>HockeyJustin</strong> <span class="text-muted ml-1">on 28 Jul 2020</span> </div> <div class="col text-right"> </div> </div> </div> </div> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown text-center helpful"> <div class="title">Was this page helpful?</div> <div class="mt-1" onMouseLeave="rating(618371336, 0);"> <i class="fas fa-star inactive" id="star-1" onMouseOver="rating(618371336, 1);" onclick="rate(618371336, 1);"></i> <i class="fas fa-star inactive" id="star-2" onMouseOver="rating(618371336, 2);" onclick="rate(618371336, 2);"></i> <i class="fas fa-star inactive" id="star-3" onMouseOver="rating(618371336, 3);" onclick="rate(618371336, 3);"></i> <i class="fas fa-star inactive" id="star-4" onMouseOver="rating(618371336, 4);" onclick="rate(618371336, 4);"></i> <i class="fas fa-star inactive" id="star-5" onMouseOver="rating(618371336, 5);" onclick="rate(618371336, 5);"></i> </div> <div class="description text-small"><span id="rating-val">0</span> / 5 - <span id="rating-count">0</span> ratings</div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3452512275" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <div class="col-12 col-lg-4"> <div id="ph-above-related"></div> <div class="card card-custom issue-box"> <div class="card-body pt-3 pb-5"> <h2 class="mb-4">Related issues</h2> <div> <strong> <a href="/microsoft-authentication-library-for-js/783254597/failed-to-acquire-token-when-using-microsoft-personal">Failed to acquire token when using microsoft personal accounts</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/971824?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="atvoid picture"> <strong class="pr-1" dir="ltr">atvoid</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/microsoft-authentication-library-for-js/616732157/typescript-error-declaration-or-statement-expected-in-msal">TypeScript Error: "Declaration or statement expected." in msal-browser/dist/src/index.d.ts</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/1941633?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="ninio picture"> <strong class="pr-1" dir="ltr">ninio</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/microsoft-authentication-library-for-js/745243940/subsequent-calls-to-acquiretokenpopup-break-the-first">Subsequent calls to acquireTokenPopup break the first invocation and prevent authentication</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/7051?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="jviney picture"> <strong class="pr-1" dir="ltr">jviney</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/microsoft-authentication-library-for-js/324172149/token-silent-renewal-fails-on-chrome-only">Token silent renewal fails on Chrome only</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/19413950?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="lecaillon picture"> <strong class="pr-1" dir="ltr">lecaillon</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/microsoft-authentication-library-for-js/614763237/what-is-the-correct-string-to-use-to-identify-a-specific">What is the correct string to use to identify a specific user in a local database?</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/10828570?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="DarkLite1 picture"> <strong class="pr-1" dir="ltr">DarkLite1</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> </div> </div> <div class="sticky-top pt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="ph-below-related-2" class="mt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <div class="col-12 col-lg-4"> </div> </div> <div class="skyscraper-container"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="7879185320" data-ad-format="vertical" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="mt-5 spacer"></div> <footer class="mt-5 pb-2 py-4 text-center mt-auto"> <div class="container"> <a class="navbar-brand logo mr-5" href="/"> <img src="/assets/img/logo.svg" width="40" height="40" alt="bleepingcoder logo"> bleeping<strong>coder</strong> </a> <div class="mt-4"> bleepingcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners. </div> <div> Source for this page: <a href="https://www.github.com/AzureAD/microsoft-authentication-library-for-js/issues/1656" rel="nofollow noreferrer" target="_blank">Source</a> </div> </div> <hr class="mb-5 mt-5"> <div class="container"> <div class="row"> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular programming languages</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/python" dir="ltr">Python</a> </li> <li class="mb-2"> <a href="/javascript" dir="ltr">JavaScript</a> </li> <li class="mb-2"> <a href="/typescript" dir="ltr">TypeScript</a> </li> <li class="mb-2"> <a href="/cpp" dir="ltr">C++</a> </li> <li class="mb-2"> <a href="/csharp" dir="ltr">C#</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/microsoft/vscode" dir="ltr">vscode</a> </li> <li class="mb-2"> <a href="/numpy/numpy" dir="ltr">numpy</a> </li> <li class="mb-2"> <a href="/ant-design/ant-design" dir="ltr">ant-design</a> </li> <li class="mb-2"> <a href="/mui-org/material-ui" dir="ltr">material-ui</a> </li> <li class="mb-2"> <a href="/vercel/next-js" dir="ltr">next.js</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-0"> <strong>More GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/rust-lang/rust" dir="ltr">rust</a> </li> <li class="mb-2"> <a href="/moment/moment" dir="ltr">moment</a> </li> <li class="mb-2"> <a href="/yarnpkg/yarn" dir="ltr">yarn</a> </li> <li class="mb-2"> <a href="/mozilla/pdf-js" dir="ltr">pdf.js</a> </li> <li class="mb-2"> <a href="/JuliaLang/julia" dir="ltr">julia</a> </li> </ul> </div> </div> </div> <hr class="mb-5 mt-5"> <div class="container text-muted"> © 2026 bleepingcoder.com - <a href="/bleeps" rel="nofollow">Contact</a><br /> By using our site, you acknowledge that you have read and understand our <a href="/cookies" rel="nofollow">Cookie Policy</a> and <a href="/privacy" rel="nofollow">Privacy Policy</a>. </div> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <script async src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>  <script type="text/javascript" src="/assets/js/main.js"></script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script></body> </html> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>