Flutter web - webview ERR_BLOCKED_BY_RESPONSE - flutter

Im trying to create an discord auth on my flutter website using oauth2, webview_flutter & webview_flutter_web.
After click connect button it should redirect user to discord login site, but then this error pops out
Error pops out also on other browsers like chrome or edge.
I was trying to run it in different project, but on android this time and it works fine. So the error must be related to the web version.
I read somewhere that it might be related to iFrame, but it wasn't really explained there.
Any ideas what this error might be related to or how to fix it?
this also happens with other websites.

Related

Capacitor Browser issue with Redirect

The Capacitor Browser is having issues with web redirects - with different behaviors in iOS and Android. I think this is a very buggy plugin, but maybe I'm missing something...
My Ionic app uses the Capacitor Browser plugin to present a Federation Login page. There is an "authentication URL" returned upon successful SSO login - or if the user is already logged in then there is an immediate "authentication URL" redirect.
Here's what I am seeing...
iOS: for a first time login, the web redirect works and deep links back into my app -- no problem here. However, if SSO is active, then there is an immediate redirect which the Browser ignores. I can see the URL change, and it works if I open it in a separate mobile web browser.
Android: for a first time login, the web redirect is ignored and the user is left stuck in the browser. Again, if I copy the URL to a separate web browser then it deep links back into the app.
Has anyone done this successfully or have any workarounds? I've tried the "Cordova" and "Awesome" InAppBrowser versions of this plugin, and they don't redirect at all (although they have a bit more control over closing the browser, etc.).
I encountered a problem like this on Android lately,
The in app redirection was down on Android 12, users where locked on a white screen where we normally get the token in the url and redirect in app.
In my case it was related to this :
https://developer.android.com/training/app-links/verify-site-associations?authuser=2
The chrome browser was trying to check this file to verify the hash of the app to perform the redirection but it was unavailable due to internal network configuration, so it was locked.
This check seems to append on Android 12 only, and needed a re-install of the app on users devices (cache on in app browser ?).
Hope this can help.
(Ionic 6 Capacitor)

Is it possible to for an Ionic(5) Capacitor(3) application to complete an Open ID (Auth0) flow?

I am struggling to utlise the angular-auth-oidc-client to add OIDC workflows into my Ionic app (android), although I feel the issues are more Capacitor so not sure that the library is the issue. There are numerous (old) posts on Google of people who have had similar problems, so I'm trying to ascertain the current state of play. I can:
By utilising a custom android scheme in my AndroidManifest, and an 'appUrlOpen' listener in app.component my OIDC login page loads in the Chrome browser on the device, and then returns to the Ionic app and opens the correct app page. Unfortunately because I've opened the login in Chrome it hangs around in the background with the username and password populated. I've no handle to it to close it, and the Capacitor plugins don't help me here.
Alternatively, I can add my ID Provider domain into 'AllowNavigation' in capacitor.config.json. This opens my login page in the app's webview, begins the redirect on successful login but fails (hangs) because Capacitor is not loaded when it attempts Window.Capacitor.triggerevent calls.
This is probably classed as a poor question, and I appreciate that it is light on code, but I'm interested in whether anyone has actually managed to do this successfully, as there are so many dead ends on google and github of people who've given up!
Yes it is possible to complete an Open ID Flow on ionic with capacitor.
You need a capacitor plugin to do so, ionic provides an own payed plugin (https://ionic.io/docs/auth-connect), other alternatives exist.
angular-auth-oidc-client out of the box works only on browser, not on iOS or Android. It seems that some adoption can be made, see https://github.com/damienbod/angular-auth-oidc-client/issues/807.

Flutter Instagram WebView renders incorrectly

I recently built and deployed my new personal website using Flutter Web. The website loads completely normally on any desktop or mobile browser. However, when launching the website on Instagram's own web browser on iOS, the widget rendering is completely wrong.
Expected Website UI
Error Website UI on Instagram WebView
I don't know if this would be an Instagram issue or a Flutter issue, but all other websites seem to be running normally on instagram browser. The new Flutter website seems to run fine on the WebView window from Facebook as well.
I even tried deploying the Flutter Demo Home Page, and similar errors happened on the Instagram browser as well: the top and bottom gets completely cut off.
Error Screenshot 1
Additionally, it seems as if the website had been stuck on loading:
Error Screenshot 2
All errors go away on second launch for some reason, after I exit background and re-opened Instagram.
Has anyone encountered similar issues? I really don't know if there are errors with my code or it is just a bug with either Instagram or Flutter.

Instagram In-App Browser breaks Flutter Web Page

We used Flutter Web to develop our website and we encounter one issue only in the browser integrated in the Instagram app. If a user opens a link to our website in Instagram, the In-App-Browser shows the page totally strange (see https://i.stack.imgur.com/5geUn.png for the broken version and see here https://i.stack.imgur.com/2eDwb.png for how it should look like). This only happens on iOS and only if you open the link for the first time.
We have tried changing the web renderer but this introduces other layout issues (also only Instagram). If the user is reloading the page it fixes the problem, but if we do it programmatically with html.window.location.reload() it does not change anything. Do you have any idea what the problem could be or what else we could try to fix this problem? Thank you!

Blank popup with FB connect

I've implemented the facebook connect using Javascript SDK. The authentication works fine when the user I'm trying to authenticate is not logged into facebook. But when he's already logged into facebook the login popup never closes. The url of the popup starts with "http://static.ak.fbcdn.net/connect/xd_proxy.php#cb=....."
This happens both on Firefox 3.5 and on Chrome.
Any suggestions? Do I need to set any extra parameters while connecting to Facebook?
I've encountered the same error today, with my year old implementation. I've added the channelUrl tag to FB.Init(), without any luck; so I started the login procedure from scratch with the js sdk, oauth2 enabled: with some minor changes, everything started to work misteriously again. I've run my pages through the Facebook debug tool as well, it suggested some changes as well.
To sum up: basically, if Facebook Connect stops working, upgrade your code according to the latest documentation avaliable.
No special parameters are needed. This is probably a browser problem. Maybe you have a setting/plugin somewhere that does not allow Javascript to close a window for you.
The easiest way to test this is to post a link to your implementation so that other people (with other browser setups) can give it a try.