Although initially enabled, after every firebase deploy --only:functions id/refresh token settings are all disabled:
One has to manually re-enable each time which is super frustrating!
Perhaps this is because a deployment might change the blocking functions (particularly true when transpiling from typescript, etc.).
Is there a way to make these settings "sticky" across deployments?
Alternative suggestion for the world-class firebase team:
Add a new field to firebase.json:
"authentication": { "blockingFunctions": { "refreshToken": true, ...etc } }
Add a checkbox to the configuration UI something like [X] Allow application to manage these settings which, if checked, causes the firebase.json settings to take effect.
Related
Manifest version 3 for Chrome extensions have been killing me lately. Been able to navigate around it so far, but this one has really stumped me. I'm trying to use Firebase authentication for a Chrome extension, specifically with 3rd party auth providers such as Google and Facebook. I've setup the Firebase configuration for Login with Google and created a login section in the options page of the Chrome extension and setup the Firebase SDK.
Now, there are two login options when using an auth provider, signInWithRedirect and signInWithPopup. I've tried both of these and both have failed for different reasons. signInWithRedirect seems like a complete dead end as it redirects to the auth provider, and when it attempts to redirect back to the chrome-extension://.../options.html page, it just redirects to "about:blank#blocked" instead.
When attempting to use signInWithPopup, I instead get
Refused to load the script 'https://apis.google.com/js/api.js?onload=__iframefcb776751' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
In v2, you could simply add https://apis.google.com to the content_security_policy in the manifest. But in v3, the docs say
"In addition, MV3 disallows certain CSP modifications for extension_pages that were permitted in MV2. The script-src, object-src, and worker-src directives may only have the following values:"
self
none
Any localhost source, (http://localhost, http://127.0.0.1, or any port on those domains)
So is there seriously no way for a Google Chrome extension to authenticate with a Google auth provider through Google's Firebase? The only workaround I can think of is to create some hosted site that does the authentication, have the Chrome extension inject a content script, and have the hosted site pass the auth details back to the Chrome extension through an event or something. Seems like a huge hack though and possibly subject to security flaws. Anyone else have ideas??
Although it was mentioned in the comments that this works with the Google auth provider using chrome.identity sadly there was no code example so I had to figure out myself how to do it.
Here is how I did it following this tutorial:
(It also mentions a solution for non-Google auth providers that I didn't try)
Identity Permission
First you need permission to use the chrome identity API. You get it by adding this to your manifest.json:
{
...
"permissions": [
"identity"
],
...
}
Consistent Application ID
You need your application ID consistent during development to use the OAuth process. To accomplish that, you need to copy the key in an installed version of your manifest.json.
To get a suitable key value, first install your extension from a .crx file (you may need to upload your extension or package it manually). Then, in your user data directory (on macOS it is ~/Library/Application\ Support/Google/Chrome), look in the file Default/Extensions/EXTENSION_ID/EXTENSION_VERSION/manifest.json. You will see the key value filled in there.
{
...
"key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAgFbIrnF3oWbqomZh8CHzkTE9MxD/4tVmCTJ3JYSzYhtVnX7tVAbXZRRPuYLavIFaS15tojlRNRhfOdvyTXew+RaSJjOIzdo30byBU3C4mJAtRtSjb+U9fAsJxStVpXvdQrYNNFCCx/85T6oJX3qDsYexFCs/9doGqzhCc5RvN+W4jbQlfz7n+TiT8TtPBKrQWGLYjbEdNpPnvnorJBMys/yob82cglpqbWI36sTSGwQxjgQbp3b4mnQ2R0gzOcY41cMOw8JqSl6aXdYfHBTLxCy+gz9RCQYNUhDewxE1DeoEgAh21956oKJ8Sn7FacyMyNcnWvNhlMzPtr/0RUK7nQIDAQAB",
...
}
Copy this line to your source manifest.json.
Register your Extension with Google Cloud APIs
You need to register your app in the Google APIs Console to get the client ID:
Search for the API you what to use and make sure it is activated in your project. In my case Cloud Firestore API.
Go to the API Access navigation menu item and click on the Create an OAuth 2.0 client ID... blue button.
Select Chrome Application and enter your application ID (same ID displayed in the extensions management page).
Put this client ID in your manifest.json. You only need the userinfo.email scope.
{
...
"oauth2": {
"client_id": "171239695530-3mbapmkhai2m0qjb2jgjp097c7jmmhc3.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/userinfo.email"
]
}
...
}
Get and Use the Google Auth Token
chrome.identity.getAuthToken({ 'interactive': true }, function(token) {
// console.log("token: " + token);
let credential = firebase.auth.GoogleAuthProvider.credential(null, token);
firebase.auth().signInWithCredential(credential)
.then((result) => {
// console.log("Login successful!");
DoWhatYouWantWithTheUserObject(result.user);
})
.catch((error) => {
console.error(error);
});
});
Have fun with your Firebase Service...
Is there a way to integrate an Expo app with firebase dynamic links without detaching.
If you need to create new dynamic links on the fly you could use REST API to do it. In the much more likely scenario that you only need your app to open Firebase's dynamic links, you don't need to do anything other than configuring your Expo App to handle universal links (ie: deeplinks using http/https).
The checklist is something like this:
1. Configure your app.json
For Android, add the intentFilters property to your android property:
"android": {
"intentFilters": [
{
"action": "VIEW",
"data": [
{
"scheme": "https",
"host": "<your-domain>",
"pathPrefix": "/"
},
],
"category": [
"BROWSABLE",
"DEFAULT"
],
"autoVerify": true // required to work on newer android versions
}
]
]
For iOS, add the associatedDomains property to ios:
"ios": {
"associatedDomains": ["applinks:<your-domain>"]
}
2. Configure your domain to allow links from it to be handled by the apps
Android and iOS will allow your app to open links from your domain if you serve a configuration file from a specific location:
Android: https://<your-domain>/.well-known/assetlinks.json
iOS: https://<your-domain>/.well-known/apple-app-site-association
assetlinks.json will look something like this:
[{
"relation": ["delegate_permission/common.handle_all_urls"],
"target": {
"namespace": "android_app",
"package_name": "<android-package-name>",
"sha256_cert_fingerprints":
["<your-sha256-certificate-fingerprints>"]
}
}]
And the apple-app-site-association like this:
{
"applinks": {
"apps": [],
"details": [
{
"appID": "<your-team-id>.<ios-bundle-identifier>",
"paths": [ "*" ]
}
]
}
}
You can read more about these files here and here.
To obtain the SHA256 fingerprints of your app’s signing certificate you can use the keytool:
keytool -list -v -keystore <your-key-file>
After you enter your keystore password, it will print many of the keystore information including the SHA256 fingerprints.
If your site is hosted on Firebase both assetlinks.json and apple-app-site-association can be generated automatically if you create the Apps on your Firebase's project. Otherwise, just put these files on the root of your domain.
3. Create a Firebase dynamic link
I think this is step is mostly self explanatory but just a few notes:
Set up your short URL link: in the end you will have / that you send to your users
Set up your Dynamic Link: here you define your deelink (the link you want your app to handle)
Define link behavior for iOS: you mostly likely want to click on 'Open the deep link in your iOS App' and select your App from the list (if you haven't yet, create one App for each platform on your project)
Define link behavior for Android: same as previous but with a few more options to select
Configure (or not) campaign tracking and you're done.
Remember that you always should test your deeplinks by clicking instead of by entering directly on the browser. You may send the link to yourself on the WhatsApp or put on some notes app, for example.
Others resources that might be helpful:
https://docs.expo.io/versions/latest/workflow/linking/
https://reactnavigation.org/docs/deep-linking/
In addition to Pedro Andrade's instructions:
1.) Firebase requires the following details under your app > project settings for dynamic links to work.
Android: SHA 256 (App signing key certificate fingerprint) - this can be retrieved via play store > your app > App Integrity > SHA 256
iOS: App ID Prefix (Team ID): developer.apple.com > Certificates, Identifiers & Profiles > your app id > App ID Prefix
Surprisingly, these are mentioned almost nowhere in the docs, but do come up in stackoverflow results and other answers when googling errors that debugging preview links result in:
Android app '<bundle id>' lacks SHA256. AppLinks is not enabled for the app. Learn more.
iOS app '<bundle id>' lacks App ID Prefix. UniversalLinks is not enabled for the app. Learn more.
You can view debugging preview links by adding ?d=1 to your dynamic links.
https://firebase.google.com/docs/dynamic-links/debug
2.) Even if you use a page.link-style domain provided by firebase for your dynamic links, your associatedDomain/intentFilter domains in app.json should still be your actual domain
i.e if you're generating my-app.page.link shortLinks, that are dynamic links to my-app.com, you should use my-app.com in app.json
Pedro Andrade's solution works! Partially...
Explaining:
You must NOT add your dynamic link domain in intentFilters and associatedDomains, because it makes the app to open the link directly in the app, so, the dynamic link is not processed and you don't have access to the link generated by the dynamic link.
It works partially because of this: the dynamic link needs to be opened by the browser (chrome or safari) before being opened in the app.
Example: Open "<your-domain>.page.link/XLSj" in browser, browser will direct to generated link: "<your-domain>.com/params/54" to configured deep link.
I don't know any other way to 'read' the dynamic link by expo in managed workflow.
We are working adding Auth0 to our Next.js website and referencing this example.
What I am wondering about is the settings in next.config.js in the example. It puts the Auth0 and other secrets in the client (via Webpack). Doesn't this put these secrets at risk? Since they are somewhere in the client code, there is a chance that a request can be made to access the secrets.
Examples in this Auth0 article also puts the secrets in the client.
I haven't had much luck finding out how Webpack handles the variables and am looking to the community to shed some light on this. We are trying to ensure our pattern is safe before putting it in to place.
From example, secrets being added to client side next.config.js:
const dotenv = require('dotenv')
dotenv.config()
module.exports = {
env: {
AUTH0_DOMAIN: process.env.AUTH0_DOMAIN,
AUTH0_CLIENT_ID: process.env.AUTH0_CLIENT_ID,
AUTH0_CLIENT_SECRET: process.env.AUTH0_CLIENT_SECRET,
AUTH0_SCOPE: 'openid profile',
REDIRECT_URI:
process.env.REDIRECT_URI || 'http://localhost:3000/api/callback',
POST_LOGOUT_REDIRECT_URI:
process.env.POST_LOGOUT_REDIRECT_URI || 'http://localhost:3000/',
SESSION_COOKIE_SECRET: process.env.SESSION_COOKIE_SECRET,
SESSION_COOKIE_LIFETIME: 7200, // 2 hours
},
}
Update - Next v9.4:
Since Next.js v9.4, it exposes only env variables with the prefix NEXT_PUBLIC_ to the browser.
For more info, read this
Original answer:
DON'T put any secret env variables in a place that is accessible to the client.
I'm not sure what next does with this env property, It just configures a webpack DefinePlugin that replaces usages of process.env.VAR to it's value.
So, this means that your secrets will be inside bundles that are public.
To confirm that it is exposed in the client,
open dev-tools
open console by
pressing esc
click on the search tab
enter your secret key
It will find it in one of the bundles.
I have developed a website using gatsby and I am using google analytics plugin via gatsby-plugin-google-analytics, now to be nice with the users, I would like to add a cookie consent where the user will be two options whether to accept or decline cookies usages. If the user declines then I would like to stop google analytics to track the user activity. I dug into their documentation but unable to find the option to achieve this, is there any way around to achieve this.
{
resolve: `gatsby-plugin-google-analytics`,
options: {
trackingId: siteConfig.googleAnalyticsId,
// Defines where to place the tracking script - `true` in the head and `false` in the body
head: false,
},
},
For the movement my gatsby-config.js looks like this. how one can achieve this.
Thanks you in advance.
The plugin merely loads the library and instruments page tracking calls in a Gatsby-compatible way for you. All of the other Google Analytics calls, including disabling measurement for a user works the same as normal.
It's up to you to:
Build and show a cookie notice with an opt-out
Remember when a user has opted out
Communicate this on each page-load for the user (before any ga() calls are made) by setting window['ga-disable-UA-XXXXX-Y'] = true
You should be able to do this in a function exported as onClientEntry from gatsby-browser.js. For example:
export const onClientEntry = () => {
if (userHasOptedOutOfThirdPartyTracking()) {
window[`ga-disable-${process.env.GATSBY_GOOGLE_ANALYTICS_ID`] = true
}
}
For the Gatsby website, you could use a combination of gatsby-plugin-gdpr-cookies for analytics cookies management in your gatsby-config.js and react-cookie-consent to display the cookie banner.
# using npm
npm install --save gatsby-plugin-gdpr-cookies react-cookie-consent
# using yarn
yarn add gatsby-plugin-gdpr-cookies react-cookie-consent
You can find a more detailed tutorial here.
How could you setup rules on Firebase which would allow a user to become a paid user of your app? For example, if I have the following data structure:
{
users: [
{
isPaid: false
},
{
isPaid: true
}
]
}
How could you setup firebase rules to not allow the user to update it themselves (by fudging a request), but still allow it to be updated automatically when they "pay" for your app?
I've thought about randomly generating a number and asking the user to enter that number or something like that, but I don't think that would work... Has anyone done something like this?
You'll need to have a server process that securely writes the paid flag using a Firebase secret (that can be found on Forge for your Firebase). Set the ".write" rule for /users/isPaid as false - the server code can bypass this rule since it knows the secret. You should call firebaseRef.auth(secret) from your server code first.