I am trying to connect Firestore to my web project but it gives me "no firebase app has been created"
this is the way I used the script in the index file
<script src="https://www.gstatic.com/firebasejs/9.6.8/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.8/firebase-firestore.js"></script>
<script>
var firebaseConfig = {
apiKey: "-------cnto--------------",
authDomain: "---------.firebaseapp.com",
projectId: "---------",
storageBucket: "---------.appspot.com",
messagingSenderId: "---------48",
appId: "1:---------48:web:---------89"
};
firebase.initializeApp(firebaseConfig);
</script>
and this is the way I initialize the app
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
when I added await and async it waits forever and gives me a white screen like there is nothing to wait for
Setup the FlutterFire CLI and then run this in your terminal:
flutterfire configure
This tool is awesome and it makes it so you never have to touch native files again when setting up Firebase.
Related
Trying to:
Authorize via facebook login on web
Problem:
I get the error: FB.login() called before FB.init().
What I'm doing:
I'm using package flutter_facebook_auth: ^5.0.6 for my flutter project. It works fine with Android and iOS, but fails on web.
The main.dart-file initialises facebook before I call the login, so I'm not sure what I need to do. This is my main-file:
void main() async {
WidgetsFlutterBinding.ensureInitialized();
if(kIsWeb){
await FacebookAuth.i.webAndDesktopInitialize(
appId: "provided in the real code",
cookie: true,
xfbml: true,
version: "v14.0"
);
}
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const ProviderScope(child: App()));
}
.
.
.
I am having issues with Flutter web when I use await statement,
void main() async {
//debugPaintSizeEnabled = true;
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
this will not display anything on the browser and throws and error:
ChromeProxyService: Failed to evaluate expression 'title': InternalError: Expression evaluation in async frames is not supported. No frame with index 39..
I am stuck :(
debugging testing nothing worked
Run flutter channel stable followed by flutter upgrade --force
When using Firebase, you need to initalize it with options for the specific platform that you are using. Here goes and example on how to configure it for Flutter Web:
import 'package:firebase_core/firebase_core.dart' show FirebaseOptions;
void main() async {
//debugPaintSizeEnabled = true;
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options = FirebaseOptions(
apiKey: 'YOUR API KEY',
appId: 'YOUR APP ID',
messagingSenderId: 'YOUR MESSAGING SENDER ID',
projectId: 'YOUR PROJECT NAME',
authDomain: 'YOUR AUTH DOMAIN (IF YOU HAVE)',
databaseURL: 'YOUR DATABASE URL (IF YOU USE FIREBASEDATABASE)',
storageBucket: 'YOUR STORAGE BUCKET',
)
);
runApp(MyApp());
}
All this information is available on your Firebase Project Console, just search for it. Hope it helps!
I have recently upgraded my flutter project from Flutter Beta to Flutter Stable 3.3.8.
after upgrading, I also upgraded all the firebase packages to the latest version.
Due to this upgrade on my config function, there is a new parameter of navigatorKey.
So I included that like this
class NavKey{
static final navKey = GlobalKey<NavigatorState>();
}
static final Config config = Config(
navigatorKey: NavKey.navKey, //new parameter of navigatorKey
tenant: "xx-3066-xx-xx-xx",
clientId: "xx-ad66-xx-a6e6-xx",
scope: "api://xx-xx-422a-a6e6-xx/xx",
redirectUri:
"xx://com.example.xx/xx%xx%3D");
Now If I run my project and enter my email id and hit enter it shows this error
TypeError: Cannot read properties of undefined (reading 'init')
on my void main() I have included all my Firebase initialize like this
Future<void> main() async {
// await dotenv.load();
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: const FirebaseOptions(
apiKey: "xxx-xx",
authDomain: "xx-xxx.firebaseapp.com",
databaseURL: "https://xxx-xx-default-xxx.xx.com",
projectId: "xxx-xxx",
storageBucket: "xxx-xx.appspot.com",
messagingSenderId: "xxx",
appId: "1:xx:web:xxx3d75b63xxxxe9",
measurementId: "G-xxxx")
);
runApp(const MyApp()
/* MaterialApp(//
home: MyApp())*/
);
}
on my index.html I have also included this script as I am running my project on flutter web
<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>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-functions.js"></script>
These are my all errors
Well, I am not able to find the solution for the latest package.
That's why I rolled back my aad_oauth from ^0.4.0 to ^0.3.0 where it doesn't asked for navigatorKey
Config(
navigatorKey: NavKey.navKey,)
**I am trying to update the data using firestore, it works fine on the phone and run web but it does not work when I do a build and upload file to my server --
index.html >> **
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.9.3/firebase-app.js";
import { getFirestore, collection, getDocs } from 'https://www.gstatic.com/firebasejs/9.9.3/firebase-firestore.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: -----,
authDomain: ------,
projectId: ------,
storageBucket: ------,
messagingSenderId: ------,
appId: ------,
measurementId: ------
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
</script>
update firestore code>>
FirebaseFirestore.instance
.collection('orderDetails')
.doc(id)
.update({
'status': status,
}).catchError((e) {
print(e);
});
and get this error in browser console
Refused to load the script 'https://www.gstatic.com/firebasejs/9.9.3/firebase-app.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' http://myserverurl.com https://myserverurl.com http://www.myserverurl.com https://www.myserverurl.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
also this error
VM86:3 Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: https://www.gstatic.com/firebasejs/9.9.0/firebase-app.js
Update your index.html in folder web to this :
<script src="https://www.gstatic.com/firebasejs/8.10.1/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=yourKey"></script>
<script>
// 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: -----,
authDomain: ------,
projectId: ------,
storageBucket: ------,
messagingSenderId: ------,
appId: ------,
measurementId: ------
};
/// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
and on your server Edit your file .htaccess if you use set Header set Content-Security-Policy "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://example.com
remove it
const { initializeApp } = require("firebase-admin/app");
const { getStorage } = require("firebase-admin/storage");
const firebaseConfig = {
apiKey: "ajsoidjof",
authDomain: "asodijfo",
projectId: "sihfiasd",
storageBucket: "sadjofjosad",
messagingSenderId: "2039023423",
appId: "saoijdofijo3ijo2",
measurementId: "sijdofijeadsf",
};
initializeApp(firebaseConfig);
const bucket = getStorage().bucket();
bucket.upload("./1.jpg");
This causes Error: Could not load the default credentials. Browse to https://cloud.google.com/docs/authentication/getting-started for more information. error. And, how can I upload the 1.jpg to just the main storage folder?
You're using the Firebase Admin SDK for Node.js, but then trying to initialize it with the configuration data for a client-side SDK. That won't work, so you'll either have to initialize the Admin SDK as shown here or use the client-side Node.js SDK.