Related
I implemented the nativescript-firebase (https://github.com/EddyVerbruggen/nativescript-plugin-firebase) plugin in my mobile app. It used to work fine but since I updated to the 11.1.3 version I cannot get the push token. I tried to get back to the 10.6.3 version but it says it is not available anymore when I execute npm install.
Here is what I do in my main.js
import { messaging } from "#nativescript/firebase/messaging";
import { firebase } from "#nativescript/firebase"
firebase.init({
onMessageReceivedCallback: function(message) {
//do stuff
}
}).then(function () {
messaging.getCurrentPushToken().then(token => {
console.log(token)
}).catch(e => {
console.log(e);
})
},function (error) {
console.log("firebase.init error: " + error);
});
This does not log the token but goes into the catch and logs this
Uncomment firebase-messaging in the plugin's include.gradle first
Here is my package.json
{
"name": "*****",
"main": "./src/main.js",
"version": "4.4.0",
"description": "A native application built with NativeScript-Vue",
"author": "*****",
"license": "Propriétaire",
"dependencies": {
"#carployee/openapp": "^1.0.1",
"#nativescript-community/ui-material-bottomnavigationbar": "^6.2.4",
"#nativescript/appavailability": "^2.0.0",
"#nativescript/appversion": "^2.0.0",
"#nativescript/camera": "^5.0.10",
"#nativescript/core": "~8.1.5",
"#nativescript/datetimepicker": "^2.1.9",
"#nativescript/firebase": "^11.1.3",
"#nativescript/imagepicker": "^1.0.6",
"#nativescript/ios": "^8.1.0",
"#nativescript/iqkeyboardmanager": "^2.0.0",
"#nativescript/theme": "^3.0.2",
"#nstudio/nativescript-cardview": "^2.0.1",
"#nstudio/nativescript-loading-indicator": "^4.1.0",
"#nstudio/nativescript-pulltorefresh": "^3.0.1",
"#proplugins/nativescript-purchase": "git+https://gitlab.******",
"#vue/devtools": "^5.3.4",
"nativescript-dna-deviceinfo": "^3.7.3",
"nativescript-feedback": "^2.0.0",
"nativescript-google-maps-sdk": "^3.0.2",
"nativescript-inappbrowser": "^3.1.2",
"nativescript-open-app": "^0.3.0",
"nativescript-phone": "^3.0.2",
"nativescript-socketio": "^3.3.1",
"nativescript-toasty": "^3.0.0-alpha.2",
"nativescript-ui-dataform": "^8.0.1",
"nativescript-ui-listview": "^10.0.2",
"nativescript-ui-sidedrawer": "^10.0.2",
"nativescript-vue": "^2.9.0",
"nativescript-vue-devtools": "^1.5.1",
"nativescript-vue-fonticon": "^1.0.3",
"nativescript-websockets": "^2.0.0",
"npm-check": "^5.9.2",
"npm-check-updates": "^12.0.2"
},
"devDependencies": {
"#babel/core": "^7.16.0",
"#babel/preset-env": "^7.16.4",
"#nativescript/android": "~8.1.1",
"#nativescript/webpack": "~5.0.1",
"babel-loader": "^8.2.3",
"nativescript-vue-template-compiler": "^2.9.0",
"nativescript-worker-loader": "~0.12.1",
"sass": "^1.44.0",
"vue-loader": "^15.9.8"
}
}
The message points you to the plugin's include.gradle file, or more specifically,
<app name>/node_modules/#nativescript/firebase/platforms/android/include.gradle
where you want to uncomment the line as shown below:
// Cloud Messaging (FCM)
implementation "com.google.firebase:firebase-messaging:20.1.0"
// implementation "me.leolin:ShortcutBadger:1.1.22#aar"
I expect if you reinstall the plugin you can answer the prompts so that this will get set for you.
I have a page written in tsx that keeps crashing on load with the error client.watchQuery cannot be called with fetchPolicy set to "standby", even though the query in question is useLazyQuery (so it hasn't run yet), and has the option fetchPolicy: 'no-cache'. It crashes for me, but not for my teammates, which makes me think it might have something to do with package versions of maybe my local typescript, but I've set and re-set it every way I can think of with no improvement. The relevant code and package.json are below. Any insight at all would be wonderful.
// myfile.tsx
const [getRoles] = useLazyQuery(GET_ALL_ACCOUNT_ROLES, {
fetchPolicy: 'no-cache',
onError: (e) => {
console.error(e.message);
showPrompt({ type: 'error', message: 400 });
},
onCompleted: async (data) => {
const {
getAllAccountRoles: { data: res }
} = data;
setAllRoles(res);
}
});
package.json
"dependencies": {
"#apollo/react-hooks": "^4.0.0",
"#aws-amplify/api": "^4.0.13",
"#aws-amplify/auth": "^4.1.3",
"#emotion/react": "^11.4.1",
"#emotion/styled": "^11.3.0",
"#loadable/component": "^5.15.0",
"#mui/icons-material": "^5.1.0",
"#mui/material": "^5.1.0",
"#mui/system": "^5.1.0",
"#reach/router": "^1.3.4",
"#rinxun/custom-questions": "^1.1.2",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"apollo-boost": "^0.4.9",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"apollo-link": "^1.2.14",
"apollo-link-context": "^1.0.20",
"apollo-link-http": "^1.5.17",
"aws-appsync-auth-link": "^3.0.6",
"check-equal": "^1.0.7",
"clsx": "^1.1.1",
"dotenv": "^10.0.0",
"env-cmd": "^10.1.0",
"mockjs": "^1.1.0",
"qrcode.react": "^1.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-dropzone": "^11.3.4",
"react-scripts": "4.0.3",
"store": "^2.0.12",
"uuid": "^8.3.2"
},
"devDependencies": {
"#storybook/addon-actions": "^6.3.2",
"#storybook/addon-essentials": "^6.3.2",
"#storybook/addon-links": "^6.3.2",
"#storybook/node-logger": "^6.3.2",
"#storybook/preset-create-react-app": "^3.1.7",
"#storybook/react": "^6.3.2",
"#types/aws4": "^1.5.2",
"#types/jest": "^26.0.24",
"#types/loadable__component": "^5.13.4",
"#types/qrcode.react": "^1.0.2",
"#types/react": "^17.0.15",
"#types/react-dom": "^17.0.9",
"#types/uuid": "^8.3.1",
"#typescript-eslint/eslint-plugin": "^4.29.1",
"#typescript-eslint/parser": "^4.29.1",
"aws4": "^1.11.0",
"babel-eslint": "^10.1.0",
"babel-loader": "8.1.0",
"eslint": "^7.32.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.9.0",
"eslint-plugin-import": "^2.24.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"graphql": "^15.5.1",
"lint-staged": "^11.1.1",
"prettier": "2.3.2",
"typescript": "^4.3.5",
"web-vitals": "^1.0.1"
},
I was having a similar problem. Traced it back to the issue useQuery doesn't seem to use defaultOptions in 3.5 in #apollo/client (a dependency of #apollo/react-hooks).
Solution for me was to downgrade by setting "#apollo/client": "~3.4.0" in the package.json and run npm install. Check your package-lock.json to ensure you've replaced your 3.5.x version.
#apollo/react-hooks has a dependency of #apollo-client.
If you have imported useQuery from #apollo/react-hooks, then you need to import useQuery/useLazyQuery from #apollo-client instead of #apollo/react-hooks, along with the version lower than 3.5.
I scoured the internet for this error on a build with an existing react app that was using nwb before finally stumbling upon this. In my case, the apollo client version was 3.0.2. Updating my package.json "#apollo/client": "~3.4.0" and re running npm i finally did the trick. Thank you #GratefulGuest!
I am getting this error 'invalid stream token' when using Firebase and React native. The code I am using is pretty simple:
window.firebaseApp.auth().onAuthStateChanged(async (auth) => {
if (auth) {
const uid = auth.uid;
await window.firebaseApp
.firestore()
.collection("users")
.doc(auth.uid)
.update({
lastSignIn: 10,
});
}
});
I have initialized Firebase, and I can see the correct UID coming back in auth.uid.
I noticed that when I run this in debugger mode and can step through the javascript in my web browser, I do not encounter this issue. However, when it is not in debugger mode (and everything is running on my phone) this issue appears.
Versions from my package.json:
"#react-native-community/datetimepicker": "2.2.2",
"#react-native-community/masked-view": "0.1.6",
"#react-native-firebase/app": "^7.3.1",
"#react-navigation/bottom-tabs": "^5.5.1",
"#react-navigation/drawer": "^5.7.4",
"#react-navigation/native": "^5.5.0",
"#react-navigation/stack": "^5.4.1",
"atob": "^2.1.2",
"expo": "~37.0.3",
"expo-asset": "~8.1.5",
"expo-av": "~8.1.0",
"expo-constants": "~9.0.0",
"expo-font": "~8.1.0",
"expo-web-browser": "~8.2.1",
"firebase": "7.15.5",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-native-gesture-handler": "~1.6.0",
"react-native-safe-area-context": "0.7.3",
"react-native-screens": "2.2.0",
"react-native-svg": "11.0.1",
"react-native-typography": "1.4.1",
"react-native-web": "~0.11.7",
"react-native-webview": "8.1.1",
"react-redux": "^7.2.0",
"react-request": ">=3.1.0",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0"
I am using this code to update an image and get the URL, but I can´t get the URL back.
It seems that return some because it can enter in the return of the promise.
I get this code from here: https://gist.github.com/CristalT/2651023cfa2f36cddd119fd979581893
The code work for another user so I this the problems would be in the dependence or in the database rules.
I am authenticated.
<template>
<div>
<input type="file" multiple accept="image/*" #change="detectFiles($event.target.files)">
<div class="progress-bar" :style="{ width: progressUpload + '%'}">{{ progressUpload }}%</div>
</div>
</template>
<script>
import { storage } from '../firebase'
export default {
data () {
return {
progressUpload: 0,
file: File,
uploadTask: '',
downloadURL: ''
}
},
methods: {
detectFiles (fileList) {
Array.from(Array(fileList.length).keys()).map( x => {
this.upload(fileList[x])
})
},
upload (file) {
this.uploadTask = storage.ref('imagenes/articulos').put(file);
this.uploadTask.then(snapshot => {
this.downloadURL = this.uploadTask.snapshot.downloadURL;
this.$emit('url', this.downloadURL)
})
}
},
watch: {
uploadTask: function() {
this.uploadTask.on('state_changed', sp => {
this.progressUpload = Math.floor(sp.bytesTransferred / sp.totalBytes * 100)
})
}
}
}
</script>
<style>
.progress-bar {
margin: 10px 0;
}
</style>
this is my package.json:
{
"name": "vue-change-your-home",
"version": "1.0.0",
"description": "Single page make in vue",
"author": "enrikiko <enrikiko_91#hotmail.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"#fortawesome/fontawesome": "^1.1.8",
"#fortawesome/fontawesome-free-solid": "^5.0.13",
"#fortawesome/vue-fontawesome": "0.0.22",
"bootstrap-vue": "^2.0.0-rc.9",
"firebase": "^5.0.2",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuefire": "^1.4.5"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
this are the storage rules:
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if request.auth != null;
}
}
}
this is my firebase.js:
import Firebase from 'firebase'
/**
* Pega aquí los datos de tu proyecto firebase
*/
const firebaseApp = Firebase.initializeApp({
apiKey: "++++******-sU0qfey9278aBIDP6zo",
authDomain: "*+****+.firebaseapp.com",
databaseURL: "https://*****.firebaseio.com",
projectId: "+++++",
storageBucket: "**.appspot.com",
messagingSenderId: "**"
});
export const db = firebaseApp.database()
export const storage = firebaseApp.storage()
export const auth = firebaseApp.auth()
// export const notif = firebase.messaging()
in the terminal this is what I get:
$route
downloadURL:"" --->here shoud get the URL
file:ƒ File()
progressUpload:100
uploadTask:Object
authWrapper_:Object
blob_:Object
chunkMultiplier_:1
errorHandler_:ƒ (error)
error_:null
location_:Object
mappings_:Array[15]
metadataErrorHandler_:ƒ (error)
metadata_:Object
Thank so much in advance
i had the same problem, i tried a lot of stuff, but the simply one solution i found was:
to change the Firebase versión in my package.json i switched to: "firebase": "^4.6.2".
I am not sure what's happening with the 5.0.2 version. Even when that solve the problem i am still looking for the docs of the change maybe we need to use the snapshot in a different way. will see.
Good luck! ;)
-- BlisS
Update:
The issue is that the snapshop no longer own the downloadURL at version 5, now you have tu use the method getDownloadURL that belongs to the ref, just like pushups said, something like this:
const fileRef = firebase.storage()
.ref("carpeta")
.child(file.name);
const uploadTask = fileRef.put(file);
uploadTask
.then(snap=>{
return fileRef.getDownloadURL()
})
this also works:
return snap.ref.getDownloadURL()
You can get this to work with Firebase 5.2.0 with the following code.
The UploadTaskPromise yields a snapshot. The snapshot has a ref property. The ref property has a getDownloadURL() function which returns a Promise. That Promise gives the downloadable url once it's available.
https://firebase.google.com/docs/reference/js/firebase.storage.Reference#getDownloadURL
uploadTask.then((snapshot) => {
snapshot.ref.getDownloadURL().then((url) => {
// do something with url here
});
});
Use this code:
import {launchImageLibrary} from 'react-native-image-picker';
import storage from '#react-native-firebase/storage';
launchImageLibrary({quality: 0.5}, response => {
let data = response.assets[0];
const uploadTask = storage()
.ref()
.child(`/uploadedphotos/${Cid}`)
.putFile(data.uri);
uploadTask.on(
'state_changed',
snapshot => {
const progress =
(snapshot.bytesTransferred / snapshot.totalBytes) * 100;
if (progress == 100) Alert.alert('File Upload Complete');
},
error => {
Alert.alert(error);
},
() => {
uploadTask.snapshot.ref
.getDownloadURL()
.then(downloadURL => {
console.log('File available at', downloadURL);
})
},
);
I'm trying to use Firebase with Electron. When installing it just like I would on a web page it doesn't work because Electron pages are hosted locally and don't have a hostname. This is the error I'm getting...
Uncaught Error: This domain is not authorized for OAuth operations for your Firebase project. Edit the list of authorized domains from the Firebase console.
I can't add an empty (or wildcard) authorized domain to the Firebase console so I'm therefore stuck. Does anybody have any ideas of how to work around this?
edit: Here's the code I'm using, it's just the standard boilerplate, nothing extra...
<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
<script>
var config = {
apiKey: "AIzaSyBvmmPB0_Oddc-02cUj3Ntt3wi8jSxxxx",
authDomain: "xxxxx-d24ad.firebaseapp.com",
databaseURL: "https://xxxxx-d24ad.firebaseio.com",
storageBucket: "",
};
firebase.initializeApp(config);
</script>
I don't know if this is the best solution but is a workaround.
create a file server.js with a simple express server
"server.js"
var express = require('express');
var http = require('http');
var path = require('path');
var appServer = express();
appServer.use(express.static(path.join(__dirname, '')));
appServer.get('*', (req, res) => {
res.sendFile(__dirname + 'index.html');
});
http.createServer(appServer).listen(3007, function() {
console.log('Express server listening on port');
});
In your main.js(electron-main-js-file)
On the top of the main.js start the node server
require('./server');
and change the "win.loadURL"
win.loadURL('http://localhost:3007');
I've fork your project and implement, the error from firebase is gone but jQuery is not defined, I think you can fix that.
https://github.com/diegoddox/sad-electron-firebase-error
For now, you can suppress this error by removing the authDomain line from your config. authDomain is needed for the Auth signInWithPopup/signInWithRedirect operations, but everything else should work.
A version of the library that throws that error only when you actually try to do a signInWithPopup/Redirect is in the works.
You can use firebase auth's GitHub, Twitter, Facebook, Google Provider with electron by using the manual sign in flow and firebase auth signInWithCredential method.
https://firebase.google.com/docs/auth/web/github-auth#handle_the_sign-in_flow_manually
I created useful library for these case.
https://github.com/mironal/electron-oauth-helper#firebase-auth-integration
// Github manually flow example.
const { OAuth2Provider } = require("electron-oauth-helper")
const config = { /* oauth config. please see example/main/config.example.js. */}
const provider = new OAuth2Provider(config)
provider.perform()
.then(resp => {
const query = querystring.parse(resp)
const credential = firebase.auth.GithubAuthProvider.credential(query.access_token)
firebase.auth().signInWithCredential(credential)
.then(user => {
console.log(user)
})
.catch(error => console.error(error))
})
.catch(error => console.error(error))
It's works in Electron 6.0.1 (Google, Facebook and Twitter Auth) through .signInWithPopup. Environment:
node 10.16.2 LTS
electron 6.0.1
vs2017-win2016
electron-forge 5.2.4
electron's package.json
"dependencies": {
"#capacitor/electron": "^1.1.0",
"electron-compile": "^6.4.4",
"electron-squirrel-startup": "^1.0.0"
},
"devDependencies": {
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"electron-forge": "^5.2.4",
"electron-prebuilt-compile": "4.0.0"
},
Angular's package
"dependencies": {
"#angular/animations": "^8.2.0-next.1",
"#angular/cdk": "^8.0.0",
"#angular/common": "^8.2.0-next.1",
"#angular/core": "^8.2.0-next.1",
"#angular/fire": "^5.2.1",
"#angular/forms": "^8.2.0-next.1",
"#angular/material": "^8.0.0",
"#angular/platform-browser": "^8.2.0-next.1",
"#angular/platform-browser-dynamic": "^8.2.0-next.1",
"#angular/pwa": "^0.800.2",
"#angular/router": "^8.2.0-next.1",
"#angular/service-worker": "^8.2.0-next.1",
"#capacitor/core": "1.1.0",
"#ionic/angular": "^4.6.2",
"#ngx-loading-bar/core": "^4.2.0",
"#ngx-loading-bar/router": "^4.2.0",
"#ngxs/logger-plugin": "^3.3.2",
"#ngxs/store": "^3.3.2",
"angulartics2": "^7.5.2",
"echarts": "^4.2.1",
"firebase": "^6.1.1",
"hammerjs": "^2.0.8",
"immutable": "^4.0.0-rc.12",
"ngx-echarts": "^4.1.1",
"ngx-permissions": "^7.0.3",
"ngx-stars": "^1.3.0",
"rxjs": "6.5.2",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.802.0-next.0",
"#angular/cli": "~8.2.0-next.0",
"#angular/compiler": "^8.2.0-next.1",
"#angular/compiler-cli": "~8.2.0-next.1",
"#angular/language-service": "~8.2.0-next.1",
"#capacitor/cli": "^1.0.0",
"#compodoc/compodoc": "^1.1.10",
"#ionic/angular-toolkit": "~2.0.0",
"#ngxs/devtools-plugin": "^3.4.3",
"#ngxs/schematics": "0.0.1-alpha.5",
"#types/echarts": "^4.1.9",
"#types/jasmine": "^3.3.12",
"#types/jasminewd2": "~2.0.6",
"#types/node": "~11.13.4",
"ajv": "^6.9.1",
"codelyzer": "~5.0.0",
"html-minifier": "^4.0.0",
"ionic": "^5.0.1",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.5",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"karma-mocha-reporter": "^2.2.5",
"protractor": "~5.4.0",
"sonarqube-scanner": "^2.4.0",
"ts-node": "~8.0.3",
"tslint": "~5.15.0",
"tslint-sonarts": "^1.9.0",
"typescript": "~3.4.3"
},
I've compiled for Windows with:
DEBUG='electron-forge:*' node_modules/.bin/electron-forge make