I am creating an app using Polymer and Polymerfire elements and I can't find an effective way to share user and auth references across the app.
My current solution of receiving auth reference is as follows:
var auth = document.getElementById('appID').app.auth()
This approach works but I have a hunch that there should be a better way.
Second problem is, that I am not sure howto get the user reference in subviews, were getting the reference by property sharing would be super cumbersome(and I've been having issues using this approach).
I was thinking that using iron-meta tag might solve the issue, but that would mean that on every login and logout I would have to set the value "manually". So is there a more straightforward way to share the reference?
If I access the firebase-auth reference directly:
document.getElementById('authID').user
Then there is a problem that when it's accessed in the element's ready function call it's always null. If it's called later, then it works fine but I need to check if the user is logged in in ready call(and redirect to login page).
Plus, this approach doesn't work at all if global Polymer setting is set to: dom: 'shadow' (The firebase-auth is not located in index.html but lower and with this setting I am able to access only the index.html elements.) and this setting is supposed to be set by default in the future and I want the solution to be future-proofed.
I'll be grateful for any responses, Jan
The polymer fire element created by the polymer team will solve all your problems.
It's divided into the following elements:
firebase-auth
firebase-app
firebase-document
firebase-query
firebase-messaging
Video Tutorial Authentication with Firebase -- Polycasts #57
Official Documentation
I solved the issue. Apparently it's possible to initialize the firebase-auth element wherever you want and the element retains the app state as long as the app name is provided.
<firebase-auth id="auth" app-name=name-of-the-app"></firebase-auth>
Than just use the element reference:
this.$.auth
Related
I have a Next.js app which has multiple pages. Each page has the same bar at the top of the screen which displays some data which is fetched from an internal API using SWR. The issue I am having is that to fetch that data it requires an ID of the logged in user (they log in with Discord via next-auth) and after they have left the first page, that ID value is no longer accessible to me.
I have tired storing it in local storage and session storage, I have tried passing it through other components, but nothing has worked and I am out of ideas of how to fix this. Is there any other way where I can pass a value between pages? Or is there a way I can access the session data again?
If you use this on all pages, you could just add that header into the _app.{js,tsx}(see the docs). In case you don't I suppose you create a layout component and reuse it across these pages.
In the future we might be able to use the new Routing API which allows passing adding Layout components for certain sub-routes. (Check the Layout RFC for more info).
because next js uses the react library so you can pass the data using props or you can use redux as well.
like this:
<Component propName={value}/>
Recently installed the project noted here: https://developer.salesforce.com/blogs/2020/11/how-to-use-apex-natively-with-svelte-vue-and-preact-within-lwc.html to test a theory on using Preact in a Lightning Web Component. Observed that in the Preact component any click in the component fires the onclick function for the first element rendered in the component (with an onclick property), any additional clicks or clicking directly on other elements (with or without an onclick properties) only fire the function for the first element. This behavior tracks with a separate project I've been working on that includes Preact. Does anyone know what would cause this and/or have suggestions on ways to address?
I'm assuming this is related to the LWC wrapper and how it redirects browser events to be processed, but I'm out of my depth in terms of fully debugging that path.
I ran this by the author of the linked blog post and we confirmed this doesn't work in an actual org, though it works fine in a local dev sandbox. Likely culprit is locker service, but neither the author nor I was willing to try to verify that, and there wouldn't be a whole lot to be done about it even if it were confirmed.
Short answer, Preact doesn't work in LWC framework currently.
I was just about to set up a 2nd GA property that I would implement into my Staging environment. I figured i'd do the same with GTM and just export/import containers from Stage to Production whenever necessary. I also figured I'd dynamically populate the Tracking-ID dynamically based on hostname. No big deal.
But then I stumbled across Environments for GTM. The first bit I read said that using this feature would solve the problem of moving code across environments. To me this implied that the snippet code would remain the same in all environments and that there would be no need to change (dynamically, via build script, manually or otherwise) any values or anything... that GTA was smart enough to deploy the right container(s) to the right place(s) at the right time(s). That sounds great, I'll do it.
Now that I'm getting into that process I'm learning (if I'm understanding correctly) that each environment does in face have to have a separate snippet. So now I"m back to where I started, with having to dynamically add values to the snippets based on domain name (which determines stage or test). With out that, every time the file containing the snippet is pushed between environments, it will contain the wrong values. I guess using Environments still takes out the export/import process for containers (which, don't get me wrong, is nice) but having to change those values is a pain..
Is this the long and short of it - do I have this right? Is there any way around having to change code in the web page (or template) by doing it somehow through GTM instead? I'm guessing not, since the snippet is the base of GTM's functionality, but i figure I'd ask.
Further complicating things is that I was planning to use a Wordpress plugin, Google Tag Manager for Wordpress, to add the GTM code. in this case, all I can even change is is the Tracking-ID, which actually stays the same... it's other values that change that I have no control over with the plugin. Is anyone aware of a way to inject new values into the snippet that the plugin writes to the page?
The snippet for an environment has the same GTM id, but has a token for the environment name attached to the GTM url. If you use any kind of build system it should be possible to set or change the token according to the server you deploy to. Personally I am not convinced that environments are really useful.
If all you need is different values for tracking ids, you can implement lookup table variables that take hostname variable as input and return the respective tracking id for live or staging. Then use that instead of hardcoding the tracking id into your tag.
I've searched all the internet, but found no similar resolved issues.
So, I'm playing around with Cloud Firestore and my issue is simply that I can't add anything to Firestore from console, I click on "Add collection", enter name, then generate random id for new document, and add a single string to it. After clicking "Save", nothing is added and screen still says "No data at this location yet". I tried reloading, logging off and in again, adding only empty collection, etc. Anyone knows what could be wrong? Maybe that's some bug because Firestore is in beta?
I was facing the similar issue, after a lot of research, I found out that there is an issue with chrome browser. Just open the same console with firefox browser, you will be able to do all the operations :)
I had the same issue. Try to go to the collection that you have created directly via parent path.
EDIT:
Sorry, I was wrong. Problem still occurs. Found out antivirus blocks these operations. I'm using kaspersky
Similar problem here. It works after I enable data collection on Kaspersky.
If there is no document in the collection, the collection disappears. The process is fairly fail-proof. You can enter 1 as the document name and 1 as the string field leaving the value blank and it will still write.
Try adding a different data type. Also, try and use one of the SDKs, the web (browser) or admin (Node.js) SDK to write (.set) data in a document firebase.firestore().collection("test").doc().set({"name":"john"}); with the test/open security rules in place.
NOTE:
Firebase does not accept undefined values by default.
Check your values: Having undefined values could well be the reason.
Following Xavi's advice, I found out that it worked on Safari, I then went back to the Chrome Firebase console and logged out of all accounts and re-logged in with the account I have Firebase access to, and I am now able to read and write from the console and also from my React app.
My web-app records users via webcam and microphone. I want to use HTML/JS for the controls and content, so I created two separate Flex modules:
* A "Webcam Setup" module that lets you choose your camera and mic input devices
* A "record" module that lets the user record and submit the recording
When I embed either of these on the page, since they access the user's Camera/Mic object, Flash shows the Privacy dialog that says "[mysite] is requesting access to your camera and microphone. If you click Allow, you may be recorded."
The problem is, if I answer Yes in the Setup module, and later add the Record module to the page using Javascript, it again shows the Privacy dialog.
Is there a way to avoid the second privacy popup?
I would think that saying "Yes" for [mysite] would store that permission for at least that session, but apparently not.
What I've tried
I tried combining them into one SWF, adding it to the page once and moving the DOM element with jQuery's append() function when needed. When I move it, however, it reloads and asks me again.
Imagine if [mysite] was, say, blogger.com or livejournal.com (or, if it were still around, geocities.com). Would you want a "yes" response on that site to be good for every page under that domain?
Rememeber, just because you promise (cross your heart & hope to die) not to abuse the security hole you request, doesn't mean they can allow you to have that security hole.
Eventually, I found a usable workaround, similar to what I originally tried (above).
I combined the setup and record modules into one SWF. I first show the setup screen. When the user hits the Continue button on my page, Javascript calls a function in the SWF to swap to the Record screen.
I then move the <div> containing the Flash object to another location on page using absolute positioning, and resize the object.
Previously, I was trying to use jQuery's append() function to move the div within the DOM, and that was causing the SWF to reload. Just changing position and size does actually work.
You could build the "record" component to simply send and receive signals using an API you've created for your "setup" component (which has already been authorized, meaning one auth & two swfs) by using the LocalConnection class:
http://livedocs.adobe.com/flex/3/langref/flash/net/LocalConnection.html
This seems far closer to best practice than the other implementations mentioned, which smell a bit hacky and would probably confuse anyone who may inherit the codebase in the future.