Is it possible to host three separate web pages within a single Firebase project on Firebase Hosting?

Imagine I have set up a project called ExampleApp on Firebase.

I've designed a page with a form for users to submit data, hosted by Firebase. The Cloud Firestore database is storing this submitted data when the user completes the form and hits submit.

It's crucial that the person responsible for analyzing the data can easily access it in an organized and visually appealing manner.

Therefore, I need to create credentials for a specific individual so they can log in and view the data in a beautiful layout. This login should be arranged by me.

Given that I require another webpage or method for this administrator to access the authenticated database interface featuring a username/password form, would I need to establish a separate project on Firebase?

While it would be ideal to keep everything within the same Firebase project, it seems hosting only allows for a single web-page, correct?

All elements could operate under the same domain.

htmlcssfirebasefirebase-authenticationfirebase-hosting

Answer №1

If you want to expand your Firebase hosting directory, feel free to add as many pages as you desire alongside the index.html page (which can be renamed). You can even organize them into sub-directories, all within a single Firebase project.

It's important to note that while your pages themselves are not protected by authentication/authorization, the crucial aspect is securing the data displayed on those pages.

For instance, a page showcasing "data beautifully organized" could be accessed by anyone with its URL. However, without proper authentication/authorization, the user won't see the intended data from the Firebase database (Real Time DB or Firestore). This security is maintained by configuring the appropriate rules at the database level.

In essence, the containers are fully accessible to the public for those who know their URLs, but the content is safeguarded by Firebase's authentication mechanism as well as the security rules established in the database for authorization purposes.

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

What sets npm node-sass apart from npm sass?

Recently, I discovered that the recommended approach is to utilize @use rather than @import in sass. However, it appears that using npm sass instead of npm node-sass is necessary for this. Can you clarify the distinction between these two? Also, why do @ ...

cssnpmsassnode-modulesnode-sass

Leveraging the :checked state in CSS to trigger click actions

Is there a way to revert back to the unchecked or normal state when clicking elsewhere in the window, after using the :checked state to define the action for the clicked event? ...

htmlcss

How can text be concealed within an input field?

My degrees converter code is functioning well, but I have an issue. When I input a number for one temperature type, the conversion for the other two types is displayed correctly. However, if I then enter a number for another temperature type, the previous ...

javascripthtmlcss

Personalize Dropdown Menu, determining when to initiate the hide menu action

When creating a dropdown using ul and li tags, I am faced with the dilemma of determining the ideal time to hide the dropdown menu. The dropdown menu is designed to display values based on user input as they type, updating dynamically. Initially, I had se ...

javascriptjqueryhtmlcssdrop-down-menu

Tips on correctly determining font size

I'm attempting to style a span element with a specific height (in this case, 23px). However, the browser is automatically adding some extra pixels to the element. There are no additional styles like padding or margin affecting it, just the size of th ...

htmlcss

Unable to implement CSS styles on the provided HTML code

I'm currently working on integrating evoPDF into my asp.net application. When I click on a part of the HTML file, I send that portion using AJAX. So far, everything is working well up to this point. However, when I try to use the following methods fro ...

c#htmlasp.netcssevopdf

DataTables.js, the powerful JavaScript library for creating interactive tables, and its compatible counterpart

I'm currently making some changes to a dynamic table that require enabling a vertical scroll bar. As a result, I need to implement this vertical scroll bar mechanism on an existing table. The code in our project utilizes dataTables.js version 1.5.2 ...

javascriptjqueryhtmlcss

Trouble with CSS3 Perspective rendering issue

Here's a simple example showcasing the use of CSS3 Perspective property to create a 3D side flip effect. However, this basic demonstration does not seem to achieve the desired outcome. <html> <head> <style> .div1{height:300px; ...

htmlcss

How come the changes in my react component's CSS are not updating in real-time?

After integrating redux into my create-react-app project, I've been struggling to implement a navigator that highlights the active "page link." To achieve this functionality, I am using a combination of react hooks (to maintain the current page state) ...

cssreactjswebpacksassmaterial-ui

I am struggling to make the horizontal scroll and fixed column features work in dataTables. The rendering seems to be inconsistent across different platforms. Can anyone help me figure out what I am doing incorrectly?

I've dedicated countless hours to unraveling this conundrum. I'm in urgent need of creating a table that mirrors the layout displayed on this webpage: https://datatables.net/extensions/fixedcolumns/ The desired functionality involves both verti ...

jquerycsstwitter-bootstrapscrollbardatatables

How can I customize the appearance of the file input button in Angular Material?

Despite browsing numerous similar questions, I have yet to find a solution to my issue. My setup includes Angular 11, Angular Material 8, and a file input structured like this: <div class="form-group"> <input #myInput type="fil ...

cssangularbootstrap-4angular-material

Appear and disappear gradually when hovering

When hovering over #one, the class .hidden is applied to #first. I have added a script to make .hidden fade out using transition: ease-in 0.3s;, but I am having trouble getting the fade in effect to work. I attempted adding transition: ease-in 0.3s; to #fi ...

jquerycss

What is the solution to the error message stating that <tr> cannot be a child of <div>?

displayTodos() { return this.state.todos.map(function(item, index){ return <div todo={item} key = {index}>; <tr> <td>{item.todo_description}</td> <td>{item.todo_responsible}</td> ...

javascripthtmlreactjsrender

What causes divs to be interspersed among other divs when Float is enabled?

I am looking to create a layout for 4 sections, similar to a table, utilizing only divs and CSS. The intended output is this: Logo-----------Info Business-------Client I initially thought it would be simple by using the Float property. However, when I se ...

htmlcss

Deciding on the proper character formatting for each individual character within the RICHT TEXT EDITOR

After browsing numerous topics on Stackoverflow, I was able to develop my own compact rich text editor. However, one issue I encountered is that when the mouse cursor hovers over already bold or styled text, it's difficult for me to identify the styl ...

javascriptjquerycsshtmlrich-text-editor

Locate the data attribute and store it in the database using an ajax request

I am in need of a proper script to insert a data attribute into the database upon clicking using ajax. HTML: <li><a data-cat="random name">Button</a></li> jQuery: $('li a').click(function() { $(this).data('cat&a ...

phpjqueryhtmlajax

utilizing the target attribute within a form to open the link in the current page

I have been working on a web application and implemented a drop-down menu using a form to display information about the selected category. However, I noticed that when an option is selected, the link opens in a new window instead of the same window. Below ...

javascripthtml

Here is a unique rewrite:"Adjusting the prop of a Material UI Button component depending on screen size breakpoints can be achieved by utilizing

While using the Material UI Button component, I encountered an issue with conditionally determining the variant of the button based on screen size. Specifically, I want the variant to be 'outlined' on medium and larger screens, and no variant at ...

javascriptcssreactjsmaterial-uimedia-queries

Customize the underline color of Material-UI's Input component

Trying to create an input component with a white underline. However, the underline color changes to black when hovering over it. It should remain white. Override the underline class as shown in the demo and instructions below. Despite trying to implement t ...

cssmaterial-uijss

Scraping the web with Python: Selenium HTML elements may differ from what is shown in the inspect tool

In my current academic project, I am facing an issue with scraping news articles from websites. The problem arises when parsing HTML code in Python because the code obtained from the page source is different from what is shown in the Inspect Element tool. ...

pythonhtmlseleniumwebweb-scraping