Unable to get location or chose location in flutter web enabled application,where as it is working on mobile phone - flutter

I have built a firebase enabled flutter application. My application is working fine of android smart phone where as the application is unable to get the location of my desktop or laptop while launching the web enabled flutter application.
I have included all the required firebase configuration in index.html etc already.
Please check
<meta name="google-signin-client_id" content="533276524723-u0fdq5kn0fit8cj9vpvjcg6agt0ribs9.apps.googleusercontent.com">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="flutter_multivendor">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-analytics.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRFWubrqF6aeMRbK9jIMKoU0I3odIarB4"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "AIzaSyCRFWubrqF6aeMRbK9jIMKoU0I3odIarB4",
authDomain: "restaurant-4360f.firebaseapp.com",
projectId: "restaurant-4360f",
storageBucket: "restaurant-4360f.appspot.com",
messagingSenderId: "533276524723",
appId: "1:533276524723:web:e7ff59fdf36651806230c6",
measurementId: "G-Z6GZGF2MGW"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
I am attaching the screenshots of the errors as below[

Related

(flutter web) TypeError: Cannot read properties of undefined (reading 'auth')

I have a flutter web project and I use firebase services, The project was working perfectly until I add the package "cloud_functions 3.3.7", a problem appaired in firebase auth.
TypeError: Cannot read properties of undefined (reading 'auth')
I tried to remove the package "cloud_functions 3.3.7" and the problem is still the same.
I tried to add these packages in index.html.
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-analytics.js"></script>
it shows this error
FirebaseError: Firebase: firebase.auth() takes either no argument or a Firebase App
instance. (app/invalid-app-argument).
code to init Firebase
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
dependencies:
firebase_core: ^1.13.1
firebase_analytics: ^9.1.2
firebase_auth: ^3.3.10
cloud_firestore: ^3.1.10
cloud_functions: ^3.3.7
firebase_storage: ^10.2.9
I create a new project flutter and I replace the files(lib, assets,..) and add packages in pubspec.yaml and it works perfectly and link it with firebase.
dart pub global activate flutterfire_cli
flutterfire configure --project=your_project_id
it's not a perfect solution but it still works.

"Uncaught ReferenceError: firebase is not defined". How to define firebase and get beyond blank screen in Chrome?

I am integrating Flutter web into an existing app. The existing app functions as expected on iOS and Android. The app utilizes FlutterFire. With the below, when running to Chrome device I get a blank white screen.
pubspec.yaml
environment:
sdk: '>=2.6.0 <3.0.0'
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
firebase: ^7.3.0
firebase_core: ^0.5.0
cloud_firestore: ^0.14.0+2
firebase_analytics: ^6.0.0
firebase_auth: ^0.18.0+1
index.html
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.20.-/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.20.-/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.-/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.-/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "myKeyHere",
authDomain: "myDomainHere",
databaseURL: "myURLHere",
projectId: "myProjIDHere",
storageBucket: "myBucketHere",
messagingSenderId: "myMessageID",
appId: "myAppID",
measurementId: "myMeasID"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script defer src="main.dart.js" type="application/javascript"></script>
</body>
This results in the following error in the VSCode console:
TypeError: Cannot read property 'app' of undefined
at Object.app$ [as app] (http://localhost:58913/packages/firebase/src/top_level.dart.lib.js:78:89)
at new cloud_firestore_web.FirebaseFirestoreWeb.new (http://localhost:58913/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:755:57)
at Function.registerWith (http://localhost:58913/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:671:73)
at Object.registerPlugins ...
and the following error in the Chrome console:
Uncaught ReferenceError: firebase is not defined
at localhost/:50
:58913/packages/firebase/src/top_level.dart.lib.js:78 Uncaught (in promise) TypeError: Cannot read property 'app' of undefined
at Object.app$ [as app] (:58913/packages/firebase/src/top_level.dart.lib.js:78)
at new cloud_firestore_web.FirebaseFirestoreWeb.new (:58913/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:755)
at Function.registerWith (:58913/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:671)
at Object.registerPlugins (:58913/packages/carlinehound/generated_plugin_registrant.dart.lib.js:23)
at main (:58913/web_entrypoint.dart.lib.js:29)
at main.next (<anonymous>)
I have used both the Future Builder and Streambuilder FlutterFire app initialization methods. I have also simply initialized in main(). All of these result in the same error.
The problem obviously is that firebase is not defined. My question is how do I define firebase?
You didn't specify a full version number when adding the JS SDK in your index.html
7.20.- is not a real version, it's just a placeholder for you to specify the one you want to use.
You can check this by going to the src in your browser. You'll see that the srcs you currently have will not exist. The ones I show below will show a bunch of JS.
If you want to use the latest version, that would be 7.20.0.
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-auth.js"></script>

Blank page running Angular 9 app on ios 13

I have issues loading my Angular 9 app on iPhone, it loads in all desktop browsers and android devices, just got an blank page in iPhone. It raises an promiseReactionJob exception in the polyfills-es2015 file .. running the lasted iOS version (13.4.1). I see the in the index.html, the scripts are loaded as expected.
<script src="runtime-es2015.c741d58c5f0062b819ef.js" crossorigin="use-credentials" type="module"> </script>
<script src="runtime-es5.c741d58c5f0062b819ef.js" crossorigin="use-credentials" nomodule defer></script>
<script src="polyfills-es5.1e423cd55d051bbc2156.js" crossorigin="use-credentials" nomodule defer></script>
<script src="polyfills-es2015.367a122fcc429806387a.js" crossorigin="use-credentials" type="module"></script>
<script src="main-es2015.80003c523586b89abce8.js" crossorigin="use-credentials" type="module"></script>
<script src="main-es5.80003c523586b89abce8.js" crossorigin="use-credentials" nomodule defer></script>
It is production build: ng build --prod
The error below:
Or, disabling the --prod
The issue was due Safari/iOS doesn't implement addEventListener/RemoveEventListener, so the app called an undefined method and raised the exception. My fix was to add an iOS check and call addListener and removeListener only on iOS as addEventListener/RemoveEventListener were not in fem2015/layout.js loaded by Safari on iOS (tried iOS >= 12).

Why chrome ignores X-frame-option: sameorigin?

Chrome on Mac is ignoring X-frame-options header for my site.
I have set x-frame-options : sameorigin
I am using Google Chrome is up to date
Version 74.0.3729.157 (Official Build) (64-bit).
Chrome ignores header and opens site in iframe.
Firefox and safari is blocking site to be open in frame.
<head>
<meta charset="UTF-8">
<title>i Frame</title>
</head>
<body>
<h3>This is clickjacking vulnerable</h3>
<iframe src="https://www.example.com/" frameborder="2 px" height="500px" width="500px"></iframe>
</body>
</html>```

Login with JS and then using PHP SDK (Facebook)

I'm using this code to login my website via facebook:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'MYAPPID', cookie:true,
status:true, xfbml:true
});
</script>
<fb:login-button>Login with Facebook</fb:login-button>
Its working well and I see my application on facebook.com/editapps.php, but then when I want to start using PHP SDK I see that I didn't login. If I login via PHP SDK then I see that I logged in.. What is the problem here? Thank you.
What version of PHP SDK are you using? Because the latest 3.0.1 isn't compatible yet with javascript SDK. So you would need to downgrade to version 2 of the SDK until they will update the Javascript SDK too.
More info about this here: http://developers.facebook.com/blog/post/503/