Cloud Vision: Credentials issues - firebase

I am attempting to setup Cloud Vision on my local machine in a Firebase project but I am encountering problems with the default credentials.
First, I encountered Could not load the default credentials. This post suggested that I do gcloud auth application-default login. Upon attempting that, I encountered this:
Error: 7 PERMISSION_DENIED: Your application has authenticated using end user credentials from the Google Cloud SDK or Google Cloud Shell which are not supported by the vision.googleapis.com. We recommend configuring the billing/quota_project setting in gcloud or using a service account through the auth/impersonate_service_account setting. For more information about service accounts and how to use them in your application, see https://cloud.google.com/docs/authentication/.
I also attempted exports GOOGLE_APPLICATION_CREDENTIALS = "pathToServiceAccount" but it didn't work in my case.
Note that I have no issue reading/writing data to Firestore and Firebase Storage. The moment my code hits the Cloud Vision part, it throws the error. I have activated the API on cloud console and enabled billing. Security rules in firestore and storage are in testing mode at this moment.
const vision = require('#google-cloud/vision');
var admin = require('firebase-admin');
let serviceAccount = require('../path-to-service-account.json');
admin.initializeApp({
credential: admin.credential.cert(serviceAccount),
storageBucket: "mybucket.appspot.com"
});
let db = admin.firestore()
let bucket = admin.storage().bucket();
//Some networking code, return a promise
.then(response => {
//setup storagePath
return pipeToStorage(item, response, storagePath) //Save to firebase storage ok
})
.then((item) => {
return performTextDetection(item.id) //Throws error here
})
function pipeToStorage(item, response, storagePath) {
return new Promise((resolve, reject) => {
gcFile = bucket.file(storagePath)
response.data
.pipe(gcFile.createWriteStream({
metadata : {
contentType: "application/pdf"
}
}))
.on('error', (error) => {
reject(error)
})
.on('finish', () => {
resolve(item)
})
})
}
function performTextDetection(id) {
const client = new vision.ImageAnnotatorClient();
const bucketName = bucket.name;
const fileName = `items/${id}.pdf`
const outputPrefix = 'ocr_results'
const gcsSourceUri = `gs://${bucketName}/${fileName}`;
const gcsDestinationUri = `gs://${bucketName}/${outputPrefix}/${id}/`;
const inputConfig = {
mimeType: 'application/pdf',
gcsSource: {
uri: gcsSourceUri,
},
};
const outputConfig = {
gcsDestination: {
uri: gcsDestinationUri,
},
};
const features = [{type: 'DOCUMENT_TEXT_DETECTION'}];
const request = {
requests: [
{
inputConfig: inputConfig,
features: features,
outputConfig: outputConfig,
},
],
};
return client.asyncBatchAnnotateFiles(request)
.then(([operation]) => {
return operation.promise()
})
.then(([filesResponse]) => {
const resultsUri = filesResponse.responses[0].outputConfig.gcsDestination.uri
return resultsUri
})
}

This happens because you have exports rather than export:
exports GOOGLE_APPLICATION_CREDENTIALS = "pathToServiceAccount"
please try:
export GOOGLE_APPLICATION_CREDENTIALS="/home/user/credentials.json"
note that there are not spaces, see details here. By the way, I have also found the same PERMISSION_DENIED error when export is omitted.
The validation step is executing a REST request with curl:
curl -X POST \
-H "Authorization: Bearer "$(gcloud auth application-default print-access-token) \
-H "Content-Type: application/json; charset=utf-8" \
-d #request.json \
https://vision.googleapis.com/v1/images:annotate
See the complete example here.

Related

Firebase functions run in one firebase project but giving internal error in the other

