georges/waseel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add remember-me and OTP autofill, fix session persistence

Browse Source 
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
2026-08-23 23:33:51 +03:00
co-authored by Claude Opus 5
parent eceb6b45d5
commit bc23c94ea2
15 changed files with 558 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(auth)/sign-in.tsx
+104 -25
View File
@@ -1,5 +1,5 @@
import { Link, useRouter } from "expo-router";
import { useCallback, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import {
Alert,
Image,
@@ -15,17 +15,46 @@ 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 { useSession } from "@/lib/session";
import { ApiError, fetchAPI } from "@/lib/fetch";
import { getRememberedEmail, rememberEmail, useSession } from "@/lib/session";
const SignIn = () => {
const router = useRouter();
const { isLoaded, setSession } = useSession();
const { setSession } = useSession();
const [form, setForm] = useState({
email: "",
password: "",
});
const [busy, setBusy] = useState(false);
// On by default: a rider signing in on their own phone shouldn't have to
// opt into staying signed in. Unchecking it shortens the session to 12h and
// stops the address being prefilled next time.
const [remember, setRemember] = useState(true);
useEffect(() => {
let cancelled = false;
getRememberedEmail()
.then((email) => {
if (!email || cancelled) return;
// SecureStore can resolve after the user has started typing, so only
// fill a field that's still untouched.
setForm((prevForm) =>
prevForm.email ? prevForm : { ...prevForm, email },
);
})
.catch(() => {
// Nothing stored, or the keychain is unavailable: start blank.
});
return () => {
cancelled = true;
};
}, []);
// Forgot-password flow: "request" collects the email, "reset" collects the
// emailed code and a new password.
@@ -109,20 +138,36 @@ const SignIn = () => {
});
await setSession(response.data);
await rememberEmail(remember ? reset.email.trim() : null);
setReset((prev) => ({ ...prev, state: "closed", busy: false }));
router.replace("/");
} catch (err: any) {
setReset((prev) => ({
...prev,
busy: false,
error: String(err?.message ?? "").includes("400")
? "Invalid or expired reset code."
: "Could not reset your password. Please try again.",
error:
err instanceof ApiError && err.status < 500
? err.message
: "Could not reset your password. Please try again.",
}));
}
};
const onSignInPress = useCallback(async () => {
if (busy) return;
// Catch the blank-field case here: the server answers 400 for it, which
// otherwise surfaces as a generic "could not sign in".
if (!form.email.trim() || !form.password) {
Alert.alert(
"Missing information",
"Enter both your email and your password.",
);
return;
}
setBusy(true);
try {
const response = await fetchAPI("/(api)/auth/login", {
method: "POST",
@@ -130,26 +175,30 @@ const SignIn = () => {
body: JSON.stringify({
email: form.email,
password: form.password,
remember,
}),
});
await setSession(response.data);
await rememberEmail(remember ? form.email.trim() : null);
router.replace("/");
} catch (err: any) {
const status = String(err?.message ?? "");
const message = status.includes("403")
? "Please verify your email first."
: status.includes("401")
? "Invalid email or password."
const message =
err instanceof ApiError && err.status < 500
? err.message
: "Could not sign in. Please try again.";
Alert.alert("Error", message);
setForm((prevForm) => ({
...prevForm,
password: "",
}));
// Only a rejected password is worth retyping. Clearing it after a
// network blip or a 403 just makes the next attempt fail differently.
if (err instanceof ApiError && err.status === 401) {
setForm((prevForm) => ({ ...prevForm, password: "" }));
}
} finally {
setBusy(false);
}
}, [isLoaded, form.email, form.password, setSession, router]);
}, [busy, form.email, form.password, remember, setSession, router]);
return (
<KeyboardAvoidingView
@@ -190,6 +239,8 @@ const SignIn = () => {
}))
}
keyboardType="email-address"
autoComplete="email"
textContentType="username"
/>
<InputField
@@ -204,11 +255,38 @@ const SignIn = () => {
password: value,
}))
}
autoComplete="current-password"
textContentType="password"
/>
<TouchableOpacity
onPress={() => setRemember((current) => !current)}
activeOpacity={0.7}
accessibilityRole="checkbox"
accessibilityState={{ checked: remember }}
className="flex-row items-center mt-4"
>
<View
className={`h-6 w-6 rounded-md items-center justify-center border-2 ${
remember
? "bg-primary-500 border-primary-500"
: "bg-white border-neutral-300"
}`}
>
{remember ? (
<Text className="text-white text-xs font-JakartaBold">✓</Text>
) : null}
</View>
<Text className="ml-3 font-JakartaMedium text-[15px] text-black">
Keep me signed in
</Text>
</TouchableOpacity>
<CustomButton
title="Sign In"
title={busy ? "Signing in…" : "Sign In"}
onPress={onSignInPress}
disabled={busy}
className="mt-6"
/>
@@ -248,6 +326,8 @@ const SignIn = () => {
icon={icons.email}
value={reset.email}
keyboardType="email-address"
autoComplete="email"
textContentType="username"
onChangeText={(email) =>
setReset((prev) => ({ ...prev, email }))
}
@@ -288,14 +368,11 @@ const SignIn = () => {
</View>
) : null}
<InputField
label="Code"
icon={icons.lock}
placeholder="••••••"
<OtpField
value={reset.code}
maxLength={6}
keyboardType="numeric"
onChangeText={(code) => setReset((prev) => ({ ...prev, code }))}
onChange={(code) =>
setReset((prev) => ({ ...prev, code, error: "" }))
}
/>
<InputField
@@ -307,6 +384,8 @@ const SignIn = () => {
onChangeText={(password) =>
setReset((prev) => ({ ...prev, password }))
}
autoComplete="new-password"
textContentType="newPassword"
/>
{reset.error ? (
app/(auth)/sign-up.tsx
+84 -52
View File
@@ -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>