Firebase auth web SDK not working on Ionic iOS? - ionic-framework

My issue is the login with the email and password function works fine on android but on iOS, the promise is never returned ( nor failed ) when correct credentials are provided but it fails if I provide incorrect credentials. The login works on iOS with live reload simulating on an iOS device, but when installed with test-flight or via xCode promise is never returned nor rejected.
How can I debug it further or know what the underlying issue is?
onSubmit: async (values) => {
try {
const auth = getAuth(firebaseApp);
auth.setPersistence(browserSessionPersistence);
// Never called on IOS
auth.onAuthStateChanged(() => {
console.log('I am here', auth.currentUser);
if (auth.currentUser) {
updateIsAuthenticated(true);
}
});
const userCred = await signInWithEmailAndPassword(auth, values.email, values.password);
//Never runs
console.log('After Success', userCred);
} catch (error) {
// Runs when provided with false credentials
setError('Error: Authentication failed');
console.error('An error Occurred');
} finally {
console.log('Running Finally');
}
},
});

Related

Connect Metamask with a native mobile app built with Flutter

I want to connect the app to Metamask to get the user account and signature from the user to confirm the transaction. But the problem is that when I enter Metamask from the app, I am not asked any questions to confirm the connection and nothing happens inside Metamask, it is like only the Metamask app is opened and when I back up and return to the app, the null account is returned.
_walletConnect() async {
final connector = WalletConnect(
bridge: 'https://bridge.walletconnect.org',
clientMeta: const PeerMeta(
name: 'WalletConnect',
description: 'WalletConnect Developer App',
url: 'https://walletconnect.org',
icons: [
'https://gblobscdn.gitbook.com/spaces%2F-LJJeCjcLrr53DcT1Ml7%2Favatar.png?alt=media'
],
),
);
// Subscribe to events
connector.on('connect', (session) => print(session));
connector.on('session_update', (payload) => print(payload));
connector.on('disconnect', (session) => print(session));
// Create a new session
if (!connector.connected) {
session = await connector.createSession(
chainId: 97,
onDisplayUri: (uri) async => {print(uri), await launch(uri)});
}
setState(() {
account = session.accounts[0];
print(account);
});
if (account != null) {
final client = Web3Client(rpc, Client());
EthereumWalletConnectProvider provider =
EthereumWalletConnectProvider(connector);
credentials = WalletConnectEthereumCredentials(provider: provider);
yourContract = ethUtils.getDeployedContract(myAddress, client);
}
It sometimes happened to me as well.
I had just closed the MetaMask app and clicked on the button (Which triggered this function) and it worked fine.
I made a library for this, web3_connect, uses the same code and it gets the address back just fine for me

Flutter webivewplugin how to set local storage

My Flutter application flow works like this:
User logins
1-If login successfully, server returns a token
2-Set token to local storage in webview
3-Open Webview fullscreen to a specific URL
I am using this Webview plugin. The sample code shows that it supports local storage (it has a withLocalStorage option) but does not show how to use it.
I am aware of this question1 question2
f I correctly set the local storage, the Webview would show account page; otherwise a login page (
That's Not What Happened)
Instade am getting this error
I/chromium(13409): [INFO:CONSOLE(1)] "Uncaught SyntaxError: Invalid or unexpected token", source: (1)
My code:
void webwiew(token) {
flutterWebViewPlugin
.launch(
"URLExpml",
withLocalStorage: true,
withJavascript: true,
)
.whenComplete(() {
final res = flutterWebViewPlugin.evalJavascript("(function() { try { window.localStorage.setItem('token', $token); } catch (err) { return err; } })();");
print("Eval result webview : ${res.toString()}");
});
}
From https://github.com/fluttercommunity/flutter_webview_plugin/pull/51#issuecomment-399468804
You can wait until the first page loading is completed and then accessing LocalStorage with evalJavascript
To achieve this you can use onStateChanged.listen and check state.type == WebViewState.finishLoad
StreamSubscription<WebViewStateChanged> _onStateChanged;
_onStateChanged = flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged state) {
if (mounted) {
if (state.type == WebViewState.finishLoad) {
flutterWebviewPlugin.evalJavascript(
"window.localStorage.setItem('LOCAL_STORAGE','SOMETOKEN');" +
"document.getElementById('showLocalStorageBtn').click();"
);
}
}
});

Firebase Facebook authentication : Malformed or expired auth credential

