React-native-app-auth: await authorize(config) never returns

[idoor88]

Hi all, I tried to use the library to auth with my google youtube account, I like to query my youtube videos after login and getting access token from the returned userInfo fo authorize() function, but the result is:

1. My app asked to select email,
2. After I selected email, it showed the google home page with my email icon on the right corner.
3. the function call const result = await authorize(config); never returned
4. I have nowhere to get my access token since nothing returned.

My code is as following, so where did I do wrong?

Thanks

`

     const config = {

         issuer: 'https://accounts.google.com',

         clientId: 'xxx29l52.apps.googleusercontent.com',//it is not my real clientId, but used my real clientId for testing

         redirectUrl: 'com.googleusercontent.apps.xxx29l52:/oauth2redirect',

         scopes: ['https://www.googleapis.com/auth/youtube.readonly']

       };

       console.log("auth config: ",config);

      try {

           const result = await authorize(config);

           console.log("auth result: ",result);

       } catch (error) {

         console.log("auth error: ", error);

       }

`

---

Environment

System:
OS: macOS 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
Memory: 300.06 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.4.0 - /usr/local/bin/node
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
Android SDK:
API Levels: 23, 25, 26, 27, 28
Build Tools: 27.0.3, 28.0.2, 28.0.3
System Images: android-22 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.1 AI-173.4907809
Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
npmPackages:
react: ^16.8.6 => 16.8.6
react-native: ^0.60.0 => 0.60.0
npmGlobalPackages:
react-native-asset: 2.0.0
react-native-cli: 2.0.1
react-native-cn-richtext-editor: 1.0.33
react-native-git-upgrade: 0.2.7

[jack828]

I am also experiencing this issue.

My scopes are defined as: scopes: ['openid', 'email'].

I'll let you know if I get anywhere with this.

[jack828]

Foreword: I can only assume you are referring to an Android issue, so this may only be applicable for Android.

Hey @idoor88 I've just managed to get this working in my RN app.

Judging from the Google OAuth2 docs (see: Option 1 > Form Values) it looks like you can set the appAuthRedirectScheme as defined in the setup info to the Google App ID.

I reckon this wouldn't be suitable if you have more than one OAuth provider (as I plan to have), so I would think that to enable using your package identifier (e.g. com.myapp) you would need to add it as a verified domain in your Google developer console. This would allow you to use it as a redirect_uri parameter. This is speculative, and I can't confirm this, though.

Hope this helps.

[anmour]

Im also having the same issue, help please!

[jack828]

Hi @anmour did you have a read of my comment? Please provide some more information about your environment and platform and I may be able to assist.

[anmour]

@jack828 Yes, I did! I have an Azure AD authentication on Android emulator. After finishing login process It returns to the app, but code below the call is never executed and it doesnt return the tokens.
In iOS it is working great, this issue is only in Android

config = {
  issuer: 'https://login.microsoftonline.com/xxxxxxxxxxxxxxxxxxxxx',
  clientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
  redirectUrl: 'msauth://xxxxxxxxxxxxxx/2jmjxxxxxxxxxxxxxxxxxxxxxxxxxx',                                      
  scopes: ['openid', 'profile', 'email', 'offline_access'],
};

try {
      this.props.dispatch(actions.authentication.loading(true));
      response = await authorize(config);
      debugger
      this.saveToken(response);
      this.props.resetStack();
      this.props.dispatch(actions.authentication.loading(false));
    } catch (error) {
      this.props.dispatch(actions.authentication.loading(false));
      console.log(error);
    }

Env:
Android Studio 3.5
buildToolsVersion = "28.0.3"
minSdkVersion = 16
compileSdkVersion = 28
targetSdkVersion = 28
Package:
"react": "16.9.0",
"react-native": "0.61.2",
"react-native-app-auth": "^4.4.0",

[jack828]

@anmour Great, thanks for the info.

I've not used Azure auth so I won't be the best help, but I can suggest making this change if this is your only auth provider:

