Develop Reference

Firebase Hosting can't find Express Endpoints

I have set up hosting on Firebase and configured my Node.js express app following the documentation provided by Google. Including the proper folder structure and command line instructions to init firebase and firebase-functions.
Folder Structure:
Project
-- functions
-- node_modules
-- index.js
-- package.json
-- public
-- index.html
-- 404.html
.firebaserc
firebase.json
I have added the express app to the firebase functions http request via the code below:
// Set up endpoint
app.get('/api', (req, res) => {
res.json({
message: 'Welcome to the Line Prophet API. Good luck.'
})
});
/**
* Firebase cloud functions
*/
exports.app = functions.https.onRequest(app);
My Firebase.json file is set up to direct all request to the app destination:
{
"hosting": {
"public": "public",
"rewrites": [
{
"source": "**",
"destination": "app"
}
]
}
}
Once I run firebase deploy from my parent directory everything goes through fine and it says the app is deployed:
However after that I navigate to https://line-prophet.web.app/api and I recieve a 404 page not found error.
I have tried to run this locally with firebase serve and I have the same issue. This was working briefly which is why I feel as though everything is set up correctly, however after deploying again it has broken for good. Any tips are appreciated. Thanks!
The latest deployments say there are only 4 files deployed to Firebase which seems very low. I checked the Functions tab and I do see that "app" is in there and the source code is correct.

Thanks to #LawrenceCherone changing the firebase.json file to:
"rewrites": [
{
"source": "**",
"function": "app"
}
]
solved my issue. I was using destination instead of function because of the online docs, but it makes more sense to direct all requests to the function you have set up to handle http request.

FirebaseAuth requests blocked by cors policy in js app

I know that similar questions exist, but I didn't find a solution for me.
I have a built-in Flutter web app that is compiled into javascript. I had it hosted on Firebase Hosting. The in-app first screen is the login page which uses FirebaseAuth for logging. Whenever the first time website is open - all internal library requests have status failed. When after that I press CTRL+F5 everything works smoothly.
Here is a comparison of the same first internal request. On left is successful one, on right one which fails due to "** has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'."
I found out about the configuration of headers for Firebase Hosting, so I did it:
{
"hosting": {
"public": "",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [ {
"source": "**",
"headers": [
{
"key": "Access-Control-Allow-Origin",
"value": "*"
},
{
"key": "Access-Control-Allow-Methods",
"value": "DELETE, POST, GET, OPTIONS"
},
{
"key": "Access-Control-Allow-Headers",
"value": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
}
]
}]
}
}
In app there is a simple initialization of a firebase in didChangeDependencies with required data. Then FirebaseAuth.instance.signInWithEmailAndPassword(...) On index.html section about firebase:
<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-firestore.js"></script>
<script src="main.dart.js" type="application/javascript"></script>
I have tested it in Chrome many times and always failed. Only on localhost runs smoothly
More info:
requests on "normal" (without clearing cache) return to page:
requests after CTRL+F5 on the same site:
Those blurred on red are the URL of my app

The cause of this issue was from the service worker blocking Firebase Auth calls on web. This has been fixed as mentioned on this GitHub issue thread. Updating to the latest version of firebase_auth plugin should fix the issue.

Amazon S3 javascript and css files 403

I have some javascript and css files linked in head tag of my page. All the page content (index.html page and javascript and css files) is located in a bucket. When I launch index.html page, I get 403 errors on all those javascript and css files:
Failed to load resource: the server responded with a status of 403 (Forbidden)
This must be some setting on amazon S3 which prevent these files from accessing?
Can you help me resolve this?

You need to check if your files are configured as public:
Or grant permissions using a Bucket policy:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AddPerm",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
}
]
}

Publishing Amazon AWS credentials for account with 1 permission

I have an piece of code I want to live on a static website but I want it to pull the latest version of a file in an Amazon AWS S3 bucket to display a link for download. I'm not requiring the user to authenticate in any way with my site.
The API I'm using (aws-sdk for javascript) requires credentials to perform any operation, even on a public bucket. My plan for listing the files is to create an IAM user that can only access a subfolder in this bucket through the following policy to do what I need:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AllowListingOfDLFolder",
"Action": "s3:ListBucket",
"Effect": "Allow",
"Resource": [
"arn:aws:s3:::cobstatic.com"
],
"Condition": {
"StringLike": {
"s3:prefix": [
"dl/*"
]
}
}
}
]
}
Is this secure? Is there a better solution?

Chrome App Identity Login Not Working

I tried using chorome.identity to auth my app but it seems NWJS can not load login page that provided by chrome at chrome://chrome-signin/?access_point=6&reason=0.
I have my package.json just like this:
"permissions": ["tabs", "identity", "storage", "https://www.googleapis.com/*",
"https://*.googleusercontent.com/*",
"https://ssl.gstatic.com/",
"https://www.googleapis.com/",
"https://accounts.google.com/",
"chrome://chrome-signin/?access_point=6&reason=0"],
"oauth2": {
"client_id": "xxxxxx.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/drive"
]
},
"key": "MIIBIjANBxxxxxxx"
and this is my code:
chrome.identity.getAuthToken({'interactive': true}, function (token) {
if (chrome.runtime.lastError) {
console.log(chrome.runtime.lastError);
return;
}
console.log('Tokennya adalah', token);
});
is there any wrong code I've written?

Mostly your oauth2 client_id does not match the package id of your extension. When generating oauth2 token for chrome app, it will ask for your app's web store id after you upload the initial app with the manifest. Check if it is the same as that of your extension loaded to the chrome for development. If not, give the local extension instead of the web store id. And use that client_id in your manifest for development. Later on change it to the webstore url id to publish.
And there is no need for "chrome://chrome-signin/?access_point=6&reason=0" url under permissions.