I have two firebase accounts one used for development(D) and the other for production(P). My development(D) firestore and functions run on us-central1. On production(P) firestore location is asia-south1 and functions run on us-central1
My firebase functions run properly in development (D) but are giving me the following error in production. Further, when I check the logs on the firebase functions console, there does not seem to be any activity. It appears as if the function has not been called.
Error returned by firebase function is :
Function call error Fri Apr 09 2021 09:25:32 GMT+0530 (India Standard Time)with{"code":"internal"}
Further the client is also displaying this message :
Access to fetch at 'https://us-central1-xxx.cloudfunctions.net/gpublish' from origin 'https://setmytest.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. zone-evergreen.js:1052 POST https://us-central1-xxx.cloudfunctions.net/gpublish net::ERR_FAILED
Here is the code from my angular app calling the function -
const process = this.fns.httpsCallable("gpublish");
process(data).subscribe(
(result) => {
console.log("function responded with result: " + JSON.stringify(result));
},
(err) => {
const date1 = new Date();
console.log("Function call error " + date1.toString() + "with" + JSON.stringify(err));
});
Here are the functions -
index.ts
import { gpublish } from "./gpublish/gpublish";
import { sendEmail } from "./sendEmail";
export {gpublish,sendEmail };
gpublish.ts
import * as functions from "firebase-functions";
const fs = require("fs");
const { google } = require("googleapis");
const script = google.script("v1");
const scriptId = "SCRIPT_ID";
const googleAuth = require("google-auth-library");
import { admin } from "../admin";
const db = admin.firestore();
export const gpublish = functions.https.onCall(async (data: any, res: any) => {
try {
const googleTest = data.test;
console.log("Publishing to google test of name " + googleTest.testName);
// read the credentials and construct the oauth client
const content = await fs.readFileSync("gapi_credentials.json");
const credentials = JSON.parse(content); // load the credentials
const { client_secret, client_id, redirect_uris } = credentials.web;
const functionsOauth2Client = new googleAuth.OAuth2Client(client_id,client_secret, redirect_uris); // Constuct an auth client
functionsOauth2Client.setCredentials({refresh_token: credentials.refresh_token}); // Authorize a client with credentials
// run the script
return runScript(functionsOauth2Client,scriptId,JSON.stringify(googleTest)
).then((scriptData: any) => {
console.log("Script data is" + JSON.stringify(scriptData));
sendEmail(googleTest, scriptData);
return JSON.stringify(scriptData);
});
} catch (err) {
return JSON.stringify(err);
}
});
function runScript(auth: any, scriptid: string, test: any) {
return new Promise(function (resolve, reject) {
script.scripts
.run({auth: auth,scriptId: scriptid, resource: {function: "doGet", devMode: true,parameters: test }
})
.then((respons: any) => { resolve(respons.data);})
.catch((error: any) => {reject(error);});
});
}
I have changed the service account key and google credentials correctly when deploying the functions in development and in production.
I have tried many things including the following:
Enabling CORS in Cloud Functions for Firebase
Google Cloud Functions enable CORS?
The function is running perfectly in Development firebase project but not in Production firebase project. Please help!
You need to check that your function has been deployed correctly.
A function that doesn't exist (404 Not Found) or a function that can't be accessed (403 Forbidden) will both give that error as the Firebase Function is never executed, which means the correct CORS headers are never sent back to the client.

How do I test a Firebase Cloud Function that expects a user ID? [duplicate]

