Web only for authenticated users Firebase - javascript

I am developing an HTML webpage using Firebase, my working tree is:
css: folder with CSS style files
js: folder with Javascript files
login.html: logging in page
signup.html: signing up page
app.html: main application page
I would like to restrict the app.html access only for logged users. I have implemented in Javascript some scripts to authenticate users via email and password using the login.html and signup.html pages. For the project, I use the hosting tool that offers Firebase. However, I'm not sure whether I need to apply this capability with the hosting tools or the real time database or other. Maybe the solution is to upload my web as a real time database resource and then, control the access to some paths modifying the database.rules.json file, but I don't know how to implement it.
Thanks for your help :)

All content on Firebase Hosting is publicly available. There is no way to restrict access to your HTML or JavaScript or any of the other resources you host on Firebase Hosting.
Also see:
Can Firebase hosting restrict access to resources?
As one of the answers there says, you can control access with Cloud Functions, but at that point it's not a static resource anymore.
It's pretty common indeed to leave the resources on Hosting unprotected, and then restrict access to the data that you show in the page, which may be loaded from one of Firebase's databases. In that case you can control access to the data with the security rules, which are fully documented here. If you're using Firestore, there's also a codelab making it easier to get started.

Related

Protect Web pages using password or authentication service

I would like to know if there is a way to password protect web pages developed with simple HTML/ javascript.
I am hosting the web page on netlify and I have also tried hosting on Firebase and it is working from both ends but I do not want anyone with a link to be able to view and use the website.
Thanks for your help in advance.
I don't think there's a way to do this with Firebase, but Netlify does allows for site-wide passwords (with the caveat that you have to pay for their Pro service, as per their pricing page). If this is truly important enough that you need to password protect your pages, it's probably worth it.

Access Github Pages Secret Api Keys via Javascript or include in html mark-up

I have created an opensource project that I have been working on slowly for a couple of weeks. I started looking into APIs that could be used and was interested in using WikiArt Api but was not sure how to go about using the API keys which are supposed to remain secret.
My initial thought was to create a config file and have the keys in there but then they would still be publicly available.
These two questions:
how to opensource a project that uses API keys
How to protect Google API Keys in an open source project github
suggested creating Secret ENV Variables and storing the keys in an encrypted format.
My question is how do I then access or include that hidden key within my HTML and also in my JavaScript code. It needs to be included here:
<link rel="prefetch" href="https://www.wikiart.org/en/Api/2/login?accessCode=[]&secretCode=[]"/>
and possibly a few other places in my HTML or JavaScript.
I'm not 100% sure a prefetch link was the right place to include this, but since the API will be grabbing image data, that was my first thought of where to initialize it. Is this the wrong approach?
As a secondary question, the documentation for the wikiart API isn't very good and it doesn't give any example code.
Can anyone explain a little bit better by what it means in the following
Create session when your application starts:
https://www.wikiart.org/en/Api/2/login?accessCode=[accessCode]&secretCode=[secretcode]
Add session key to your request url, e.g. &authSessionKey=sessionKey
How does it mean to create a session? I'm only familiar with php sessions, not API sessions. Is this done in the HTML or JavaScript?
This is the first time I've ever tried to use any APIs, after watching a few of Traversy Medias Tutorial so if anyone could give some code examples it would be greatly appreciated, his tutorial on fetch() API only grabs a text file, not an external url.
If you're using GitHub Pages, then that provides hosting for static sites only. In other words, a GitHub Pages site hosts only HTML and JavaScript and doesn't provide any backend (server-side) support.
As for how to securely use secrets in a static site, you cannot. Since all of the content in a static site is sent to the browser with no server-side components, there is no place you can put a secret that isn't sent to the client. In order to securely use secrets, you need some sort of backend server to hold them so that clients cannot see them.
If you need to hold secret API keys or other secrets, you need to create a non-static site and therefore to host it somewhere other than GitHub Pages.

Firebase hosting with url dynamic paramaters?

I'm new to firebase and I'm trying to understand the limits of Firebase hosting.
I've created a static webpage that adjusts the content via the url paramaters.
For example the following url will provide me with the data I need to populate my webpage. http://example.com/recipe?name=pizza&time=30&lang=en
The url itself it obviously dynamic (values may change)
My question is can I do that with firebase hosting?
It seems you can redirect urls, but not to set a route.
Firebase definitely provides the domain. I don't think it will automagically handle the query parameters for you. For that you will need some sort of front-end routing mechanism. Check out this article on building a VanillaJS router and how to take advantage of the HTML5 History API.
For instance, I write VueJS apps and I use their vue-router package to handle app routing. It works flawlessly on Firebase apps.
That said, Firebase now has Cloud Functions which, I heard, allow you to run server-side code, like a NodeJS. So maybe you can use that feature to handle your params and build your static page accordingly before serving it to your visitor.
I hope it helps.

What is best way to retrieve cookie/session contents from third party website?

CONTEXT
I am building a web app which analyzes information on a user's site. I plan to do this by asking the user to add a JS snippet to their <head> which creates cookies that collect information about each visitor to that site.
PROBLEM
I would like to then send information that is held in this cookie back to my web app. I realize normally cookies cannot be accessed by anything other than code on the same domain, so I'm hoping that the JS snippet will read the content of that cookie and pass it back to my app - is this possible? What would be the best way to do it?
This is the basic pattern that's used by google analytics and most other website analysis tools as well as advertising modules. Your snippet, running on your user's site, can read/write cookies there. It can also make ajax calls to your own web service to communicate any data it gathers, including cookie contents. Your "app" doesn't run on your user's site, only the snippet (and any code it drags into the site).

Accessing a specific Dropbox user's folder within our company using the API?

We have a team Dropbox account here at my work and we all have our own company Dropbox accounts with username/emails like *.domain.com. I've been assigned the task to create a nice web interface to a certain selection of assets that are stored in one of our designer's Dropbox folder.
The task is to build a Node JS app and use the Dropbox API to read these files to build a nice interface to the files in that designer's Dropbox folder and do some other cool stuff. It's not sufficient to use the public viewing or sharing of that particular folder which Dropbox allows. We need something custom and it needs to really use the API for full control.
The thing that is confusing for me why I just can't seem to get started, is setting up the API access from Node JS to give me access to that designer's folder. I don't mean what code I need, but just the step by step of what is involved. I just can't seem to wrap my head around having app that will access that one particular company user's Dropbox folder.
I was starting to use node-dbox SDK to access Dropbox API from NodeJS and was messing around with their example to auth in the README, but the flow doesn't seem right to me? The API seems based around allowing access to the app, having to go to an external app etc. But that doesn't seem right in this case? I know which specific user's Dropbox I want access too, and I just want to app to access it... It's all trusted as it's within the company.
What are the steps involved in doing this? I'm really stumped!
You'll need to have the target user authorize your app once via OAuth. At the end of that OAuth process, you'll receive an access token that you can use to access that user's Dropbox. You only need to do this once, and then you can just hardcode that access token in your app.

Categories