I'm working on a react native ios app using facebook authentication and firebase.
I created my facebook app, copied the secret keys to my firebase facebook auth mode, but when i'm trying to sign in with facebook credential using firebase I'm getting this error : The supplied auth credential is malformed or has expired.
I had a look at this issue : FB login - Firebase.Auth() Error: The supplied auth credential is malformed or has expired which is the quite similar to mine, but the answer didn't help me because my keys are the same in my facebook app configuration than in my firebase facebook auth mode.
Here is the code i'm using when the facebook auth button is pressed :
facebookLogin = () => {
LoginManager.logInWithPermissions(['public_profile', 'email'])
.then(
(result) => {
if (result.isCancelled) {
Alert.alert('Whoops!', 'You cancelled the sign in.');
} else {
AccessToken.getCurrentAccessToken()
.then((data) => {
const credential = firebase.auth.FacebookAuthProvider.credential(data.accessToken);
console.log(credential);
firebase.auth().signInWithCredential(credential)
.then(() => this.props.navigation.replace('Home'))
.catch((error) => {
console.log(error.message);
this.setState({ errorMessage: error.message })
});
});
}
},
(error) => {
Alert.alert('Sign in error', error);
},
);
};
I hope you guys can help me, maybe I mistook when I configured my facebook app.
Thank you in advance.
turns out Facebook Graph API is not supported by firebase yet check this out
the reason why Graph API is not supported

Can't receive push notifications using Ionic Cloud on iOS

I'm using ionic's cloud push notification service for both android and iOS, along with phonegap-plugin-push. Since i'm using my own server-side authentcation and not ionic's, I have it configured so that a user's authentication token is registered depending on whether or not they're logged in, and saved when they log in (unregistered when they log out).
App.module:
const cloudSettings: CloudSettings = {
'core': {
'app_id': 'APP_ID',
},
'push': {
'sender_id': 'SENDER_ID',
'pluginConfig': {
'ios': {
'badge': true,
'sound': true,
},
'android': {
'iconColor': '#343434'
}
}
}
};
instead of making push a provider in app module, I made an injectable service that can be used across components. The main app component subscribes to the notifications, while my login and logout components tell it whether or not to register and save them.
export class NotificationService{
token: PushToken;
registered: boolean;
constructor(public push: Push){
}
checkLogin(status){
if(!status){
this.push.register().then((pushT: PushToken) => {
this.token = pushT;
console.log('token saved:'+ this.token);
});
}
}
saveToken(){
this.push.saveToken(this.token);
console.log('token saved');
this.registered = true;
this.startListening();
}
deleteToken(status){
if(status){
this.push.unregister().then(function(){
console.log('token deleted');
return true;
})
}
}
startListening(){
if(this.registered){
return this.push.rx.notification()
.subscribe((msg) => {
alert(msg.title + ': ' + msg.text);
});
}}
getToken(){
return this.token.token;
}
}
I have my sender ID for GCM configured in config.xml and ionic cloud, and my APNS certificate is saved in ionic cloud. So far this works perfectly on android. On iOS it registers the token and saves to the database, but testing on Ionic cloud my iPhone doesn't receive any notifications. Any thoughts?

Handling Facebook/Google login with ngCordovaOauth in Ionic + Firebase

I'm trying to implement Firebase authentication with angularfire signInWithCredential method for my Ionic app. As I'm using Firebase 3.x SDK, the methods signInWithRedirect and signInWithPopup are not yet supported on mobile devices. Thus I'm using the plugin ngCordovaOauth.
var ref = firebase.database().ref().child("users");
$scope.users = $firebaseArray(ref);
$cordovaOauth.facebook("//removed_client_id", [ "public_profile", "email"]).then(function(result) {
var credentials = firebase.auth.FacebookAuthProvider.credential(result.access_token);
$scope.authObj.$signInWithCredential(credentials).then(function(authData) {
var existUser = $scope.users.$getRecord(authData.uid);
if(existUser == null){
$scope.user = {
uid: authData.uid,
displayName: authData.displayName,
avatar: authData.photoURL,
email: authData.email,
contact: "0000000000",
provider: "facebook"
}
firebase.database().ref("users/" + authData.uid).set($scope.user);
}
$rootScope.result = authData;
$state.go("menu.home");
}, function(error) {
console.error("ERROR: " + error);
});
}, function(error) {
console.log("ERROR: " + error);
});
The problem that I'm facing is I have no idea what the structure of 'authdata' is as I couldn't find any documentation for the same. With sigInWithPopup, firebase returns 'result' object; contents of which can be accessed like 'result.user.uid', 'result.user.displayName' or 'result.user.email'. How can I achieve the same here as I'm trying to store the user profile when he logs in for the first time? Any help? I'm testing on android device. Thank you!
signInWithCredential returns a promise that resolves with a firebase.User same as signInWithEmailAndPassword and all other sign in apis.
Check the docs for more info on firebase.User:
https://firebase.google.com/docs/reference/js/firebase.User