Firebase signUpWithEmailAndPassword using Ionic - android

I am using the latest version of Ionic (v1.3.1) and Firebase (v3.1.0).
I'm trying to do firebase user authentication using the following method:
firebase.auth().signInWithEmailAndPassword(email, password)
Whilst this method works perfectly when ionic is running in a web browser, when the ionic app is run natively on Android, it throws an error, specifically:
'A network error (such as timeout, interrupted connection or unreachable host) has occurred.'
I have made sure the app's config.xml allows access to all URLs so it doesn't appear to be an issue with Ionic.
Looking online, it seems that Firebase is possibly blocking the app's browser because it doesn't recognise the app's domain (domains for authentication appear to be whitelisted in the 'OAuth redirect domains' part of the authentication section in the Firebase dashboard).
However, there is not way to identify what an Ionic app's domain is (it certainly isn't 'localhost' or 127.0.0.1)
So, my question is: does Firebase signInWithEmailAndPassword(email, password) actually work with Ionic and other web-wrapper platforms, or is this currently unsupported?

Make sure you are setting the correct Content-Security-Policy too. Something along:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *;script-src 'self' https://* 'unsafe-inline' 'unsafe-eval'; connect-src 'self' https://* 'unsafe-inline' 'unsafe-eval'; ">

Many thanks for the responses. For those interested in the solution to this problem, it did not reside with Firebase. Rather, newer versions of Cordova and Ionic sometimes throw http 404 errors when the app tries to make network requests.
In order to solve these 404 errors, the app needs the Cordova WhiteList plugin added:
http://docs.ionic.io/docs/cordova-whitelist

Related

Websocket Connection does no longer work with Cordova Android 7

I recently updated my Cordova app to Cordova Android 7.1.1 (from 6.x). I'm using websockets in this app to connect to another app running a websocket server, which used to work fine. Now, after upgrading to Cordova Android 7.1.1, the connection can no longer be established. It fails with this message (from the chrome console):
WebSocket connection to 'ws://192.168.178.20:52998/' failed:
Error in connection establishment: net::ERR_ACCESS_DENIED
No changes were made in the code which is responsible for establishing the connection. It looks like this:
ns.connection = new WebSocket(uri); // uri would be e.g. 'ws://192.168.178.20:52998/'
I cannot find the reason for this. I already tried to add CSP headers and more, but to no avail. I made sure the connection is working in general, so it must be somehow related to changes made from Cordova Android 6.x to 7.x I'd guess.
Changes in Cordova included obeying CORS headers. You have to now make sure your CORS is setup to allow. For example:
config.xml:
<access origin="*" />
<allow-navigation href="*"/>
Content-Security-Policy in index.html:
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data:">

Cordova XHR requests failing by prefixing url with file:///

My app is working just fine after cordova run browser, but it cannot connect to my backend server when deployed to iOS using cordova run ios (local resources load properly).
Debugger tells me the problem may be that it prefixes all XHR requests to backend server with file:///var, so that instead of http://my-backend.com/rest It tries to connect to file:///varhttp://my-backend.com/rest.
I have whitelist plugin installed, <access origin="*" /> in my config and this line in index.html when deploying to iOS:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; content-src *">
If it's important, on front end I use Angular with ngCordova and Restangular plugin for handling AJAX requests. I use Cordova 6.2.0.
So the question is, how do I get rid of this file:///var prefix?
EDIT:
As it turns out, there's a similar error on Android device, but the prefix is file:///android_asset
EDIT 2:
My AJAX calls are made with Restangular. I have default url set like this:
RestangularProvider.setBaseUrl("http://my-backend.com"), and example call looks like this: Restangular.one('session/check').get()

Refused to load the image 'http://192.xxx.x3000/' because it violates the following Content Security Policy directive: "default-src 'self'"

When I run an ionic app in Android Studio on a phone running android 5 no images are displayed and I get this message for each image:
Refused to connect to 'http://192.xxx.x.xxx:3000/promotions/0' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
On content-security-policy.com I found and tried the following:
Starter Policy
This policy allows images, scripts, AJAX, and CSS from the same origin, and does not allow any other resources to load (eg object, frame, media, etc). It is a good starting point for many sites.
default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';
But still no luck. In fact I have tried many permutations of the Content Security Policy all without success.
I get the same as using Android Studio when I use:
ionic build android
ionic run android
The images are stored on a JSON-server which runs ok and everything works fine on localhost on the computer.
Any pointers for solving this issue ? Thanks
try to add this meta in the head
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' ">

ajax response not working after android apk build from build.phonegap.com server

I have called ajax into my cordova phonegap android project.ajax response come from external url. When build apk from eclipse,it working fine but after upload the project zip to build.phonegap.com server and generate apk.this apk not give ajax response. I have add ' and
' into my config.xml page where ajax response come from http://example.com/subdomain.
You will likely need to set an appropriate Content-Security-Policy meta tag in the head of your index.html. It is likely that your local Cordova/Phonegap version with Eclipse is older than the one on PhoneGap Build, and doesn't require this.
Cordova 5 and newer require the Content-Security-Policy meta tag, and by default don't allow external Ajax requests.
You will need to configure your connect-src clause to allow * (all servers) or list out those you want to connect to.
Example:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; connect-src http://myserver.mydomain.com">
Changing myserver.mydomain.com for * (for all servers) or a space separated list of URLs if you want to limit where your app can go get data from.
There's a blog post here that helps explain this in detail.

cordova-plugin-whitelist working on Android but not iOS (Phonegap Build)

I'm working on a JavaScript app wrapped in Cordova and built with Phonegap Build. We're including cordova-plugin-whitelist from npm in our build and have added <access origin="*" /> to our config.xml and an open CSP (<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">) in our index.html. The app works fine on Android and talks to our server without issues, but on iOS all requests fail immediately as if the whitelist plugin isn't letting traffic through.
I've tried a number of different build configurations in case something broke in a particular version of Cordova, but haven't been able to get this to work at all. I've had a similar issue with other Phonegap/Cordova apps in the past but was able to solve it with the whitelist plugin/CSP/access rule.
This issue has also been difficult to debug since the Safari Developer Tools won't connect to the iOS device and I'm having to alert the responses I'm seeing. It looks like the response coming back has a status code 0 and an empty body, which I'm assuming just means unreachable.
You may well need to set the connect-src in your Content-Security-Policy, for example:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; connect-src http://YOUR_HOST">
Additionally for Xcode 7 / iOS 9 you will need to adjust the ATS settings to allow connections to non https backends if you aren't using SSL:
Here's a working example of the change to your app's info .plist:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
(Note you can also configure this to selectively allow non https connections).
And here's a script you could use as a pre build hook for iOS to do this automatically:
#!/bin/bash
echo "Adjusting plist for App Transport Security exception."
val=$(/usr/libexec/plistbuddy -c "add NSAppTransportSecurity:NSAllowsArbitraryLoads bool true" platforms/ios/PROJECTNAME/PROJECTNAME-Info.plist 2>/dev/null) echo "Done"
Just swap out PROJECTNAME for the name of your project.
Change your access tag to:
<access origin="https://yourdomain.com" requires-certificate-transparency='false' allows-arbitrary-loads-in-web-content='true'/>
It will update the Info.Plist file accordingly in the NsAppTransportSecurity entry.
Source: https://cordova.apache.org/docs/en/latest/guide/appdev/whitelist/#ios-whitelisting

Categories

Resources