Develop Reference

why messaging().sendtodevice is not working sometimes?

I'm using the following code to send a notification from one device to another using FCM. Everything works fine until before return admin.messaging().sendToDevice(...). The 'Token ID: ' log displays token ID of the receiver, but when I set the variable token_id to the sendToDevice function, the notification is not called, therefore the notification is not sent. Can someone tell me what's wrong?
var firebase = require("firebase-admin");
var serviceAccount = require("./julla-tutorial.json");
console.log("enter in then Firebase Api");
const firebaseToken = [
'e0T6j1AiRjaa7IXweJniJq:APA91bHNznSHSIey08s-C-c3gchci6wepvhP1QxQyYbmZ8LySI3wnu64iW7Q23GhA6VCdc4yodZoCFOgynfAb5C8O8VE81OcSv_LL-K3ET1IKGZ_6h35n-_q5EKFtfJWlzOqZr4IvpiB',
'dNWnSqyCQbufzv1JutNEWr:APA91bFcI9FDyRxHRBEcdw4791X0e-V0k1FjXcSstUA67l94hSojMRCd6LWr2b57azNEt3z_XLwLljMX4u2mc9cZDrAVm55Mw9CHGyue-09KofWnnHNR9XWBibc4T76xOV_DWX7T2RvW',
'cq65rtuaTCKGk5lHk7UabN:APA91bFR3kAArg6lhuBq7ktNuBk7Z9MXXk3PskqhYa8CgNaEl6MX4TQ5lo35d6XhnCQ4fEkCkyZ_j08evxE9Y4oVCRTEdqsrkccCVTE8Di47lfmDR3i1NdoL3re9oLw6F_uNsnvRoQcq'
]
firebase.initializeApp({
credential: firebase.credential.cert(serviceAccount)
})
const payload = {
notification: {
title: 'Demo 2345',
body: 'dfghj',
sound: 'default',
color: 'yellow',
android_channel_id: 'default',
channel_id: 'default'
},
data: { id: 'broadcast', channelId: 'default' }
}
const options = {
priority: 'high',
timeToLive: 60 * 60 * 24, // 1 day
};
console.log('------payload---',payload);
console.log('-----TOKEN_Array----',firebaseToken);
console.log('-------options-----',options);
firebase.messaging().sendToDevice(firebaseToken, payload, options).then(function (response) {
console.log('--------response',response);
}) .catch(function (error) {
console.log('-------rejet',reject);
});

It looks like you did not change the code from this tutorial:
https://medium.com/#jullainc/firebase-push-notifications-to-mobile-devices-using-nodejs-7d514e10dd4
you will need to change the 2nd line of code:
var serviceAccount = require("./julla-tutorial.json");
to actually point to your own firebase-push-admin.json file which holds your private keys registering your backend app with the firebase cloud messaging api. you can download this file from the firebase console as mentioned in the above article.
I recommend hiding this file from your git history by adding it to .gitignore so you dont accidentally push your private keys to a public repo.
I will link you another resource in addition to above link which helped me implement firebase push notifications in a nodeJS backend app.
https://izaanjahangir.medium.com/setting-schedule-push-notification-using-node-js-and-mongodb-95f73c00fc2e
https://github.com/izaanjahangir/schedule-push-notification-nodejs
Further I will also link you another repo where I am currently working on a fully functional firebase push notification implementation. Maybe it helps to actually see some example code.
https://gitlab.com/fiehra/plants-backend

How do I access environment variables in Strapi v4?

