react-native-azure-auth icon indicating copy to clipboard operation
react-native-azure-auth copied to clipboard

android stuck on "continue", does nothing

Open jliukai opened this issue 10 months ago • 2 comments

Problem

When I attempt to sign in, and press "continue" it does nothing.

tBUI3

Setup

  • android physical device, React native Firebase.
  • iOS, Microsoft Sign in works fine with react-native-azure-auth lib.
  • code client id and redirect sources
    • client id is from the entra > app registration > overview > app client id
    • redirect uri is from entra > app registration > authentication > android card > redirect uri. - redirect uri looks something like msauth://com.myappname.dev/FAaX%2123454lc2OAabcdedgh6s%3D 9otMo
  • made sure the package name matches my app package name.
  • in the Entra auth page,
    • ID tokens (used for implicit and hybrid flows) and Access tokens (used for implicit flows) are checked.
    • Allow public client flows set to yes.
  • In firebase auth page, added my client id and secret to that microsoft sign in section. client id and secret are from entra app registrations.
// my code
import AzureAuth from 'react-native-azure-auth' // 1.8.9

const azureAuth = new AzureAuth({
 clientId: Config.MICROSOFT_CLIENT_ID,
 redirectUri: Config.MICROSOFT_REDIRECT_URI_ANDROID
})

const tokens = await azureAuth.webAuth.authorize({
  scope: 'email openid profile User.Read offline_access',
  prompt: 'select_account'
})
console.log('tokens') // <--- never gets to here

jliukai avatar Apr 17 '24 18:04 jliukai

Please check the issue #27 and give your feedback here 🙏🏻

vmurin avatar Apr 18 '24 11:04 vmurin

same @vmurin issue for me i have checked https://github.com/vmurin/react-native-azure-auth/issues/27 here is the intent filter<intent-filter android:label="redirect"> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="msauth" android:host="package-name" android:pathPrefix="/signature-hash" /> </intent-filter> in place of package-name i have used my real package name in place of signature-hash i have used my signature-hash

qwert251102 avatar May 14 '24 13:05 qwert251102

same problem :( @qwert251102

I tried different variants, one at a time, Androidmanifest.xml. none worked

following https://github.com/vmurin/react-native-azure-auth/issues/27 tried variant 2,3 and 4. failed.

# Androidmanifest.xml
 <intent-filter>
            <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />
            
            <!-- variant 0 start from author's docs. -->
            <data
              android:pathPrefix="/android/callback"
              android:host="${applicationId}"
              android:scheme="${applicationId}" 
            />
             <!-- variant 0  end -->
            

            <!-- variation 1 start -->
            <data            
              android:scheme="msauth" 
              android:host="com.<my package name>" 
              android:pathPrefix="/gYxxxxxxxxxxxxxZbo" 
            />
             <!-- variation 1 end-->
            
             <!-- variation 2 start -->
             <data
              android:host="auth"
              android:scheme="msauth://com.myapp.prod/gYxxxxxxxxxxxxxxZbo%3D" // from android redirect
            />
              <!-- variation 2 end -->
              
              <!-- variation 3 start -->
             <data
              android:host="auth"
              android:scheme="msal2b9xxxxxxxxxxxxxxxxxxxx2a3://auth"  // from mobile/desktop redirect
            />
              <!-- variation 3 end -->
              
                 <!-- variation 4 start -->
             <data
              android:host="auth"
              android:scheme="msal2b9xxxxxxxxxxxxxxxxxxxx2a3"  // from mobile/desktop redirect
            />
              <!-- variation 4 end -->
        </intent-filter>
// react native code
const azureAuth = new AzureAuth({ clientId, redirectUri })
   const tokens = await azureAuth.webAuth.authorize({
     scope: 'email openid profile User.Read offline_access',
     prompt: 'select_account'
   })

how i created my hash

  1. i tried both development via using debug.keystore and production from the google play store downloading deployment_cert.der
  2. from a mac, ie. using cli command: keytool -exportcert -alias androiddebugkey -keystore debug.keystore | openssl sha1 -binary | openssl base64 to generate the hash
  3. taking the hash in to get redirect uri
    • MS entra website > app registrations > and in the android section -> to get the redirect uri.
    • putting hash in androidmanifest, as seen above.
    • and redirecturi my react native code seen above.

entra auth setup

  1. Android section
    • has the sign hash and redirect uri
  2. mobile desktop application has the uris:
    • https://login.microsoftonline.com/common/oauth2/nativeclient
    • com..prod://com..prod/android/callback
    • msal2b98xxxxxxxxxxxxxxxxxxxxxx2a3://auth

I still have problem where "continue" button doesnt do anything. im sure its something wrong with redirect url or some config around that.

as a side note, iOS microsoft sign in with this library works fine.

jliukai avatar Jul 17 '24 23:07 jliukai

Hi @jliukai

please try following:

  1. remove android as a Platform from the App registration. It is actually enough to have "Mobile and Desktop applications" 2a. Use you the variant 4 but double check the URL spelling 2b. Or Use the variant as in the documentation
  android:pathPrefix="/android/callback"
  android:host="com..prod"
  android:scheme="com..prod" 

here supposed "com..prod" is your package name and it is correctly put in the Azure App registration as the callback URI

  1. please check the value of the redirectUri variable in the code const azureAuth = new AzureAuth({ clientId, redirectUri }) It should be exactly copy-pasted from Azure URIs list

The main rule: App registration callback URI === redirectUri variable === android:scheme + :// + android:host + android:pathPrefix

vmurin avatar Jul 18 '24 10:07 vmurin

it worked!! thank you thank you!!!

  • removed android section in Entra app registration.
  • redirect URI in new AzureAuth is com.<myapp.prod>://com.<myapp.prod>/android/callback
  • and the original instructed code in android manifest worked.
 # androidManifest.xml
 <data
              android:pathPrefix="/android/callback"
              android:host="${applicationId}"
              android:scheme="${applicationId}" 
            />

jliukai avatar Jul 18 '24 18:07 jliukai

@jliukai thank you for your feedback

vmurin avatar Jul 18 '24 19:07 vmurin