I apologize if this is a newbie question, but I never worked with an observer, and I am finding hard to understand how to create it.
I have developed a webapp in Firebase which uses openUI5. So the app has the structure of that framework:
webapp folder
index.html
component.js
manifest.json
view folder
App.view.xml
controller folder
App.controller.js
That is the file structure, so you can have a quick snapshot.
I am already able to use federated authentication of Google with Firebase. I can log in and out.
But I wanted to use the firebase Auth observer in order to update a JSON Model of the app (with user DisplayName and stuff like that)
In essence, I understand that I should define the observer in the component.js file, but since I do not know how to make that work, instead I created the following in the index.html:
<script type="text/javascript">
firebase.auth().onAuthStateChanged(function(user) {
var oModel = this.getModel();
if (user) {
// User is signed in.
MessageToast.show(oModel.user.displayName);
oModel.user.displayName = user.displayName;
} else {
// No user is signed in.
}
});
</script>
But that definition is throwing me the following error: Uncaught ReferenceError: firebase is not defined
Can anyone let me know what I am doing wrong here?
Regards,
Martin
I found the issue: while defining the script, I do not need the type="text/javascript"
I took that away and could get going.
Related
I saw a question at this link because I have a similar situation and I wanted to comment but unfortunately I do not have enough rep to do so. I would like some clarification on it.
in Tor Arne Falk's question : He displayed a script that he used to manage logged in users and logged out users like so ⬇️
<script>
const auth = firebase.auth()
auth.onAuthStateChanged((user) => {
if (user) {
document.getElementById("body").style.display = "block";
} else {
window.location.replace("/login.html");
}
});
</script>
My question is do you put that script in every html after auth ( & except auth) to check if a user is logged in or not to display content in that page after logging in or redirect them to the auth page
further more Firebase is a type="module" so a common issue with modules is that we cant import firebase outside a module meaning we cant read data from the firebase.js (handling auth & database) to a different script, example: using Tor Arne Falk script (as is) on different html pages for the same cause I believe it will not work.
please share some ideas on if it possible to read data outside the module I would like an example to help me get started if not what should I do within my firebase.js file to ensure a user is logged in across every other page to prevent them from hitting the back button and seeing that that they are still logged in or link jumping (skipping my auth page and going to a page only logged in users are supposed to see without logging in) I hope I make sense!🤔
I'm trying to deploy my first function with firebase cloud functions.
I deployed the standard function "helloWorld" without problem, but then, when I added this:
const admin = require("firebase-admin");
admin.initializeApp();
firebase deploy didn't work anymore and caused this error:
Missing expected firebase config value databaseURL, config is actually{"projectId":"PROJECT-ID","storageBucket":"PROJECT-ID.appspot.com","locationId":"europe-west"}
If you are unit testing, please set process.env.FIREBASE_CONFIG
How can I set config or the value of databaseURL? I don't find anywhere the file where these things are written... I also looked in documentation but I didn't find anything useful
I tried also with
admin.initializeApp(process.env.FIREBASE_CONFIG);
but this give me this error:
Error: Error occurred while parsing your function triggers.
Error: Invalid Firebase app options passed as the first argument to initializeApp() for the app named "[DEFAULT]". Options must be a non-null object.
It looks like you're being affected by a change that was made a few months ago where the databaseURL is no longer auto-created when you create a new project.
If that is the case, you you can force the databaseURL to be generated by going to the Realtime Database panel in the Firebase console. If this indeed fixes the problem, it might be worth filing a bug report with the Firebase support team.
It looks like you don't have a default database created. Visit your firebase console and create at least one real-time database.
You can explicit select a database instance with functions.database.instance() View Docs
I am struggling with a tutorial from Hasura which I believe might never have worked. I think it might be missing a piece and I'm interested in the most appropriate way to bridge the gap between when I've created and what will work.
From that documentation, as well as the Auth0 VueJS documentation I have been able to create a working VueJS application that authenticates via my Auth0 project and gives me back a user profile complete with user photo and email. So that's all working.
Following the Hausura tutorial from this I added apollo. I am now able to access non-protected GraphQL queries from my API but not protected ones. The reason is pretty clearly the code I added from the tutorial here:
getAuth: () => {
// get the authentication token from local storage if it exists
// return the headers to the context so httpLink can read them
const token = localStorage.getItem('apollo-token')
if (token) {
return 'Bearer ' + token
} else {
return ''
}
},
A console.log shows that token is null even when I'm logged in. It's pretty obvious why too. localStorage was never updated to contain a token. So of course it's null. There's no place in the tutorial that suggests this should be set anywhere but clearly it should.
So I did some digging and in that file src/vue-apollo.js there is an onLogin and onLogout function which require an ApolloClient object and in the case of the login, also a token. This will set the local storage appropriately.
Currently, my login is done within src/view/Home.vue like so:
login() {
this.$auth.loginWithRedirect()
// ... maybe do something here ?
},
Now if I were to add something like this after the login, it will not actually be called because of the redirect. But I think I need to add something like this:
this.$auth.getTokenSilently(token => {
onLogin(this.$apolloProvider.defaultClient, token)
}
Perhaps I need to add this into like the mounted() or beforeCreate() live cycle hook in my src/App.vue? I'm really not sure how to proceed here. Does this tutorial even really work?
Furthermore, isn't storing an auth token in localStorage a bad idea because of cross site request forgery?
You are right about it not being detailed in the post. I've not run the project but following the link to the source code of the demo. The /callback route creates the key via Callback component at /app/src/router.js:25, it add an authentication guard as well.
Then on /app/src/components/Callback.vue:25 on created handleAuthentication from auth service is called.
created() {
this.$auth.handleAuthentication();
}
You can check the code in /app/src/auth/authService.js it uses the auth0 library instance to get the token and call localLogin that saves the token in line 92.
About the security, I would follow the advice in Token Storage from Auth0.
I'm trying to integrate the new Stripe checkout sessions into my website. On the NodeJS backend, I am trying to get the price from the created session, so I would try to use the checkout.sessions.retrieve function. When I invoke it like this:
session = await stripe.checkout.sessions.retrieve(cs_test_ABC*etc);
I get the following error:
TypeError: stripe.checkout.sessions.retrieve is not a function.
Can't really see where this error is coming from, as I am defining a stripe const at the beginning of my NodeJS file:
const stripe = require('stripe')('sk_test_AAAetc');
Has anyone encountered this before or knows possible steps to resolve this? Thank you so much!
That's the correct syntax to retrieve the session. I suspect that your version of stripe-node is not up to date. You need to be on at least version 6.28.0 to retrieve Checkout sessions.
I am trying to setup firebase web client messaging.
I couldn't find this error mentioned anywhere
I have my firebase account and basic firebase code in my app.
Authentication seems to be working, I had some errors about that and fixed them.
Now I'm trying to retrieve some info from the DB but I'm getting this error.
Yes, the DB has info in it.
Here is my code ( without the auth data, yes I have that info from my account and yes I have the container with that id setup as well )
This is js inside some PHP, seems to be loading correctly with no errors
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const preObject = document.getElementById("object");
const dbRefObject = firebase.database().ref().child("object");
dbRefObject.on("value", snap => console.log(snap.val()));
I am getting this error and I couldn't find info about it anywhere:
TypeError: firebase.INTERNAL.registerAppHook is not a function
I was expecting info to be retrieved and shown on site
The error is arising from the line:
<script defer src="https://www.gstatic.com/firebasejs/3.1.0/firebase-auth.js"></script>
Remove it and try again!