Strapi Version: 4.3.0
Operating System: Ubuntu 20.04
Database: SQLite
Node Version: 16.16
NPM Version: 8.11.0
Yarn Version: 1.22.19
I have created Preview button for an article collection type. I'm using the Strapi blog template. I managed to make the Preview button appear in the Content Manager. I hard coded the link to be opened when you click the Preview button and it works. Now, I want the plugin to use a link with environment variables instead of a hard coded link. I don't know how I can access the environment variables in the source code for the plugin.
My objective:
I want to replace
href={`http://localhost:3000?secret=abc&slug=${initialData.slug}`}
with
href={${CLIENT_FRONTEND_URL}?secret=${CLIENT_SECRET}&slug=${initialData.slug}`}
in ./src/plugins/previewbtn/admin/src/components/PreviewLink/index.js
where CLIENT_FRONTEND_URL and CLIENT_SECRET are environment variables declared like so in .env:
CLIENT_FRONTEND_URL=http://localhost:3000
CLIENT_PREVIEW_SECRET=abc
Here's a rundown of the code I used:
First, I created a strapi app using the blog template, then created a plugin.
// Create strapi app named backend with a blog template
$ yarn create strapi-app backend --quickstart --template #strapi/template-blog#1.0.0 blog && cd backend
// Create plugin
$ yarn strapi generate
Next, I created a PreviewLink file to provide a link for the Preview button
// ./src/plugins/previewbtn/admin/src/components/PreviewLink/index.js
import React from 'react';
import { useCMEditViewDataManager } from '#strapi/helper-plugin';
import Eye from '#strapi/icons/Eye';
import { LinkButton } from '#strapi/design-system/LinkButton';
const PreviewLink = () => {
const {initialData} = useCMEditViewDataManager();
if (!initialData.slug) {
return null;
}
return (
<LinkButton
size="S"
startIcon={<Eye/>}
style={{width: '100%'}}
href={`http://localhost:3000?secret=abc&slug=${initialData.slug}`}
variant="secondary"
target="_blank"
rel="noopener noreferrer"
title="page preview"
>Preview
</LinkButton>
);
};
export default PreviewLink;
Then I edited this pregenerated file in the bootstrap(app) { ... } section only
// ./src/plugins/previewbtn/admin/src/index.js
import { prefixPluginTranslations } from '#strapi/helper-plugin';
import pluginPkg from '../../package.json';
import pluginId from './pluginId';
import Initializer from './components/Initializer';
import PreviewLink from './components/PreviewLink';
import PluginIcon from './components/PluginIcon';
const name = pluginPkg.strapi.name;
export default {
register(app) {
app.addMenuLink({
to: `/plugins/${pluginId}`,
icon: PluginIcon,
intlLabel: {
id: `${pluginId}.plugin.name`,
defaultMessage: name,
},
Component: async () => {
const component = await import(/* webpackChunkName: "[request]" */ './pages/App');
return component;
},
permissions: [
// Uncomment to set the permissions of the plugin here
// {
// action: '', // the action name should be plugin::plugin-name.actionType
// subject: null,
// },
],
});
app.registerPlugin({
id: pluginId,
initializer: Initializer,
isReady: false,
name,
});
},
bootstrap(app) {
app.injectContentManagerComponent('editView', 'right-links', {
name: 'preview-link',
Component: PreviewLink
});
},
async registerTrads({ locales }) {
const importedTrads = await Promise.all(
locales.map(locale => {
return import(
/* webpackChunkName: "translation-[request]" */ `./translations/${locale}.json`
)
.then(({ default: data }) => {
return {
data: prefixPluginTranslations(data, pluginId),
locale,
};
})
.catch(() => {
return {
data: {},
locale,
};
});
})
);
return Promise.resolve(importedTrads);
},
};
And lastly this created this file to enable the plugin Reference
// ./config/plugins.js
module.exports = {
// ...
'preview-btn': {
enabled: true,
resolve: './src/plugins/previewbtn' // path to plugin folder
},
// ...
}

I solved this by adding a custom webpack configuration to enable Strapi's admin frontend to access the environment variables as global variables.
I renamed ./src/admin/webpack.example.config.js to ./src/admin/webpack.config.js. Refer to the v4 code migration: Updating the webpack configuration from the Official Strapi v4 Documentation.
I then inserted the following code, with help from Official webpack docs: DefinePlugin | webpack :
// ./src/admin/webpack.config.js
'use strict';
/* eslint-disable no-unused-vars */
module.exports = (config, webpack) => {
// Note: we provide webpack above so you should not `require` it
// Perform customizations to webpack config
// Important: return the modified config
config.plugins.push(
new webpack.DefinePlugin({
CLIENT_FRONTEND_URL: JSON.stringify(process.env.CLIENT_FRONTEND_URL),
CLIENT_PREVIEW_SECRET: JSON.stringify(process.env.CLIENT_PREVIEW_SECRET),
})
)
return config;
};
I rebuilt my app afterwards and it worked.

You shouldn't have to change the webpack config just find .env file in the root directory
add
AWS_ACCESS_KEY_ID = your key here
then just import by
accessKeyId: env('AWS_ACCESS_KEY_ID')

