From 54f251c772b93bac700ec92287064b7a96012f8e Mon Sep 17 00:00:00 2001 From: vi Date: Mon, 25 Nov 2024 11:36:04 -0500 Subject: [PATCH 1/3] wip --- docs/references/expo/local-credentials.mdx | 42 ++++++---------------- 1 file changed, 10 insertions(+), 32 deletions(-) diff --git a/docs/references/expo/local-credentials.mdx b/docs/references/expo/local-credentials.mdx index 75ff945425..7e50ab0e7e 100644 --- a/docs/references/expo/local-credentials.mdx +++ b/docs/references/expo/local-credentials.mdx @@ -1,20 +1,17 @@ --- -title: Allow returning users to sign in with biometrics in Expo -description: Learn how to use the useLocalCredentials hook in your Expo app with Clerk. +title: Enable biometric sign-in for returning users in Expo +description: Learn how to use the useLocalCredentials() hook in your Expo app to enable biometric sign-ins for returning users. --- +> [!WARNING] +> This API is available only for [@clerk/clerk-expo v2](/docs/upgrade-guides/expo-v2/upgrade) >=2.2.0. This feature works only for sign-in attempts that use the password strategy. -Clerk's [`useLocalCredentials()`](/docs/references/expo/use-local-credentials) hook enables you to store a user's password credentials on their device and subsequently use biometrics for sign-in. +The [`useLocalCredentials()`](/docs/references/expo/use-local-credentials) hook lets yu securely store a user's password credentials on their device, enabling them to use biometrics for sign-ins. -This guide shows you how to use the `useLocalCredentials()` hook to enhance your user experience by allowing users to sign in using biometrics when they re-sign in to your Expo app. +This guide shows you how to use the `useLocalCredentials()` hook in your Expo app to improve the user experience by offering biometric sign-in for returning users. -> [!WARNING] -> This API is available only for [@clerk/clerk-expo v2](/docs/upgrade-guides/expo-v2/upgrade) >=2.2.0. -> Be aware that this works only for sign in attempts with the password strategy. - ### Install the necessary peer dependencies - - These packages are required to be installed in order to use the `useLocalCredentials()` hook. + ### Install dependencies ```bash {{ filename: 'terminal' }} @@ -32,12 +29,12 @@ This guide shows you how to use the `useLocalCredentials()` hook to enhance your ### Update `app.json` - Update your app.json file as instructed in the Expo documentation: + Use the following Expo docs to update your app.json file: - [`expo-local-authentication`](https://docs.expo.dev/versions/latest/sdk/local-authentication/#configuration-in-appjsonappconfigjs) - [`expo-secure-store`](https://docs.expo.dev/versions/latest/sdk/securestore/#configuration-in-appjsonappconfigjs) - ### Securely store/access the user's credentials during sign in + ### Securely store and access the user's credentials during sign-in The following example demonstrates how to use `useLocalCredentials()` in a custom flow for signing users in. @@ -191,23 +188,4 @@ This guide shows you how to use the `useLocalCredentials()` hook to enhance your ) } ``` - - -## More resources - -Use the following guides to learn more about Clerk components, how to build custom flows for your native apps, and how to use Clerk's client-side helpers. - - - - [Expo SDK](/docs/quickstarts/expo) - - Use Clerk with Expo to authenticate users in your React Native application. - - --- - - - [Custom flows](/docs/custom-flows/overview) - - Expo native apps require custom flows in place of prebuilt components. Learn more about custom flows. - - --- - - - [Client-side helpers](/docs/references/react/use-user) - - Clerk's client-side helpers enable you to access user data and perform actions on the client-side. - + \ No newline at end of file From a75ac483d67d0894e7a738ff630684b0fc76fdf7 Mon Sep 17 00:00:00 2001 From: vi Date: Tue, 26 Nov 2024 20:41:17 -0500 Subject: [PATCH 2/3] wip --- docs/references/expo/local-credentials.mdx | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/docs/references/expo/local-credentials.mdx b/docs/references/expo/local-credentials.mdx index 7e50ab0e7e..ca91439d5a 100644 --- a/docs/references/expo/local-credentials.mdx +++ b/docs/references/expo/local-credentials.mdx @@ -3,12 +3,9 @@ title: Enable biometric sign-in for returning users in Expo description: Learn how to use the useLocalCredentials() hook in your Expo app to enable biometric sign-ins for returning users. --- > [!WARNING] -> This API is available only for [@clerk/clerk-expo v2](/docs/upgrade-guides/expo-v2/upgrade) >=2.2.0. This feature works only for sign-in attempts that use the password strategy. - -The [`useLocalCredentials()`](/docs/references/expo/use-local-credentials) hook lets yu securely store a user's password credentials on their device, enabling them to use biometrics for sign-ins. - -This guide shows you how to use the `useLocalCredentials()` hook in your Expo app to improve the user experience by offering biometric sign-in for returning users. +> This feature requires @clerk/clerk-expo@2.2.0 or later and works only for sign-in attempts that use the password strategy. +This guide demonstrates how to use the [`useLocalCredentials()`](/docs/references/expo/use-local-credentials) hook in your Expo app to securely store a user's password credentials on their device, enabling biometric sign-in for returning users. ### Install dependencies @@ -29,14 +26,14 @@ This guide shows you how to use the `useLocalCredentials()` hook in your Expo ap ### Update `app.json` - Use the following Expo docs to update your app.json file: + See the following Expo docs to update your `app.json` file with the necessary configurations for biometric sign-in. Replace `$(PRODUCT_NAME)` with your app's name as specified in the `"name"` field in your `app.json` file. - [`expo-local-authentication`](https://docs.expo.dev/versions/latest/sdk/local-authentication/#configuration-in-appjsonappconfigjs) - [`expo-secure-store`](https://docs.expo.dev/versions/latest/sdk/securestore/#configuration-in-appjsonappconfigjs) - ### Securely store and access the user's credentials during sign-in + ### Securely store user credentials during sign-in - The following example demonstrates how to use `useLocalCredentials()` in a custom flow for signing users in. + The following example demonstrates how to use `useLocalCredentials()` in a custom flow for signing in users. ```tsx {{ filename: '/app/sign-in.tsx' }} import { useSignIn } from '@clerk/clerk-expo' From 30bbe96d10275b229770d76dc01d22ad47607f48 Mon Sep 17 00:00:00 2001 From: vi Date: Thu, 5 Dec 2024 12:41:39 -0500 Subject: [PATCH 3/3] fix code --- docs/references/expo/local-credentials.mdx | 112 ++++++++++++--------- 1 file changed, 67 insertions(+), 45 deletions(-) diff --git a/docs/references/expo/local-credentials.mdx b/docs/references/expo/local-credentials.mdx index ca91439d5a..4a19ecb04b 100644 --- a/docs/references/expo/local-credentials.mdx +++ b/docs/references/expo/local-credentials.mdx @@ -2,8 +2,9 @@ title: Enable biometric sign-in for returning users in Expo description: Learn how to use the useLocalCredentials() hook in your Expo app to enable biometric sign-ins for returning users. --- + > [!WARNING] -> This feature requires @clerk/clerk-expo@2.2.0 or later and works only for sign-in attempts that use the password strategy. +> This feature requires @clerk/clerk-expo\@2.2.0 or later and works only for sign-in attempts that use the password strategy. This guide demonstrates how to use the [`useLocalCredentials()`](/docs/references/expo/use-local-credentials) hook in your Expo app to securely store a user's password credentials on their device, enabling biometric sign-in for returning users. @@ -37,71 +38,92 @@ This guide demonstrates how to use the [`useLocalCredentials()`](/docs/reference ```tsx {{ filename: '/app/sign-in.tsx' }} import { useSignIn } from '@clerk/clerk-expo' + import { Link, useRouter } from 'expo-router' + import { Text, TextInput, Button, View } from 'react-native' + import { useCallback, useState } from 'react' import { useLocalCredentials } from '@clerk/clerk-expo/local-credentials' - import { Link, Stack, useRouter } from 'expo-router' - import { Text, TextInput, Button, View, TouchableOpacity, StyleSheet } from 'react-native' - import React from 'react' - import { SymbolView } from 'expo-symbols' export default function Page() { - const { signIn, setActive, isLoaded } = useSignIn() const router = useRouter() - - const [emailAddress, setEmailAddress] = React.useState('') - const [password, setPassword] = React.useState('') + const { signIn, setActive, isLoaded } = useSignIn() const { hasCredentials, setCredentials, authenticate, biometricType } = useLocalCredentials() - const onSignInPress = React.useCallback( - async (useLocal = false) => { - if (!isLoaded) { - return - } + const [emailAddress, setEmailAddress] = useState('') + const [password, setPassword] = useState('') + + const onSignInPress = useCallback(async (useLocal: boolean) => { + if (!isLoaded) return - try { - const signInAttempt = - hasCredentials && useLocal - ? await authenticate() - : await signIn.create({ - identifier: emailAddress, - password, - }) - - if (signInAttempt.status === 'complete') { - if (!useLocal) { - await setCredentials({ + // Start the sign-in process using the email and password provided + try { + const signInAttempt = + hasCredentials && useLocal + ? await authenticate() + : await signIn.create({ identifier: emailAddress, password, }) - } - await setActive({ session: signInAttempt.createdSessionId }) - // navigate away - } else { - // handle other statuses of sign in + // If sign-in process is complete, + // set the created session as active and redirect the user + if (signInAttempt.status === 'complete') { + console.log('status is complete?', signInAttempt.status) + + if (!useLocal) { + await setCredentials({ + identifier: emailAddress, + password, + }) } - } catch (err: any) { - // handle any other error + + await setActive({ session: signInAttempt.createdSessionId }) + router.replace('/') + } else { + // If the status is not complete, check why. + // User may need to complete further steps. + console.error(JSON.stringify(signInAttempt, null, 2)) } - }, - [isLoaded, emailAddress, password], - ) + } catch (err) { + // For info on error handing, + // see https://clerk.com/docs/custom-flows/error-handling + console.error(JSON.stringify(err, null, 2)) + } + }, []) return ( setEmailAddress(emailAddress)} /> - setPassword(password)} /> -