How should I modify my iOS app and WKWebView so that identity information is picked up when doing SSO?

Question

TL; DR: how one should modify iOS app / WkWebView inside it to send device / user identity information on an Intune-enrolled device, so that we pass SSO with conditional access policies (which require sign in from enrolled devices)?

---

Hey, I'm developing a mobile application (React Native) for a SaaS service. One of our features is supporting Microsoft SSO. As in, customer can define a connection to Microsoft so that during authentication process the user will be redirected to Microsoft Login page. After successful login, our backend will acquire a token from Microsoft, match Entra user with our internal user record and create an internal access token for the native client. So, iOS application doesn't interact with Microsoft APIs at all.

Everything works well up to the point, when the customer defines conditional access policies for SSO with the requirement to sign in from an Intune-enrolled device.

By that I mean the following → If we open our application on an Intune-enrolled device (enrolled using Company Portal) and try login via Microsoft SSO inside a WkWebView, Then during authentication we get the following screen:

Which suggests to me that WkWebView instance inside our application can't provide device / user identity information of the enrolled device during authentication process.

Same time, If we open Web version of our SaaS via Safari on the same enrolled device (it's exactly the same authentication flow), Then we pass authentication i.e. device is recognized and I can see that in SSO logs.

---

My question is the following:

How should I modify our application to make WkWebView used for SSO, work the same way as native iOS Safari on an Intune-enrolled device, as in, pass the device information?

Answer 1

@Alexander Makarenko Thanks for posting in our Q&A.

For this issue, I'm not familiar with SSO. SSO is more related to Entra ID scope. Given this situation, I will add "Microsoft Entra ID" tag.

There are multiple products involved in this issue. It is suggested to create an online support ticket to get more help. Here is the support link:

https://learn.microsoft.com/en-us/mem/get-support

Thanks for your understanding.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Hello @Alexander Makarenko,

Thank you for posting your query on Microsoft Q&A.

We understand that you're implementing Microsoft authentication in your React Native app and encountering issues with browser compatibility during redirects.

Here are some solutions to help resolve these problems.

1. Using Supported WebView

• Seems your using default webview for react native which is WKWebView for rendering web content which might out be supporting authentication process required by Microsoft depends on iOS version
• You may need to use Safari View Controller (SFSafariViewController) or redirect users to the Safari browser directly, as some authentication flows require Safari's security settings. Refer the this link: https://developer.apple.com/documentation/safariservices/sfsafariviewcontroller https://learn.microsoft.com/en-us/entra/msal/objc/customize-webviews

2. Using MSAL Library

Microsoft provides MSAL (Microsoft Authentication Library) specifically for handling authentication on mobile apps.

Ensure you are using the latest version of the MSAL for React Native. It’s optimized to handle Microsoft logins and supports necessary browser redirects on mobile platforms.

MSAL should handle the redirect automatically, invoking the appropriate browser if needed.

Please use the sample code for your reference

https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-react

https://learn.microsoft.com/en-us/azure/active-directory-b2c/enable-authentication-react-spa-app

I hope this information is helpful. Please feel free to reach out if you have any further questions. If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".