Closed SaileshKumar closed 2 years ago
tannerabread
commented
2 years ago @SaileshKumar What platform are you experiencing this on? Android or iOS? And on emulators or physical devices? Or all of the above
Does the federatedSignIn with webview leave the app to open the browser or does it open an in-app browser?
Can you share how you are calling the method
SaileshKumar
commented
2 years ago It's any device (physical or emulator), and currently it's not opening any browser at all (we don't have any in-app browser built btw, it's basically just the WebView).
Web app triggers the flow like this:
<SocialLoginButton onClick={() => Auth.federatedSignIn({ provider: "Google" })}>
Mobile app is just a WebView like this:
<WebView
allowsBackForwardNavigationGestures
source={{...currentURL && { uri: currentURL.toString() }}}
onNavigationStateChange={(state) => {
console.log(state)
}}
/>In the logs I see that when I click Auth.federatedSignIn, it navigates first to:
https://
Then it comes back to
I think this has to do with that "&ruso-app=0" parameter. This is how our native app is telling the web app that it's from a native context, and maybe it's not playing nicely with the federatedSignIn code?
SaileshKumar
commented
2 years ago EDITED with new findings:
Ok the issue is that the URL constructor in my native code was adding a trailing slash to so the url generated from amplify ended with:
&code_challenge_method=S256/
instead of
&code_challenge_method=S256
Fixing this fixed the problem of the unsupported_code_challenge.
tannerabread
commented
2 years ago @SaileshKumar Did this completely unblock your issue?
SaileshKumar
commented
2 years ago @tannerabread
No not really, but from Amplify's perspective yes.
Currently I'm getting a disallowed user_agent from Google, I think it's not happy that the sign on is coming from a WebView and not the native app's browser. Was trying to see if there was a way to just pass the userAgent through WebView, and this removed the error but didn't result in a successful flow. Happy to provide more info here if you think there's a way to make it work successfully through WebView...
I tried detecting that it was our amplify auth url, and then opening in the native browser. This kinda works, but the problem is then after the user signs in, they're redirected to our site in the browser, not back in the app. Might have to explore building some kind of deeplinking or messaging system to re-open the app with the correct token.
tannerabread
commented
2 years ago I have not tried this yet with webview but I did just confirm that in a vanilla RN app federatedSignIn works with or without the in-app browser so I'm thinking it's something with the redirect. I will try to reproduce with webview soon.
What does your redirectSignIn/redirectSignOut look like in your aws-exports?
I couldn't find in the webview docs, but does it allow you to make a custom url from the package or do you have to go the deeplinking route?
tannerabread
commented
2 years ago @SaileshKumar I tried it with webview and got to where you are at with the disallowed_useragent.
To get it working, you just need to add the userAgent property to your WebView component.
<WebView
allowsBackForwardNavigationGestures
source={{ uri: 'http://localhost:3000' }}
onNavigationStateChange={(state) => console.log(state)}
userAgent={'Mozilla/5.0 (Linux; Android 10; SM-G975F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.106 Mobile Safari/537.36'}
/>Also just a note, GitHub copilot actually filled in the details for the userAgent so I'm not too sure if the versions will be compatible for you.
This worked in my testing, let me know if it works for you!
SaileshKumar
commented
2 years ago I had tried this, but maybe it was incompatible versions. It removed the disallowed_user_agent but I got into a weird state where it was doing the amplify redirect flow:
1) Our amplify auth url 2) Google sign in ---- this is where it diverged 3) Went to a youtube link like this: https://accounts.youtube.com/accounts/CheckConnection? 4) Then I got a blank screen with a console log error:
(m=base:107 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('[https://accounts.google.com ](https://accounts.google.com/)') does not match the recipient window's origin ('[https://accounts.youtube.com ](https://accounts.youtube.com/)').
This was from an iOS simulator. I will test it on other devices to see...
tannerabread
commented
2 years ago Mine was also on an iOS simulator. I realize that the userAgent shows an android but it still worked for me on iOS simulator. Check out my React app and the corresponding React Native Webview app to see how I configured these apps.
I'm not positive on this but it looks like a problem with google's MFA redirecting you to youtube to verify your identity and then maybe running into issues with the redirect there.
SaileshKumar
commented
2 years ago Hmm interesting. Yea it's weird if I click the amplify generated link in browser, everything works fine and I redirect back to my web app authenticated. I hit this youtube flow only from WebView
tannerabread
commented
2 years ago It sounds like something with the google MFA to me, and maybe it's picking up that you're on an iOS device and trying to send you to Google Prompts to authenticate. Check out more on google's 2FA here
I think it's safe to say though that this isn't an amplify problem and that it is possible to do a flow like this with Amplify/React -> React Native/WebView
tannerabread
commented
2 years ago I am going to close this issue as I think we are passed the Amplify block. React Native with WebView should be supported so please open another issue if you experience problems elsewhere so that we can better assist you.
We also have a discord server of Amplify developers and enthusiasts if you are interested.
Thank you!
Before opening, please confirm:
JavaScript Framework
React, React Native
Amplify APIs
Authentication
Amplify Categories
auth
Environment information
Describe the bug
We have a setup like this:
React Web app hosted by Amplify React Native mobile app that's just a webview wrapper around the web app.
The mobile app is basically a "dummy renderer", and the web app handles all the business logic and UI to make it feel mobile. This was basically our quickest path to getting a mobile beta app working.
So far everything has worked except for specifically Auth.federatedSignIn. Logging in with email + password works fine, but initiating a sign in flow with Google or Facebook results in an error unsupported_code_challenge_method.
Is there a way to get federatedSignIn to work from webview?
Expected behavior
Reproduction steps
Code Snippet
Log output
aws-exports.js
No response
Manual configuration
No response
Additional configuration
No response
Mobile Device
No response
Mobile Operating System
No response
Mobile Browser
No response
Mobile Browser Version
No response
Additional information and screenshots
No response