Ionic 3 Firebase Google Auth redirects to localhost instead of app - firebase

Im using AngularFire2 in my Ionic 3 Project. I have implemented Facebook and Google Login which worked before but somehow it stopped working (maybe because of changes in the Firebase SDK or Google?).
The problem Im facing now is that once a user logs in through google with redirect he logs in but doesnt get redirect back in my app. Instead google just displays this page on redirect:
Here is the Code im using for SignIn:
private oauthSignIn(provider: AuthProv) {
if (!(<any>window).cordova) {
return this.afAuth.auth.signInWithPopup(provider).then((user) => {
this.user = user.user;
});
} else {
return this.afAuth.auth.signInWithRedirect(provider)
.then(() => {
return this.afAuth.auth.getRedirectResult().then(result => {
this.user = result.user;
});
});
}
}
This code is from the AngularFire2 Documentation itself so I cant find any errors.
This is my package.json:
"dependencies": {
"#angular/animations": "5.2.11",
"#angular/common": "5.2.11",
"#angular/compiler": "5.2.11",
"#angular/compiler-cli": "5.2.11",
"#angular/core": "5.2.11",
"#angular/forms": "5.2.11",
"#angular/http": "5.2.11",
"#angular/platform-browser": "5.2.11",
"#angular/platform-browser-dynamic": "5.2.11",
"#ionic-native/admob-plus": "^5.8.0",
"#ionic-native/app-version": "^4.20.0",
"#ionic-native/core": "~4.20.0",
"#ionic-native/keyboard": "^5.8.0",
"#ionic-native/navigation-bar": "^5.8.0",
"#ionic-native/splash-screen": "~4.20.0",
"#ionic-native/status-bar": "~4.20.0",
"#ionic/storage": "2.2.0",
"#ultimate/ngxerrors": "^1.4.0",
"angularfire2": "^5.2.1",
"cordova-admob-plus": "0.30.0",
"cordova-android": "7.1.4",
"cordova-plugin-app-update": "2.0.2",
"cordova-plugin-app-version": "0.1.9",
"cordova-plugin-appversion": "1.0.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "4.1.1",
"cordova-plugin-navigationbar": "1.0.31",
"cordova-plugin-network-information": "git+https://github.com/apache/cordova-plugin-network-information.git",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-startapp-ads": "git+https://github.com/lreiner/cordova-plugin-startapp-ads.git",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"firebase": "^6.1.1",
"ionic-admob": "^0.19.6",
"ionic-angular": "3.9.5",
"ionicons": "3.0.0",
"phonegap-plugin-mobile-accessibility": "git+https://github.com/phonegap/phonegap-mobile-accessibility.git",
"promise-polyfill": "^8.1.3",
"rxjs": "5.5.11",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.29"
},
I have already tried this Solution and added:
<preference name="CordovaWebViewEngine" value="CDVUIWebViewEngine" />
<allow-navigation href="http://*" />
to my config.xml which also didnt change anything.
I also have tried to downgrade
"cordova-plugin-ionic-webview": "4.1.1",
which also didnt work.
My Google WebClient has the right ClientID, Secred and Redirect URL like in the Firebase Console.
So how can I solve this behavior?

Related

ERROR Error: Uncaught (in promise): TypeError: i.BehaviorSubject is not a constructor in Angular 10 SSR

