how to authenticate user with firebase on frontend - javascript

I am a frontend developer and i have given a project where i need to build a web gallery where user will sign-in with google oAuth. The Gallery will show pictures which user has uploaded. and user will be able to share the link of their photos so other people can see it.
What i am doing is that i have two html files. One is index.html and the other is gallery.html. Index.html will be the login page and from where the user will sign-in the gallery. The gallery will show pictures depending upon the url for example if the url looks like https://website.com/gallery.html?uid=<some_id_here> i grab the uid which is user id in firebase. Runs a function which gets the pictures from firebase firestore. And then i check if the uid in the address matches the current logged-in user uid. If yes then i add's the functionality of deleting the image in the gallery.
The main point is that i check the id in the address with current user id to see if the user owns the pictures or the gallery. I am not into backend i have started learning nodejs and express and few days ago and don't know how to authenticate user and stuff. So if this is a bad practice let me know and tell me what approch should i use instead.

Related

Use Firebase and API keys to authenticate paid Shopify website themes

I'm trying to use Firebase as an authorization method for a paid Shopify website theme. The idea is the store owner purchases and downloads the theme files, and after purchasing also creates a firebase account with an email and password. Then an API key for the theme will be emailed to them. Once they have the API key they will input their account email and API key into the settings within the theme files. To authenticate the user the theme files will have some javascript that checks if the username and password inputted correspond to a existing user in the firebase database. If the email and API key inputted does not match to any user in the database then the user will be redirected to an error message HTML file, or get an error message popup that they cannot close saying to input the correct key.
Another possibility is to use the firebase firestore unique user ID instead of generating user API keys. Maybe this way there would be no need for using the firestore database.
Either way, this logic seems ok if it was a single user. But since it is a website theme file it is possible that every users website will get thousands of customer visits per day. Thus every customer that visits the clients site will trigger an authentication check with firebase with the clients email and API. So every user account on Firebase could potentially have thousands or maybe even hundred of thousands of logins and database queries everyday (depending on how popular their website is). So this is the part Im worried about.
Anyone have similar experience using Firebase for website theme authentication? Perhaps I am going about it all wrong here. Or maybe Firebase is just the wrong tool for this job.
Appreciate any input!

How to show a file download link in my website if the visitor is logged in with Firebase authentication?

How to show a file download link in my website if the visitor is logged in with Firebase authentication?
I can use the JavaScript if (user) for checking if the user is signed in. But if I use
if (user){
document.getElementById('download_link').style="display:block;}else{document.getElementById('download_link').style="display:none;}
,
The visitors can simply get the the download link without signing in by getting webpage source code.
I've integrated firebase authentication and in every of my web pages, I want the download link to be only shown if the visitor is a logged user.
If I use simple css display:none with JavaScript if(user), then visitors can simply get the link by entering view-source: {site_url} is the browser address bar.
Please help

How do I use the Reddit API to log a user in or register them in Spark and Javascript?

My project team and I are currently working on a Single Web Application project using Java Spark in the back-end and Javascript, HTML and CSS (with Bootstrap) in the front-end. We use MySQL as our DBMS.
We're trying to make a system to log a user on Reddit in to our site. We need Reddit to get a user's karma and not manage passwords and usernames ourselves.
We're using Reddit's OAuth API in order to ask for a token, and Reddit then redirects the user to our website again.
We've made a button on our website to log the user in.
What we're trying to achieve is:
The user clicks the log-in button.
The user gets redirected to the Reddit login page and needs to give permission to us to use their Reddit account with a few permissions.
The user accepts the request and then gets redirected to our website. The Reddit API sends a GET request to localhost/login and appends the state and Reddit token to the link (so the link becomes localhost/login?state=STATECODE&code=REDDITTOKEN).
In the back-end (Spark/Java), we catch that GET-request and extract the state and code. We then send the code to Reddit to get a JSON with the user's data (such as comment karma, link karma and username) using https://oauth.reddit.com/api/v1/me.
The back-end then checks if the username is already in our User table. If it is, the user already registered, and the user gets redirected to the mainpage and gets logged in. (We do log-ins by assigning session IDs to users in out User table.)
If, however, the usernameis not yet in our database, then the user gets redirected to the registration page/section of our website, and in some way, the username and karma-values are passed to this page.
The user then fills in the remaining details about their account (email, address, age, etc.) and then clicks on register. This then sends a POST-request to our server with all the details (username, comment karma, link karma, email, address, age, etc.) and puts that user in our Database. The user then gets logged into our website and gets redirected to our website.
The problems we are facing right now is
we don't know how we can pass the username, comment karma and link karma from our back-end to our front-end. We thought doing it with a cookie would do the trick, but this causes security-issues and just makes it more confusing for us.
Maybe there is a better way to handle this system. We would really appreciate suggestion for doing this in a better manner than this way. However, we have to deliver something working by Nov 10th.
Is there a way to pass values from Spark/Java to a webpage when registering someone?
I can share some bits of our code if wanted. Right now, our GitHub repository is private, however.
Your help is extremely appreciated. I might even buy you coffee.
Sincerely,
Jeroen Meijer.

Fixed Facebook user ID for your login system

I am building a login system that depends on Facebook login plugin (https://developers.facebook.com/docs/facebook-login/web). Everything is going well with this easy to use plugin. The bad news is that: today, I noted that the Facebook changes its user IDs, and these changes can deceive your login system.
Explaining the process and the problem:
1- The user goes to your website and click Facebook login button to access to your website.
2- The plugin grabs the user's information from Facebook API, including the user Facebook ID.
3- Your script uses the grabbed info to check your database, looking for the Facebook ID in the users table.
4- If the Facebook ID exists, the system allows the user to login. If it does not exist, the system creates a new account for the user and login him/her to your website.
So, the same Facebook user might be registered more than one time as long as the Facebook changes the user's ID.
As I noted today: Sometimes, the Facebook gives its user an ID with 9 digits, and other times give the user an ID with 19 digits. If you used any of those IDs; it would redirect you to the same user's profile. For example: if the user's IDs are 999999999 and 1010101010101010101
https://facebook.com/999999999 and https://facebook.com/1010101010101010101 both URLs will lead you to same profile.
P.S. The script checks with the user's email, however the user has the choice not to supply his/her email address to your website.
I use API v2.. I didn't use the old version (v1.). So, I think this is not the issue of chronicle or app scoped IDs.
If you have any ideas that help in getting a fixed Facebook user ID, please let me know.
Thank you in advance

How to upload image from a URL to server using Angular-upload?

Here is the scenario, in my application, user logs in through their Facebook account, after Facebook authorization, I receive user's profile information, including a url to their profile picture, and on the next page I fill some parts of my form using the info I've received from Facebook Graph API.
My question is how can I upload user's profile picture as the main picture of their account in my application as I'm getting only a URL to that picture from Facebook API ?
Please note that I'm using AngularJS and a plugin to handle uploads, called Angular Upload.
I'm totally open to any suggestions or other workarounds.
Thanks in advance.

Categories