Firebase: Local Development and testing in AngularFire - firebase

I am using Angularfire to make a website. I am trying to integrate oauth based sign in with google for user authentication but when I try to run index.html file and try to login following error is displayed
11:59:28.189 Error: There are no login transports available for the requested method.
Stack trace:
Mg#file:///G:/Project/root/js/firebase.js:142:1267
dh/<#file:///G:/Project/root/js/firebase.js:163:141
1 app.js:31:4
I searched on stackoverflow for this and got this answer , it says that I need to setup a server for this.
Then I looked at firebase docs and they said
For security reasons, if you're using a web-based OAuth flow
(Facebook, Twitter, Github, or Google), only domains that you
whitelist are allowed to initiate authentication for your app. This
does not apply to Email & Password, Anonymous, or Custom
authentication methods. All Firebase applications have localhost and
127.0.0.1 enabled by default for local development and testing.
The authentication works fine after I host it on firebase but deploying takes a lot of time and also sometimes even I don't have access to internet.
So please suggest me easiest manner so I can run my app on localhost.

An easy way to locally run a Firebase (or any other) web site is to use the Firebase tools and then run
firebase serve
See this blog post introducing the local server.

Related

How to enable client redirect from Firebase Functions?

I am transitioning a ReactJS app running on Heroku to be hosted as a static site on Firebase. I am planning to use Firebase Functions to handle logic and drive environment configurations.
A requirement is to support login via 3rd-party Auth0's hosted login page -- the client is redirected to a login page via:
// redirects to auth0's hosted login page
this.auth0.authorize(options);
Because the options argument fed to this method depends on environment-specific configuration it should reside within a Cloud Function (according to my other question that was answered).
There is documentation in Firebase for serving dynamic content from a cloud function but I don't know how to redirect the client from a cloud function.
Is there a way I can do this? Or a more pragmatic solution?

OAuth + Google + Wordpress plugin

Background
I want to create a PHP application that eventually will be installed on a "countless" web servers.
The application is going to access the Google Drive associated with the web server's administrator Google account (it will basically write some files on user's cloud storage). So my PHP app will be authorized by the end-user to use its Google Drive storage. This is done (via the OAuth2 protocol) by connecting the Google OAuth2 service.
So basically I have to create a ClientID/Secret pair (on behalf of my Google Account) that is gonna be used to execute the authorization flow.
Google provides 3 authorization methods:
for web applications (web browsers over network)
for service account (my server to Google server)
for installed application (like Android, IPhone)
(1) is perhaps the best choice EXCEPT that I have to define a REDIRECT_URI where the authorization code will be sent. Because my APP will be installed on a "countless" different servers I don't know in advance the protocol, domain name and the path (also the URI) where the Google's response should be returned. If I would install this application only on 3 servers I could create upfront a ClientID/Secret pair for each of them. It's not the case.
(2) means to deploy my P12 private key with the PHP application and I don't feel comfortable with that!
(3) means to put the end-user to copy/paste an authorization token from a Google web page into my application web interface. I am trying to avoid doing that.
I already made it to work by using the method 1 when I know in advance the REDIRECT_URI. I also embedded the client_id/secret pair in the source code so the whole authorization process is user-friendly. But this is not going to work on a "countless" deployment scenario.
Questions
Which method and how should I use it in order to make the whole process safe for me (as developer) and for the client too (the web server administrator). Note that the authorization process should not involve the end-user to copy paste some codes. I want that step to be transparent/user-friendly for the end-user (no one likes copy-paste when it can be done automatically).
Should I embed my client_id/secret into the application or that's totally wrong? I suppose no end-user wants to go through the creation of its own ClientID in Google Developer Console, right? On the other hand why I would give my client_id/secret to an unknown end-user?
Final thoughts
I could create a proxy application on my (the developer) web server such that my PHP application (which is supposed to be deployed "everywhere") will send the authorization request to my proxy server (which has already its own client_id/secret) which in turn will redirect the call to the Google OAuth service which then REDIRECT_URI back the authorization code to my proxy and finally I will redirect back the response to the original sender (the PHP application). What do you think?
Some useful answers here and here or here.
#Edit: as I've already said earlier a proxy would be a solution. I've made it and it works. The same solutions I've received also from user pinoyyid. Thanks for your answer too.
A proxy is the only real option open to you. You can encode the originator URL in the "state" parameter, so that when the proxy receives the access token, it can call a webhook at the originator.
There are some contradictions in your question...
"The application is going to access the Google Drive associated with the web server's administrator Google account" and "So my PHP app will be authorized by the end-user to use its Google Drive storage." are mutually exclusive.
If the Drive storage belongs to the app, then the user isn't involved in any OAuth dialogue.
Could you edit your question to be clear who is the owner of the Drive storage as it greatly influences the OAuth flows.

