DEV Community: Allan López

Setting Up Biometric Login on Your React Native App

Allan López — Mon, 29 May 2023 02:37:25 +0000

Introduction

Biometrics login is a convenient feature to have on your app, this convenience not only saves time but also improves user satisfaction and engagement. With biometric login, mobile app users can enjoy a seamless and secure authentication experience, making it a win-win for both security-conscious individuals and those seeking a hassle-free login solution.

On this post we are going to setup a biometric login feature that works appart from the normal email + password login.

Considerations

Check out the excellent Alto Engineering blog post about considerations for Implementing Biometric Login to learn about pros and cons of different ways to use a mobile device's biometrics to authenticate a user, with varying degrees of security.

On this post we are going to implement the Create a separate authentication mechanism for biometrics way on a expo RN app.

Note: We will only see the front-end implementation.

Setup

We will need to add some libraries to the project:

Expo Local Authentication in order to make use of the device biometrics
Expo Secure Store in order to save the private token encrypted securely on the user device.
React Native RSA Native in order to sign the payload with the private key.

Flows

First Login

For the first login we are going to require strictly the email and password, the flow is as follows:

1. Login

The user must login with his credentials the first time in order to assure he is the owner of the account.

2. Show Biometrics

Ask for biometrics access so we can setup the biometrics login



import {
    authenticateAsync
} from 'expo-local-authentication';

const askForBiometrics = async () => 
    await authenticateAsync({
        disableDeviceFallback: true,
        promptMessage: "Enable biometrics login",
        cancelLabel: "Not now",
    });

3. User confirms biometrics

4. Create a key pair

Create the public and private key, save the private key on the device in order to sign a payload, the public key will be use in the backend.



import {
    authenticateAsync
} from 'expo-local-authentication';
import {
    RSA
} from 'react-native-rsa-native';
...

const enableBiometrics = async () => {
    const biometricsResult = await askForBiometrics();
    if (biometricsResult?.success) {
        //Create Key pair
        const keys = await RSA.generateKeys(1024);
        // Use secure Store as it provides a way to encrypt and securely store key–value pairs locally on the device.
        await SecureStore.setItemAsync(
            "USER_BIOMETRIC_KEY",
            keys.private
        );
    }
};

5. Send the public key

User public key will be saved on the backend in order to verify the signature.



...
const enableBiometrics = async () => {
    ...
    await postBiometricKey({
        biometricKey: {
            publicKey: keys.public
        }
    });
    ...
};

Final Code



import {
    authenticateAsync
} from 'expo-local-authentication';
import {
    RSA
} from 'react-native-rsa-native';

const askForBiometrics = async () => 
    await authenticateAsync({
        disableDeviceFallback: true,
        promptMessage: "Enable biometrics login",
        cancelLabel: "Not now",
    });

const enableBiometrics = async () => {
    const biometricsResult = await askForBiometrics();
    if (biometricsResult?.success) {
        const keys = await RSA.generateKeys(1024);
        await SecureStore.setItemAsync(
            "USER_BIOMETRIC_KEY",
            keys.private
        );
        await postBiometricKey({
            biometricKey: {
                publicKey: keys.public
            }
        });
    }
};

Next Logins

For next logins we will ask for biometrics if they have enabled it:

1. User Opens App

2. Show Biometrics

Ask for biometrics confirmation



import {
    authenticateAsync
} from 'expo-local-authentication';

const authenticate = async () => {
    const biometricsResult = await authenticateAsync({
        disableDeviceFallback: true,
        promptMessage: "Login with biometrics",
        cancelLabel: "Cancel",
    });
}

3. User Confirms Biometrics

4. Creates a signature with private key

Sign a payload with the private key we saved on the user device using SecureStore.



import * as SecureStore from 'expo-secure-store';
import dayjs from 'dayjs';

const generateSignature = async () => {
    // Get private key from secure store
    const privateKey = await SecureStore.getItemAsync(
        "USER_BIOMETRIC_KEY"
    );
    const payload = {
        // You can add info you want on the payload
        // DO NOT SEND THE PRIVATE KEY
        // 5 minutes expiration
        exp: dayjs().add(5, 'minutes').unix(),
    };

    if (biometrics) {
        const signature = await sign(privateKey, payload);
        return signature;
    }
};

Sign payload



import {
    RSA
} from 'react-native-rsa-native';

export async function sign(privateKey: string, payload: any) {
    const signature = await RSA.signWithAlgorithm(
        payload,
        privateKey,
        'SHA256withRSA'
    );
    return signature;
}

5. Send signature to API



 const sendSignature = async () => {
    const signature = await generateSignature();
    if (signature) {
        // POST to API
        await postSignature({
            signature
        });
    }
};

6. API validates signature

7. API returns a session token

Final Code



import {
    RSA
} from 'react-native-rsa-native';
import * as SecureStore from 'expo-secure-store';
import dayjs from 'dayjs';
import {
    authenticateAsync
} from 'expo-local-authentication';

