iOS 11.3/Safari 11.1下PWA的Azure AD认证跳转异常求助

Hey Eric, I’ve dealt with this exact headache before—iOS 11.3 and Safari 11.1 introduced changes that broke Azure AD auth flows for standalone PWAs, causing logins to get stuck in Safari instead of bouncing back to the app. Here are the steps that resolved it for me:

1. Update Azure AD App Registration Redirect URIs #

The biggest culprit here is using web-based redirect URIs (like https://your-app.com/callback)—iOS now blocks these from redirecting back to standalone PWAs. Instead, you need to use a custom scheme URI tailored for mobile auth:

• Head to your Azure AD app registration in the Azure Portal
• Go to the Authentication section
• Add a new redirect URI under the Mobile and desktop applications category, using the format: msal<YOUR_CLIENT_ID>://auth
  • Replace <YOUR_CLIENT_ID> with your app's actual Azure AD client ID

2. Upgrade Your MSAL Library (If Using It) #

If you’re using Microsoft’s Authentication Library (MSAL) for auth, old versions don’t handle the new iOS/Safari behavior correctly:

• For JavaScript-based PWAs, upgrade to the latest @azure/msal-browser package
• When initializing MSAL, set these critical config options:

  const msalConfig = {
    auth: {
      clientId: "YOUR_CLIENT_ID",
      redirectUri: "msalYOUR_CLIENT_ID://auth", // Match the custom URI you set in Azure
      authority: "https://login.microsoftonline.com/YOUR_TENANT_ID"
    },
    cache: {
      cacheLocation: "localStorage",
      storeAuthStateInCookie: false // Disable cookie storage for standalone PWAs
    }
  };
  
  const msalInstance = new PublicClientApplication(msalConfig);
  

• Also, when triggering the login, set navigateToLoginRequestUrl: false to prevent Safari from hanging on the auth callback page:

  msalInstance.loginPopup({
    scopes: ["user.read"],
    navigateToLoginRequestUrl: false
  });
  

3. Ensure PWA Manifest & Apple Meta Tags Are Correct #

iOS needs specific config to treat your PWA as a standalone app (not just a Safari tab):

• In your manifest.json, set display: "standalone" (or "fullscreen")
• Add this meta tag to your HTML head to enforce standalone mode on iOS:

  <meta name="apple-mobile-web-app-capable" content="yes">
  

• Double-check that your manifest is linked correctly in the HTML:

  <link rel="manifest" href="/manifest.json">
  

4. Handle the Redirect Callback in Your PWA #

Once Azure AD redirects back to your custom scheme URI, your PWA needs to capture the auth response and finish the login flow:

• Add an event listener to parse the token when the app loads:

  window.addEventListener('load', () => {
    const msalInstance = new PublicClientApplication(msalConfig);
    msalInstance.handleRedirectPromise()
      .then(response => {
        if (response) {
          // User logged in successfully—store the token and load app content
          console.log('Auth successful:', response);
        }
      })
      .catch(err => {
        console.error('Auth error:', err);
      });
  });
  

Key Notes to Remember #

• Always test by adding the PWA to your iOS home screen—the standalone mode behavior doesn’t activate when running in a regular Safari tab.
• If you were using loginRedirect() before, switch to loginPopup() if possible—it’s more reliable for PWAs on iOS, as it avoids full browser redirects.

内容的提问来源于stack exchange，提问作者Eric