feat: redesign auth page with Google/GitHub/Email buttons and email sub-view#3717
feat: redesign auth page with Google/GitHub/Email buttons and email sub-view#3717devin-ai-integration[bot] wants to merge 1 commit intomainfrom
Conversation
…ub-view with password support Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
✅ Deploy Preview for hyprnote ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for hyprnote-storybook canceled.
|
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
| )} | ||
| <button | ||
| type="submit" | ||
| disabled={isPending || !email || !password} |
There was a problem hiding this comment.
The button's disabled condition doesn't check confirmPassword when in sign-up mode. This allows users to click submit even when the confirm password field is empty (if they somehow bypass the HTML required attribute), which will then fail client-side validation and show an error.
Fix by adding a conditional check:
disabled={isPending || !email || !password || (isSignUp && !confirmPassword)}| disabled={isPending || !email || !password} | |
| disabled={isPending || !email || !password || (isSignUp && !confirmPassword)} |
Spotted by Graphite Agent
Is this helpful? React 👍 or 👎 to let us know.
| if ("needsConfirmation" in result && result.needsConfirmation) { | ||
| setErrorMessage( | ||
| "Check your email to confirm your account before signing in.", | ||
| ); | ||
| return; |
There was a problem hiding this comment.
Using setErrorMessage for a success/informational message about email confirmation. This message is displayed with red error styling (text-red-500 on line 394), which will confuse users who successfully signed up.
Fix by creating a separate info/success message state:
const [infoMessage, setInfoMessage] = useState("");
// Then display it with different styling
if (infoMessage) {
<p className="text-sm text-blue-600 text-center">{infoMessage}</p>
}Spotted by Graphite Agent
Is this helpful? React 👍 or 👎 to let us know.
1 participant
Redesign auth page with Google/GitHub/Email buttons and password support
Summary
Redesigns the web auth page (
/auth) to reduce confusion around magic-link-only email sign-in. The main view now shows three clear buttons: Google, GitHub, and Email. Clicking Email switches the card to a sub-view with a Password / Magic Link tab toggle.Backend (
apps/web/src/functions/auth.ts):doPasswordSignUp(usessupabase.auth.signUp) anddoPasswordSignIn(usessupabase.auth.signInWithPassword) server functions.Frontend (
apps/web/src/routes/auth.tsx):https://hyprnote.com/legal/...URLs.Review & Testing Checklist for Human
/callback/auth?flow=desktop&scheme=...&access_token=...&refresh_token=.... Confirm the existing callback page handles this correctly and the deep link back to the desktop app works.onSuccess— the handlers useascasts and"key" in result"checks instead of proper discriminated unions. Consider whether this is acceptable or could mask errors.Notes