I want to test a a cloud function that creates users.
In normal cases, inside the browser i generate an idToken and i send it to server via headers: Authorization : Bearer etcIdToken
But I want to test this function without the browser. In my mocha tests i have:
before(done => {
firebase = require firebase.. -- this is suppose to be like the browser lib.
admin = require admin..
idToken = null;
uid = "AY8HrgYIeuQswolbLl53pjdJw8b2";
admin.auth()
.createCustomToken(uid) -- admin creates a customToken
.then(customToken => {
return firebase.auth() -- this is like browser code. customToken get's passed to the browser.
.signInWithCustomToken(customToken) -- browser signs in.
.then(signedInUser => firebase.auth() -- now i want to get an idToken. But this gives me an error.
.currentUser.getIdToken())
})
.then(idToken_ => {
idToken = idToken_
done();
})
.catch(err => done(err));
})
The error i'm getting is:
firebase.auth(...).currentUser.getIdToken is not a function - getting the idToken like this works on client - and is documented here.
I tried directly with signedInUser.getIdToken(). Same problem:
signedInUser.getIdToken is not a function - not documented. just a test.
I think this is because firebase object is not intended for node.js use like i'm doing here. When signing in - stuff get's saved in browser local storage - and maybe this is why.
But the question still remains. How can i get an idToken inside node.js in order to be able to test:
return chai.request(myFunctions.manageUsers)
.post("/create")
.set("Authorization", "Bearer " + idToken) --- i need the idToken here - like would be if i'm getting it from the browser.
.send({
displayName: "jony",
email: "jony#gmail.com",
password: "123456"
})
am I approaching this wrong? I know that if i can get the idToken it will work. Do i rely need the browser for this? Thanks :)
From Exchange custom token for an ID and refresh token, you can transform a custom token to an id token with the api. Hence, you just have to generate a custom token first from the uid, then transform it in a custom token. Here is my sample:
const admin = require('firebase-admin');
const config = require('config');
const rp = require('request-promise');
module.exports.getIdToken = async uid => {
const customToken = await admin.auth().createCustomToken(uid)
const res = await rp({
url: `https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyCustomToken?key=${config.get('firebase.apiKey')}`,
method: 'POST',
body: {
token: customToken,
returnSecureToken: true
},
json: true,
});
return res.idToken;
};
L. Meyer's Answer Worked for me.
But, the rp npm package is deprecated and is no longer used.
Here is the modified working code using axios.
const axios = require('axios').default;
const admin = require('firebase-admin');
const FIREBASE_API_KEY = 'YOUR_API_KEY_FROM_FIREBASE_CONSOLE';
const createIdTokenfromCustomToken = async uid => {
try {
const customToken = await admin.auth().createCustomToken(uid);
const res = await axios({
url: `https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyCustomToken?key=${FIREBASE_API_KEY}`,
method: 'post',
data: {
token: customToken,
returnSecureToken: true
},
json: true,
});
return res.data.idToken;
} catch (e) {
console.log(e);
}
}
curl 'https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyPassword?key=<FIREBASE_KEY>' -H 'Content-Type: application/json'--data-binary '{"email": "test#test.com","password":"test","returnSecureToken":true}'
If this curl doesn't run, try running the same thing on Postman. It works!

Where do you get/find the JWT-Secret from firebase?

