How can I use Open ID Connect (a type of authentication) in a react-native-windows app?

[shirakaba]

Hi all, I'm trying to use OpenID Connect in my react-native-windows app.

For macOS, I'm using react-native-app-auth, based on my PR to add macOS support. This was easy enough to implement, as the underlying CocoaPod, AppAuth-iOS, had a macOS implementation to begin with.

For Windows, however, I'm stumped. I can see that the organisation behind AppAuth also offer a Node.js implementation, AppAuth-JS, which they've demonstrated usage of with Electron. However, integrating it with my RNW app is another question.

First, I've tried running their sample Node.js app, only to find that it uses the "loopback" flow, which Google say they've deprecated on non-desktop platforms. This is confusing for a start, because I'm experiencing the error despite running on a desktop platform. But either way, they explicitly say that they've deprecated it on UWP, even if they haven't deprecated it on other types of Windows app.

To my understanding, react-native-windows produces a UWP app, so I have no auth solution. I can see an alternative library, IdentityModel.OidcClient, which has samples for a bunch of windows platforms I've never heard of, yet also says that they no longer support UWP.

Can anyone advise on how I might implement OpenID in a react-native-windows app?

[marlenecota]

Here's some documentation on how to do OpenID in UWP:
https://learn.microsoft.com/en-us/windows/uwp/security/web-authentication-broker

[shirakaba]

I've begun to have some success building a native module based on the winrt::Windows::Security::Authentication::Web::WebAuthenticationBroker::AuthenticateAsync API mentioned in those docs you linked, thank you!

I've been referring to:

• the C++ sample for Facebook OAuth
• Microsoft's samples for writing a C++ native module for React Native Windows

Hoping to be able to opensource my library at some point. Currently it's coupled to my internal app as I've been struggling with setting up standalone RNW libraries, so to anyone else in need of this, all I can do for now is give some guidance.

1. Supposing your app is named banana, and your OpenID provider is configured with a callback URL of banana://callback, you will need to register for banana:// deeplinks by making this addition to your windows/banana/Package.appxmanifest file:

  <Applications>
    <Application
      Id="App"
      Executable="$targetnametoken$.exe"
      EntryPoint="banana.App">
      <uap:VisualElements
        DisplayName="banana"
        Square150x150Logo="Assets\Square150x150Logo.png"
        Square44x44Logo="Assets\Square44x44Logo.png"
        Description="banana"
        BackgroundColor="transparent">
        <uap:DefaultTile Wide310x150Logo="Assets\Wide310x150Logo.png"/>
        <uap:SplashScreen Image="Assets\SplashScreen.png" />
      </uap:VisualElements>
+     <Extensions>
+       <uap:Extension Category="windows.protocol">
+         <uap:Protocol Name="banana">
+           <uap:DisplayName>banana</uap:DisplayName>
+         </uap:Protocol>
+       </uap:Extension>
+     </Extensions>
    </Application>
  </Applications>

2. The WebAuthenticationBroker::AuthenticateAsync method must be run on the UI thread. If you attempt to run it on the React Native thread, it won't crash your app, but it will end up always returning WebAuthenticationStatus::UserCancel without even attempting to open a browser. To run on the UI thread, I found that you can use UIDispatcher:

REACT_METHOD(authenticate)
void authenticate(
    std::string authUrl,
    std::string redirectUri,
    std::function<void(std::string)>&& onSuccess,
    std::function<void(std::string)>&& onFailure
) noexcept {
    m_reactContext.UIDispatcher().Post([authUrl, redirectUri, onSuccess, onFailure]() {
        // Call WebAuthenticationBroker::AuthenticateAsync() inside here
    });
}