Develop Reference

How can we implement Face and fingerprint in IONIC 5/Angular with Cordova which works both in IOS and Android

I implemented Biometric with Fingerprint AIO, It works fine for Fingerprint but Face auth is not working, it gives an error while Authenticating message when I try to login using face, Any solution will be helpful.
I am using Ionic 5 with Angular 8,
Fingerprint AIO- 5.0.0
Below is the code i am using
return this.fingerPrintAIO.show({
clientId: 'Fingerprint-Demo',
clientSecret: 'password',
disableBackup: false,
localizedFallbackTitle: 'Use Pin',
localizedReason: 'Please authenticate'
});
async isFingerprintAvailable() {
let result = false;
const promise = await this.fingerPrintAIO.isAvailable();
promise.then((response) => {
if (response === "finger" || response === "face") {
this.presentFingerPrint().then((resp: any) =>{
console.log('Inside success');
}).catch(e => {
console.log('Inside failure on cancel');
});
}
result = true;
console.log('fingerprint available : ', response);
});
promise.catch((error) => {
result = false;
console.log('fingerprint error : ', error);
});
return result;
}
Thanks in Advance

react-native-fbsdk-next Android Login Button results in oAuth error

I am using react-native-fbsdk-next and followed all steps to set up Android/iOS (https://www.npmjs.com/package/react-native-fbsdk-next)
iOS works perfectly.
On android i receive the following redirect right after user clicks the LoginButton provided by the the fb sdk:
Here is my code:
<LoginButton
onLoginFinished={getOnLoginFinished()}
onLogoutFinished={() => {
console.log('logout.');
}}
/>
function getOnLoginFinished() {
return async (error, result) => {
let userAccessToken;
LoginManager.setLoginBehavior('native_with_fallback');
if (error) {
console.log('login has error: ' + result.error);
} else if (result.isCancelled) {
console.log('login is cancelled.');
} else {
AccessToken.getCurrentAccessToken()
.then(data => {
setUserAccessToken(data.accessToken.toString());
console.log(data.accessToken.toString());
console.log(result.grantedPermissions);
console.log(JSON.stringify(result));
})
.catch(err => {
console.log(`Get current access token, err ${err}`);
});
}
};
}

Expected deprecation, more detail here:
https://developers.facebook.com/docs/facebook-login/android/deprecating-webviews
Along with potential solution.

Firebase function is not triggering

I am using expo-payments-stripe API for the payment of an android app. And Stripe payment API is getting called from the following firebase function:
exports.payWithStripe = functions.https.onRequest((request, response) => {
stripe.charges.create({
amount: request.body.amount,
currency: request.body.currency,
source: request.body.token,
}).then((charge) => {
response.send(charge);
})
.catch(err =>{
console.log(err);
});
});
Here is the code for the client-side that calls the firebase functions:
payment = async () => {
if (this.state.token) {
fetch(
"https://us-central1-<>.cloudfunctions.net/payWithStripe",
{
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({
amount: this.state.amount,
currency: "usd",
token: this.state.token.tokenId,
}),
}
)
.then((response) => response.json())
.then((responseJson) => {
if (
responseJson.status === "succeeded" &&
responseJson.paid == true
) {
this.setState({ status: "succeeded", loading: false });
}
console.log(responseJson);
})
.catch((error) => {
this.setState({ status: "failed", loading: false });
console.error(error);
});
}
};
doPayment = async () => {
const params = {
number: this.state.number,
expMonth: parseInt(this.state.expMonth),
expYear: parseInt(this.state.expYear),
cvc: this.state.cvc,
};
const token = await Stripe.createTokenWithCardAsync(params);
this.setState({ token: token, loading: true });
setTimeout(() => {
this.payment();
}, 5000);
console.log(token);
};
Everything works fine in the test mode. But after deploying the app to the Play store Firebase function is not triggered. Any suggestions on why this might be happening? Also without ejecting expo what other options do I have to make payments from expo react native app for android?

Can you check adding await to the fetch or removing async from the payment function? Also why did you add setTimeout to the payment function call?

Unable to get jwt from backend server

What my app should do is it uses google oauth for login and the server will then return a create a user (if user has not been created) and log the user in (by creating session).
I am certain my backend works because i have tested everything with postman.
However, i am unable to handle the creation of user (if user has not been created) and console.log my jwt to assure myself that it is working. I am strongly convinced it has to do with my react native code below.
Furthermore, the log which says "this is not working" is not being printed in google chrome as well.
-
import React from 'react';
import { StyleSheet, Platform, Image, Text, View, ScrollView } from 'react-native';
import { GoogleSignin, statusCodes, GoogleSigninButton } from 'react-native-google-signin';
import NavigationManager from './containers/TabNavigator';
import PhoneStorageManager from './assets/jwtStorageManager';
GoogleSignin.configure({
forceConsentPrompt: true,
webClientId: '<client-id>
});
export default class App extends React.Component {
constructor() {
super();
this.state = {failed: "NOOO", user: null, jwt: null};
}
async componentDidMount() {
}
signIn = async () => {
try {
await GoogleSignin.hasPlayServices();
const userInfo = await GoogleSignin.signIn();
this.setState({ failed: "SUCCESS" });
this.setState({ user: userInfo });
const resp = await fetch('<url>', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
session: {
token: userInfo.idToken,
authprovider: "google"
}
})
})
.then(response => response.json())
this.setState({ jwt: resp.jwt }, ()=> {
console.log(this.state.jwt, 'jwt');
PhoneStorageManager._storeData("key",this.state.jwt);
//so that i can use jwt for further api calls
});
console.log("this is not working");
} catch (error) {
if (error.code === statusCodes.SIGN_IN_CANCELLED) {
// user cancelled the login flow
this.setState({ failed: "CANCELLED" });
} else if (error.code === statusCodes.IN_PROGRESS) {
// operation (f.e. sign in) is in progress already
this.setState({ failed: "PROGRESS" });
} else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
// play services not available or outdated
this.setState({ failed: "NO AVAIL" });
} else {
// some other error happened
this.setState({error: error});
this.setState({ failed: "some other error happened" });
}
}
}
render() {
if (this.state.jwt) {
console.log(this.state.jwt);
return (
<NavigationManager JWT={this.state.jwt}/>
);
}
else
return (
<View style={styles.container}>
<Image source={require('./assets/auditlogo.png')} style={[styles.logo]} />
<GoogleSigninButton
style={{ width: 192, height: 48 }}
size={GoogleSigninButton.Size.Wide}
color={GoogleSigninButton.Color.Dark}
onPress={this.signIn}
disabled={this.state.isSigninInProgress} />
<Text style= {styles.instructions}>
Please Sign in to continue.
</Text>
</View>
);
}
}
1) User presses google sign in button
2) Fetch api to create user if new user.
3) Fetch api to create session. (this returns jwt for further api calls)
4) Further api calls which uses jwt. (How do i get the jwt to be passed down?)

Can not set state on fetch react native

Hello I tried to set the state on fetch call like this:
getCats() {
fetch(GLOBALS.API + '/specials.php?action=getCats&key=' + GLOBALS.KEY)
.then((response) => response.json())
.then((responseJson) => {
this.setState = ({
dataSource: "test"
});
Alert.alert("test");
})
.catch((error) => {
console.log(error.toString());
});
}
componentDidMount() {
this.getCats();
console.log(this.state.dataSource);
}
but the line:
console.log(this.state.dataSource);
return me undefined
and I get an alert of "test"
what the problem?
tnx a lot

You Can Make Use of callbacks.
Below is the code example
getCats(successCallBack, failureCallback) {
fetch(GLOBALS.API + '/specials.php?action=getCats&key=' + GLOBALS.KEY)
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
failureCallback();
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data)
successCallBack(data);
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
failureCallback();
});
}
Below is the code for success and failure call backs
successCallBack(data) {
console.log(data)
}
failureCallback() {
alert("failure");
}
Below is the code to bind success and failure callbacks.
getCats(this.successCallBack.bind(this), this.failureCallback.bind(this));

Fetch is asynchronous so it will return immediately, before the code in the then clauses are run. Therefore, setState will not have run before the console logging.