How can we link a specific ID with the correct user currently?

As a beginner with vue and firebase, I'm working on a project that does not have authentication. My goal is to create a simple site with multiple input fields on each page, a button to upload files, and a "Next page" button at the end of each page. To illustrate, here's a brief example:

.

The first page includes:

  • An input field for entering your name (e.g. John)
  • A button to proceed to the second page

After clicking the button, firebase automatically generates a new collection with a unique ID.

.

On the second page, the plan is to display:

  • Title - Welcome John
  • An input field for entering your city
  • A button to move to the third page

I have some questions: How can my program identify that the user's name is John on page 2? How can I link a specific ID with the current user so that I can later save their city in the same collection?

One solution I considered was using timestamps to retrieve the latest collection, but this could cause issues if multiple users are using the program simultaneously.

Does anyone have a better approach or solution for this?

Answer №1

After reviewing your needs, it appears that you are looking to store a person's name for use on the following page. To achieve this, you will need a distinct identifier that remains constant throughout different pages. This unique identifier could serve as the primary key for a document in Firestore, allowing you to easily reference the document created on one page from another.

Below is an example of pseudocode to guide you:

  1. Generate a unique identifier and save it in sessionStorage
  2. In the first page, create a document with the person's name using the generated unique identifier as the key
  3. When transitioning to the second page, retrieve the unique id from sessionStorage. With this identifier, you can then access the relevant Firestore document based on the specified key.

Answer №2

I am wondering how my program can identify the user as John on page number 2. Additionally, I need to establish a connection between a specific ID and the correct user so that I can later save their city in the same collection. How can I achieve this?

Given that you are utilizing Vue.js, I recommend using a state management tool like Pinia (for Vue.js 3) or Vuex (for Vue.js 2).

It is essential to store the "name from the first page" and the Firestore Document ID created in that initial page in order to display the name and save second-page data to the same Firestore document later.


Please be aware that closing the app or browser will result in the loss of all this data. To retain it across sessions, consider registering the user in Firebase. Alternatively, you could save the data in the browser's local storage, though this information will not carry over if accessed from a different browser or device.

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

Tips for Retrieving Data from a Multi-Dimensional Array

I need help accessing the values in my array and assigning them to variables for later use. I have created an array and used the randomGo() function to generate a random number that corresponds to a pair of numbers within the array. My goal is to assign ...

Incorporating dynamic images into Laravel using Angular

I am currently trying to dynamically input the src value of an image using Angular. Below is the code I have written : HTML : <div ng-app="myApp" ng-controller="MyCtrl"> <img src="{{asset('assets/img/'.'/'. @{{ item.name ...

Develop an interactive AngularJS application with a dynamic Bootstrap table feature

I'm in the process of transitioning my existing jQuery code to AngularJS. One part of the code involves creating a dynamic Bootstrap table based on JSON data retrieved from a Spring REST service. The snippet below shows the jQuery code used to create ...

Guide to modifying CSS properties of an individual element by manipulating class names with JavaScript

I have been searching for an answer to my question without success. I have a unique challenge where I need to change the styles of an h1 element by adding a class based on which radio button is clicked. The issue I'm facing is that when I select a dif ...

Tips for storing headers in NODE.JS?

Recently started learning NODE.JS Looking for some guidance. When I try to execute the command below: npm install --save express-handlebars I encounter the following error message: + <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cf ...

The Find() method in Mongoose and Node.js might return undefined

I recently encountered an issue while working on a simple function in Node.js and Mongoose that should return true if the model is empty. Even though my mongoose configuration seemed perfectly fine: var mongoose = require('mongoose'); var db = ...

Guide to eliminating hashtags from the URL within a Sencha web application

I'm currently developing a Sencha web application and I need to find a way to remove the "#" from the URL that appears after "index.html". Every time I navigate to a different screen, I notice that the URL looks like this: ...../index.html#Controller ...

Tips for sending a structured search query to the findOne() function in MongoDB with Node.js

I have a Restful service built with node.js that takes user input to create a query string for MongoDB. However, whenever I try to pass this query to findone() in MongoDb and call the service, it displays a "query selector must be an object" message in the ...

Learn the steps to transform your Magento 2 store into a Progressive Web App for seamless user experience

I am currently running a Magento 2 store and I am interested in implementing the PWA feature on it. ...

When embedding a static HTML file into an Express route using sendfile, the .js and .css files associated with it will be downloaded but not properly implemented

I currently have a basic local server set up using Express. My project consists of an app.js and index.js file for routing purposes. Within the app.js file, I have all the standard Express configurations, including the line to serve static files: app.us ...

Guide on displaying a stationary image using flask and JavaScript

Embedding an image in the HTML code is pretty straightforward: <img src="{{url_for('static', filename='#UserData/user/profile/profile_pic.jpg')}} " width='200' height='200' /> It works flawlessly wit ...

Is there a way to modify the HTTP response code of a PHP page based on a specific condition determined by the response of an AJAX call in jQuery?

When calling a page on my search page using ajax, I receive JSON data. I am trying to set the HTTP response code of the page based on the results. If the keyword is found, I want to keep the default response code. However, if it is not found, I want to cha ...

The vue command failed to execute

Having trouble running the vue command on the Windows command prompt. After installing Node followed by Vue CLI using the command npm install -g @vue/cli, I encountered an error when trying to execute vue create test. Even after a reinstallation of Node an ...

Exploring ways to showcase validation errors in Laravel blade using Vue.js

I have a Laravel view that includes a form, and I'm trying to utilize Axios for form submission. If there are any errors returned in the response after submitting the form, they should be displayed in the appropriate fields. I've encountered tw ...

The value of type 'X' cannot be assigned to type 'Y' or 'undefined'

In my code, there is a component that requires a prop with an enum value: export enum AType { some = "SOME", word = "WORD", } const MyComponent = (arg: AType) => {} When I try calling this component like so: <MyComponent ar ...

What is the best way to prevent a fetch request from being initiated before the authentication token has been received

After successfully logging in, the data request fetch function needs to send the request with the saved token bearer. However, the data fetch is not waiting for the token and is receiving an Unauthorized access code. This is how my data request fetch func ...

Encountering an Invalid Argument Script Error while using Internet Explorer 11 on Windows 10

I encountered an issue with an Invalid Argument script error in Windows 10 using IE 11. However, the code runs smoothly on Windows 7. Please refer to the attached screenshot and see if anyone can offer assistance. Here is the code snippet: var tbl = docum ...

The MongoDB driver fails to release resources

When the mongodb driver fails to connect (like when the db is offline), my mocha test does not exit. Is there a way to release the resources so the test can exit? The client is null, so I am unable to use client.close(). I am aware of the --exit mocha fla ...

Ways to receive attributes prior to the Render event

I am a beginner in React and encountering an issue with retrieving props from the parent before the child is rendered. https://i.sstatic.net/CLAdH.png My problem involves an Editor component that passes a string as props to a button. The string is collect ...

preclude any dates prior to the chosen date

I need a solution for a scenario where I have 5 datepickers in sequence. When I select a date on the first picker, all previous dates should be disabled when selecting on the next picker. Additionally, once a date is selected on one picker, the following ...