I'm getting this issue after build successfully and run on browser with angular universal
Here is my package json :
{
"name": "ssr",
"version": "1.0.0",
"private": true,
"dependencies": {
"#angular/animations": "10.0.5",
"#angular/cdk": "10.1.0",
"#angular/common": "10.0.5",
"#angular/compiler": "10.0.5",
"#angular/core": "10.0.5",
"#angular/fire": "^6.0.2",
"#angular/forms": "10.0.5",
"#angular/http": "^7.2.16",
"#angular/localize": "^10.0.5",
"#angular/material": "10.1.0",
"#angular/material-moment-adapter": "10.1.0",
"#angular/platform-browser": "10.0.5",
"#angular/platform-browser-dynamic": "10.0.5",
"#angular/platform-server": "^10.0.5",
"#angular/router": "10.0.5",
"#ng-bootstrap/ng-bootstrap": "^7.0.0",
"#ng-toolkit/universal": "^8.1.0",
"#nguniversal/express-engine": "^10.0.1",
"#types/jquery": "^3.5.1",
"#types/node": "^8.10.62",
"angular-in-memory-web-api": "^0.11.0",
"angular-ng-autocomplete": "^2.0.1",
"classlist.js": "^1.1.20150312",
"codelyzer": "^6.0.0",
"core-js": "2.6.9",
"crypto-js": "^3.3.0",
"express": "^4.15.2",
"firebase": "^7.17.1",
"hammerjs": "^2.0.8",
"jquery": "^3.5.1",
"localstorage-polyfill": "^1.0.1",
"moment": "2.24.0",
"ng2-slim-loading-bar": "^4.0.0",
"ng5-slider": "^1.1.14",
"ngx-order-pipe": "^2.0.4",
"ngx-pagination": "^3.2.1",
"ngx-spinner": "^10.0.1",
"rxjs": "^6.6.0",
"rxjs-compat": "^6.6.0",
"sweetalert2": "^8.19.0",
"tslib": "^1.13.0",
"web-animations-js": "^2.3.2",
"whatwg-fetch": "^3.2.0",
"zone.js": "0.10.3"
},
I just updated my project to Angular 10 and started facing this issue.
What i did was , wherever I had BehaviorSubject imports ,
i changed them from import { BehaviorSubject } from "rxjs/Rx"; to import { BehaviorSubject } from "rxjs";
This makes production build work without any error.
I got solution, use rxjs-tslint and migrate all rxjs syntax : https://www.npmjs.com/package/rxjs-tslint
I am able to solve this by using the build command as ng build --configuration=prod --aot= false --build-optimizer=false. Application is up and running for us now. But it's a work around only. We are trying to check few more ways without setting optimiser to false.Will update you.
I guess your question is solved,
I fixed it using ng build instead of ng build --prod. I am now investigating why the --prod command line compile my app differently
I guess your question is solved,
I fixed it using ng build instead of ng build --prod. I am now investigating why the --prod command line compile my app differently

Get code from country or zone name to set locale() moment.js

I'm using moment.js with moment timezone in it.
I was trying to find how to get code 'fr' from zone name 'Europe/Paris' all day, but with no luck.
I read all their docs and couldn't find that function either, so i need help on this one.
Closest what i found is this. I need this function but in reverse, to pass country name and get country code.
Luckily i found solution
moment.tz.zone('America/New_York').countries()
This will get you array so you guys can easily pass that value to locale()
So final code would be:
var get_locale = moment.tz.zone('America/New_York').countries();
moment.locale(get_locale);
I was trying to below code in my Angular(v12.0.5) project and get this error.
var get_locale = moment.tz.zone('America/New_York').countries();
moment.locale(get_locale);
Error -
package.json -
"dependencies": {
"#angular/animations": "^12.0.5",
"#angular/cdk": "~12.2.13",
"#angular/common": "~12.0.3",
"#angular/compiler": "~12.0.3",
"#angular/core": "~12.0.3",
"#angular/forms": "~12.0.3",
"#angular/material": "~12.2.13",
"#angular/material-moment-adapter": "^13.2.2",
"#angular/platform-browser": "~12.0.3",
"#angular/platform-browser-dynamic": "~12.0.3",
"#angular/router": "~12.0.3",
"moment": "^2.29.1",
"rxjs": "~6.6.0",
"tslib": "^2.1.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~12.0.3",
"#angular/cli": "~12.0.3",
"#angular/compiler-cli": "~12.0.3",
"#types/jasmine": "~3.6.0",
"#types/moment-timezone": "^0.5.30",
"#types/node": "^12.11.1",
"typescript": "~4.2.3"
}
Then I found the solution in moment doc -
const get_country = moment.tz.guess(true); // Asia/Calcutta
const get_locale = moment.locale(get_country); // en

ionic - Firebase issue

Getting the following error while creating the build.Else not having any problem.
Any solutions to resolve this issue.
Currently using following congfiguration...'
"#angular/animations": "5.2.11",
"#angular/common": "5.2.11",
"#angular/compiler": "5.2.11",
"#angular/compiler-cli": "5.2.11",
"#angular/core": "5.2.11",
"#angular/fire": "^5.2.3",
"#angular/forms": "5.2.11",
"#angular/http": "5.2.11",
"#angular/platform-browser": "5.2.11",
"#angular/platform-browser-dynamic": "5.2.11",
"#ionic-native/core": "~4.20.0",
"#ionic-native/in-app-browser": "^4.20.0",
"#ionic-native/splash-screen": "~4.20.0",
"#ionic-native/status-bar": "~4.20.0",
"#ionic/storage": "2.2.0",
"#ngx-translate/core": "^9.1.1",
"#ngx-translate/http-loader": "^2.0.1",
"angular-bottom-sheet": "^1.2.5",
"angular-material": "^1.1.20",
"angular2": "^2.0.0-beta.21",
"angularfire2": "^5.0.0-rc.6",
"call-number": "^1.0.1",
"cordova-android": "^7.0.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-inappbrowser": "^3.1.0",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^4.1.3",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"firebase": "^7.6.1",
"ionic-angular": "3.9.5",
"ionicons": "3.0.0",
"promise-polyfill": "^8.1.3",
"rxjs": "^6.0.0",
"rxjs-compat": "^6.5.3",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.29"
},
"devDependencies": {
"#ionic/app-scripts": "3.2.2",
"typescript": "3.2.2"
},
I got an error blow, please find it:
[20:15:04] typescript: ...e_m_pwd_app/e_i/node_modules/#firebase/database/dist/src/api/Database.d.ts, line: 44
An accessor cannot be declared in an ambient context.
L43: * We throw a exception if the url is not in the same domain as the
L44: * current repo.
L45: * #param {string} url
[20:15:04] typescript: ...m_pwd_app/e_i/node_modules/#firebase/database/dist/src/api/DataSnapshot.d.ts, line: 88
An accessor cannot be declared in an ambient context.
[20:15:04] typescript: ...m_pwd_app/e_i/node_modules/#firebase/database/dist/src/api/DataSnapshot.d.ts, line: 98
An accessor cannot be declared in an ambient context.
[20:15:04] typescript: ...nd/e_p/e_i/node_modules/#firebase/database/dist/src/api/Query.d.ts, line: 36
An accessor cannot be declared in an ambient context.
L36: * Validates that no other order by call has been made
L37: * #param {!string} fnName
[20:15:04] typescript: ...nd/e_p/e_i/node_modules/#firebase/database/dist/src/api/Query.d.ts, line: 37
An accessor cannot be declared in an ambient context.
L36: * Validates that no other order by call has been made
L37: * #param {!string} fnName
L38: * #private
i am working with firebase database with ionic framework. when i trying to connect with firebase i am getting above mentioned error in ionic framework,
please give me a solution for this issue.
please check the keyname firebase as well as your code (fnName). please share your code

