angular-firebase | LMS system using Angular Material and Firebase | Authentication library

Recently i started with a Twitter Integration.

The callback is working as it should.

but when i press the Authorize App i keep receiving this error.

unable to process request due to missing initial state. this may happen if browser sessionstorage is inaccesible or accidentally cleared

This is the function where i call the twitter_login.

I read that since Angular is client based it can't be trusted alone for securing routes, etc. However, I could not find a way to hack it.

Can anyone explain in detail how one might edit the local js files to bypass route guard (or whatever method is used)? How about Firebase Auth, can someone trick Angular into thinking you are another logged in user?

I have example site that uses both. Source code is at this GitHub repo and it's hosted via Firebase at this: URL.

I added some secret messages (obviously not shown in GitHub repo) in the main-page component which is protected by Guard that uses FirebaseUI auth to authenticate users. They will be shown as these statements:

• "Secret message if broke Angular Guard: <secret-msg>"
  • This one shows for anyone that can view the component html
• "Secret message if broke Firebase Auth: <secret-msg>"
  • This one shows for anyone that can impersonate being logged in as 'admin@nowhere.com'

Can someone see those or explain how hacker might do it? I hope it's clear this post is not trying to encourage hacking, but simply to understand the security model behind Angular & Firebase Auth utilization (I know OAuth itself is secure, but not sure if how I'm using it in the auth.service.ts is).

I'm trying to setup Angular (v11) app with FirebaseUI auth via different providers, following steps provided here.

The only one that works for me is Google. Others I'm trying all give various errors:

• Twitter: "Callback URL not approved for this client application. Approved callback URLs can be adjusted in your application settings"
• GitHub: "Unable to process request due to missing initial state. This may happen if browser sessionStorage is inaccessible or accidentally cleared"
• Microsoft: "The provided value for the input parameter 'redirect_uri' is not valid"

However, I followed the steps & configured API keys & callback URL in the respective platforms per Firebase instructions (using the callback Firebase shows when you enable each sign-in method). The only one not so sure I did properly is Microsoft, but the others were pretty straight forward.

This is the published page in case you want to see the behavior.

This is the code repo -- the main files where I implemented the logic are in auth.service.ts & login.component.ts (I hid the apiKey/appId in firebaseConfig, since not sure if it's sensitive).

Anyone had luck with it & perhaps has some tip? Thanks!!

I follow some howto (https://morioh.com/p/5ba92d70416f https://www.techiediaries.com/angular-firebase/angular-9-firebase-authentication-email-google-and-password/ ...)

But none talk about auth with firebase rules

I can't let allow read, write: if true; for security reason

If I switch to allow read, write: if request.auth != null; (not the best for security but better) it only works just after the log in and when I refresh homepage it didn't works anymore...

FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

I want to know what is the "request.auth" thing used by firebase rules ? How can I send credentials from Angular when I send a request like getAll() ?

Thank you

When trying to 'ng serve' after configuring angular with firebase, I got the error. Even though I googled this error message but could not find anything. In the error message, this issue is related to the library itself.

I am building an Angular app which will store the data in Firebase. samples show that the apps are directly connecting to the backend by putting the Firebase connection info right in the app's environment. I started browser debugger and I am able to see the info to my Firebase database in the debugger. I understand that I can restrict the users to only my app users with Firebase auth and rules, but is this how everyone develops using Firebase?

Wouldn't it be more secure to have the Firebase DB hidden behind a Web API and have the Angular app call the Web API?

I am trying to fetch all orders from firebase database, and then fetch detailed info about customers using customerId from order. This is my database schema:

orders:
 customer
customers:
 name
 surname

My html template:

If i try to do my code with onRequest this is the problem that i get and since someone sugested me to try onCall i get this error

Property 'send' does not exist on type 'CallableContext'.

This is the code im using

Final Goal: create a Firebase Custom Token with local NodeJs, post such Custom Token to googleapis/.../verifyCustomToken and get back an idToken that allow me to post a new document to Firestore as explained in other question

Current achivement: I can successfuly create a Custon Token with this Cloud Function and follow successfully next steps (get an idToken from googleapis/.../verifyCustomToken and post successfully a docuemtn to Firestore). But I need the same from a local server (we are not going to use Cloud Function this time).

Current issue: I get this issue when I try to post the Custom Token generated by local NodeJs to googleapis/.../verifyCustomToken: