Firebase Storage Method Not Allowed (Post 405) with NextJS - next.js

I have implemented Firebase storage put method to my nextJs App in order to upload pictures on Firebase Storage.
When I tested this method on my localhost, it worked like a charm but when i came to production, Firebase returned me a non verbose error :
"the server responded with a status of 405 ()"
or " cannot post 405' " on my Antd Design graphic Library
the weirdest is that response is irregular.
From the form url, it always respond this 405 error but if i try from the form component mounted in another url, it works, and in another context, sometimes it works sometimes it doesn't.
It is very hard to understand what happen and I can't find any lead on the Internet.
My NextJs App is hosted on Vercel Server and I guess all is well set up, authentication work for example but I did not try to access RTDB or Firestore.
This error is intermittent so I could imagine that is not a CORS Problem, neither a token access problem, because I tried without token access and I got an explicit error.
Thank you truly to dedicate some of your time to help me figure it out.
Have a nice day.
Example of my very "classic" method from Firebase documentation :
firebaseApp
.storage()
.ref(`pictures/${file.name}`)
.put(file.originFileObj)
.then(() => {
console.log("Picture uploaded")
})
.catch((err) => {
console.log(err.message);
});

Related

Firebase AppCheck POST request is unknown

I'm trying to configure AppCheck in my web app (using SvelteKit).
I've registered my web app with recaptcha and then Added this basic code:
onMount(async () => {
const appCheck = initializeAppCheck(app, {
provider: new ReCaptchaV3Provider('my-key'),
isTokenAutoRefreshEnabled: true
})
})
But it fails with 400 error. Those occur because the POST request has 'unknown' where the Recaptcha (and firebase collection) should be.
POST URL: https://content-firebaseappcheck.googleapis.com/v1/projects/undefined/apps/undefined:exchangeRecaptchaV3Token?key=undefined
Why does it happen? how can I fix it?
*The only similar case is here, but it has no solution, and might not be the same.
SOLVED: The request was malformed due to mistaken firebaseConfig data.

Discord Oauth2 API request return empty query param

I am implementing discord oauth2 in nextjs and I am having a problem when I deploy to amplify, it works fine in my localhost but it fails in production, my implementation looks like this in the profile page for someone to link their discord account
<a className="text-indigo-800" href={`https://discord.com/api/oauth2/authorize?client_id=${NEXT_PUBLIC_DISCORD_API_ID}&redirect_uri=${NEXT_PUBLIC_DISCORD_REDIRECT_URI}&response_type=code&scope=identify`}>
{" "}{userData.discordUsername || 'Link account'}
</a>
this creates a link that someone can click and they are taken to discord to authenticate, till there everything seem ok, the problem comes now when discord redirects to /api/verify-acount
which looks like this
const discordLink = async (req: NextApiRequest, res: NextApiResponse) => {
console.log("query", req.query);
}
as you can see I ended up knowing the error was here coz I logged req.query which return an object in localhost with the code for user query { code: 'somecode' } but in amplify after going to couldwatch to see the logs then the object is empty
this ends up messing up everything from there as the code is not available to verify and get user details to store in the database.
what I don't know is exactly what caused this error.
I hope someone has idea and will be willing to help thanks
the issue was actually weird and I still don't understand why it had to happen
but my redirect domain was https://subdomain.domain.zyx which amplify accepts and redirects requests to https://www.subdomain.domain.zyx which is the accepted link in the browser (users will always see this even if they enter the first URL) coz of the explained scenario (no www prefix for one of them)
so I was requesting to link discord from https://www.subdomain.domain.zyx and discord would redirect to https://subdomain.domain.zyx and AWS would redirect to https://www.subdomain.domain.zyx so what I still don't understand is where the query params got lost in these steps but after changing redirect URL in discord to https://www.subdomain.domain.zyx then everything works fine now

How can I authenticate via Firebase Google Auth on localhost

I'm building a site with emberfire and using firebase. Everything seems to be set up fine regarding credentials, and I can read/write to the firebase database while developing locally, but every time I try to authenticate via the Google Popup it pops up fine with my Google accounts listed, and when I select my account it errors with this error object:
code: "auth/network-request-failed", message: "A network error (such as timeout, interrupted connection or unreachable host) has occurred."
I assume I'm simply missing a setting somewhere but for the life of me I cannot find it. Here's the code to get the popup and response:
const provider = new firebase.auth.GoogleAuthProvider();
this.firebaseApp.auth().then(auth => {
/* Firebase SDK calls */
auth.signInWithPopup(provider).then(function(response) {
console.log(response);
}).catch(function(error) {
console.log(error);
});
});
I am using EmberJS with emberfire.
In my environment I had host: 'api', and when removing that authentication works, so it must be one of the adapters that is used.

