From 1f5b73a3f27e28fedd46e6a2ec4e19def6fd3f25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?=
 <100827540+reneaaron@users.noreply.github.com>
Date: Wed, 30 Oct 2024 22:47:08 +0100
Subject: [PATCH] fix: show auth prompt only once

---
 pages/Unlock.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/pages/Unlock.tsx b/pages/Unlock.tsx
index 7b20b31..0e7ca46 100644
--- a/pages/Unlock.tsx
+++ b/pages/Unlock.tsx
@@ -1,6 +1,6 @@
 import * as LocalAuthentication from "expo-local-authentication";
 import { router, Stack } from "expo-router";
-import React from "react";
+import React, { useCallback, useEffect } from "react";
 import { Image, View } from "react-native";
 
 import { Button } from "~/components/ui/button";
@@ -11,7 +11,14 @@ export function Unlock() {
   const [isUnlocking, setIsUnlocking] = React.useState(false);
   const { signIn } = useSession();
 
-  const handleUnlock = React.useCallback(async (): Promise<void> => {
+  const handleUnlock = useCallback(async () => {
+    // The call `signIn()` below triggers a re-render of the component
+    // and would prompt the user again (before the actual redirect
+    // happens and the view is replaced)
+    if (isUnlocking) {
+      return;
+    }
+
     try {
       setIsUnlocking(true);
       const biometricAuth = await LocalAuthentication.authenticateAsync({
@@ -26,9 +33,9 @@ export function Unlock() {
     } finally {
       setIsUnlocking(false);
     }
-  }, [signIn]);
+  }, [isUnlocking, signIn]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     handleUnlock();
   }, [handleUnlock]);