Add remember-me and OTP autofill, fix session persistence
Sign-in gains a "Keep me signed in" checkbox: checked issues a 30-day token and prefills the address next launch, unchecked drops the session to 12 hours and forgets the address. The TTL is chosen server-side in the login route. Emailed codes are now reachable without retyping. OtpField opts into the iOS one-time-code keyboard suggestion and raises a paste chip when the user returns from Gmail with a code on the clipboard. The mails put the code first in the subject and body, which is what makes Gmail render its "Copy code" notification action at all. Fixes found along the way: - Session was wiped on every launch. decodeJwtExp used atob, which neither RN 0.74 nor Expo SDK 51 defines, so it threw, returned null, and the caller read that as "expired" and deleted the token. Replaced with a dependency-free base64url decoder, and restore now only discards a session it can prove is expired. - Verification and reset codes counted attempts but never enforced them, leaving a 6-digit code open to unlimited guessing. Both routes now charge the attempt before comparing so concurrent guesses can't race past the cap of five, and compare in constant time. - A wrong verification code showed the "Verified" success screen: onModalHide fired unconditionally, so the failure state advanced the flow. Only an explicit "verified" state does that now. - fetchAPI discarded the server's error body, so the UI substring-matched synthetic status strings and showed "Could not sign in" for everything. It now throws ApiError carrying status and the server's message. - Login answered a missing account faster than a wrong password; it now runs the same scrypt work either way. - Blank email or password is caught client-side instead of surfacing as an opaque 400, and a failed attempt only clears the password on a 401. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Krikorios
co-authored by
Claude Opus 5
Claude Opus 5
parent
eceb6b45d5
commit
bc23c94ea2
+84
-52
@@ -1,5 +1,5 @@
|
||||
import { Link, router } from "expo-router";
|
||||
import { useState } from "react";
|
||||
import { useCallback, useState } from "react";
|
||||
import {
|
||||
Alert,
|
||||
Image,
|
||||
@@ -15,8 +15,9 @@ import ReactNativeModal from "react-native-modal";
|
||||
import { CustomButton } from "@/components/custom-button";
|
||||
import { InputField } from "@/components/input-field";
|
||||
import { OAuth } from "@/components/oauth";
|
||||
import { OtpField } from "@/components/otp-field";
|
||||
import { icons, images } from "@/constants";
|
||||
import { fetchAPI } from "@/lib/fetch";
|
||||
import { ApiError, fetchAPI } from "@/lib/fetch";
|
||||
import { useSession } from "@/lib/session";
|
||||
|
||||
const ROLES = [
|
||||
@@ -45,11 +46,14 @@ const SignUp = () => {
|
||||
password: "",
|
||||
});
|
||||
|
||||
// "verified" is a hand-off state: it hides the code modal so its onModalHide
|
||||
// can bring up the success modal, since two modals can't cross-fade.
|
||||
const [verification, setVerification] = useState({
|
||||
state: "default",
|
||||
state: "default" as "default" | "pending" | "verified" | "success",
|
||||
error: "",
|
||||
code: "",
|
||||
devCode: "",
|
||||
busy: false,
|
||||
});
|
||||
|
||||
const onSignUpPress = async () => {
|
||||
@@ -82,50 +86,80 @@ const SignUp = () => {
|
||||
}),
|
||||
});
|
||||
|
||||
setVerification((prevVerification) => ({
|
||||
...prevVerification,
|
||||
setVerification({
|
||||
state: "pending",
|
||||
error: "",
|
||||
code: "",
|
||||
busy: false,
|
||||
devCode:
|
||||
(response as { data?: { devCode?: string } })?.data?.devCode ?? "",
|
||||
}));
|
||||
|
||||
setForm((prevForm) => ({
|
||||
...prevForm,
|
||||
password: "",
|
||||
}));
|
||||
} catch (err: any) {
|
||||
setForm((prevForm) => ({
|
||||
...prevForm,
|
||||
password: "",
|
||||
}));
|
||||
Alert.alert("Error", err?.message ?? "Could not create your account.");
|
||||
}
|
||||
};
|
||||
|
||||
const onPressVerify = async () => {
|
||||
try {
|
||||
const response = await fetchAPI("/(api)/auth/verify", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ email: form.email, code: verification.code }),
|
||||
});
|
||||
|
||||
await setSession(response.data);
|
||||
setVerification((prevVerification) => ({
|
||||
...prevVerification,
|
||||
state: "success",
|
||||
setForm((prevForm) => ({
|
||||
...prevForm,
|
||||
password: "",
|
||||
}));
|
||||
} catch (err: any) {
|
||||
setVerification((prevVerification) => ({
|
||||
...prevVerification,
|
||||
error: err?.message?.includes("400")
|
||||
? "Invalid or expired verification code."
|
||||
: err?.message ?? "Verification failed.",
|
||||
state: "failed",
|
||||
setForm((prevForm) => ({
|
||||
...prevForm,
|
||||
password: "",
|
||||
}));
|
||||
Alert.alert(
|
||||
"Error",
|
||||
err instanceof ApiError && err.status < 500
|
||||
? err.message
|
||||
: "Could not create your account.",
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const onPressVerify = useCallback(
|
||||
async (code: string) => {
|
||||
if (!/^\d{6}$/.test(code)) {
|
||||
setVerification((prevVerification) => ({
|
||||
...prevVerification,
|
||||
error: "Enter the 6-digit code.",
|
||||
}));
|
||||
return;
|
||||
}
|
||||
|
||||
setVerification((prevVerification) =>
|
||||
// Guard the double submit that auto-verify + a button tap would cause.
|
||||
prevVerification.busy
|
||||
? prevVerification
|
||||
: { ...prevVerification, busy: true, error: "" },
|
||||
);
|
||||
|
||||
try {
|
||||
const response = await fetchAPI("/(api)/auth/verify", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ email: form.email, code }),
|
||||
});
|
||||
|
||||
await setSession(response.data);
|
||||
setVerification((prevVerification) => ({
|
||||
...prevVerification,
|
||||
state: "verified",
|
||||
busy: false,
|
||||
}));
|
||||
} catch (err: any) {
|
||||
// Stay on the code modal so the user can retry; only a real success
|
||||
// advances the flow.
|
||||
setVerification((prevVerification) => ({
|
||||
...prevVerification,
|
||||
code: "",
|
||||
busy: false,
|
||||
error:
|
||||
err instanceof ApiError && err.status < 500
|
||||
? err.message
|
||||
: "Verification failed. Please try again.",
|
||||
}));
|
||||
}
|
||||
},
|
||||
[form.email, setSession],
|
||||
);
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
className="flex-1 bg-white"
|
||||
@@ -266,10 +300,11 @@ const SignUp = () => {
|
||||
|
||||
<ReactNativeModal
|
||||
onModalHide={() =>
|
||||
setVerification((prevVerification) => ({
|
||||
...prevVerification,
|
||||
state: "success",
|
||||
}))
|
||||
setVerification((prevVerification) =>
|
||||
prevVerification.state === "verified"
|
||||
? { ...prevVerification, state: "success" }
|
||||
: prevVerification,
|
||||
)
|
||||
}
|
||||
isVisible={verification.state === "pending"}
|
||||
>
|
||||
@@ -292,31 +327,28 @@ const SignUp = () => {
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
<InputField
|
||||
label="Code"
|
||||
icon={icons.lock}
|
||||
placeholder="••••••"
|
||||
<OtpField
|
||||
value={verification.code}
|
||||
maxLength={6}
|
||||
secureTextEntry
|
||||
keyboardType="numeric"
|
||||
onChangeText={(code) =>
|
||||
onChange={(code) =>
|
||||
setVerification((prevVerification) => ({
|
||||
...prevVerification,
|
||||
code,
|
||||
error: "",
|
||||
}))
|
||||
}
|
||||
onComplete={onPressVerify}
|
||||
/>
|
||||
|
||||
{verification.error && (
|
||||
{verification.error ? (
|
||||
<Text className="text-rose-500 text-sm mt-1">
|
||||
{verification.error}
|
||||
</Text>
|
||||
)}
|
||||
) : null}
|
||||
|
||||
<CustomButton
|
||||
title="Verify Email"
|
||||
onPress={onPressVerify}
|
||||
title={verification.busy ? "Verifying…" : "Verify Email"}
|
||||
onPress={() => onPressVerify(verification.code)}
|
||||
disabled={verification.busy}
|
||||
className="mt-5 bg-emerald-500"
|
||||
/>
|
||||
</View>
|
||||
|
||||
Reference in New Issue
Block a user