Edit android/app/build.gradle

  android {

    defaultConfig {
        ...snip...

        manifestPlaceholders = [
          appAuthRedirectScheme: 'msauth://xxxxxxxxxxxxxx/2jmjxxxxxxxxxx' // Same as your redirectUrl
        ]
    }

...continued...

If not, please can you provide a cleaned version of your android/app/build.gradle? Please supply in a code block (surrounded by ```)

[anmour]

@jack828 yes, this is my only auth provider, this is my android/app/build.gradle

```apply plugin: "com.android.application"

import com.android.build.OutputFile

project.ext.react = [
entryFile: "index.js",
enableHermes: false, // clean and rebuild if changing
]

apply from: "../../node_modules/react-native/react.gradle"

def enableSeparateBuildPerCPUArchitecture = false

def enableProguardInReleaseBuilds = false
def jscFlavor = 'org.webkit:android-jsc:+'
def enableHermes = project.ext.react.get("enableHermes", false);

android {
compileSdkVersion rootProject.ext.compileSdkVersion

compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
}

defaultConfig {
    manifestPlaceholders = [
            appAuthRedirectScheme: 'msauth://xxxxxxxxxxxxxx/2jmjxxxxxxxxxx'
    ]
    applicationId "com.xxxx.xxxx"
    minSdkVersion rootProject.ext.minSdkVersion
    targetSdkVersion rootProject.ext.targetSdkVersion
    versionCode 1
    versionName "1.0"
}
splits {
    abi {
        reset()
        enable enableSeparateBuildPerCPUArchitecture
        universalApk false  // If true, also generate a universal APK
        include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
    }
}
signingConfigs {
    debug {
        storeFile file('debug.keystore')
        storePassword 'android'
        keyAlias 'androiddebugkey'
        keyPassword 'android'
    }
}
buildTypes {
    debug {
        signingConfig signingConfigs.debug
    }
    release {
        signingConfig signingConfigs.debug
        minifyEnabled enableProguardInReleaseBuilds
        proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
    }
}

applicationVariants.all { variant ->
    variant.outputs.each { output ->
        def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
        def abi = output.getFilter(OutputFile.ABI)
        if (abi != null) { 
            output.versionCodeOverride =
                    versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
        }

    }
}

}

dependencies {
implementation project(':react-native-geocoder-reborn')
implementation project(':@react-native-community_geolocation')
implementation project(':@react-native-community_async-storage')
implementation project(':react-native-splash-screen')
implementation project(':react-native-localization')
implementation project(':react-native-gesture-handler')
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation "com.facebook.react:react-native:+" // From node_modules
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
implementation 'androidx.appcompat:appcompat:1.0.2'
implementation 'androidx.annotation:annotation:1.0.2'

if (enableHermes) {
    def hermesPath = "../../node_modules/hermes-engine/android/";
    debugImplementation files(hermesPath + "hermes-debug.aar")
    releaseImplementation files(hermesPath + "hermes-release.aar")
} else {
    implementation jscFlavor
}

}

task copyDownloadableDepsToLibs(type: Copy) {
from configurations.compile
into 'libs'
}

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
```

[jack828]

@anmour Great, thanks!

So a quick Google suggests your redirect URI schema is invalid: https://github.com/AzureAD/azure-activedirectory-library-for-android/wiki/Broker#how-to-enable (see 3.)

Find your app in the Azure portal. Azure AD apps are inside the App Registrations tab.
Open your app, click Settings, Redirect URIs, and add a new Redirect URI in the following format: msauth://com.xxx.xxx/Base64UrlencodedSignature.

Note at the top of that page, it says you must add the redirect URI to your azure portal.

Aside from that, I am afraid I cannot help you further :(

[anmour]

@jack828 t he redirect URI is working perfect, the issue is after async call, it refresh all the app and the code below the call is never executed and it doesnt return the tokens

config = {
  issuer: 'https://login.microsoftonline.com/xxxxxxxxxxxxxxxxxxxxx',
  clientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
  redirectUrl: 'msauth://xxxxxxxxxxxxxx/2jmjxxxxxxxxxxxxxxxxxxxxxxxxxx',                                      
  scopes: ['openid', 'profile', 'email', 'offline_access'],
};

try {
      this.props.dispatch(actions.authentication.loading(true));
      response = await authorize(config);
      // this code never execute <----------------------
      this.saveToken(response);
      this.props.resetStack();
      this.props.dispatch(actions.authentication.loading(false));
    } catch (error) {
      this.props.dispatch(actions.authentication.loading(false));
      console.log(error);
    }

[jack828]

@anmour Sure, but as I understand it, the authorize call will never resolve if the application does not have execution handed back to it through the redirect URL. I can only think something is up with your redirectUrl setup but unfortunately I do not have the know-how to diagnose further.

[oguennec]

@here I've just had the same issue with [email protected] on Android only (iOS was fine).

The configuration used to work for a long time and suddenly on a recent build it started to fail systematically.

I could solve the issue by:

• creating another redirectUri in Azure with a full domain name "_com.domain.application_://oauth2/authorize" instead of just "application://oauth2/authorize" name like it used to be, like this:

• configuring this redirectUri as a redirectUrl in react-native-app-auth config object like this:
  config = {
  issuer: 'https://login.microsoftonline.com/xxxxxxxxxxxxxxxxxxxxx',
  clientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
  redirectUrl: '_com.domain.application_://oauth2/authorize',
  additionalParameters: {...}
  };
  and adding this in android/app/build.grade
  defaultConfig {
  ...
  manifestPlaceholders = [
  appAuthRedirectScheme: '_com.domain.application_'
  ]
  }

[kadikraman]

Hi 👋 Looks like the issue has been resolved here already, but just to reiterate:

The redirect scheme should be the redirect uri without the part that comes after :, so e.g if your redirect uri is com.myapp://oauth, the redirect scheme should be com.myapp. Hope this helps.

[ptc-wguo]

Issue is still found by following the naming convention of the redirect url (i.e. com.domain.application://oauth2/authorize)

    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-app-auth": "5.0.0",

"com.domain.application://oauth2/authorize" as redirect URL as registered in Azure portal
"com.domain.application" as appAuthRedirectScheme in build.gradle