const authenticate = async () => {
    const biometricsResult = await authenticateAsync({
        disableDeviceFallback: true,
        promptMessage: "Login with biometrics",
        cancelLabel: "Cancel",
    });
    if(biometricsResult?.success){
      await sendSignature();
    }
}

const sendSignature = async () => {
    const signature = await generateSignature();
    if (signature) {
        await postSignature({
            signature
        });
    }
};

const generateSignature = async () => {
    const biometrics = await SecureStore.getItemAsync(
        "USER_BIOMETRIC_KEY"
    );
    const payload = {
        exp: dayjs().add(5, 'minutes').unix(),
    };

    if (biometrics) {
        const signature = await sign(biometrics, payload);
        return signature;
    }
};


export async function sign(privateKey: string, payload: any) {
    const signature = await RSA.signWithAlgorithm(
        payload,
        privateKey,
        'SHA256withRSA'
    );
    return signature;
}

Conclusion

And thats it! Now we have different flows isolated for login with email + password and biometrics.

Implementing face and fingerprint ID login offers evident advantages for both app users and the overall application. If you're contemplating integrating biometric login into your app, this blog post aims to provide you with valuable insights and guidance to navigate the process successfully.

Rails ActiveStorage Direct Upload on React Native

Allan López — Sun, 14 May 2023 18:12:50 +0000

Recently, I needed to integrate direct upload functionality into a React Native application. After spending some time researching Internet solutions for Rails ActiveStorage Direct Uploads (which are rather sparse), I found out that it can be done from within the app and I am sharing my experience here.

On this post I will only be showing the front-end part, for more information about backend work you can follow this guide.

I will show how to upload images from expo image picker, but you can use whatever other library for this.

My first thought was to use the Rails Active Storage Javascript library. This would be simple and ideal, but as I found out it doesn't work well when used on React Native because this package uses DOM Form APIs which are not supported in an app environment.

Luckily I found a thread with some instructions on how to make it work on React Native.

In order to make the Direct upload we need to follow 3 steps:

Get the signed upload URL
Upload the file
Update the Rails model with the signed_id

1. Get the signed upload URL

Once we have called ImagePicker.launchImageLibraryAsync() and have a successful response we are going to use the ImagePicker.ImagePickerAsset result file.

We will need to get some info of the file for the first request, for that we are going to use the expo-file-system library.
(the meta data you need will depend on your BE implementation)

import { Buffer } from 'buffer';
import * as FileSystem from 'expo-file-system';
import * as ImagePicker from 'expo-image-picker';

async function uploadFile(file: ImagePicker.ImagePickerAsset){
 const meta = await FileSystem.getInfoAsync(file.uri, { md5: true });
  const md5 = meta.md5;
  const checksum = Buffer.from(md5, 'hex').toString('base64');
  const fileExtension = file.uri.split('.').pop();

 const blobInfo = {
    blob: {
      filename:`fileName.${fileExtension}`,
      byteSize: meta.size,
      checksum,
      contentType: "image/jpeg", //this depends on the type of your image
    },
  };
}

Once we have the data we need, we will send our first POST request to our BE to get the signed upload url.

The request can look something like this, but will vary depending your implementation.

import { Buffer } from 'buffer';
import * as FileSystem from 'expo-file-system';
import * as ImagePicker from 'expo-image-picker';

async function uploadFile(file: ImagePicker.ImagePickerAsset) {
  const meta = await FileSystem.getInfoAsync(file.uri, { md5: true });
  const md5 = meta.md5;
  const checksum = Buffer.from(md5, 'hex').toString('base64');
  const fileExtension = file.uri.split('.').pop();

  const blobInfo = {
    blob: {
      filename: `fileName.${fileExtension}`,
      byteSize: meta.size,
      checksum,
      contentType: 'image/jpeg',
    },
  };
  const { data: signedResponse } = await fetch('/rails/active_storage/direct_uploads', {
    method: 'POST',
    body: blobInfo,
  });
}

We will be using the direct upload url and direct upload headers from the response.

2. Upload the file

Once we have the signed direct url we are going to upload the file as a blob.

async function uploadFile(file: ImagePicker.ImagePickerAsset){
.....
.....
  //We need to clean the URI on IOS in order to have the correct route for the file
  const fileUri =
      Platform.OS === 'ios' ? file.uri.replace('file://', '/') : file.uri;
    const fileResponse = await fetch(fileUri);
    const blob = await fileResponse.blob();
    //signed url from previous POST
    await fetch(signedResponse.direct_upload.url, {
      method: 'PUT',
      // Important to pass the same headers we got on the first request, if not passed you could have authorization errors.
      headers: signedResponse.direct_upload.headers, 
      body: blob, // pass the blob directly to the body
    });

}

3. Update the Rails model with the signed_id

Finally send the signed id to the backend in order to be saved.