Angular 7 post-upgrade styling issue

We've upgraded our application from Angular 5.2 to 7.2 and the styling got messed up. The spacing between some elements (for example: icons and text) has changed, disappeared or decreased.
Have any of you encountered an issue like this after upgrading an Angular application or the following packages?
I already reverted back every possible package to their staging versions, but it didn't solve the problem.
I have no idea where to start the troubleshooting to find the source of the problem. The styling and the HTML haven't been changed.
We updated:
Bootstrap: from 4.1.0 to 4.3.1
#ng-bootstrap/ng-bootstrap: from 1.1.2 to 4.0.0
ngx-bootstrap: from 2.0.5 to 4.0.0
The styling is global from the angular.json:
Where we import the used Bootstrap components:
The package.json look like this:
{
"private": true,
"dependencies": {
"#angular/animations": "7.2.11",
"#angular/common": "7.2.11",
"#angular/compiler": "7.2.11",
"#angular/core": "7.2.11",
"#angular/forms": "7.2.11",
"#angular/http": "7.2.11",
"#angular/platform-browser": "7.2.11",
"#angular/platform-browser-dynamic": "7.2.11",
"#angular/platform-server": "7.2.11",
"#angular/router": "7.2.11",
"#fortawesome/angular-fontawesome": "0.3.0",
"#fortawesome/fontawesome-svg-core": "1.2.12",
"#fortawesome/free-solid-svg-icons": "5.6.3",
"#ng-bootstrap/ng-bootstrap": "4.0.0",
"#nguniversal/express-engine": "7.1.1",
"#ngx-translate/core": "11.0.1",
"#ngx-translate/http-loader": "4.0.0",
"acorn": "6.1.1",
"angular2-image-zoom": "1.2.1",
"bootstrap": "4.3.1",
"braintree-web-drop-in": "1.16.0",
"core-js": "2.6.5",
"file-saver": "2.0.1",
"font-awesome": "4.7.0",
"htmllint": "0.7.3",
"intl": "1.2.5",
"jquery": "3.3.1",
"ng-jhipster": "0.9.3",
"ng-recaptcha": "4.2.1",
"ng2-order-pipe": "0.1.5",
"ngx-bootstrap": "4.0.0",
"ngx-color-picker": "7.4.0",
"ngx-cookie": "4.1.2",
"ngx-webstorage": "3.0.2",
"popper.js": "1.14.7",
"print-js": "1.0.54",
"rxjs": "6.4.0",
"rxjs-compat": "6.4.0",
"tslib": "1.9.3",
"zone.js": "0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "0.13.7",
"#angular/cli": "7.3.7",
"#angular/compiler-cli": "7.2.11",
"#angular/language-service": "7.2.11",
"#types/file-saver": "2.0.0",
"#types/hammerjs": "2.0.36",
"#types/jasmine": "3.3.12",
"#types/jasminewd2": "2.0.6",
"#types/node": "11.12.0",
"codelyzer": "5.0.0",
"jasmine-core": "3.3.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "4.0.1",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "2.0.0",
"karma-coverage-istanbul-reporter": "2.0.5",
"karma-jasmine": "2.0.1",
"karma-jasmine-html-reporter": "1.4.0",
"node-sass": "4.11.0",
"protractor": "6.0.0",
"sort-json": "2.0.0",
"ts-node": "8.0.3",
"tslint": "5.14.0",
"typescript": "3.2.4"
}
}
I believe from Angular 6 the preserveWhitespace option is false by default. To turn it on again globally you can add an option in tsconfig.app.json:
"angularCompilerOptions": {
"preserveWhitespaces": true
}
Or you can use the directive ngPreserveWhitspaces on any elements where you need the whitespace to be preserved.
See here for some (quite hidden) documentation on it.

