Hello, I want to add a Remember Me button which simply auto fills the e-mail and password of the user next time they visit the log-in page, so that they don't have to retype their credentials manually.

This is for the situations in which the user logs out of the website and would like to log in again, not sure if it's related to user session.

What's the best way to do this ?

My current login page:

``js import Link from 'next/link'; import { headers, cookies } from 'next/headers'; import { createClient } from '@/utils/supabase/server'; import { redirect } from 'next/navigation'; export default async function Login({ searchParams, params: { lang } }: { searchParams: { message: string }, params: { lang: Locale } }) { console.log('Login Page: Server-side rendering'); const { page } = await getDictionary(lang); const signIn = async (formData: FormData) => { 'use server'; const email = formData.get('email') as string; const password = formData.get('password') as string; const cookieStore = cookies(); const supabase = createClient(cookieStore); const { error } = await supabase.auth.signInWithPassword({ email, password, }); if (error) { return redirect(/login?message=${page.login.errorMessage}`);
}

return redirect('/');
};

return (
<label htmlFor="signin-button" className="sr-only">{page.login.signInButtonLabel}</label>
<div className="flex flex-col items-center w-full">
<div style={{ maxWidth: '360px', width: '100%', height: '36px' }}>
<button
id="signin-button"
type="submit"
className="rounded-md w-full px-4 mb-2 flex items-center justify-center"
style={{
height: '36px', // Explicit height
backgroundColor: 'var(--brand-green)',
color: 'var(--text-button-bright)',
padding: '0 16px' // Adjust padding if needed
}}>
{page.login.signInButton}
</button>
</div>
</div>