fetch(/* user_url */, {
  method: 'PUT',
  body: {
    user: {
      image: response.signed_id
    }
  }
})

Final code

import { Buffer } from 'buffer';
import * as FileSystem from 'expo-file-system';
import * as ImagePicker from 'expo-image-picker';

async function uploadFile(file: ImagePicker.ImagePickerAsset) {
  const meta = await FileSystem.getInfoAsync(file.uri, { md5: true });
  const md5 = meta.md5;
  const checksum = Buffer.from(md5, 'hex').toString('base64');
  const fileExtension = file.uri.split('.').pop();

  const blobInfo = {
    blob: {
      filename: `fileName.${fileExtension}`,
      byteSize: meta.size,
      checksum,
      contentType: 'image/jpeg',
    },
  };

  const {data: signedResponse} = await fetch('/rails/active_storage/direct_uploads', {
    method: 'POST',
    body: blobInfo,
  });

  const fileUri =
    Platform.OS === 'ios' ? file.uri.replace('file://', '/') : file.uri;
  const fileResponse = await fetch(fileUri);
  const blob = await fileResponse.blob();

  await fetch(signedResponse.direct_upload.url, {
    method: 'PUT',
    headers: signedResponse.direct_upload.headers,
    body: blob,
  });

  await fetch(/* user url */, {
    method: 'PUT',
    body: {
      user: {
        image: signedResponse.signed_id,
      },
    },
  });
}

In summary: Create a blob, which gives you a signed upload url. PUT the file to that signed URL. Then update the rails model to assign your signed url to the attachment relation.

Thanks to @cbothner and @jbschrades for pointing us to the right direction.

Interval fetching with react-query

Allan López — Sun, 28 Feb 2021 02:54:20 +0000

Photo by Emily Morter on Unsplash

Recently I was asked to implement a page that needs to work with a fetching interval, as I wanted to keep the server state as simple as posible I decided to give react-query a try and implement a interval logic on it. Here is what I came up with it.

Use case

We need to make a post to an endpoint to start a process. Then every 5 seconds ask for its progress, once we received that the process is finished we must stop fetching.

As a plus I wanted to keep this on a hook in order to be used in different parts of the app. Lets start.🤓

Code

First we need to create a hook with a mutation inside in order to start the process. We add the stop state in order to tell us when to stop the fetching and we save the process id we get from the response.

const useProcessInterval = ({ onSuccess, onError }) => {
  const [processId, setProcessId] = useState(null);
  const [stop, setStop] = useState(false);

  // Mutation to start the process
  const { mutate } = useMutation(startProcess, {
    onMutate: () => {
      //When mutate we want to start fetching
      setStop(false);
    },
    onError: error => {
      console.error(error);
      //Stop fetching
      setStop(true);
      onError();
    },
     onSuccess: data => {
      setProcessId(data.process_id);
    },
  });
};

For the interval fetching query part, we are going to take advantage of the refetchInterval method we have with react-query.

//Fetch until received status is finished
  const { isLoading, data } = useQuery(['processProgress', processId], getProgress, {
    onSuccess: data => {
      if (data.status === 'finished') {
        // Stop fetching
        setStop(true);
        //Clean up processId
        setProcessId(null);
        onSuccess();
      }
    },
    onError: error => {
      console.error(error);
      setStop(true);
      setProcessId(null);
      onError();
    },
    //Only start getting process when we have received the process id from the mutation
    enabled: processId != null,
    //Keep refetching every 5 seconds while we don't stop it
    refetchInterval: stop ? false : 5000,
    refetchIntervalInBackground: true,
    refetchOnWindowFocus: false,
  });

Finally we end up with the final hook.

const useProcessInterval = ({ onSuccess, onError }) => {
  const [processId, setProcessId] = useState(null);
  const [stop, setStop] = useState(false);

  // Mutation to start the process
  const { mutate } = useMutation(startProcess, {
    onMutate: () => {
      setStop(false);
    },
    onError: error => {
      console.error(error);
      setStop(true);
      onError();
    },
     onSuccess: data => {
      setProcessId(data.process_id);
    },
  });

  //Fetch until received status is finished
  const { isLoading, data } = useQuery(['processProgress', processId], getProgress, {
    onSuccess: data => {
      if (data.status === 'finished') {
        setStop(true);
        setProcessId(null);
        onSuccess();
      }
    },
    onError: error => {
      console.error(error);
      setStop(true);
      setProcessId(null);
      onError();
    },
    enabled: processId != null,
    refetchInterval: stop ? false : 5000,
    refetchIntervalInBackground: true,
    refetchOnWindowFocus: false,
  });

  return { mutate, data, isLoading };

};

And we can use it in our component the following way.

 const { mutate, data, isLoading } = useProcessInterval({
   onSuccess: () => console.log('Process finished'),
   onError: () => console.log('Error with process'),
 });

See you in the next posts! 🖐