IOS Authorize error State mismatch, expecting

[vprtsingh]

Issue

It Working fine on android. But not for IOS

My Code

import React, { Component } from "react";
import { View, Text, Platform } from 'react-native';
import { authorize } from 'react-native-app-auth';

class MyComponent extends Component {

    _signInAsync = async () => {
        try {

            const config = {
                clientId: "xxxxx",
                redirectUrl: Platform.OS === 'ios' ? 'urn:ietf:wg:oauth:2.0:oob' : 'com.wildhire.app://react-native-auth',
                scopes: ['openid','offline_access','profile','User.Read','Calendars.ReadWrite'],
                additionalParameters: { prompt: 'select_account' },
                serviceConfiguration: {
                    authorizationEndpoint: 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize',
                    tokenEndpoint: 'https://login.microsoftonline.com/common/oauth2/v2.0/token',
                }
            };

            const result = await authorize(config);

            console.log('success result =>', result)

        } catch (error) {
            console.log('error =>', error)
        }
    };


    render() {
        return (
            <View>
                <Text onPress={this._signInAsync} >SignIn Sync </Text>
            </View>
        )
    }
}

export default MyComponent

Error

error => Error: State mismatch, expecting lEjlyD_Y0Hogp9IqsnmzFixuItdxQ5guvtqlWFY3Ano but got (null) in authorization response <OIDAuthorizationResponse: 0x60000149d770, authorizationCode: (null), state: "(null)", accessToken: "(null)", accessTokenExpirationDate: (null), tokenType: (null), idToken: "(null)", scope: "(null)", additionalParameters: {
}, request: <OIDAuthorizationRequest: 0x600001cdb560, request: https://login.microsoftonline.com/common/oauth2/v2.0/authorize?prompt=select_account&nonce=9Ik43IE3P6ng18RtDPoLDUHfgei7RZubWvqR63ZZii0&response_type=code&code_challenge_method=S256&scope=openid%20offline_access%20profile%20User.Read%20Calendars.ReadWrite&code_challenge=oOGQVMW_myhXbV72cxXVPwqM6jOuC3Ws1EWNZW6ha4w&redirect_uri=urn:ietf:wg:oauth:2.0:oob&client_id=917f260d-6261-4bd9-bbd7-f51a08ed46c0&state=lEjlyD_Y0Hogp9IqsnmzFixuItdxQ5guvtqlWFY3Ano>>
    at Object.fn [as authorize] (NativeModules.js:99)
    at authorize (index.js:187)
    at _callee$ (VM5 CalendarSync.bundle:71)
    at tryCatch (runtime.js:63)
    at Generator.invoke [as _invoke] (runtime.js:293)
    at Generator.next (runtime.js:118)
    at tryCatch (runtime.js:63)
    at invoke (runtime.js:154)
    at runtime.js:189
    at tryCallTwo (core.js:45)

Environment

• "react": "16.9.0"
• "react-native": "0.61.5"
• "react-native-app-auth": "^5.1.2"

Anyone help me as soon as possible

[asamiz]

Hi @vprtsingh
Did you find any solution for this issue?

[Jay-A-McBee]

@vprtsingh hmm... not sure if this will fix the issue, but there have been a few new major releases (v.6) for this lib. Try updating to the latest version - ^6.4.1.

[Jay-A-McBee]

No response from OP - closing this out.

[justinjoyn]

I'm experiencing the same issue on the latest version of this package.
Here is the error reported on Sentry:

Error: State mismatch, expecting YaVdTh1hIlJdFb32qZ1cQEAKpyw6otAnEVwwRIivoGM but got hKFo2SBHNVQtUk53OGp0YTNEc3pMUHZNQWEtdUdtaUhqaUktRKFupWxvZ2luo3RpZNkgRDhYeUZuZWFfd2tLeFdiMmJTc1FHRDRUeXZNVFlQbkKjY2lk2SBDYUJCWGV2RWJoOU9wOHJRaU40RUVMYzU2UFZyVmRHbg in author...
  at }, request: <OIDAuthorizationRequest: 0x280918000, request: (app:///callback&client_id=CaBBXevEbh9Op8rQiN4EELc56PVrVdGn&state=YaVdTh1hIlJdFb32qZ1cQEAKpyw6otAnEVwwRIivoGM>>)
  at <global>(node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:106:51)
  at apply(native)
  at <global>(node_modules/react-native-app-auth/index.js:246:10)
  at useInfiniteQuery(src/ducks/auth.tsx:123:16)
  at <global>(node_modules/redux-thunk/lib/index.js:23:24)
  at <global>(src/common/axiosMiddleware.tsx:142:20)
  at <unknown>(src/screens/authentication/Login/index.tsx:325:30)
  at <unknown>(src/screens/authentication/Login/index.tsx:156:9)
  at apply(native)

[ddeschenes-lacapitale]

Same for me. I have State mismatch, expecting B5IWddp2U3vqSGyr5qPA5LqwUCzUkIpD9DYCpvjW278 but got nQZI0e3nouWlqIrHDSGyayTu8qUN5DZWygA50Etm6Rg in authorization response <OIDAuthorizationResponse:

with env:

"react-native-app-auth": "6.4.3",
"react-native": "0.70.6",
"react": "18.1.0",

[tmadadad10]

any one was able to solve it ?