I'm using firebase for my web/mobile apps and now have a back-end API I'm looking to use as well.
The API requires a JWT token to authenticate the requests and to set it up, I need to specify the JWT Secret that is used to encrypt/decrypt the token.
In firebase, I believe I retrieve the token using
const token = await firebase.auth().currentUser.getIdToken(); This is what I pass to the API.
However, I have not figured out where I get the JWT-secret to configure? I have tried the API key that is shown in firebase console, I have also tried the server/client keys found at my console at https://console.developers.google.com.
however, no matter what, I'm getting a JWSInvalidSignature when trying to make requests to the API Call.
Has anyone got this working? Where do I get the JWT-secret from firebase to configure on the API back-end? Thanks in advance.
Here are the details:
1. I am using a service called postGrest which auto-creates a web API on top of postgres DB. In order to authenticate the requests, you configure the service by specifying a custom claim called "role", and you also need to specify the JWT-secret so it can decode the token.
Here is my simple call to the API:
const fetchdata = async () => {
const token = await firebase.auth().currentUser.getIdToken();
let axiosConfig = {
headers: {
'Authorization': 'Bearer' + token
}
}
const data = await axios.get(`http://localhost:8080/users`,
axiosConfig);
}
Also note, I can simulate this in the bash command line using the following code: Note here that I'm getting the token from the getIdToken() above.
export TOKEN="eyJhbGciOiJSUzI1NiIsImtpZCI6ImQ2YzM5Mzc4YWVmYzA2YzQyYTJlODI1OTA0ZWNlZDMwODg2YTk5MjIiLCJ0eXAiOiJKV1QifQ.eyJ1c2VyaWQiOiI1NSIsImlzcyI6Imh0dHBzOi8vc2VjdXJldG9rZW4uZ29vZ2xlLmNvbS9wb3N0Z3Jlc3QtYjRjOGMiLCJhdWQiOiJwb3N0Z3Jlc3QtYjRjOGMiLCJhdXRoX3RpbWUiOjE1NzExNTIyMjQsInVzZXJfaWQiOiJNMXZwQ3A2ZjlsaFdCblRleHh1TjlEdXIzUXAyIiwic3ViIjoiTTF2cENwNmY5bGhXQm5UZXh4dU45RHVyM1FwMiIsImlhdCI6MTU3MTE1OTQ0NSwiZXhwIjoxNTcxMTYzMDQ1LCJlbWFpbCI6InNwb25nZWJvYkBnbWFpbC5jb20iLCJlbWFpbF92ZXJpZmllZCI6ZmFsc2UsImZpcmViYXNlIjp7ImlkZW50aXRpZXMiOnsiZW1haWwiOlsic3BvbmdlYm9iQGdtYWlsLmNvbSJdfSwic2lnbl9pbl9wcm92aWRlciI6InBhc3N3b3JkIn19.nKuovs0Gx_ZKp17dI3kfz6GQofIMEOTA8RqTluwEs-5r-oTbKgpG33uS7fs7txVxvWIb_3fbN3idzfDHZevprMkagbHOd73CxTFBM7pr1bD2OKSK9ZPYfSt9OhvgJL51vBN3voLcNAb5iWVVl2XMqkcXeDoBi8IOKeZr27_DsRx48GSi7HieHWscF1lujSEr2C9tdAek3YyNnr3IcGI8cTSPHPaIbYl-8CaHQO2fUiGHEAaD7sqHxp3otJio56zOoNAy44P_nwORlMFZC0Rm8SaATpbmIkgbGYWHZHty70lmlYGVHTuM_hr2s7z2YhAjuacvBMgusZpyoVnoe3FQeA"
curl http://localhost:8080/contacts -H "Authorization: Bearer $TOKEN"
What's returned is: {"message":"JWSError JWSInvalidSignature"}
For the JWT-secret, I have tried several values, but none seem to work. This includes the "API Key" from firebase project, as well as trying "Generate key" which downloads a new .json file and inside there is a "private_key": that is along string.
From your service account downloaded file, use the private_key value to validate/decode the JWT token you got from getIdToken()...
The steps for using a third-party library to validate a Firebase Auth ID token describe it in more detail.
First you need to get your service_account.json
Then setup firebase on your server.
Example:
// set_up_firebase.js
const admin = require("firebase-admin");
var serviceAccount = require("./service_account.json");
admin.initializeApp({
credential: admin.credential.cert(serviceAccount),
storageBucket: "your-app.appspot.com"
});
exports.admin = admin;
Then create a middleware function to check jwt.
Example:
// verifyJWT.js
const fire = require("./set_up_fire.js");
function _getToken(req) {
return req.headers.authorization !== undefined
&& req.headers.authorization !== ""
&& req.headers.authorization.split(' ').length === 2
&& req.headers.authorization.split(' ')[1] !== undefined
&& req.headers.authorization.split(' ')[1] !== ""
? req.headers.authorization.split(' ')[1]
: "";
}
function getJWTExpiredPayload() {
return { "status": 401, "result": "ERROR", "error": "Unauthorized!" };
}
function getJWTNotValidPayload() {
return { "status": 403, "result": "ERROR", "error": "Forbidden!" };
}
module.exports = async (req, res, next) => {
const token = _getToken(req);
let verified = undefined;
if (token !== undefined && token !== null && token !== "") {
try {
verified = await fire.admin.auth().verifyIdToken(token, true);
if (verified !== undefined && verified["exp"] !== undefined
&& Date.now() < verified["exp"] * 1000) {
req.user = verified;
return next();
}
return res.status(401).json(getJWTExpiredPayload());
} catch (error) {
console.log(error);
}
}
return res.status(403).json(getJWTNotValidPayload());
}
Then in your router, call it before your api:
Example with Express:
const verifyJWT = require("./jwt/verifyJWT.js");
router.post("/verifyJWT", verifyJWT, (req, res) => {
return res.status(200);
})

