Vue: Issue with Firebase Authentication REST API triggers 400 Bad Request Error

Here is the error message I am encountering:

POST

scheme
 https
host
 identitytoolkit.googleapis.com
filename
 /v1/accounts:signUp
key
 AIzaSyAk1ueCLjDDWCNrt_23o5A4RCfeaYIlN6k
Address
 74.125.24.95:443
Status
400
Bad Request
VersionHTTP/3
Transferred850 B (198 B size)
Referrer Policystrict-origin-when-cross-origin
Request PriorityHighest


access-control-allow-origin
 http://localhost:8080
access-control-expose-headers
 date,vary,vary,vary,content-encoding,server,content-length
alt-svc
 h3=":443"; ma=2592000,h3-29=":443"; ma=2592000,h3-Q050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"
cache-control
 no-cache, no-store, max-age=0, must-revalidate
content-encoding
 gzip
content-length
 129
content-type
 application/json; charset=UTF-8
date
 Mon, 24 Oct 2022 12:07:19 GMT
expires
 Mon, 01 Jan 1990 00:00:00 GMT
pragma
 no-cache
server
 ESF
vary
 Origin
vary
 X-Origin
vary
 Referer
x-content-type-options
 nosniff
x-frame-options
 SAMEORIGIN
x-xss-protection
 0

