I'm trying to add Authentication to a React Web App (typescript) and I see that "firebase/auth" could be all I need. But this is the configuration:
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxx",
databaseURL: "xxxxxxxxxx",
projectId: "xxxxxxxxxx",
storageBucket: "xxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxx",
appId: "1:xxxxxxxxx:web:xxxxxxxxxxxxxx",
measurementId: "xxxxxxxxx"
};
Do I need databaseURL? or storageBucket? My intention is to JUST AUTHENTICATE using Google auth for now and match the user in my database with a google ID or whatever Firebase Auth unique id has. What are the consecuences to skip databaseURL and/or storageBucket when configuring.?
All Firebase services are independent of each other and that means you can use only Authentication. The other keys in the JSON are just for identification purposes. But if you have not enabled those services from the console, they are redundant. If you remove databaseUrl, you can still use Authentication.
That being said, if you don't use Firebase Authentication then you may not be able to use some features in Firebase Databases or Storage such as authentication in security rules.
Related
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!
hello everyone i have vite app and i used firebase google auth . it works fine but when i deploy it on vercel it give me this error :
The current domain is not authorized for OAuth operations. This will prevent signInWithPopup, signInWithRedirect, linkWithPopup and linkWithRedirect from working. Add your domain (todomarwenlabidi.vercel.app) to the OAuth redirect domains list in the Firebase console -> Auth section -> Sign in method tab.
this is my app link : https://todomarwenlabidi.vercel.app/
and i added the domain to authorized domains
look this photo
and this is my firebase config file :
const firebaseConfig = {
apiKey:import.meta.env.VITE_API_KEY ,
authDomain: "todo-app-97ae2.firebaseapp.com",
projectId: "todo-app-97ae2",
storageBucket: "todo-app-97ae2.appspot.com",
messagingSenderId: "540711457418",
appId:import.meta.env.VITE_APP_ID ,
};
You have to add the domains you use in the firebase authorized domains (see picture)
This question already has answers here:
Firebase configuration for multiple projects/environments
(3 answers)
Closed 3 years ago.
I've been doing a React+Firebase project without any CI/CD, and the manual effort has become unpleasant, so I'm looking to automate deployment to 2 environments, but not sure how to it with Firebase.
I have 2 environments - test and prod, each pointing to a separate Firebase project and database. Currently depending on where I deploy, I just alternate between config and configTest:
const configTest = {
apiKey: "XXX",
authDomain: "domaintest.firebaseapp.com",
databaseURL: "https://domaintest.firebaseio.com",
projectId: "domain-test",
storageBucket: "domaintest.appspot.com",
messagingSenderId: "000"
};
const config = {
apiKey: "YYY",
authDomain: "domain.firebaseapp.com",
databaseURL: "https://domain.firebaseio.com",
projectId: "domain",
storageBucket: "domain.appspot.com",
messagingSenderId: "111"
};
firebase.initializeApp(config);
//firebase.initializeApp(configTest);
I am assuming there should be a better way, but I couldn't find any instruction on the topic.
Usually you have the config object filled with environment variables accessed via process.env global variable.
const config = {
apiKey: process.env.API_KEY,
authDomain: process.env.AUTH_DOMAIN,
...
};
You can use modules like env-cmd or dotenv to load environment variables from .env file.
I am setting a new firebase project. In the project I try to use firebase.auth() to create a new user with user email and password. However, when I use firebase serve and do a post request with the link in postman, i get an error which says firebase.auth is not a function.
I believe that there are questions regarding this issue, however I tried all the solutions that they have provided but none of the worked for me.
I tried:
- Adding require firebase/auth
- Deleting node modules and reinstalling firebase and firebase functions
- Import firebase and functions in different order
- Install firebase and functions in a different order
- Create a new project and install firebase and functions from scratch
const firebase = require('firebase');
const config = {
apiKey: "xxxxx,
authDomain: "xx",
databaseURL: "xxxx",
projectId: "xxxx",
storageBucket: "xxxx",
messagingSenderId: "xxx",
appId: "xxxxxx"
};
firebase.initializeApp(config);
const functions = require('firebase-functions');
const admin = require('firebase-admin');
const app = require('express')();
admin.initializeApp();
//Signup route
app.post('/signup', (req, res) => {
const newUser = {
email: req.body.email,
password: req.body.password,
confirmPassword: req.body.confirmPassword,
handle: req.body.handle,
}
// TODO: validate data
firebase.auth().createUserWithEmailAndPassword(newUser.email, newUser.password)
.then(data => {
return res.status(201).json({ message: `user ${data.user.uid} signed up successfully`})
})
.catch(err => {
console.error(err);
return res.status(500).json({error: err.code});
});
});
Expected results: get status 201 on postman and created new user in firebase
Actual results: TypeError: firebase.auth is not a function. In the console and postman.
You should understand the difference of Firebase JavaScript SDK and Firebase Admin SDK for Node.
The Firebase JavaScript SDK is for the client side.
Firebase Admin SDK is for the server side(like the Cloud Functions).
So in your case, you should use admin.auth().createUser() .
See:
https://firebase.google.com/docs/web/setup
https://firebase.google.com/docs/admin/setup
It seems you want to instantiate the application using the client sdk instead of the server.
You need to use a private key instead, to get one go to your firebase console -> Project Overview -> Service accounts -> Generate new private key
then after you download and include the key in your project:
const admin = require('firebase-admin')
const serviceAccount = require('your_firebase_key/path/goes/here')
admin.initializeApp({
credential: admin.credential.cert(serviceAccount)
})
Good luck!
I was able to resolve this issue by installing firebase as well as firebase-tools. I had initially only installed firebase-tools. Try running npm i firebase, restart the server firebase serve and see if you're still having the issue.
I am attempting to configure my AngularFire (2.3.0) - (This uses Angular 1.x) app to handle multiple firebase projects. Firebase has a reference in their docs for this possibility. Here is a snippet of how to initialize a single database.
// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<SENDER_ID>",
};
firebase.initializeApp(config);
Here is how you would add another database.
var secondaryAppConfig = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
storageBucket: "<BUCKET>.appspot.com",
};
// Initialize another app with a different config
var secondary = firebase.initializeApp(secondaryAppConfig, "secondary");
// Retrieve the database.
var secondaryDatabase = secondary.database();
Can AngularFire recognize and distinguish between multiple projects?
Yes angularFire can do it => tested with : "angular": "~1.5.3", "angularfire": "^2.0.1"
Secondary DB from another project (different auth !) :
constructor(Firebase, $firebaseArray){
'ngInject';
this.firebase = Firebase;
this.app = Firebase.initializeApp(secondaryConfig, 'secondary');
this.$firebaseArray = $firebaseArray;
}
getListDb1 () {
const refList = this.firebase.database().ref(`items`);
return this.$firebaseArray(refList);
}
getListDb2 () {
const refList = this.app.database().ref('items');
return this.$firebaseArray(refList);
}
I couldn't achieve to access 2 DBs from the same project with the same Auth in AngularFire but I have the solution for AF2 if someone needs it, just ask.