Moni C
Moni C

Reputation: 119

Integrating Touch ID with Firebase Auth in React Native

I'm new to React native but I have created a signup / login which uses the react-native-firebase package (based of https://github.com/faahmad/react-native-firebase-auth), I want to incorporate touch id to allow a user to login, but I can't find any examples online (in react native with firebase). I have had a look at the packages react-native-fingerprint-scanner and react-native-touch-id which are straight forward to implement I just don't know how to tie firebase auth and touch id together. Any help with this is appreciated.

Thanks

Upvotes: 2

Views: 2356

Answers (1)

Ray
Ray

Reputation: 9674

This just a thought and not yet implemented as 'actual code' but... Here's my two cents on how I would approach it:

Once the user signs-up, you can store their email and password with AsyncStorage, SQLite or whatever. And then add Login with fingerprint as a feature inside the user's settings page. From there, once the user decides to login again, you can:

1- Use the promise that react-native-fingerprint-scanner gives you.

2- Fetch the email and password from your database of choice.

3- Use that data to authenticate with firebase and login.

It will look something like that:

handleLogin() {
    FingerprintScanner
        .authenticate({ description: 'Scan your fingerprint to login' })
        .then(() => {
            const sql = "select email, password from user";
            db.runQuery(sql, function(data) { // this is a made-up function
                const { email, pasword } = data
                firebase
                  .auth()
                  .signInWithEmailAndPassword(email, password)
                  .then(() => /*navigate to main page once authenticated*/)
                  .catch(error => this.setState({ errorMessage: error.message 
            });
    })
    .catch(console.error);
}

There are rooms for improvement but this should work for you. Hope it helps.

Upvotes: 3

Related Questions