get-convex / get-convex/better-auth
`sendMagicLink` causes AuthProvider to change and forces an unnecessary complete rerender
- Dominant language
- TypeScript
- Stars
- 764
- Forks
- 126
- PR merge metrics
- No merged PRs in 30d
Description
I noticed a considerable flicker in my app when I was using `sendMagicLink` and that's why I decided to investigate a bit.
# Steps to reproduce:
1. Add react scan to observe the changes.
2. Remove the alerts to see the rerenders.
3. Press the sign in with magic link button.
---
Git diff of all the changes
```
diff --git i/examples/tanstack/src/components/SignIn.tsx w/examples/tanstack/src/components/SignIn.tsx
index cc4e2f4..1a5df33 100644
--- i/examples/tanstack/src/components/SignIn.tsx
+++ w/examples/tanstack/src/components/SignIn.tsx
@@ -17,7 +17,7 @@ import { Container } from '@/components/Container'
export const SignIn = () => {
const navigate = useNavigate()
- const [email, setEmail] = useState('')
+ const [email, setEmail] = useState('m@example.com')
const [password, setPassword] = useState('')
const [otp, setOtp] = useState('')
const [magicLinkLoading, setMagicLinkLoading] = useState(false)
@@ -82,11 +82,11 @@ export const SignIn = () => {
},
onSuccess: () => {
setMagicLinkLoading(false)
- alert('Check your email for the magic link!')
+ // alert('Check your email for the magic link!')
},
onError: (ctx) => {
setMagicLinkLoading(false)
- alert(ctx.error.message)
+ // alert(ctx.error.message)
},
},
)
diff --git i/examples/tanstack/src/routes/__root.tsx w/examples/tanstack/src/routes/__root.tsx
index 2dcaef8..ad784ba 100644
--- i/examples/tanstack/src/routes/__root.tsx
+++ w/examples/tanstack/src/routes/__root.tsx
@@ -83,6 +83,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
return (
+
<Meta />
</head>
<body className="bg-neutral-950 text-neutral-50">
```
</details>
## How to verify that this is caused by the `sendMagicLink` function?
1. Comment it out.
2. Press the sign in with magic link button.
---
The following is an example from when the example app in this repo. Based on the `sendMagicLink` call, none of the components that are re-rendered should be doing so.
<img width="1624" height="1012" alt="Image" src="https://github.com/user-attachments/assets/756a09b9-4bff-47e9-8d9b-f798c6cfc5da" />
<details><summary>Full video</summary>
https://github.com/user-attachments/assets/af0a84fb-797e-418a-b814-df13ee9015ed
</details>
Here's an example from my repo (this example is where you can see that it might be the `AuthProvider`):
<img width="1580" height="697" alt="Image" src="https://github.com/user-attachments/assets/504c5486-71e0-4077-9d7b-26335c033629" />
<details><summary>Full video</summary>
https://github.com/user-attachments/assets/6fb59412-0d7f-4da9-a76d-25799b897876
</details>
Contributor guide
Research direction
Start by reproducing the report in examples/tanstack/src/components/SignIn.tsx with React Scan enabled from examples/tanstack/src/routes/__root.tsx. Trace sendMagicLink into the AuthProvider and identify why the provider changes during the call. Done means the magic-link action no longer causes unrelated components to rerender, while its existing success and error behavior remains intact.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- authentication, frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100