App with Firebase and Trigger.io - domain name

I have an app buit with Firebase I want to deploy using Trigger.io.
In the App I'm using the auth.login('twitter') function.
What domain name shall I put in the Auth setting of my app?
Thanks a lot !
Following up on this thread in case anyone else is looking for the answer to this.
The OAuth-based authentication providers in Firebase Simple Login use pop-ups (via window.open(...) to initiate login flows, and window.postMessage to safely communicate between the two frames.
In order to enable these social, OAuth-based providers in Firebase Simple Login in the Trigger.io environment, there are a few steps:
Ensure you're loading the latest Firebase Simple Login client from the Firebase CDN, at https://cdn.firebase.com/v0/firebase-simple-login.js.
The Trigger.io environment support does not require an authorized domain configuration in Forge, but still will require that you configure your Facebook / Twitter / GitHub application to use the appropriate https://auth.firebase.com/auth/... redirect URL, as documented.
Ensure that any required Trigger.io JavaScript libraries are included (the forge global variable should be set in your application - test with console.log(forge) in your client code).
Lastly, and most important, the Trigger.io Tabs Module must be enabled in your application config.

authClient.login problems

I'm having a similar problem as was discussed in this question:
authClient.login returning error with "Unauthorized request origin"
I can't find anything on the firebase site that directly addresses this problem so I have 2 questions about the "unauthorized request origin":
1.) If I'm testing my program through my own computer (as in, it's just a file on my computer), what exactly am I supposed to add to the Auth panel? I tried following the advice offered in the link above but no luck.
2.) My eventual plan is to create an app using firebase and it's login system. Is this going to be a problem for when users try to login? Is there going to be something that I need to allow so that any user will be allowed to login to the system?
With the release of Firebase Simple Login, which contains a number of OAuth-based authentication methods (Facebook, Twitter, GitHub, etc.), we included the idea of 'Authorized Origins'. Without this restriction, malicious sites could pretend to be your application and attempt to access your users' Facebook, Twitter, etc. data on your behalf.
By restricting the domains for these requests to ones that you control and have verified, we can protect your users' data. Once you have configured your application domains, your users will be able to log in seamlessly and securely from the domains you defined.
To fix this error, log into Firebase Forge (by entering your Firebase URL into your browser), and navigate to the 'Auth' panel on the left.
For testing locally, you'll need to run at least a barebones webserver on your machine, rather than loading your test files via file://. The easiest way to run a barebones server on your local machine is to cd to the directory of your files and run python -m SimpleHTTPServer, which will allow you to access your content via http://127.0.0.1:8000/....
For your users, configure the domains that you'll be using to host your application. This can be any number of specific subdomains (such as a.b.www.domain.com) or high-level domains which will act as a wildcard (domain.com will allow requests from *.domain.com).
You can configure multiple application domains or IPs here, comma-delimited.
See https://www.firebase.com/docs/security/simple-login-overview.html for additional documentation about application configuration for Simple Login.
I hope that helps! Feel free to ping me directly if you have further questions.

How to post message on Facebook Wall with offline access

I am trying to send message from my asp.net website running on localhost with offline access.
Can I post data on fb wall when my asp.net web-site is running on localhost is so then please provide me some solution.
I have tried using graph api provided by facebook on developers.facebook.com and I am sending code from sever-side.
The permission named Offline Access has been deprecated.
You can do so by creating a facebook app.
When configuring, your app's permissions should include the permission to post on behalf of your user (publish_stream should do).
Give the app permission for your user - visit https://apps.facebook.com/{your_app_name_or_id}/, you will be asked to allow the app certain permissions regarding your user. Allow.
Obtain the app's token.
Access the graph API using the token you received. One way (should make it easier, I hadn't a chance to go over it thoroughly myself) is using CS SDK.

Resources