React Native Biometrics: Fingerprint and FaceID | DEVember Day 10

Welcome to Day 10 of #DEVember at notJust.dev! In today's session, we'll delve into the world of security and convenience by incorporating biometrics into your React Native app. We'll explore how you can utilize fingerprint scanning, Touch ID, and Face ID to enhance the security of your applications. This tutorial is ideal for anyone seeking to enhance their app's security through biometrics while gaining a comprehensive understanding of integrating Touch ID and Face ID in React Native.
🌟DEVember Day 10: www.notjust.dev/projects/deve...
If you have ideas of features, topics or apps you would like me to cover during #DEVember, you can submit them on our 💡Idea Board:
github.com/notJust-dev/DEVemb...
📚 Today's Agenda:
- Introduction to Biometrics in Mobile Apps
- Setting up Biometric Authentication in React Native
- Integrating Touch ID for iOS Devices
- Implementing Face ID Authentication
- Handling Fallbacks and Errors in Biometric Scanning
- Enhancing App Security with Biometric Checks
- Testing Biometric Features
❗Try our FREE 4-day Masterclass on notJust.Academy:
assets.notjust.dev/masterclas...
📚 Enroll NOW in The Full-Stack Mobile Developer course and don’t miss out on your chance to become a 6-figure dev! Check out what our successful students are saying about their experience:
academy.notjust.dev/?...
💬 Join the notJust Development gang and let's build together:
Twitter: / vadimnotjustdev
Instagram: / vadimnotjustdev
Facebook: / notjustdev
LinkedIn: / vadimsavin
Discord: / discord
Timecodes:
0:00 Intro and Overview
0:50 Expo Local Authentication for Biometric Security
1:14 DEVember React Native Tutorials Overview
3:14 Setting Up the Project Repository for Day 10
4:49 Implementing Protected Routes in the Application
6:11 Running the Project with Expo Run iOS
7:28 Installing Expo Local Authentication
8:50 Additional Steps for React Native CLI Projects
10:05 Configuring App for Face ID Permission
11:42 Importing and Implementing Local Authentication
14:28 Protecting Screens with Biometric Authentication
17:24 Rebuilding the Native Client for New Dependencies
22:22 Pre-Building Native Projects with Expo
24:16 Running the Application on a Physical Device
26:54 Adding User Interface for Biometric Authentication
30:33 Handling Biometric Authentication in the Application
34:52 Exploring Additional Biometric Functions
38:42 Demonstrating Face ID on a Physical Device
41:57 Managing Authentication State Across Screens
47:21 Implementing Global State with React Context
52:13 Handling Authentication Logic in Context Provider
56:39 Typing Context Provider for Better Code Management
1:00:06 Conclusion and Recap of the Tutorial
Disclaimer: This build is for educational purposes only. All views, opinions, and technology choices expressed in this video are my own and do not represent the views, opinions, or technology choices of any entity I have been, am now, or will be affiliated with.
#notjustdev #ReactNative

[@prashlovessamosa]

Thanks for this series very grateful to you for providing knowledge to us for free.

[@notjustdev]

It’s my pleasure

[@durotemy8410]

Bro U are the best..u are a mentor. can u recommend a video of urs where i get to learn about authentication..if a user is not logged in he should not be able to see other screen. ur content are top notch

[@user-jz9bu8fi2u]

I have a question, why do we have to put the isUnclock value in useContext and why not put the authenticate function in useContext but put it in layout?

[@joaofranciscoferreira3202]

When I run npx expo run:android, I get this error: FAILURE: Build failed with an exception. *Where: Settings file 'path\setting.gradle' *What went wrong: Could not read script 'path ode_modules\expo\scripts\autolinking.gradle' as it does not exist. BUILD FAILED Error: 'path\android\gradlew.bat' exited with non-zero code: 1

[@Abhishekverma-yj1or]

Hi there Face Id for Android is not working. With the Face Id code it openings the fingerprint authentication.

[@user-il8qg5xb4u]

hai bro im from india i have a doubt like i need to use mobile number device access when i can enter the mobile number on that time i need to show but in expo its not work but in react native while using of this library react-native-sms-retriever its working .but i need to use in expo can u give me any suggestion in expo

[@protimaranipaul7107]

inActivity } BUNDLE node_modules\expo-router/entry.js error: Error: Unable to resolve module @/components/day3/MarkdownDisplay from C:\Backup\DEVember-day11-end\src\app\(days)\day11\index.tsx: @/components/day3/MarkdownDisplay could not be found within the project or in these directories: node_modules 2 | import React from 'react'; 3 | import { Link, Stack } from 'expo-router'; > 4 | import MarkdownDisplay from '@/components/day3/MarkdownDisplay'; | ^ 5 | import { SafeAreaView } from 'react-native-safe-area-context'; 6 | 7 | const description = ` at ModuleResolver.resolveDependency (C:\Backup\DEVember-day11-end ode_modules\@react-native-community\cli-plugin-metro ode_modules\metro\src ode-haste\DependencyGraph\ModuleResolution.js:139:15) at DependencyGraph.resolveDependency (C:\Backup\DEVember-day11-end ode_modules\@react-native-community\cli-plugin-metro ode_modules\metro\src ode-haste\DependencyGraph.js:277:43) at Object.re

[@mithuna5009]

Why there is ios folder showing in video it is expo project may i know the reason anyone can help me

[@sudhanshukumar8794]

How we can protect this from screenshots

[@mauricearida9001]

Dude I adore you but you are not gonna give us the code right ?

[@SoundFusion3D]

Kindly update your uber clone course

[@mdnahidseo]

Hello sir Are you looking for a professional KZbin thumbnail designer?

[@bouthouri]

Great work, if only you could make the video shorter. All the videos are interesting for me but 1 hour is too much. Less then 30 minutes would be perfect! Best of luck

[@Frexuz]

Expo 🤦‍♂️

[@Graddg]

What