I have a functioning electron app and I'd like to load a url from another site (created by me for the app). The trouble I'm having is persisting the login when I loadURL from the main process in Electron.
I am successfully maintaining auth state status between various local html files within electron (using separate JS files) so I am assuming the issue is related to loadURL vs loadFILE on a new html file. Currently I'm testing using a localhost port for the other URL (the one not reading Auth State).
I use the following code to detect the state change:
let extConfig = {
apiKey: "myKEY",
authDomain: "fcf-appdestination.com",
databaseURL: "https://fcf-appdestination.com",
projectId: "fcf-app",
storageBucket: "fcf-app-bucket",
appId: "1:APPID",
}
const fbApp = firebase.initializeApp(extConfig);
firebase.auth().onAuthStateChanged((user) => {
if(user){
currentUser = user.uid
}
})
What's frustrating is when I navigate to the prior working page (via a button triggering a loadFile event in the main process in Electron) the auth state persists and the user is logged in.
Am I not able to persist the firebase auth state in the way I'd like?
Thank you,
I found the answer here:
Is there any way to keep a person authenticated with firebase across subdomains
You need to use a server function to create a custom token as an admin and send the token to the subdomain to use for login.
Related
Prerequisites:
Firebase SDK: ^7.21.1
I'd like to connect my Vue.js Frontend with my local firebase functions emulator. The emulator is located at localhost:5001. I have a hard time figuring out what configuration properties I have to set to access the emulator endpoint.
Here is my current configuration:
const firebaseConfig = {
apiKey: "AIzaSyCKvB9ZluNGOP4s4r8igflwuK-9WVsoThg",
authDomain: "company-29f5c.firebaseapp.com",
databaseURL: "https://company-29f5c.firebaseio.com",
projectId: "company-bar",
storageBucket: "company-29f5c.appspot.com",
messagingSenderId: "1051704079600",
appId: "1:1051704079600:web:f99d362c43b87346",
notificationWebhookUrl: "http://localhost:5001/company-dev/us-central1/notificationsMixpanelWebhook",
cloudFunctionBaseUrl: "http://localhost:5001/company-dev/us-central1",
};
I started changing the cloudFunctionBaseUrl since it kind of was obvious for me to use this property to change the functions endpoint url. As you can see I set it to localhost:5001/.... However the url being used in my app still was calling this url:
https://us-central1-company-bar.cloudfunctions.net
I figured out that the url is being composed by the projectId property of the configuration. The cloudFunctionBaseUrl therefore is not overwriting it at all.
How can I now change the composed url
https://us-central1-company-bar.cloudfunctions.net
to
http://localhost:5001/company-dev/us-central1
I expect that there is some kind of configuration flag like enableEmulator or something like that but could not find any hint in the docs for that.
You're correct in thinking there's a function, its called useEmulator. You have to call it for each part of firebase you want to emulate as far as I'm aware.
If you want to make functions use the emulator you can do something like the following:
firebase.functions().useEmulator('localhost', 5001);
After the firebase.initializeApp call.
More information can be found on the official docs: https://firebase.google.com/docs/emulator-suite/connect_functions#
Here is an issue I am having with Firebase and push notifications.
In a web app, I want a button which sends a remote notification when clicked. This notification is meant to be received by an iOS app working together with my web-app.
The present question is about how to make this work. The web offers some example of how to receive notifications in a web application, but I did not find much about sending one, and this is precisely what I need to do.
Below is the relevant code, the problem is to know how to write the code for the SendNotific() function, and maybe some other details. I hope someone, expert on the subject will be able to provide me with some advice.
<body>
<script>
// Initialize Firebase.
var config = {
apiKey: "myyKeyyy",
authDomain: "......firebaseapp.com",
databaseURL: "https://......firebaseio.com",
projectId: "....",
storageBucket: "........appspot.com",
messagingSenderId: "........."
},
app = firebase.initializeApp(config);
db = firebase.firestore(app);
const messaging = firebase.messaging();
function SendNotific() {
// Code to send a notification.
........
}
</script>
<input type='button' id='PushNotif' style='font-size:20px' value='Send notification!' onClick='SendNotific()'>
</body>
You cannot send notifications using client, for sending notifications firebase has an Admin SDK which should be used by the application server. Though if you are up to building a serverless app then you should consider Firebase Cloud functions which you can trigger using a HTTP endpoint and the cloud function can handle the notifications sending job.
I used mongoose database before. After the testing process and all we can delete the data from the mongoose website manually. Even the collection.
Now I am using firebase as my database and my question is that is there any functionality like removing authenticated user data manually from the database just like we do in mongoose. Or do we need to code to remove a particular user data from firebase?
I have a firebase.js
import * as firebase from 'firebase';
const config = {
apiKey: "someKey",
authDomain: "some domain",
databaseURL: "someURL",
projectId: "someID",
storageBucket: "someBucket",
messagingSenderId: "SomeId"
};
const firebaseApp = firebase.initializeApp(config);
export default firebaseApp;
and an index.js file:
import firebaseApp from './firebase';
firebaseApp.auth().onAuthStateChanged(user => {
if (user) {
console.log(user);
} else {
console.log('user needs to be signed in');
}
})
On submission I am seeing user in the web console
Is there any way to visualize the authenticated user in the firebase console, so that I can delete it from the firebase web console?
in mongodb there will be a collection for the authentication purposes. That contain,say the username and password. Which is a collection of its own. And other collections based on other datas. What I am asking is that the user data authenticated by the above process, needs to be stored somewhere right in the firebase. Is there any way to get that user data and delete it?
The Firebase Console is your backend entry-point to your app's data, features and services.
The Database section of the console enables you to freely add & remove data in the Realtime Database and Cloud Firestore:
Realtime Database
Cloud Firestore
There is a separate section for Authentication in the Firebase Console. When a user registers for your app, their profile data is passed to Firebase from the authentication provider (Google, Facebook, etc), but only the identifier (username, email, phone number), created date, signed in date and unique ID are displayed in the Firebase Console:
You can manually delete user accounts from the Firebase Console without having to write code to do so. Deleting an account will delete the associated authentication data and will stop the user from logging into your app.
To manually delete a user account:
Login to Firebase Console from a desktop browser
Select Authentication from the left menu
Hover over a user account in the list
Click the 3-dot icon on the right of the user row
Click "delete account" from the context menu
I am not sure where to begin but I recently saw 'Firebase' while searching for no server database, while it seems interesting to me, I was little worried about putting my api codes directly in the js files, which obviously can be seen through source but I have read that you can change the read/write rules and need authentication. so I no longer worried about API after reading through some pages
but the main question is:
I wanted to create an admin portal for my page, so example my admin page is located in localhost/admin/ <<< The page will simply have a login form which is to access the portal, so everything is set
var config = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: ""
};
firebase.initializeApp(config);
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
window.location = '/portal.html'
}
else {
// Do nothing
}
});
$("#loginbtn").click(function() {
var email = $('#login-name').val();
var password = $('#login-pass').val();
firebase.auth().signInWithEmailAndPassword(email, password)
.catch(function(error) {
// Handle Errors here.
});
});
So when I log in successfully it will redirect me to that page but can someone just look through source code and then go that page manually and enter it?
Or even if I intend to build one page application and decide to change the page state after login, whatever functions i'm going to do after that, can someone still find out and inject the code ?
I'm not really expert on this but this what I was thinking before starting my project, so is there is any other way around?
If you want to add admin capabilities and you are using Firebase real-time database, you need to set some custom Firebase rules to only allow admins to access restricted data. So if a non-admin user signs in, they are unable to modify/access admin only data.
One way to do this with Firebase rules is to have a /whitelist node with uid1: "bojeil#bla.com", uid2: "puf#bla.com" for storing all whitelisted admin UIDs and then a top-level security rule for restricted admin only nodes like ".write": "auth != null && root.child('whitelist').child(auth.uid).exists()". It's fairly simple, but goes a long way.
If you are not using real-time database and building a traditional web application, you need to protect restricted admin only resources. You will need to send the Firebase ID token to your backend. You can do that by setting a session cookie with its value and making sure to update that session cookie every hour or so when the Firebase ID token is refreshed. When the cookie is sent with your request, you check for it, decode it (you can use the Firebase Admin SDKs for that) and check that the user it belongs to is an admin. If so, you can allow access, otherwise you block access. On every page, you would add an onAuthStateChanged listener. If that triggers with null, you redirect to the sign-in page. If the session cookie contains an ID token for a non-admin, you can do a HTTP redirect on your server to the user non-admin section.
tldr; you need to enforce the check on your backend by sending the Firebase ID token with the request and double checking its user has adequate privileges.
I am new to angular 2 and I have successfully implemented Firebase authentication which is based on email and password the user sets.
Once the user log in, the Firebase variable is initialized and can be accessed throughout the app however once the user is in the app and refreshes the page the Firebase variable becomes null.
My question is how can I maintain the Firebase state after refresh occurs. Tried the local storage approach but that seems to be not suitable. most of the relevant queries in SO are for AngularJS.
Any ideas?
Edit
Firebase is initialized in appcomponant.ts file
firebase.initializeApp({
apiKey: 'A******E',
authDomain: 'e******m',
databaseURL: 'h*****m',
projectId: 'e******r',
storageBucket: 'e******m',
messagingSenderId: '****93***'
});
In my login service I am using
signInUser(email: string, password: string) {
return firebase.auth().signInWithEmailAndPassword(email, password);
}
Once the user authenticated he is directed to a page called settings. In the settings component I would like to get the email of the authenticated user. this all goes well when the flow is userlogin-->settings page, firebase is not null.
Issue starts when the user is in the settings page a hit F5 to refresh the page, at that point Firebase object becomes null.
User LocalStorage to store the token you receive back from firebase. To set in local storage you can do
localStorage.setItem('fireBaseToken', 'token');
then in your main app.component.ts check if the token exists if it does add it to your variable otherwise redirect user to login again.
NOTE
The Angular CLI by default should add "dom" to your tsconfig.json otherwise add it your self.