Why do I get auth'ed when I test hitting my Firebase Cloud Function in a browser?

I have a Firebase Cloud Function that handles HTTP requests, using:
export const foo = functions.https.onRequest((req, res) => {
// etc.
}
When I hit the URL for it in a browser, I see a Google sign in page, listing my Google accounts. If I sign in, I then get a 403:
Error: Forbidden
Your client does not have permission to get URL /foo from this server.
Why? There's nothing about this in the docs that I can find. I'm on the free plan ("Spark"), if that makes any difference.
[edit]
I'm accessing the function using the URL:
https://us-central1-[project name].cloudfunctions.net/[function name]
There's no vanity URL.
The 403 message is originating from the main url https://us-central1-[project-name].cloudfunctions.net/ which is fully managed by Google.
It seems cloud functions does not have an error handling for non-existing functions name. Thus everything that is not created are treated the same way as a forbidden link. I don't know if this is an intended behavior but since the functions are running on a managed environment, there's not much handling of not existing functions against your project cloud function url.
The following statement from the link above explains it all:
"Cloud Functions run in a fully-managed, serverless environment where Google handles infrastructure, operating systems, and runtime environments completely on your behalf. Each Cloud Function runs in its own isolated secure execution context, scales automatically, and has a lifecycle independent from other functions. "
Hope this helps.

send grid & parse 502 Bad Gateway with nginx

I am trying to migrate my parse application over to digital ocean and followed this guide :
https://www.digitalocean.com/community/tutorials/how-to-migrate-a-parse-app-to-parse-server-on-ubuntu-14-04
Everything works perfectly fine until I get to the very end Test Parse Server ( Executing Example Cloud Code ) section
I tested the cloud code for the sample cloud code that was provided in the tutorial :
Parse.Cloud.define('hello', function(req, res) {
res.success('Hi');
});
so I got a Hi back in my browser as well as in postman.
See image here : https://cloudup.com/cH2dbBx1KTo

Then I test the function that uses sendgrid's service to send emails (http://blog.parse.com/announcements/introducing-the-sendgrid-cloud-module/), my cloud code file looks like this :
see image : https://cloudup.com/cD6MNRP3Tft
and now I try to run my post request from postman and I get an error even on my hello function that was working before
See image : https://cloudup.com/cIkwJ6552_5
So I look around and figure out that its an issue with my sendgrid import
var sendgrid = require("sendgrid");
sendgrid.initialize(“xxxxxx”, “xxxxx.”);
in these lines.
does anyone have any experience with digital ocean cloud code and send grid emailing service please help me out I will be grateful as this is the last step left and I will be done with my migration :)
cheers
Tanzeel
you have to specify server URL in parse config file. It is required and could be the reason why you cant run cloud code.
"PARSE_SERVER_URL": "http://localhost:1337/parse"
The url has be the same what you are using. There is also error in Nginx config in that tutorial, I explained it here https://serverfault.com/questions/765627/cannot-post-get-over-ssl/766428#766428
So I looked up at pm2 and to see real-time logs the command is
pm2 logs
at first when I ran the command I saw some errors, maybe they were there from before :
Then I tried the hello cloud function from postman app to test for its output in pm2 logs and I got the following :
Next I try to run my sendMail sendgrid function and I find out the the api-key I had used in my sendgrid function was throwing an error
ReferenceError: XXXXXXXXXXXX is not defined
So I went back to my cloud code and used quotes around my api-key parameter and passed it as a string in my send grid initialize function. Then I retry and get
[Error: The provided authorization grant is invalid, expired, or revoked]
So I went back to my sendgrid account and made sure that the api-key I was using was the correct one and it seemed to be just fine. I tested again and got the same error again so I decided to generate a new api-key just in case.
So I realize that I was not using the api-key but instead API KEY ID :
When we create a new api-key on sendgrid they give us the actual api key once and they ask us to store it in some secure place :
We can only display the key above one time. Please store it somewhere safe because as soon as you navigate away from this page, we will not be able to retrieve or restore this generated token.
So after I used an actual api-key I was able to send emails 😃
But one small issue still remains and I am not sure if its because of postman that I am using to run cloud code or something in the parse server or nginx that is still returning me with a 502 Bad Gateway as a response
But when I look at the logs for my parse server I do see a
parse-wrapper-0 { message: 'success' }
but it never gets back to me in my postman and instead I am getting a 502 error not sure why but the emails are being sent succesfully :)

Resources