Authenticate Firebase with Auth0 using Netlify Lambda Functions

I have a web app built with Gatsby that has client-side authentication through Auth0. I want to use Firebase as a database for my project, but I need to authenticate users first before they can read/write to Firebase.
The Firebase SDK (firebase-admin) has a function called signInWithCustomToken(token) that I thought I could pass the token from Auth0 into, but this doesn't work (see: https://community.auth0.com/t/react-auth0-firebase/11392).
Instead, I need to proxy Auth0's token through an API which will use firebase-admin to issue a token. Because my Gatsby site is hosted on Netlify, I'm planning to use Netlify Lambda Functions to get proxy Auth0's token. This is where I'm getting stuck.
I've followed this tutorial on how to use Netlify Lambda Functions with Gastsby: https://www.gatsbyjs.org/blog/2018-12-17-turning-the-static-dynamic/
I then went into my Auth.js file where my Auth0 code is and dropped a fetch call in the setSession. I passed the idToken from Auth0 into the url in the fetch function. I'm not sure if this is the right thing to do. I've read in the tutorial that it would be passed in an authorization header, but I'm unclear what that means. Anyways, here's the complete auth.js file:
import auth0 from 'auth0-js';
const windowGlobal = typeof window !== 'undefined' && window;
class Auth {
auth0 = new auth0.WebAuth({
domain: process.env.Auth_Domain,
clientID: process.env.Auth_ClientId,
redirectUri: process.env.Auth_Callback,
responseType: 'token id_token',
scope: 'openid profile email',
});
constructor() {
this.login = this.login.bind(this);
this.logout = this.logout.bind(this);
this.handleAuthentication = this.handleAuthentication.bind(this);
this.isAuthenticated = this.isAuthenticated.bind(this);
}
login() {
this.auth0.authorize();
}
logout() {
// Remove the locally cached profile to avoid confusing errors.
localStorage.removeItem('access_token');
localStorage.removeItem('id_token');
localStorage.removeItem('expires_at');
localStorage.removeItem('user');
windowGlobal.window.location.replace(`https://login.skillthrive.com/v2/logout/?returnTo=http%3A%2F%2Flocalhost:8000`)
}
handleAuthentication() {
if (typeof window !== 'undefined') {
this.auth0.parseHash((err, authResult) => {
if (authResult && authResult.accessToken && authResult.idToken) {
this.setSession(authResult)
} else if (err) {
console.log(err);
}
});
}
}
isAuthenticated() {
const expiresAt = JSON.parse(localStorage.getItem('expires_at'));
return new Date().getTime() < expiresAt;
}
setSession(authResult) {
const expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime());
localStorage.setItem('access_token', authResult.accessToken);
localStorage.setItem('id_token', authResult.idToken);
localStorage.setItem('expires_at', expiresAt);
fetch(`/.netlify/functions/firebase?id=${authResult.idToken}`)
.then(response => console.log(response))
this.auth0.client.userInfo(authResult.accessToken, (err, user) => {
localStorage.setItem('user', JSON.stringify(user));
})
}
getUser() {
if (localStorage.getItem('user')) {
return JSON.parse(localStorage.getItem('user'));
}
}
getUserName() {
if (this.getUser()) {
return this.getUser().name;
}
}
}
export default Auth;
I found a tutorial called How to Authenticate Firebase and Angular with Auth0 that has a function that mints a token for Firebase:
const jwt = require('express-jwt');
const jwks = require('jwks-rsa');
const firebaseAdmin = require('firebase-admin');
// Config
const config = require('./config');
module.exports = function(app) {
// Auth0 athentication middleware
const jwtCheck = jwt({
secret: jwks.expressJwtSecret({
cache: true,
rateLimit: true,
jwksRequestsPerMinute: 5,
jwksUri: `https://${config.AUTH0_DOMAIN}/.well-known/jwks.json`
}),
audience: config.AUTH0_API_AUDIENCE,
issuer: `https://${config.AUTH0_DOMAIN}/`,
algorithm: 'RS256'
});
// Initialize Firebase Admin with service account
const serviceAccount = require(config.FIREBASE_KEY);
firebaseAdmin.initializeApp({
credential: firebaseAdmin.credential.cert(serviceAccount),
databaseURL: config.FIREBASE_DB
});
app.get('/auth/firebase', jwtCheck, (req, res) => {
// Create UID from authenticated Auth0 user
const uid = req.user.sub;
// Mint token using Firebase Admin SDK
firebaseAdmin.auth().createCustomToken(uid)
.then(customToken =>
// Response must be an object or Firebase errors
res.json({firebaseToken: customToken})
)
.catch(err =>
res.status(500).send({
message: 'Something went wrong acquiring a Firebase token.',
error: err
})
);
});
I tried to incorporate small parts at a time into my Lambda function:
var admin = require("firebase-admin");
const jwt = require('express-jwt');
const jwks = require('jwks-rsa');
// For more info, check https://www.netlify.com/docs/functions/#javascript-lambda-functions
export function handler(event, context, callback) {
console.log("queryStringParameters", event.queryStringParameters);
const jwtCheck = jwt({
secret: jwks.expressJwtSecret({
cache: true,
rateLimit: true,
jwksRequestsPerMinute: 5,
jwksUri: `https://${process.env.Auth_Domain}/.well-known/jwks.json`
}),
audience: process.env.Auth_Audience,
issuer: `https://${process.env.Auth_Domain}/`,
algorithm: 'RS256'
});
callback(null, {
// return null to show no errors
statusCode: 200, // http status code
body: JSON.stringify({
msg: "Hello, World! " + Math.round(Math.random() * 10),
}),
})
}
I tried checking to see what came back for jwtCheck by console logging it, but all I got was something weird { [Function: d] unless: [Function], UnauthorizedError: [Function: r] }
How should I go about incorporating this into my Lambda function?
I found a module called serverless-http that allows me to write Lambda Function as if it were written in Express. This made it easy for me to wrap my head around what was happening, so I finally got this code to return the new minted token from Firebase:
const express = require('express');
const serverless = require('serverless-http');
const cors = require('cors');
const jwt = require('express-jwt');
const jwks = require('jwks-rsa');
const firebaseAdmin = require('firebase-admin');
const app = express();
app.use(cors());
const jwtCheck = jwt({
secret: jwks.expressJwtSecret({
cache: true,
rateLimit: true,
jwksRequestsPerMinute: 5,
jwksUri: `${process.env.Auth_Domain}/.well-known/jwks.json`
}),
audience: `${process.env.Auth_ClientId}`,
issuer: `${process.env.Auth_Domain}`,
algorithm: 'RS256'
});
const serviceAccount = require('../firebase/firebase-keys.json');
firebaseAdmin.initializeApp({
credential: firebaseAdmin.credential.cert(serviceAccount),
databaseURL: `https://${serviceAccount.project_id}.firebaseio.com`
});
// GET object containing Firebase custom token
app.get('/firebase', jwtCheck, async (req, res) => {
const {sub: uid} = req.user;
try {
const firebaseToken = await firebaseAdmin.auth().createCustomToken(uid);
res.json({firebaseToken});
} catch (err) {
res.status(500).send({
message: 'Something went wrong acquiring a Firebase token.',
error: err
});
}
});
module.exports.handler = serverless(app);
Then on the client side I wrapped the fetch call into a function like this and used it when needed:
async setFirebaseCustomToken() {
const response = await fetch('/.netlify/functions/firebase', {
headers: {
'Authorization': `Bearer ${localStorage.getItem('id_token')}`,
},
});
const data = await response.json();
console.log(data.firebaseToken);
}
This code is just going to console.log the new token, but now you'll have the response to do what you want with in Firebase client-side. Hope this helps!

CORS on firebase storage

I'm gettin the normal cors error on my firebase storage when I do a get call on an html file:
Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.
I'm using axios for the call:
axios.get('https://firebasestorage.googleapis.com/v0/b/xxxxx-xxxxx.appspot.com/o/files%2Fsigning%2F148%2F459.html?alt=media&token=f3be2ef2-a598-4c30-a77b-8077e8b1f7bc',
{
headers: {'Access-Control-Allow-Origin': '*',}
)
I have the access set to public:
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write;
}
}
}
This same setup works fine when I load images but it's giving me the error for the stored html file. Any thoughts on how to fix it?
Firebase is using the same storage infrastructure as google cloud and even though there is no firebase method to set the cors rules, you can use gc set up.
First you need to install google cloud sdk:
curl https://sdk.cloud.google.com | bash
Restart your shell:
exec -l $SHELL
Initialize gcloud. This will ask you to select your account and authenticate.
gcloud init
Then create a json file with the following content
[
{
"origin": ["http://example.appspot.com"],
"responseHeader": ["Content-Type"],
"method": ["GET", "HEAD", "DELETE"],
"maxAgeSeconds": 3600
}
]
And run this with your firebase storage gc: endpoint
gsutil cors set yourFile.json gs://yourProject
That should fixe the problem for you as well.
After init the application you need to use setCorsConfiguration method
// Imports the Google Cloud client library
const {Storage} = require('#google-cloud/storage');
// Creates a client
const storage = new Storage();
/**
* TODO(developer): Uncomment the following lines before running the sample.
*/
// The ID of your GCS bucket
// const bucketName = 'your-unique-bucket-name';
// The origin for this CORS config to allow requests from
// const origin = 'http://example.appspot.com';
// The response header to share across origins
// const responseHeader = 'Content-Type';
// The maximum amount of time the browser can make requests before it must
// repeat preflighted requests
// const maxAgeSeconds = 3600;
// The name of the method
// See the HttpMethod documentation for other HTTP methods available:
// https://cloud.google.com/appengine/docs/standard/java/javadoc/com/google/appengine/api/urlfetch/HTTPMethod
// const method = 'GET';
async function configureBucketCors() {
await storage.bucket(bucketName).setCorsConfiguration([
{
maxAgeSeconds,
method: [method],
origin: [origin],
responseHeader: [responseHeader],
},
]);
console.log(`Bucket ${bucketName} was updated with a CORS config
to allow ${method} requests from ${origin} sharing
${responseHeader} responses across origins`);
}
configureBucketCors().catch(console.error);
This is my example with NestJs
import { ConfigService } from '#nestjs/config';
import * as admin from 'firebase-admin';
const configureBucketCors = async (app) => {
const configService: ConfigService = app.get(ConfigService);
return admin
.storage()
.bucket(configService.get<string>('BUCKET_NAME'))
.setCorsConfiguration([
{
origin: ['http://localhost:3000'],
responseHeader: ['Content-Type'],
method: ['GET', 'HEAD', 'DELETE'],
maxAgeSeconds: 3600,
},
]);
};
export default async (app) => {
const configService: ConfigService = app.get(ConfigService);
await admin.initializeApp({
databaseURL: configService.get<string>('FIREBASE_DATABASE_URL'),
storageBucket: configService.get<string>('BUCKET_NAME'),
});
await configureBucketCors(app);
};
Check the docs for more details
https://cloud.google.com/storage/docs/cross-origin
https://cloud.google.com/storage/docs/configuring-cors#storage_cors_configuration-nodejs

Resources