I am trying to create one login/signup page which is storing the value in keychain and I am trying to store the JWT token while login on device and public key get store on server side the private key store in client side will ask for biometric and take to home page.
Login.tsx
const login: SubmitHandler<ILoginValues> = async ({email, password}) => {
try {
const res = await fetch(`${config.apiUrl}/api/login`, {
method: 'POST',
body: JSON.stringify({
email,
password,
}),
});
if (res.ok) {
await setGenericPassword(email, password, CREDENTIALS_STORAGE_OPTIONS);
setUser({isLoggedIn: true, hasSessionExpired: false});
toast.setToast({message: 'Login has succeeded', visible: true});
}
} catch (error) {
toast.setToast({message: 'Login failed', visible: true});
}
};
Biometric handle part
const handleBiometricsLogin = useCallback(async () => {
if (!user?.hasSessionExpired) {
toast.setToast({message: 'No expired session'});
return;
}
try {
const credentials = await getGenericPassword(CREDENTIALS_STORAGE_OPTIONS);
console.log({credentials});
if (!credentials) {
return;
}
const res = await fetch(`${config.apiUrl}/api/login`, {
method: 'POST',
body: JSON.stringify({
email: credentials.username,
password: credentials.password,
}),
});
if (res.ok) {
setUser({isLoggedIn: true, hasSessionExpired: false});
toast.setToast({
message: 'Login with biometrics has succeeded',
visible: true,
});
}
} catch (error) {
toast.setToast({message: 'Login with biometrics failed'});
}
}, [setUser, toast, user?.hasSessionExpired]);
Requirements
When a user enrolls in biometrics, a key pair is generated. The private key is stored securely on the device and the public key is sent to a server for registration. When the user wishes to authenticate, the user is prompted for biometrics, which unlocks the securely stored private key. Then a cryptographic signature is generated and sent to the server for verification. The server then verifies the signature. If the verification was successful, the server returns an appropriate response and authorizes the user.