Azure AD Authentication with react native expo, can't get the access token

[bluego78]

1. Expo Version: 4.4.4
2. React Native + Expo

I’m facing this issue, I can retrieve the authorization code from Azure AD, but then I can’t get the ACCESS TOKEN…

const discovery = useAutoDiscovery('https://login.microsoftonline.com/MY_TENANT/v2.0');

const [request, response, promptAsync] = useAuthRequest(
    {
      clientId: 'MY_CLIENT_ID',
      scopes: ['openid', 'profile', 'email', 'offline_access'], //
      redirectUri: makeRedirectUri({
        scheme: 'your.app'
      }),
    },
    discovery
  );

  useEffect(() => {

    if (response !== null && response.type === 'success') {
      if (response.type && response.type === 'success') {
        (async () => {
          console.log(response.params.code) //<-- this works
          const { accessToken } = await exchangeCodeAsync(
            {
              clientId: request?.clientId as string,
              code: response.params.code,
              redirectUri: makeRedirectUri({
                scheme: "your.app"
              }),
              extraParams: {
                client_secret: "MY_SECRET", //<-- should I send the secret??
              },
            },
            { tokenEndpoint: 'https://login.microsoftonline.com/MY_TENTANT/oauth2/token' } 
          );

          console.log(accessToken) //<-- NOTHING

        })();
      }
      else if (response.error && response.error !== "") {
           //do stuff
      }
    }

The response in the console is that I can obtain the authorization code but the second call to get the access token returns this:

[Unhandled promise rejection: Error: The provided authorization grant (e.g., authorization code, resource owner credentials) or refresh token is invalid, expired, revoked, does not match the redirection URI used in the authorization request, or was issued to another client.]

Please can someone help me?

[bluego78]

for anyone who facing this issue… this is a working solution:

// Import 
import jwt_decode from "jwt-decode";
import * as AuthSession from 'expo-auth-session';

const yourComponent = () => {
// Request the authorization code

const discovery : AuthSession.DiscoveryDocument = AuthSession.useAutoDiscovery(`https://login.microsoftonline.com/${AzureAdConfig.tenant}/v2.0`) as AuthSession.DiscoveryDocument;

  const [request, response, promptAsync] = AuthSession.useAuthRequest(
    {
      clientId: AzureAdConfig.client_id,
      scopes: AzureAdConfig.scopes,
      redirectUri: AzureAdConfig.redirect_uri,
    },
    discovery
  );

   
  // GET the access token
  useEffect(() => {
    

    if (response !== null && response.type && response.type === 'success') {

        (async () => {

          let tokenRes: AuthSession.TokenResponse = await AuthSession.exchangeCodeAsync({
            clientId:AzureAdConfig.client_id,
            code: response.params.code,
            redirectUri: AzureAdConfig.redirect_uri,
            extraParams: {
              code_verifier: request?.codeVerifier || "",
            },
          }, 
          discovery
          );
          
          if (tokenRes.accessToken && tokenRes.accessToken !== null && tokenRes.accessToken !== "") {
            var decoded: any = jwt_decode(tokenRes.accessToken);
            //do stuff
          }
          else {
            //set an error
          }
        })();
    }
  }, [response]);


return <Button title="Login" onPress={() => {promptAsync(); }} />

}

export default yourComponent;

Now the problem is… testing the application on testflight on iOS device, returns this redirect uri “your.app://” … this is not an allowed Uri on Azure App Redirects uri.

How to set the uri?