State mismatch for custom provider

[jakecurreri]

Issue

I'm integrating a custom OAuth provider secondProvider into react-native-app-auth. The app is already integrated with Okta, so this would be the 2nd provider used in the app.

I have no problem using OAuth2 through Postman with the exact same configuration and callback URL. But, when I attempt to authenticate through react-native-app-auth, I get a "State mismatch..." error.

The app opens the /Authorization endpoint and login page just fine. But based on the error response, it looks like an issue with the /Token request.

Login failed: [Error: State mismatch, expecting PhoLDQdC72wjcumk1i-XsI3GpjAtt-F0TyofYPGpffY but got (null) in authorization response <OIDAuthorizationResponse: 0x600003a3d3b0, authorizationCode: AUTH_CODE, state: "(null)", accessToken: "(null)", accessTokenExpirationDate: (null), tokenType: (null), idToken: "(null)", scope: "(null)", additionalParameters: {
}, request: <OIDAuthorizationRequest: 0x600003158930, request: PRIVATE_URL/authorization?client_id=CLIENT_ID&redirect_uri=PRIVATE_CALLBACK_URL&state=PhoLDQdC72wjcumk1i-XsI3GpjAtt-F0TyofYPGpffY&response_type=code>>

The provider requires a clientSecret and does not implement PKCE.

config.js

export default {
  default: 'okta',
  providers: {
    okta: {
      driver: 'okta',
      issuer: PRIVATE_URL,
      clientId: PRIVATE_CLIENT_ID,
      redirectUrl: PRIVATE_CALLBACK_URL,
      scopes: SCOPES,
      userInfoSource: PRIVATE_URL,
    },
    secondProvider: {
      useNonce: false,
      usePKCE: false,
      clientId: CLIENT_ID,
      clientSecret: CLIENT_SECRET,
      redirectUrl: PRIVATE_CALLBACK_URL,
      serviceConfiguration: {
        authorizationEndpoint: `${PRIVATE_URL}/Authorization`,
        tokenEndpoint: `${PRIVATE_URL}/Token`,
      },
    },
  },
};

Here is my oauthStart() function.

index.js

const oauthStart = () => {
    auth
      .start()
      .then(accessResponse => {
        console.log(accessResponse);
      })
      .catch(error => {
        console.log('Login failed:', error);
        alert('Login failed. Please retry.');
      });
  };

auth.start() references this function call.

auth.js

const service = {
  getProvider(key = null) {
    let provider;

    if (key) {
      provider = providers[key];
    } else {
      provider = selectedProvider;
    }

    return provider;
  },
  getAuthState(authState = null) {
    return authState || currentAuthState;
  },
  start(providerKey = null) {
    provider = this.getProvider(providerKey);

    return authorize(provider).then(response => {
      currentAuthState = response;

      this.persistAuthStateSecurely(currentAuthState, provider.key);

      client.defaults.headers.Authorization = `Bearer ${response.accessToken}`;

      return response;
    });
  },
...

Thank you in advance!

---

Environment

• "react-native-app-auth": "^6.4.0"
• "react-native": "0.66.1"
• Custom Provider & Okta
• iOS
• Not using Expo

[Jay-A-McBee]

👋 hey @jakecurreri - It sounds like the custom OAuth provider isn't returning the state parameter. Judging from the null value for all the returned params I'm leaning toward these are being returned in a different format than a query string. See openid/AppAuth-iOS#347. I would try and run your app in xcode or Android Studio, set some breakpoints in AppAuth-ios or AppAuth-Android and see if the redirect url has these values as a fragment instead of part of thequery string.

If the service is returning a fragment, you could try adding response_mode: "query" to the additionalParameters object. I'm not 100% sure that will work 🤷‍♂️ - the auth service would also have to respect this value. Give it a try and let me know if it works out.

[Jay-A-McBee]

No response from OP - closing this out.