Nativescript Firebase plugin - “cannot read property of null” after upgrade to NS 3.4.0

My angular - Nativescript project uses the Nativescript-Firebase-Plugin. It works perfectly well in Nativescript 3.3
I upgraded my project to Nativescript 3.4. After upgrading the project, I am facing a major issue with all firebase queries.
**JS: Error in firebase.query: TypeError: Cannot read property 'child' of null**
JS: NO QUESTIONS FOR THIS USER
JS: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'length' of undefined
JS: TypeError: Cannot read property 'length' of undefined
JS: at file:///data/data/org.nativescript.qbank/files/app/feed/alphaCreate.component.js:55:23
JS: at SafeSubscriber.schedulerFn [as _next] (file:///data/data/org.nativescript.qbank/files/app/tns_modules/#angular/core/bundles/core.umd.js:3870:36)
JS: at SafeSubscriber.__tryOrUnsub (file:///data/data/org.nativescript.qbank/files/app/tns_modules/rxjs/Subscriber.js:238:16)
JS: at SafeSubscriber.next (file:///data/data/org.nativescript.qbank/files/app/tns_modules/rxjs/Subscriber.js:185:22)
JS: at Subscriber._next (file:///data/data/org.nativescript.qbank/files/app/tns_modules/rxjs/Subscriber.js:125:26)
JS: at Subscriber.next (file:///data/data/org.nativescript.qbank/files/app/tns_modules/rxjs/Subscriber.js:89:18)
JS: at EventEmitter.Subject.next (file:///data/data/org.nativescript.qbank/files/app/tns_modules/rxjs/Subject.js:55:25)
JS: at EventEmitter.emit (file:///data/data/org.nativescript.qbank/files/app/tns_modules/#angular/core/bundles/core.umd.js:3844:76)
JS: at file:///data/data/org.nativescript.qbank/files/app/services/my-questions.service.js:51:42
JS: at ZoneDelegate.invoke (file:///data/data/org.nativescript.qbank/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:365:26)
JS: at Object.onInvoke (file:///data/data/org.nativescript.qbank/files/app/tns_modules/#angular/core/bundles/core.umd.js:4156:37)
JS: at ZoneDelegate.invoke (file:///data/data/org.nativescript.qbank/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:364:32)
JS: at Zone.run (file:///data/data/org.nativescript.qbank/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:125:43)
JS: at file:///data/data/org.nativescript.qbank/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:760:57
JS: at ZoneDelegate.invokeTask (file:///data/data/org.nativescript.qbank/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:398:31)
I tried to resolve it by
a. upgrading the native script firebase plugin: 5.0.5
b. upgrading all the dependenices of the project
But the issue is still occurring. This is a big blocker, and Please suggest what I can do to fix this.
My package json is as below:
{
"android": {
"markingMode": "none"
},
"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"readme": "NativeScript Application",
"repository": "<fill-your-repository-here>",
"nativescript": {
"id": "org.nativescript.qbank",
"tns-ios": {
"version": "3.4.0"
},
"tns-android": {
"version": "3.4.0"
}
},
"dependencies": {
"#angular/animations": "~5.0.0",
"#angular/common": "~5.0.0",
"#angular/compiler": "~5.0.0",
"#angular/core": "~5.0.0",
"#angular/forms": "~5.0.0",
"#angular/http": "~5.0.0",
"#angular/platform-browser": "~5.0.0",
"#angular/platform-browser-dynamic": "~5.0.0",
"#angular/router": "~5.0.0",
"nativescript-algolia": "0.0.4",
"nativescript-angular": "~5.0.0",
"nativescript-camera": "^3.1.4",
"nativescript-email": "^1.5.1",
"nativescript-fancyalert": "^1.1.2",
"nativescript-filter-select": "^1.2.1",
"nativescript-geolocation": "^3.0.0",
"nativescript-gif": "^1.0.9",
"nativescript-imagepicker": "^4.0.1",
"nativescript-iqkeyboardmanager": "^1.1.0",
"nativescript-loading-indicator": "^2.3.2",
"nativescript-plugin-firebase": "^5.0.5",
"nativescript-pro-ui": "^3.3.0",
"nativescript-theme-core": "~1.0.4",
"nativescript-toast": "^1.4.5",
"nativescript-web-image-cache": "^4.2.2",
"reflect-metadata": "~0.1.8",
"rxjs": "^5.5.0",
"tns-core-modules": "^3.4.0"
},
"devDependencies": {
"babel-traverse": "6.26.0",
"babel-types": "6.26.0",
"babylon": "6.18.0",
"codelyzer": "~4.0.2",
"es6-promise-loader": "^1.0.2",
"lazy": "1.0.11",
"nativescript-dev-typescript": "^0.6.0",
"tslint": "^5.1.0",
"typescript": "~2.4.2",
"zone.js": "^0.8.4"
}
}
The problem was that firebase was not initialising. I solved this by putting firebase init in a timeout.

Resources