I'm using React with create-react-app and I have integrated Firebase Messaging for push notifications, it requires that you create a file in the public folder firebase-messaging-sw.js that is responsible to setup the service worker with firebase messaging to enable it.
It all works properly, my problem is using the firebase configuration keys directly into code, I know they're public keys, it is still really bad practice to hardcode them plus I have more than one environment (different firebaseConfigs) so it's even more frustating to keep them hardcoded.
The firebase-messaging-sw.js looks like this:
importScripts('https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.0/firebase-messaging.js');
const firebaseConfig = {
apiKey: 'example',
authDomain: 'example',
databaseURL: 'example',
projectId: 'example',
storageBucket: 'example',
messagingSenderId: 'example',
appId: 'example',
};
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
messaging.onBackgroundMessage(function (message) {
return self.registration.showNotification(
"Title",
"Message"
);
});
I've seen other questions like this How to use process.env in a React service worker
The solutions won't work, the cra-append-sw lib results in babel and webpack errors (those other libs are handled by CRA, so I don't mess with them)
My react-scripts version is 4.0.3
I don't have an actual answer, but I ran into the same problem and what I've been trying is to use the getToken() function. If you take a look to the docs, you can use the optional parameter ServiceWorkerRegistration to set a custom service worker.
const swRegistration = await navigator.serviceWorker.register('/src/firebase-messaging-sw.js');
const token = await fcm.getToken({
serviceWorkerRegistration: swRegistration,
});
Now the service worker can live inside the src directory, where it will be built and you can use env variables there. The thing is that if do it this way, I get a mimetype error when registering the service worker. You can see why this error ocurrs in the last answer of this forum.
Maybe you can build up from this and find a solution, good luck!
I am relatively new to React and Firebase. Was working on a netflix clone and during firebase configuration for user authentication, it throws an error. I have installed firebase using yarn add firebase but it still throws the error. here is the firebase.js file.
import firebase from "firebase";
const firebaseConfig = {
apiKey: "AIzaSyBeUkRFXLx3Jwvlevk6GSwlSJ-8pnCQeBM",
authDomain: "noctoc404.firebaseapp.com",
projectId: "noctoc404",
storageBucket: "noctoc404.appspot.com",
messagingSenderId: "818097445726",
appId: "1:818097445726:web:c22585debcda59f4074dcf",
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebase.auth();
export { auth };
export default db;
and it is throwing an error here saying Module not found
Compiled with problems:X
ERROR in ./src/firebase.js 3:0-32
Module not found: Error: Package path . is not exported from package /home/insidtrifl/Documents/Web Dev/Projects/noctoc/node_modules/firebase (see exports field in /home/insidtrifl/Documents/Web Dev/Projects/noctoc/node_modules/firebase/package.json) Did you mean './firebase'? Requests that should resolve in the current directory need to start with './'. Requests that start with a name are treated as module requests and resolve within module directories (node_modules, /home/insidtrifl/Documents/Web Dev/Projects/noctoc/node_modules). If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
any help would be awesome. Thank You.
I am trying to set-up a Firebase-messaging-sw.js file (for web push notifications). I am wondering if there is a way to avoid exposing my Firebase config data to the public as much as possible - though it might be revealed anyways? (I'm not too sure about the nuances)
I've tried following: How can I customize my Service Worker based on environment variables? But the answer's swEnvbuild doesn't seem to be running, as the swenv.js file is not found. I suspect it might need to be set-up differently in React?
(first question, please feel free to provide constructive criticisms of my question)
I recently had to do this with a CRA app, it's not easy to find information on it so I figured I should share my solution. Assuming you've already changed serviceWorker.unregister() to serviceWorker.register() in ./src/index.js, and have a .env file with your variables set in the root of your project, then you can update ./src/serviceWorker.js to include your process.env variables as a query string.
In the register function in serviceWorker.js, update const swUrl as shown below, notice the const firebaseConfig w/process.env, declared before swUrl..
./src/serviceWorker.js:
// Convert environment variables to URL `search` parameters
const firebaseConfig = new URLSearchParams({
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_FIREBASE_APP_ID,
measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
}).toString();
// Service worker URL w/config variables
const swUrl = `${process.env.PUBLIC_URL}/firebase-messaging-sw.js?${firebaseConfig}`;
then in ./public/firebase-messaging-sw.js (create it if it doesn't exist), you can do something like the following..
./public/firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/8.0.2/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.0.2/firebase-messaging.js');
// Set Firebase configuration, once available
self.addEventListener('fetch', () => {
const urlParams = new URLSearchParams(location.search);
self.firebaseConfig = Object.fromEntries(urlParams);
});
// "Default" Firebase configuration (prevents errors)
const defaultConfig = {
apiKey: true,
projectId: true,
messagingSenderId: true,
appId: true,
};
// Initialize Firebase app
firebase.initializeApp(self.firebaseConfig || defaultConfig);
const messaging = firebase.messaging();
// Configure message handler (assumes backend is set up)
messaging.onBackgroundMessage((payload) => {
const { icon, body, title } = payload.data;
self.registration.showNotification(title, { body, icon });
});
If there's a more ideal solution, would love to hear about it, but this configuration worked for me.
I found this article which uses cra-append-sw to append the env vars. Then I created two pre scripts in my package.json. When I run npm start the prestart script runs creating a [root folder]/public/firebase-messaging-sw.js file that contains the env vars (after being processed by webpack).
Implementation
I created a [root folder]/firebase-messaging-sw.js. This file will be processed by webpack replacing the values of the env vars.
// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here. Other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/8.1.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.1.1/firebase-messaging.js');
// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_FIREBASE_APP_ID,
measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
});
// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();
messaging.onBackgroundMessage(function (payload) {
console.log('[firebase-messaging-sw.js] Received background message ', payload);
// Customize notification here
const notificationTitle = 'Background Message Title';
const notificationOptions = {
body: 'Background Message body.',
icon: '/logo.png'
};
self.registration.showNotification(notificationTitle, notificationOptions);
});
then I have [root folder]/.env.dev and [root folder]/.env.prod
REACT_APP_FIREBASE_API_KEY=A...
REACT_APP_FIREBASE_AUTH_DOMAIN=d...
REACT_APP_FIREBASE_DATABASE_URL=h...
REACT_APP_FIREBASE_PROJECT_ID=d...
REACT_APP_FIREBASE_STORAGE_BUCKET=d...
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=7...
REACT_APP_FIREBASE_APP_ID=1...
REACT_APP_FIREBASE_MEASUREMENT_ID=G...
And finally, i added 2 pre scripts in my package.json
...
"scripts": {
"prestart": "cra-append-sw --mode dev --env ./.env.dev ./firebase-messaging-sw.js",
"prebuild": "cra-append-sw --mode build --env ./.env.prod ./firebase-messaging-sw.js",
...
I had real troubles with this one myself. The service worker gets involved in the stack way before your environment gets bootstrapped so it makes sense that it doesn't have access to your .Env variables.
My Solution
I built an npm module that on build, using webpack, extracts your "safe" versioning variables from your .env file and puts them into a stand-alone JS file. You can then go ahead and import this file and use it in your service worker.
https://www.npmjs.com/package/vue-enverywhere
Disclaimer:
I know this is for vue, but its webpack, and it's not vue specific. Also, You might be better to just copy the code, and not use the module. This was more of a fun exercise for myself :)
In index.js file (or wherever you want to register service worker) :
if ("serviceWorker" in navigator) {
console.log("Registration started");
const firebaseConfig = encodeURIComponent(
JSON.stringify({
apiKey: process.env.FCM_API_KEY,
projectId: process.env.FCM_PROJECT_ID,
messagingSenderId: process.env.FCM_SENDER_ID,
appId: process.env.FCM_APP_ID,
})
);
navigator.serviceWorker
.register(
`../../../firebase-messaging-sw.js?firebaseConfig=${firebaseConfig}`
)
.then(function (registration) {
console.log("Registration successful, scope is:", registration.scope);
})
.catch(function (err) {
console.log("Service worker registration failed, error:", err);
});
In Service Worker, firebase-messaging-sw.js :
importScripts("https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js");
importScripts(
"https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js"
);
firebase.initializeApp(
JSON.parse(new URL(location).searchParams.get("firebaseConfig"))
);
firebase.messaging();
This is enough for receiving Background Push Notifications on sending notification-type message.
this solution will work,
Just remember to edit the path to your Service-worer file (while registering in index.js or so), according to your project,
Or It will give "Mime Error".
I am importing Rebase from re-base, but its throwing an error:
moodule not found can't resolve 're-base' in '/home/salisu/Desktop/React Projects/catch-of-the-day/src' "
Code:
import Rebase from 're-base';
const base = Rebase.createClass({
apiKey: "AIzaSyDciFjReP_AmFD31eSPnBhRbYkaJ7L2Mqc",
authDomain: "catch-of-the-day-salisu-a6502.firebaseapp.com",
databaseURL: "https://catch-of-the-day-salisu-a6502.firebaseio.com"
});
export default base;
install the re-base and also peer up it with the dependencies
Try this command my issue is solved.
npm install re-base --legacy-peer-deps
I have setup keycloak server with all required configuration done like realm, client, users, roles etc. Now I have on angular application which is acting as frontend. Need to integrate this app with keycloak to provide authentication.
Angular app should redirect to Keycloak, Keycloak should do the user validation , Keycloak should provide access token after successful validation and finally angular app should be able to access spring boot API's with token provided by keycloak.
Typical OAuth2.0 Flow.
I am new to angular, so can anyone provide sample application code (github) for angular-keycloak integration. Also keycloak adapter for angular is required.
Keycloak version - 4.0.0.Final
Angular version - 1 but to be upgraded to 6
I am getting following error while downloading keycloak adapter for angular-
>npm install keycloak-angular#4.0.0.Final
npm ERR! code ECONNRESET
npm ERR! errno ECONNRESET
npm ERR! network request to https://registry.npmjs.org/keycloak-angular failed, reason: read ECONNRESET
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly. See: 'npm help config'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\40005928\AppData\Roaming\npm-cache\_logs\2019-07-11T11_42_38_802Z-debug.log.
Angular web application should be higher than 4.3 to integrate Keycloak.
Follow below steps to configure Keycloak:
1. Install Keycloak npm package
npm i keycloak-angular
2. Create app-init.ts file and add below contain:
import { KeycloakService } from 'keycloak-angular';
declare var keycloak : KeycloakService;
export function initializer(keycloak: KeycloakService): () => Promise<any> {
return (): Promise<any> => keycloak.init(
{
config: {
url: 'keycloak_URL',
realm: ''keycloak_ralm_name'',
clientId: 'keycloak_client_name'
},
initOptions: {
onLoad: 'login-required',
checkLoginIframe: false
},
enableBearerInterceptor: false
});}
Modify AppComponent file:
import { NgModule, APP_INITIALIZER } from '#angular/core';
import { KeycloakService, KeycloakAngularModule } from 'keycloak-angular';
import { initializer } from './app-init';
#NgModule({
imports: [KeycloakAngularModule],
providers: [
{
provide: APP_INITIALIZER,
useFactory: initializer,
multi: true,
deps: [KeycloakService]
}
]
})
For more information visit:
https://www.npmjs.com/package/keycloak-angular