once I try to call signInWithPhoneNumber() on flutter web, I get an error:
TypeError: Cannot read properties of undefined (reading 'settings')
at new RecaptchaVerifier (https://www.gstatic.com/firebasejs/9.9.0/firebase-auth.js:8390:43)
at RecaptchaVerifier.new (http://localhost:60687/packages/firebase_auth_web/src/interop/auth.dart.lib.js:863:233)
at new firebase_auth_web_recaptcha_verifier_factory.RecaptchaVerifierFactoryWeb.new (http://localhost:60687/packages/firebase_auth_web/src/firebase_auth_web_recaptcha_verifier_factory.dart.lib.js:175:49)
at firebase_auth_web_recaptcha_verifier_factory.RecaptchaVerifierFactoryWeb.__.delegateFor (http://localhost:60687/packages/firebase_auth_web/src/firebase_auth_web_recaptcha_verifier_factory.dart.lib.js:87:14)
at RecaptchaVerifier.new (http://localhost:60687/packages/firebase_auth/firebase_auth.dart.lib.js:643:94)
at auth_service.AuthService.new.signInUp (http://localhost:60687/packages/qew_app/page_models/welcome_page_model.dart.lib.js:12180:98)
at signInUp.next (<anonymous>)
at runBody (http://localhost:60687/dart_sdk.js:40660:34)
at Object._async [as async] (http://localhost:60687/dart_sdk.js:40691:7)
at auth_service.AuthService.new.signInUp (http://localhost:60687/packages/qew_app/page_models/welcome_page_model.dart.lib.js:12179:20)
at logister_page_model.LogisterPageModel.new.logister (http://localhost:60687/packages/qew_app/page_models/welcome_page_model.dart.lib.js:9060:65)
at logister.next (<anonymous>)
at runBody (http://localhost:60687/dart_sdk.js:40660:34)
at Object._async [as async] (http://localhost:60687/dart_sdk.js:40691:7)
at logister_page_model.LogisterPageModel.new.logister (http://localhost:60687/packages/qew_app/page_models/welcome_page_model.dart.lib.js:9055:20)
at logister_widgets.PhoneNumberCard.new.<anonymous> (http://localhost:60687/packages/qew_app/page_models/welcome_page_model.dart.lib.js:9318:23)
at logister_widgets._PhoneNumberCardState.new.formSubmit (http://localhost:60687/packages/qew_app/ui/views/pages/logister/logister_widgets.dart.lib.js:1543:12)
at http://localhost:60687/packages/qew_app/ui/views/pages/logister/logister_widgets.dart.lib.js:1547:1021
at [_finalizeEditing] (http://localhost:60687/packages/flutter/src/widgets/title.dart.lib.js:36779:9)
at editable_text.EditableTextState.new.performAction (http://localhost:60687/packages/flutter/src/widgets/title.dart.lib.js:36652:39)
at text_input.TextInput.__._handleTextInputInvocation (http://localhost:60687/packages/flutter/src/services/text_formatter.dart.lib.js:2373:66)
at _handleTextInputInvocation.next (<anonymous>)
at runBody (http://localhost:60687/dart_sdk.js:40660:34)
at Object._async [as async] (http://localhost:60687/dart_sdk.js:40691:7)
at [_handleTextInputInvocation] (http://localhost:60687/packages/flutter/src/services/text_formatter.dart.lib.js:2288:20)
at OptionalMethodChannel._handleAsMethodCall (http://localhost:60687/packages/flutter/src/services/restoration.dart.lib.js:1599:57)
at _handleAsMethodCall.next (<anonymous>)
at runBody (http://localhost:60687/dart_sdk.js:40660:34)
at Object._async [as async] (http://localhost:60687/dart_sdk.js:40691:7)
at [_handleAsMethodCall] (http://localhost:60687/packages/flutter/src/services/restoration.dart.lib.js:1596:20)
at http://localhost:60687/packages/flutter/src/services/restoration.dart.lib.js:1593:126
at http://localhost:60687/packages/flutter/src/services/restoration.dart.lib.js:6148:31
at Generator.next (<anonymous>)
at runBody (http://localhost:60687/dart_sdk.js:40660:34)
at Object._async [as async] (http://localhost:60687/dart_sdk.js:40691:7)
at http://localhost:60687/packages/flutter/src/services/restoration.dart.lib.js:6145:82
at Object.invoke2 (http://localhost:60687/dart_sdk.js:191758:7)
at ui._ChannelCallbackRecord.new.invoke (http://localhost:60687/dart_sdk.js:133047:15)
at ui._Channel.new.push (http://localhost:60687/dart_sdk.js:133118:54)
at ui.ChannelBuffers.new.push (http://localhost:60687/dart_sdk.js:133209:19)
at _engine.EnginePlatformDispatcher.__.invokeOnPlatformMessage (http://localhost:60687/dart_sdk.js:171990:27)
at _engine.TextEditingChannel.new.performAction (http://localhost:60687/dart_sdk.js:186458:49)
at http://localhost:60687/dart_sdk.js:186537:24
at _engine.GloballyPositionedTextEditingStrategy.new.maybeSendAction (http://localhost:60687/dart_sdk.js:178127:40)
at Object._checkAndCall (http://localhost:60687/dart_sdk.js:5279:16)
at Object.dcall (http://localhost:60687/dart_sdk.js:5284:17)
at HTMLInputElement.<anonymous> (http://localhost:60687/dart_sdk.js:109003:100)
I'm doing the most basic initialization:
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
which is generated using flutterfire, and on index.html:
<script type="module" src="https://www.gstatic.com/firebasejs/9.6.10/firebase-auth.js"></script>
<script type="module" src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
<script type="module" src="https://www.gstatic.com/firebasejs/9.6.10/firebase-functions.js"></script>
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-analytics.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "secret",
authDomain: "secret",
projectId: "secret",
storageBucket: "secret",
messagingSenderId: "secret",
appId: "secret",
measurementId: "secret"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
}
I tried to change the versions to newer ones(even though I'm using older ones deliberately) and a lot of different configuration, and nothing worked:
js example
as you can see in the loaded js module, the authExtern is unidentified.
git issues addressing the subject:
https://github.com/firebase/flutterfire/issues/9123
https://github.com/firebase/flutterfire/issues/9124
if someone can think on how to bypass this error, it would be very helpful.
Related
My app is using the image_picker plugin to let the user upload a profile picture from his phone and on Android everything works as expected.
The problem is that when I try to run the same code on web, it throws me the following error:
Error: AppwriteException: null, On web `bytes` is required (0)
at Object.throw_ [as throw] (http://localhost:42231/dart_sdk.js:5080:11)
at new input_file.InputFile.new (http://localhost:42231/packages/appwrite/src/input_file.dart.lib.js:79:17)
at database.DatabaseService.new.uploadProfilePic (http://localhost:42231/packages/presents/services/database.dart.lib.js:299:104)
at uploadProfilePic.next (<anonymous>)
at runBody (http://localhost:42231/dart_sdk.js:40660:34)
at Object._async [as async] (http://localhost:42231/dart_sdk.js:40691:7)
at database.DatabaseService.new.uploadProfilePic (http://localhost:42231/packages/presents/services/database.dart.lib.js:297:20)
at http://localhost:42231/packages/presents/screens/profile/show_profilepic_menu.dart.lib.js:262:33
at Generator.next (<anonymous>)
at http://localhost:42231/dart_sdk.js:40641:33
at _RootZone.runUnary (http://localhost:42231/dart_sdk.js:40511:59)
at _FutureListener.thenAwait.handleValue (http://localhost:42231/dart_sdk.js:35438:29)
at handleValueCallback (http://localhost:42231/dart_sdk.js:35999:49)
at Function._propagateToListeners (http://localhost:42231/dart_sdk.js:36037:17)
at _Future.new.[_completeWithValue] (http://localhost:42231/dart_sdk.js:35872:23)
at async._AsyncCallbackEntry.new.callback (http://localhost:42231/dart_sdk.js:35906:35)
at Object._microtaskLoop (http://localhost:42231/dart_sdk.js:40778:13)
at _startMicrotaskLoop (http://localhost:42231/dart_sdk.js:40784:13)
at http://localhost:42231/dart_sdk.js:36261:9
I don't know if the problem is with the image_picker plugin or with AppWrite (the backend server), but since when I run the code in Debug mode it stops in the image_picker_for_web.dart file I'd guess the problem is with the former.
Actually, it stops on line 274 where it returns an XFile without the bytes parameter (see the code below), so maybe this is the problem? How can I fix that?
(the code of image_picker_for_web.dart I was talking about, from line 273)
if (!_completer.isCompleted && files != null) {
_completer.complete(files.map((html.File file) {
return XFile(
html.Url.createObjectUrl(file),
name: file.name,
length: file.size,
lastModified: DateTime.fromMillisecondsSinceEpoch(
file.lastModified ?? DateTime.now().millisecondsSinceEpoch,
),
mimeType: file.type,
);
}).toList());
}
Ok, after some further debugging I found out the problem was not with the image_picker package but with uploading the picked image on AppWrite storage.
Initially, I was uploading it with a code like this one:
Future<void> uploadProfilePic(XFlie file) async {
File res = await _storage.createFile(
bucketId: Constants.profilePicsBucketID,
fileId: 'unique()',
file: InputFile(
path: file.path,
filename: '$_uid.${file.path.split('.').last}',
),
read: ['role:all'],
);
}
And then I solved my problem passing the createFile function also a bytes parameter. So my final code is:
Future<void> uploadProfilePic(XFlie file) async {
List<int> fileBytes = await file.readAsBytes();
File res = await _storage.createFile(
bucketId: Constants.profilePicsBucketID,
fileId: 'unique()',
file: InputFile(
path: file.path,
bytes: fileBytes,
filename: '$_uid.${file.path.split('.').last}',
),
read: ['role:all'],
);
}
I'm using the new experimental LockCachingAudioSource with just_audio. It seems to work on Android and iOS but when I run my app on the web I get the following uncaught error:
Error: MissingPluginException(No implementation found for method getTemporaryDirectory on channel plugins.flutter.io/path_provider)
at Object.throw_ [as throw] (http://localhost:49168/dart_sdk.js:5041:11)
at platform_channel.MethodChannel.new._invokeMethod (http://localhost:49168/packages/flutter/src/services/system_channels.dart.lib.js:943:21)
at _invokeMethod.next (<anonymous>)
at http://localhost:49168/dart_sdk.js:37403:33
at _RootZone.runUnary (http://localhost:49168/dart_sdk.js:37274:59)
at _FutureListener.thenAwait.handleValue (http://localhost:49168/dart_sdk.js:32530:29)
at handleValueCallback (http://localhost:49168/dart_sdk.js:33057:49)
at Function._propagateToListeners (http://localhost:49168/dart_sdk.js:33095:17)
at _Future.new.[_completeWithValue] (http://localhost:49168/dart_sdk.js:32943:23)
at async._AsyncCallbackEntry.new.callback (http://localhost:49168/dart_sdk.js:32964:35)
at Object._microtaskLoop (http://localhost:49168/dart_sdk.js:37526:13)
at _startMicrotaskLoop (http://localhost:49168/dart_sdk.js:37532:13)
at http://localhost:49168/dart_sdk.js:33303:9
Here is my code:
_playlist = ConcatenatingAudioSource(
children: mediaItemList
.where((item) => item.extras?['url'] is String)
.map((item) {
final String url = item.extras?['url'];
return LockCachingAudioSource(Uri.parse(url));
}).toList(),
);
await _player.setAudioSource(_playlist);
I found a solution so I am posting it below.
Currently just_audio doesn't support LockCachingAudioSource on the web. The solution is to use one of the supported AudioSources when running on on the web:
if (kIsWeb) {
return AudioSource.uri(Uri.parse(url));
}
return LockCachingAudioSource(Uri.parse(url));
I am developing a website with flutter web.
on this web site there is a page to directly send an email from the site.
To do this I thought about using Backendless:
https://backendless.com/docs/flutter/email_settings.html
But when I send a simple email it gives me the following problem.
Error: PlatformException(error, Expected a value of type '(dynamic) => dynamic', but got one of type '(Object) => Object', null, null)
at Object.throw_ [as throw] (http://localhost:61993/dart_sdk.js:5032:11)
at StandardMethodCodec.decodeEnvelope (http://localhost:61993/packages/flutter/src/services/system_channels.dart.lib.js:791:19)
at MethodChannel._invokeMethod (http://localhost:61993/packages/flutter/src/services/system_channels.dart.lib.js:955:47)
at _invokeMethod.next (<anonymous>)
at http://localhost:61993/dart_sdk.js:37210:33
at _RootZone.runUnary (http://localhost:61993/dart_sdk.js:37081:59)
at _FutureListener.thenAwait.handleValue (http://localhost:61993/dart_sdk.js:32337:29)
at handleValueCallback (http://localhost:61993/dart_sdk.js:32864:49)
at Function._propagateToListeners (http://localhost:61993/dart_sdk.js:32902:17)
at _Future.new.[_completeWithValue] (http://localhost:61993/dart_sdk.js:32750:23)
at async._AsyncCallbackEntry.new.callback (http://localhost:61993/dart_sdk.js:32771:35)
at Object._microtaskLoop (http://localhost:61993/dart_sdk.js:37333:13)
at _startMicrotaskLoop (http://localhost:61993/dart_sdk.js:37339:13)
at http://localhost:61993/dart_sdk.js:33110:9
Below is the code for sending the email
#override
void initState() {
super.initState();
Backendless.initWebApp('**APP_ID**', '**JS_ID**');
}
Future<void> _sendMail() async {
Backendless.messaging.sendTextEmail("Reminder", "Email text body",
["my_email#gmail.com"]).then((response) {
print("Email has been sent");
});
}
in the backendless e-mail setting everything is set correctly.
I am using a previously created firebase mobile application that is fully functioning with firebase at the mobile level, however, when I attempt to run it as a chrome page it doesn't seem to work, and when compiling triggers the error listed in the title. Flutter Doctor displays everything is working correctly and that chrome is a listed device. When attempting to build the web page a blank screen appears in a chrome window.
TypeError: dart.global.firebase.analytics is not a function
at Object.analytics$ [as analytics] (http://localhost:59823/packages/firebase/src/top_level.dart.lib.js:114:102)
at new firebase_analytics_web.FirebaseAnalyticsWeb.new (http://localhost:59823/packages/firebase_analytics_web/firebase_analytics_web.dart.lib.js:70:64)
at Function.registerWith (http://localhost:59823/packages/firebase_analytics_web/firebase_analytics_web.dart.lib.js:29:82)
at Object.registerPlugins (http://localhost:59823/packages/reminder_application/generated_plugin_registrant.dart.lib.js:23:49)
at main (http://localhost:59823/web_entrypoint.dart.lib.js:34:35)
at main.next (<anonymous>)
at runBody (http://localhost:59823/dart_sdk.js:39260:34)
at Object._async [as async] (http://localhost:59823/dart_sdk.js:39291:7)
at main$ (http://localhost:59823/web_entrypoint.dart.lib.js:33:18)
at http://localhost:59823/main_module.bootstrap.js:19:10
at Array.forEach (<anonymous>)
at window.$dartRunMain (http://localhost:59823/main_module.bootstrap.js:18:32)
at <anonymous>:1:8
at Object.runMain (http://localhost:59823/dwds/src/injected/client.js:8824:21)
at http://localhost:59823/dwds/src/injected/client.js:22712:19
at _wrapJsFunctionForAsync_closure.$protected (http://localhost:59823/dwds/src/injected/client.js:3850:15)
at _wrapJsFunctionForAsync_closure.call$2 (http://localhost:59823/dwds/src/injected/client.js:11062:12)
at Object._asyncStartSync (http://localhost:59823/dwds/src/injected/client.js:3814:20)
at main__closure1.$call$body$main__closure (http://localhost:59823/dwds/src/injected/client.js:22724:16)
at main__closure1.call$1 (http://localhost:59823/dwds/src/injected/client.js:22651:19)
at StaticClosure._rootRunUnary [as call$2$5] (http://localhost:59823/dwds/src/injected/client.js:4184:16)
at _CustomZone.runUnary$2$2 (http://localhost:59823/dwds/src/injected/client.js:12435:39)
at _CustomZone.runUnaryGuarded$1$2 (http://localhost:59823/dwds/src/injected/client.js:12382:14)
at _ControllerSubscription._sendData$1 (http://localhost:59823/dwds/src/injected/client.js:11958:19)
at _DelayedData.perform$1 (http://localhost:59823/dwds/src/injected/client.js:12147:59)
at _PendingEvents_schedule_closure.call$0 (http://localhost:59823/dwds/src/injected/client.js:12196:14)
at Object._microtaskLoop (http://localhost:59823/dwds/src/injected/client.js:4022:24)
at StaticClosure._startMicrotaskLoop (http://localhost:59823/dwds/src/injected/client.js:4028:11)
at _AsyncRun__initializeScheduleImmediate_internalCallback.call$1 (http://localhost:59823/dwds/src/injected/client.js:10931:9)
at invokeClosure (http://localhost:59823/dwds/src/injected/client.js:1258:26)
at MutationObserver.<anonymous> (http://localhost:59823/dwds/src/injected/client.js:1277:18)```
You need to follow the guide for web installation before expecting it work.
Add the following to the body of your index.html:
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-analytics.js"></script>
<script>
var firebaseConfig = {
apiKey: "...",
authDomain: "[YOUR_PROJECT].firebaseapp.com",
databaseURL: "https://[YOUR_PROJECT].firebaseio.com",
projectId: "[YOUR_PROJECT]",
storageBucket: "[YOUR_PROJECT].appspot.com",
messagingSenderId: "...",
appId: "1:...:web:...",
measurementId: "G-...",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
You need to add the script for each SDK you use. The above just shows the basics for analytics.
While i am running ionic facebook firebase app on browser i got error as
HomePage.html:8 ERROR TypeError: Object(...) is not a function
at Facebook.login (index.js:27)
at HomePage.webpackJsonp.230.HomePage.loginWithFacebook (home.ts:20)
at Object.eval [as handleEvent] (HomePage.html:8)
at handleEvent (core.js:13589)
at callWithDebugContext (core.js:15098)
at Object.debugHandleEvent [as handleEvent] (core.js:14685)
at dispatchEvent (core.js:10004)
at core.js:10629
at HTMLButtonElement.<anonymous> (platform-browser.js:2628)
at t.invokeTask (polyfills.js:3)
my home.ts file is
loginWithFacebook(): Promise<any> {
return this.facebook.login(['email'])
.then( response => {
const facebookCredential = firebase.auth.FacebookAuthProvider
.credential(response.authResponse.accessToken);
firebase.auth().signInWithCredential(facebookCredential)
.then( success => {
alert("Firebase success: " + JSON.stringify(success));
});
}).catch((error) => { console.log(error) });
}
my home.html file is
<ion-content padding>
<button ion-button (click)="loginWithFacebook()">Login With Facebook</button>
</ion-content>
I am really stuck here....