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

Tips for correctly loading all elements on an HTML page before making CSS modifications

This question has been asked several times in the past. I am asking because when I used the on ready callback in jQuery, it did not change the placeholder text of my element "search_input". $( document ).ready(function() { $("#search_input").attr(' ...

javascriptjquerycssesriarcgis-js-api

What is the best method for arranging checkboxes in a vertical line alongside a list of items for uniform alignment?

Trying to come up with a solution to include checkboxes for each item in the list, maintaining even vertical alignment. The goal is to have the checkboxes in a straight vertical line rather than a zigzag pattern. Coffee Nestle ...

javascriptjqueryhtmlcss

Trouble aligning Material UI data-table columns (table head) to center in React

I have a data table where I declare rows and columns as simple variables, making it difficult to style them using 'style={{textAlign: center}}'. I tried adding a CSS file, but it did not work with the Material UI table. I am unsure of how to proc ...

cssreactjsmaterial-ui

Enlarging the current division while reducing the size of the others when hovering

Currently, I am working on a school project that involves creating a slideshow on a webpage. However, I have reached a point where I am unsure of how to proceed. Here is the progress I have made so far: body { background-color: #252525; } #wrapper { ...

javascripthtmlcss

Vanish Dropdown upon clicking Using JavaScript

Hey, I'm new to web development and I'm currently working on creating a web app for iPhone. Everything is going smoothly except for one issue - my dropdown menu works perfectly on desktop Chrome, but on the iPhone's Safari browser, I can&ap ...

javascriptjqueryhtmlcss

Discover the secret to incorporating concealed text in WordPress with a hidden div through the power of JavaScript

For a while now, I've been trying to implement a functionality where clicking on a text reveals a dropdown menu with more information, similar to a "read more" feature. I have limited experience in Java or jQuery, and I can't figure out if the i ...

javascriptphpjqueryhtmlwordpress

Show a stylish container when the server encounters an HTTP error with status code 500

My approach for error handling involves a straightforward ErrorHandler class structured like this: export class AppErrorHandler implements ErrorHandler { handleError(error : any){ //console.log('test error ', error.status); ...

htmlangularerror-handling

Personalize the landing page for your IPython notebook

Is it possible to customize the landing page of an iPython notebook server (version 2.3)? By that, I mean altering the starting page (for example: http://localhost:8888/tree) to show a message like Welcome to John Doe's i[Py] Notebook or changing the ...

htmlcssipythonjupyter-notebook

Using html-mode in emacs to create a hyperlink

My image src text in emacs has become clickable. I would like to have plain text instead. How can I disable this feature? <img src="index_new_menus_files/menu_bg_2.gif" alt="" border="0" height="55" width="150"> Instead, I want it to be: <img s ...

htmlemacs

Angular and Bootstrap project with an advanced dropdown menu featuring multiple levels

Looking to create a multi-level drop-down menu using TypeScript without relying on jQuery? Bootstrap CSS framework may not have exactly what you need. https://i.sstatic.net/iruev.png Wondering how to implement a multi-level dropdown in your Angular proje ...

htmlcssangulartypescriptbootstrap-4

Issue with displaying ChartJS on Django HTML page

I am attempting to create a horizontal bar chart in HTML, but unfortunately, it is not displaying correctly. I have sent 2 variables from views.py, which are {{top5StockCode}} and {{top5TotalSales}}. The values of {{top5StockCode}} that were sent from vi ...

pythonhtmldjangochart.js

Pause and continue scrolling through the page with the push of a button

I have a question about a simple demo. I am looking to prevent scrolling when button1 is clicked, and then resume scrolling when button2 is clicked. Can someone guide me on how to achieve this? Check out the Fiddle here HTML: <input type='button& ...

javascriptjqueryhtml

Remove dynamically inserted list item using a button

I have dynamically created an unordered list (<ul>) that adds list items (<li>) when a button is clicked, along with a remove button. Initially, the default list item should not contain a remove button so I added it in the script. SCRIPT $(d ...

javascriptjqueryhtml

Tips for making a div expand to take up the available space on the left side of a taller div

Could you take a look at the scenario below? I'm attempting to position my yellow div beneath the red div and on the left side of the lower part of the green div. When I apply clear: left, it moves down but leaves empty space above it. Is there a way ...

htmlcsspositioningfloating

Lost: pointer for speech bubble

Here is the HTML code I have written: <!DOCTYPE html> <html> <head> <style type="text/css"> #box { width: 200px; height: 250px; border-radius: 15px; background-color: pink; ...

htmlcss

Component rendering based on conditions is not working properly when using Next.js, especially on the initial load

While utilizing Ant Design and a Custom Stylesheet, I have encountered an issue where the style appears broken upon first load. However, if I navigate to another page and return to the original broken page, it displays correctly. This problem only occurs d ...

cssreactjsnext.jsantd

Unusual perspective of JSON with ng-jsoneditor in AngularJS

Currently, I have integrated ng-jsoneditor into my AngularJS application to display and format JSON data. I found guidance on how to implement this from both here and here. Here is the HTML code snippet: <div ng-jsoneditor="onLoad" ng-model="vm. ...

javascripthtmlangularjscss

Switch up the placement of the boxes by moving them in different directions, such as

I've been attempting to recreate the button movement demonstrated in this link , but I'm having trouble achieving it. Using CSS animation, I can make the buttons move in a straight line, here's what I have so far: <div id="box" style=&ap ...

javascriptjqueryhtmlcss

Tips for creating an input field that automatically expands and has a specific width

I am facing an issue with the alignment of my search field. Here is the code snippet: #menu_search{ position: absolute; width: 100%; max-width: 1280px; display: inline; float: right; right: 0px; z-index: 99; } I would like th ...

cssalignmentcss-position

How to Center a DIV both Vertically and Horizontally with CSS Positioning?

I'm currently working on a webpage layout where I want to have a main div centered horizontally with three smaller divs inside, aligned both vertically and horizontally with equal spacing. I tried using margin: auto on an empty div to center it in the ...

htmlcss