expo-auth-session fetchUserInfoAsync -> invalid token error

Question

Package expo-auth-session: We are using Azure sso for our authentication, and we are able to get the token after logging in.

The problem: However if we try to use the fetchUserInfoAsync(responseExchangeCode, discovery) method, it returns an invalid token error.

Alternative Package react-native-msal: If however we use this package, we are able to get the user information in the response of it's method acquireToken(aqcuireTokenParams). We can't use this plugin though due to conflict issues it has with microsoft auth app on ios devices. But it does retrieve all the user info.

App.tsx:

import * as React from 'react';
import * as WebBrowser from 'expo-web-browser';
import {
  exchangeCodeAsync,
  fetchUserInfoAsync,
  makeRedirectUri,
  Prompt,
  useAuthRequest,
  useAutoDiscovery,
} from 'expo-auth-session';
import { Button, Text, SafeAreaView, Platform } from 'react-native';


WebBrowser.maybeCompleteAuthSession();
const clientId = '<my_client_id>';
const redirectUri = makeRedirectUri({
  path: Platform.select({
    android: 'com.example/<my_decrypted_hash_value>',
    ios: 'com.example://auth',
    default: undefined
  })
});


export default function App() {
  // Endpoint
  const discovery = useAutoDiscovery('https://login.microsoftonline.com/<my_tenant_id>/v2.0');

  // Request
  const [request, , promptAsync] = useAuthRequest(
    {
      prompt: Prompt.Login,
      clientId,
      scopes: ['https://www.example.com/API.All'],
      redirectUri,
    },
    discovery,
  );

  // functions
  const login = async () => {
    try {
      const propmtResponse = await promptAsync();
      if (request && propmtResponse?.type === 'success' && discovery) {
        const responseExchangeCode = await exchangeCodeAsync(
          {
            clientId,
            code: propmtResponse.params.code,
            extraParams: request.codeVerifier
              ? { code_verifier: request.codeVerifier }
              : undefined,
            redirectUri,
          },
          discovery,
        );
        console.log('responseExchangeCode:', responseExchangeCode); // has token
        const userInfo = await fetchUserInfoAsync(responseExchangeCode, discovery); // <------------- Error happens here
        console.log('userInfo:', userInfo);
      } else {
        throw new Error('something went wrong');
      }
    } catch(error: any) {
      console.log('error:', error);
    }
  };

  return (
    <SafeAreaView>
      <Button
        disabled={!request}
        title="Login"
        onPress={login}
      />
    </SafeAreaView>
  );
}

app.json

{
  "expo": {
    "name": "My App",
    "slug": "My-App",
    "version": "1.0.0",
    "scheme": "msauth",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.example",
      "buildNumber": "1.0.0"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.example",
      "versionCode": 1
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

Results