React Native Expo. Azure 授权

Question

I created a React Native Expo project with Azure AD authentication according to this tutorial .

Here is my code:

    const discovery = useAutoDiscovery('https://login.microsoft.com/c764ad56-5d28-4d02-acc3-197e61278bb3');

    const [request, response, promptAsync] = useAuthRequest (
    {
        clientId: '4344ecc3-5737-4aa0-b71c-2e65affb802c',
        scopes: [ 'User.Read' ],
        redirectUri: 'exp://192.168.1.7:19000'
    },
    discovery
    );
    
    const logon = async () => {
    
        await promptAsync();
    
        if (response.type == 'success') {
            navigation.navigate('List');
        }
    }

I logged my request to the console exmin my login url

AuthRequest {
  "clientId": "4344ecc3-5737-4aa0-b71c-2e65affb802c",
  "clientSecret": undefined,
  "codeChallenge": "h5gKD7BtEXFtvWjP6ajKfNR4csomtPVtj-sRv5Zykn8",
  "codeChallengeMethod": "S256",
  "codeVerifier": "bCPan6PJWKmf0gLRZLKxK54DTSk402iQftTdFpHx1n7Xq9dX9CYF2fGDmvTjs6SopOho0i8BB70Usfi0M7ezws1a1GMWS0uv9T7ji9l4gv5jza11lJIk3Uil21xjUGh2",       
  "extraParams": Object {},
  "prompt": undefined,
  "redirectUri": "exp://192.168.1.7:19000",
  "responseType": "code",
  "scopes": Array [
    "User.Read",
  ],
  "state": "4cYI6HmNca",
  "url": "https://login.microsoft.com/c764ad56-5d28-4d02-acc3-197e61278bb3/oauth2/authorize?code_challenge=h5gKD7BtEXFtvWjP6ajKfNR4csomtPVtj-sRv5Zykn8&code_challenge_method=S256&redirect_uri=exp%3A%2F%2F192.168.1.7%3A19000&client_id=4344ecc3-5737-4aa0-b71c-2e65affb802c&response_type=code&state=4cYI6HmNca&scope=User.Read",
  "usePKCE": true,
}

Here is my Azure Ad registration data

My redirect url is exp://192.168.1.7:19000

And despite this, I get the error

The provided value for the input parameter 'redirect_uri' is not valid. The expected value is a URI which matches a redirect URI registered for this client application

What am I doing wrong?

Answer 1

Please check if below points are of any cause for the issue: .

1. The error looks like the app is not allowing to use IP addresses. Try to use.network name in place of ip address. If you don't have access to the name, create an alias on your machine for that specific IP. Ex: redirect_url: 'http://localhost:8080',

for expo go redirect uri exp://localhost:19000/--/

Also see uris according to the documentation provided > Authentication - Expo Documentation

2. Try with v2 endpoint

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

3. Make use of AuthSession.makeRedirectUri

CODE

 const discovery = useAutoDiscovery('https://login.microsoft.com/c764ad56-5d28-4d02-acc3-197e61278bb3/v2.0'); const [request, response, promptAsync] = useAuthRequest ( { clientId: '4344ecc3-5737-4aa0-b71c-2e65affb802c', redirectUri: AuthSession.makeRedirectUri({ native: "exp://localhost:19000", }), extraParams: { code_verifier: request.codeVerifier }, scopes: [ 'User.Read' ], // // }, discovery

AuthSession.makeRedirectUri does a lot of the heavy lifting involved with universal platform support. Behind the scenes it uses expo-linking.

Build requests using AuthSession.useAuthRequest(), the hook allows for async setup which means mobile browsers won't block the authentication.

Reference : AuthSession not working for Authorization Code Flow