I use #nuxtjs/firebase and work completely with auth function
this.$fire.auth
.signInWithEmailAndPassword(this.form.email, this.form.password)
.then((userCredential) => {}
and it doesn't work when add another plugins in nuxt.config
plugins: [
{
src: '~/plugins/myAlert',
mode: 'client'
}
],
the error is
TypeError: undefined is not an object (evaluating 'this.$fire.auth.signInWithEmailAndPassword')
Related
I am getting an error in nuxt3 then setting up this amplify plugin. I am trying to add auth to nuxt3 via plugins
plugins/amplify.js
import Amplify, {withSSRContext} from 'aws-amplify';
export default defineNuxtPlugin((ctx) => {
const awsConfig = {
Auth: {
region: "ap-south-1",
userPoolId: "ap-south-1_#########",
userPoolWebClientId: "#####################",
authenticationFlowType: "USER_SRP_AUTH",
},
};
Amplify.configure({ ...awsConfig, ssr: true });
if (process.server) {
const { Auth } = withSSRContext(ctx.req);
return {
provide: {
auth: Auth,
},
};
}
return {
provide: {
auth: Auth,
},
};
}
[nuxt] [request error] Identifier 'module' has already been declared
at Loader.moduleStrategy (internal/modules/esm/translators.js:145:18)
at async link (internal/modules/esm/module_job.js:67:21)
Does anyone know what's going on?
Been facing this myself... I don't think its a nuxt problem but rather Vite.
I gave up on running the app on dev mode and just resorted to building the app and launching it. Also, in order to use aws-amplify with vite you need to apply some workarounds:
https://ui.docs.amplify.aws/vue/getting-started/troubleshooting
For the window statement (which only makes sense on the browser) you'll need to wrap that with an if statement. Added this to my plugin file
if (process.client) {
window.global = window;
var exports = {};
}
This will let you build the project and run it with npm run build . Far from ideal but unless someone knows how to fix that issue with dev in vite...
BTW, you can also just switch to webpack builder on nuxt settings and the issue goes away.
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
builder: "webpack"
});
I think this might be a problem with auto imports of nuxt.
I added a ~/composables/useBucket.ts file which I used in ~/api. Same error started popping up the next day. After I moved ~/composables/useBucket.ts to ~/composablesServer/useBucket.ts issue disappeared.
My Vue project used Firebase Auth for sign in and sign up but when added firebase package to project, it show blank page on ie11. Firebase and Vue Cli Plugin Babel package:
"firebase": "9.6.1",
"#vue/cli-plugin-babel": "4.4.4"
Babel config:
module.exports = {
presets: [['#vue/app', { useBuiltIns: 'entry' }]]
}
Thanks
I read Firebase docs in here: https://firebase.google.com/docs/web/environments-js-sdk#suggested-polyfills. I resolved this problem as follow:
babel.config.js:
module.exports = {
presets: [['#vue/app', { useBuiltIns: 'entry' }]]
}
In main.js
import 'core-js/stable'
import 'cross-fetch/polyfill'
import 'indexeddb-getall-shim'
In Package.json: Add more pakage:
"cross-fetch": "^3.1.5"
"core-js": "3.6.5",
"indexeddb-getall-shim": "^1.3.6"
In vue.config.js:
transpileDependencies: [
// can be string or regex
'#firebase',
/graphql/
]
But i still don't understand the problem.
I am trying to use firebase phone authentication for web and vuejs. I want to detect the country of the user and assign the detected country as the defaultCountry in the firebaseui config.
signInOptions: [
firebase.auth.EmailAuthProvider.PROVIDER_ID,
{
provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
recaptchaParameters: {
type: 'image',
size: 'invisible',
badge: 'bottomleft'
},
defaultCountry: `'${this.countryCode}'`
}
]
Below is the method I used to successfully get the country and assign to a variable in data ()
created() {
this.getDefaultCountry()
},
I even tried
defaultCountry: this.countryCode
If I hardcode a countryCode ('US', 'NZ', ... ), it works.
Thank you
If this.getDefaultCountry() is synchronous (i.e. doesn't require any database lookups, promises, etc), you should be able to use the following code, where defaultCountry is swapped out for a getter instead of a static value:
signInOptions: [
firebase.auth.EmailAuthProvider.PROVIDER_ID,
{
provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
recaptchaParameters: {
type: 'image',
size: 'invisible',
badge: 'bottomleft'
},
get defaultCountry() {
// contents of getDefaultCountry here
}
}
]
If your this.getDefaultCountry() is asynchronous, you will instead have to show some form of loading screen while you get the value, build signInOptions, give it to your FirebaseUI config and then finally render it.
I am using NativeScript Vue and successfully added firebase.
My main.js looks as follows right now:
import App from './components/App'
import store from './store';
import VueDevtools from 'nativescript-vue-devtools'
import firebase from 'nativescript-plugin-firebase';
firebase.init({
// Optionally pass in properties for database, authentication and cloud messaging,
// see their respective docs.
}).then(
instance => {
console.log('firebase.init done');
},
error => {
console.log('firebase.init error: ${error}');
}
);
Vue.prototype.$firebase = firebase;
if(TNS_ENV !== 'production') {
Vue.use(VueDevtools)
}
// Prints Vue logs when --env.production is *NOT* set while building
Vue.config.silent = (TNS_ENV === 'production')
Vue.component('About', require('./components/About.vue').default);
new Vue({
store,
firebase,
render: h => h('frame', [h(App)])
}).$start()
I noticed that the line of code Vue.prototype.$firebase = firebase; makes it possible to reference the firebase instance in my .vue files with this.$firebase. In my App.vue file, I logged this.$firebase and got the following:
instance: null,
firebaseRemoteConfig: null,
currentAdditionalUserInfo: null,
authStateListeners: [ [length]: 0 ],
_receivedNotificationCallback: null,
_dynamicLinkCallback: null,
admob:
{ [__esModule]: true,
AD_SIZE:
{ SMART_BANNER: 'SMART',
LARGE_BANNER: 'LARGE',
BANNER: 'BANNER',
MEDIUM_RECTANGLE: 'MEDIUM',
FULL_BANNER: 'FULL',
LEADERBOARD: 'LEADERBOARD',
SKYSCRAPER: 'SKYSCRAPER',
FLUID: 'FLUID' },
showBanner: { [Function: showBanner] [length]: 1, [name]: 'showBanner', [prototype]: [Object] },
But how can I set data or write data on it? I tried write dating both the iOS way and Web way listed in the firebase docs ( https://firebase.google.com/docs/database/ ) but to no avail. Any ideas?
I have a function in Firebase Functions service that send any FCM.
I would to use admin.messaging().send() function, like this reference guide, but I got this error while function is triggered, not during deploy:
TypeError: admin.messaging(...).send is not a function
at exports.sendChatNotification.functions.database.ref.onCreate.event (/user_code/lib/index.js:113:30)
at Object.<anonymous> (/user_code/node_modules/firebase-functions/lib/cloud-functions.js:59:27)
at next (native)
at /user_code/node_modules/firebase-functions/lib/cloud-functions.js:28:71
at __awaiter (/user_code/node_modules/firebase-functions/lib/cloud-functions.js:24:12)
at cloudFunction (/user_code/node_modules/firebase-functions/lib/cloud-functions.js:53:36)
at /var/tmp/worker/worker.js:700:26
at process._tickDomainCallback (internal/process/next_tick.js:135:7)
I can see this error in Functions->Log inside Firebase console.
That's my function code:
exports.sendChatNotification = functions.database.ref('/messages').onCreate(event => {
var message = {
data: {
title: 'title',
body: 'body',
},
apns: {
header: {
'apns-priority': '10',
'apns-expiration':'0'
},
payload: {
aps: {
sound: 'default',
'content-available':'1'
}
}
},
android: {
ttl: 60*1000,
priority: 'high'
},
topic: 'mytopic'
};
return admin.messaging().send(message);
});
If I use admin.messaging().sendToTopic() and (changing the message structure) it works fine. It seems Firebase doesn't support its own API.
I deploy this using Firebase tools, with command line "firebase deploy".
I have updated firebase-tools and firebase-functions and firebase-admin in my functions project.
The send() function was added in firebase-admin 5.9.0. If you want to use it, you should run npm install firebase-admin#latest in your functions folder to install the latest version. At the time of this writing, the latest version is 5.9.1.