Accept
 */*
Accept-Encoding
 gzip, deflate, br
Accept-Language
 en-US,en;q=0.5
Connection
 keep-alive
Content-Length
 79
Content-Type
 text/plain;charset=UTF-8
Host
 identitytoolkit.googleapis.com
Origin
 http://localhost:8080
Referer
 http://localhost:8080/
Sec-Fetch-Dest
 empty
Sec-Fetch-Mode
 cors
Sec-Fetch-Site
 cross-site
TE
 trailers
User-Agent
 Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:106.0) Gecko/20100101 Firefox/106.0

Here is a segment of the Vue JavaScript code that I have implemented:

async auth() {
  let url =
  'https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key= AIzaSyAk1ueCLjDDWCNrt_23o5A4RCfeaYIlN6k';
  if (this.mode=="signup") {
    url =
    'https://identitytoolkit.googleapis.com/v1/accounts:signUp?key= AIzaSyAk1ueCLjDDWCNrt_23o5A4RCfeaYIlN6k';
  }
  const response = await fetch(url, {
    method: 'POST',
    body: JSON.stringify({
      email: localStorage.getItem('email'),
      password: localStorage.getItem('password'),
      returnSecureToken: true
    })
  });
  const responseData = await response.json();
  if (!response.ok) {
    const error = new Error(
      responseData.message || 'Failed to authenticate. Check your login data.'
    );
    console.log(error);
    throw error;
  }
  localStorage.setItem('token', responseData.idToken);
  localStorage.setItem('userId', responseData.localId);
  this.$store.state.token = localStorage.getItem('token');
  this.$store.state.userId = localStorage.getItem('userId');
}

The issue might be with the functionality of JSON.stringify in converting the object into a JSON string. Here is the resource I referred to while developing my code:

https://firebase.google.com/docs/reference/rest/auth

I would appreciate it if someone could point out where I may have made an error.

Answer №1

The issue has been successfully resolved after discovering that the cause was due to Firebase. It turns out that the user's sign-in password was below 6 characters in length.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to navigate to a different page in React when a user clicks?

When working on my react app, I encountered an issue where the useHistory hook was undefined. How can I troubleshoot this problem and ensure that useHistory is properly defined? App.js import 'bootstrap/dist/css/bootstrap.css' import React f ...

Error: The 'replace' property of null cannot be read in select2

In my Node Express app, I am incorporating select2, and encountering an error when supplying an array as the data source with data: dataBase. The issue arises as Uncaught TypeError: Cannot read property 'replace' of null. Although using an ajax ...

Is it possible for me to utilize a validation function to display error messages within a specific span id tag?

document.getElementById("button1").addEventListener("click", mouseOver1); function mouseOver1(){ document.getElementById("button1").style.color = "red"; } document.getElementById("button2").addEventListener("click", mouseOver); function mous ...

What is the best way to utilize Enquire.js for dynamically adding and removing CSS classes?

I'm looking to dynamically add and remove a css class based on a media query using Enquire.js but I could use some guidance on utilizing the functions properly. Here's what I envision in pseudo code: if (screens max-width > 480px){ #thumb.r ...

Vue.js - Resetting child components upon array re-indexing

I am working with an array of objects const array = [ { id: uniqueId, childs: [ { id: uniqueId } ] }, { id: uniqueId, childs: [ { id: uniqueId } ] }, ] and I have a looping structure ...

Using React to Dynamically Display JSON Data as HTML

Struggling to incorporate HTML rendering from JSON data into my React component without relying on dangerouslySetInnerHTML. I want to include other React components within the rendered HTML, but facing challenges when trying to render multiple elements or ...

What is the process for verifying which classes have been assigned to a specific component?

I am working with a Vue component and I would like to determine, from within the component itself, which classes have been applied to it. Is there a way to accomplish this? Currently, I am using a workaround where I pass the class as a prop: <my-comp ...

Can you display a popup on a leaflet map from beyond its boundaries?

Utilizing leaflet maps, I have implemented a functionality where clicking on the map opens a popup at a specified location and centers on that position. The code for this is as follows: var popup = L.popup(); function onMapClick(e) { popup . ...

The issue of Angular JQuery Datepicker failing to set the MinDate upon initialization

In my AngularJS project, I am using JQuery UI's Datepicker for the Date From and Date To fields. I have successfully bound the value to the model using a directive, and I have also implemented logic in the OnSelect function to ensure that the Date To ...

Exploring the Unchanging Object3D Characteristics of ThreeJS Version 68

According to the transition notes from r67 to r68, it is stated that: Object3D's position, rotation, quaternion and scale properties are now immutable. How does this impact practical implementation? I am seeking further clarification on this matte ...

VueJS - Vuefire - Unexpected Error: document.onSnapshot is not a valid function

I'm currently working on integrating Vuefire into my project. I have been following the instructions provided on the Vuefire website, but I am encountering an error. db.js: import firebase from 'firebase/app' import 'firebase/firestore ...

Step-by-step guide on inserting a div element or hotspot within a 360 panorama image using three.js

As I work on creating a virtual tour using 360 images, I am looking to include hotspots or div elements within the image that can be clicked. How can I store data in my database from the event values such as angle value, event.clientX, and event.clientY wh ...

Removing files from Dropzone.js uploaded form

For my project, I am utilizing dropzone.js and faced with the task of deleting files from the plugin upload zone (rather than the server) after they have been uploaded. My goal is to revert back to displaying the "Drop files here or click to upload" text o ...

File handling in Angular 2 using Typescript involves understanding the fundamental syntax for managing files

Would someone be able to explain the fundamental syntax for reading and writing text files, also known as file handling in TypeScript? If there is a corresponding link that anyone could provide, it would be greatly appreciated. ...

The seamless union of Vuestic with Typescript

Seeking advice on integrating Typescript into a Vuestic project as a newcomer to Vue and Vuestic. How can I achieve this successfully? Successfully set up a new project using Vuestic CLI with the following commands: vuestic testproj npm install & ...

Error message: Unforeseen node express token problem

Whenever I attempt to call the endpoint provided below, Postman returns an error as shown: { "success": false, "error": "Unexpected token / in JSON at position 7" } Within the addFollowing function, you'll notice that I ...

Having difficulty running lint on Vue 3 TypeScript application, but building process is successful

We are encountering an issue at the moment. We can successfully build our app, but we are facing challenges with linting using the vue tools (vue-cli-service ...). The hot-reloading feature works initially, but upon saving a file, we receive an error mess ...

Dividing a JSON string and incorporating them into individual tds using AngularJS

Currently, I am working on extracting values from a JSON string by splitting it at the ":" and displaying the two values in separate td tags. function testCtrl($scope) { $scope.response = {"name":["The name field is required."],"param":["Hobby: Coding", " ...

I am eager to utilize emit in order to toggle between various page components

I currently have a Header and a Main page displayed on the Top page, along with three Tab functions in the Header component. My goal is to switch between displays A, B, and C on the Main page when I click on each corresponding Tab (A, B, C). I've been ...

Comparing .innerHTML with createElement() | Exploring setAttribute() versus the Direct method*

Someone mentioned that this approach was not considered "proper", but I didn't pay much attention to it until I encountered a run-time error in IE9. Now, I need help converting the code to utilize object properties instead. What is the reason behind i ...