How to implement signInWithEmailLink in React Native using rnfirebase dynamic links and auth modules v6

What I want to do: On reset password button click send a letter to user's email using auth().sendSignInLinkToEmail(<user email>, actionCodeSettings);
After user clicks on the received link he gets navigated to the app and using dynamicLinks().getInitialLink() to get the email link he will be loged in with auth().signInWithEmailLink() method.
Here is my implementation for it:
Reset Password Screen
const handleContinue = async () => {
await FirebaseAuth.resetPassword(email);
await AsyncStorage.setItem('#email', email);
};
FirebaseAuth.js
const actionCodeSettings = {
handleCodeInApp: true,
// URL must be whitelisted in the Firebase Console.
url: 'https://examplemoxie.page.link/password_reset',
iOS: {
bundleId: '<my bundle id>',
},
android: {
bundleId: '<my bundle id>',
installApp: true,
},
};
class FirebaseAuthApp {
constructor(firebase) {
this.firebase = firebase;
}
resetPassword = emailAddress =>
auth()
.sendSignInLinkToEmail(emailAddress, actionCodeSettings)
.catch(error => logger(error));
...
}
At this point everything works pretty fine, I'm receiving an email, by clicking on it I'm getting navigated into my app and even able to read the initial link by this piece of code:
App.js
const App = () => {
const user = useAuthStatus();
useEffect(() => {
const handleDynamicLink = async link => {
// Check and handle if the link is a email login link
alert(JSON.stringify(link));
if (auth().isSignInWithEmailLink(link.url)) {
try {
// use the email we saved earlier
const email = await AsyncStorage.getItem('#email');
await auth().signInWithEmailLink(email, link.url);
/* You can now navigate to your initial authenticated screen
You can also parse the `link.url` and use the `continueurl` param to go to another screen
The `continueurl` would be the `url` passed to the action code settings */
} catch (e) {
alert(e);
}
}
};
const unsubscribe = dynamicLinks().onLink(handleDynamicLink);
/* When the app is not running and is launched by a magic link the `onLink`
method won't fire, we can handle the app being launched by a magic link like this */
dynamicLinks()
.getInitialLink()
.then(link => link && handleDynamicLink(link));
// When the component is unmounted, remove the listener
return () => unsubscribe();
}, []);
Link
https://testmoxiegirl.firebaseapp.com/__/auth/action?apiKey=<api key>&mode=signIn&oobCode=<oob code>&continueUrl=https://examplemoxie.page.link/password_reset&lang=en
My dynamic links settings
short URL link - https://examplemoxie.page.link/password_reset
dynamic link - https://moxiegirl.page/reset_password
behavior for Android - Open the deep link in your Android App / Open custom URL for not installed App
And here comes the problem, the link which i get in App.js file from getInitialLink() method is the same as my dynamic link in firebase dynamic link settings and using it for signInWithEmailLink will fail with Invalid email link error. For this to work i need to get a link sent to email but I have no clue on what I'm doing wrong.
My environment:
"react-native": "0.64.2",
"#react-native-firebase/app": "^12.4.0",
"#react-native-firebase/auth": "^12.4.0",
"#react-native-firebase/dynamic-links": "^12.4.0",

So, before posting this question I decided to check everything once more and I found a problem.
In my case, instead of using packageName in my FirebaseAuth.js
I was using bundleId for the Android settings, assuming that for the Android and iOS it should be the same keys.
Before:
const actionCodeSettings = {
...
android: {
bundleId: '<my bundle id>',
installApp: true,
},
};
After:
const actionCodeSettings = {
...
android: {
packageName: '<my bundle id>',
installApp: true,
},
};

How to share a document automatically with mail in React native mail linking?

I have a share button. On press of this button I called a function. That function basically creates a screen view pdf, and now I am storing that pdf in my state (means that pdf path). After that I am calling mail linking function. And by pressing share option I want to share that pdf file to that mail. It means, I want to append that pdf automatically in mail body.
Here's what I have tried, but this just adds a file path in mail body (not an actual file):
Linking.openURL(
`mailto:support#example.com?subject=SendMail&body=${this.state.pdf}`
);

You can't add an attachment using a mailto link. Sorry.
You could put a link to the file in the mail body.

I couldn't find anything in the react native Linking.However I've found react-native-mail helpful
I've tested this on android and iOS react-native version 0.63.2
Sample Code
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from 'react';
import { View, Alert, Button } from 'react-native';
import Mailer from 'react-native-mail';
export default class App extends Component {
handleEmail = () => {
Mailer.mail({
subject: 'need help',
recipients: ['support#example.com'],
ccRecipients: ['supportCC#example.com'],
bccRecipients: ['supportBCC#example.com'],
body: '<b>A Bold Body</b>',
customChooserTitle: 'This is my new title', // Android only (defaults to "Send Mail")
isHTML: true,
attachments: [{
// Specify either `path` or `uri` to indicate where to find the file data.
// The API used to create or locate the file will usually indicate which it returns.
// An absolute path will look like: /cacheDir/photos/some image.jpg
// A URI starts with a protocol and looks like: content://appname/cacheDir/photos/some%20image.jpg
path: '', // The absolute path of the file from which to read data.
uri: '', // The uri of the file from which to read the data.
// Specify either `type` or `mimeType` to indicate the type of data.
type: '', // Mime Type: jpg, png, doc, ppt, html, pdf, csv
mimeType: '', // - use only if you want to use custom type
name: '', // Optional: Custom filename for attachment
}]
}, (error, event) => {
Alert.alert(
error,
event,
[
{text: 'Ok', onPress: () => console.log('OK: Email Error Response')},
{text: 'Cancel', onPress: () => console.log('CANCEL: Email Error Response')}
],
{ cancelable: true }
)
});
}
render() {
return (
<View style={styles.container}>
<Button
onPress={this.handleEmail}
title="Email Me"
color="#841584"
accessabilityLabel="Purple Email Me Button"
/>
</View>
);
}
}

getting images url in vuex store in Vue.js

I am using vuex in nuxt and I get user data after user login, and store the data in vuex.
When I display the data in another page as computed property with getters, everything works fine and it displays user data except for img tag.
When I try to display user icon with url which is stored in vuex, it works for the first time, but when refresh the page, it gets the data before the user data is stored for some reason...( but the another data still renders user data properly) and of course, icon does not render.
Plus, if I just display the url of icon from vuex as strings in div, it shows icon url correctly even after refreshing the page... but not src in img tag...
I think I have a same problem as this question: Linking to images referenced in vuex store in Vue.js
and one of the answer says
:src='student.image' (v-binding) is executed at runtime, but webpack aliases work in compile time. So you have to wrap the aliased file path in require.
{
id: 1,
name: 'Advik',
age: '19',
studying: 'Physiotherapy',
image: require('~#/assets/images/students/advik-1.png')
}
so, I would like to use require in src but icon is rendered by url not by module, so I do not know how to solve this problem. How can I make icon render after refreshing the page as well?
This is my vuex,
//---------this is default state data--------------
export const state = () => ({
user: {
email: 'default',
id: 'default',
last_name: 'default',
name: 'name',
picture: 'picture',
provider: 'default',
},
}
// -------this is to set user and token in store and local storage-------
export const mutations = {
setUser(state, authData) {
const now = new Date()
const expirationDate = now.getTime() + 36000000
localStorage.setItem('token', authData.token)
localStorage.setItem('user', JSON.stringify(authData.user))
localStorage.setItem('expirationDate', expirationDate)
state.idToken = authData.token
state.user = authData.user
},
}
//---------this is to get userdata and fire mutation to set data ---------
export const actions = {
GetUserInfo({ commit }, token) {
this.$axios
.get('/auth/user/', {
headers: { Authorization: `Bearer ${token}` },
})
.then((res) => {
console.log(res)
const user = {
email: res.data.email,
id: res.data.id,
last_name: res.data.last_name,
name: res.data.name,
picture: res.data.picture,
provider: res.data.provider,
}
return user
})
.then((user) => {
commit('setUser', { token, user })
})
},
}
and this is index.vue where I am trying to display the user info.
<template>
<div>
<div>{{ userAvatar }}</div> //this displays picture url first time and after refreshes it as well.
<img class="avatar" :src="userAvatar" alt="" /> //this displays icon with picture url first time and, after I refresh it, userAvatar renders as "picture" which was the default data of state.
</div>
</template>
export default {
computed: {
userAvatar() {
const user = this.$store.getters['authentication/getUserInfo']
console.log(user) //even after refresh it, still console the user data I got.
return user.picture
},
},
}
Thanks a lot!