Next.js Discord

Discord Forum

Remember Me (Auto Fill E-mail and Password) if ticked when user visits the log-in page

Answered
Sun bear posted this in #help-forum
Open in Discord
Avatar
Sun bearOP
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>
Answered by require("anay-208")
it doesn't have to relate anything with email pass
View full answer

58 Replies

Avatar
require("anay-208")
can you send a screenshot of code instead? I don't really like discord formatting of code
A question, you are storing session in cookie, right?
Avatar
Sun bearOP
Not sure, how can I check that ?
Avatar
require("anay-208")
After logging in, in console, type window.cookie
or wait
thats not needed. first of all learn about authentication
and creating secure apps
Avatar
Sun bearOP
Image
Avatar
require("anay-208")
document.cookie*
yup, its using cookie authentication. First of all, research more about building a secure authenticating app
like yt vidoes
Avatar
Sun bearOP
Do you have any video you could recommend ?
And also what about my Remember Me button, any advice on how can I implementing that so that it works the way I described it ?
Avatar
B33fb0n3
You can take a look at aws amplify auth. You can easily create a good (and secure) auth system, that works serverside and clientside. Also the „remember me“ functionality is automatically build in and can be defined via a prop 🙂
Avatar
Sun bearOP
But I don't get it, I'm already using cookie for authentication, what's not secure about my app ?
And I'm using SSR + Client too
Avatar
B33fb0n3
Ask @require("anay-208") xD
Avatar
Sun bearOP
Also are you saying I don't have to write any logic for my remember me button ? I just need to use a prop and that's it ?
Avatar
require("anay-208")
I don't think you have sufficient knowledge about it
Avatar
Sun bearOP
I'm not using AWS by the way. I'm using Supabase.
Avatar
B33fb0n3
Exactly! 😇
I love amplify, because it’s easy and you can build your stuff with it ^^
Avatar
require("anay-208")
Amplify as good
Avatar
B33fb0n3
For example: if you used amplify auth and later you think about creating a database, you can just add the graphql and auth is automatically installed ☺️
Avatar
require("anay-208")
especially amplify ui
Avatar
B33fb0n3
Omg, yes!
Avatar
Sun bearOP
Thank you very much but I'm just trying to add a remember me button I'm not looking to change my back-end cause my back-end is already set-up so I will not switch as I'm pretty happy with it so far.
Avatar
B33fb0n3
It sounds like you currently have a problem with your backend ^^
Avatar
Sun bearOP
Hmm, if you read my description I'm just trying to add a button which is client related as far as I understand, it's just a matter of auto filling the e-mail and password when someone re-visits the login page, if they previously checked the "remember me" button.
Avatar
B33fb0n3
Not directly signing them in?
Avatar
Sun bearOP
Image
This is what I mean.
Avatar
B33fb0n3
I know what’s a „remember me“ button is :>
Avatar
Sun bearOP
As far as I know the only connection between the sign in button and the remember me button would be that the sign in button would check if the remember me button is checked or not and if it's checked then run the logic of the remember me button and if it's not checked then delete any email or password stored locally.

Did I get it right ? 😄
Avatar
require("anay-208")
the logic of remember me button is to keep the session stored for longer
and uncheck means expire it when user exits the page
Avatar
require("anay-208")
it doesn't have to relate anything with email pass
Answer
Avatar
B33fb0n3
this ^
Maybe Anay is right.. you want to take a look at how auth really works and what will be stored where. Take a look at the details of auth systems
Avatar
Sun bearOP
Back in the days when I would visit Yahoo.com and check that box it would remember my login credentials if I ever signed out. If I wouldn't check it it would not remember my credentials. Have you guys used websites back in the early 2010s ?

Like why is what I'm saying so alien to you, I don't get it.
Hmm, looks like they dropped that functionality too.
Image
Why did everyone dropped the remember me button I don't get it.
I get the whole session thing, maybe back in the days that wasn't still a thing but what if I want my user's credentials to be auto filled ? Like this doesn't have anything to do with user sessions, it's a separate functionality.
I need to find a website that still does that to show you what I mean.
Looks like most websites dropped that functionality. However, found one that still has it.
Image
Now, when that button is ticked what will happen is the website will remember your credentials next time you need to log-in again.

That's what I want as well, that functionality. It has nothing to do with user session whatsoever.
My user session is managed on the back-end and it will automatically expire after a pre-defined period of time. It's not up to the user to prolongue it or not, which is why I'm not interested in having the remember me button mess up with that.

I just need the remember me button to remember the user's e-mail and password (login credentials).
Avatar
require("anay-208")
remember me button doesn't remember user email and password
I recommend you to do a course or learn web development with nextjs from yt
Avatar
Sun bearOP
I think I see what you guys mean now, I just checked this thread: https://stackoverflow.com/questions/74811160/email-and-password-remember-me-for-login-after-user-logged-in-for-the-first-time

It looks like it's not secure to do it that way and I need to let the browser take care of that instead.
Thank you very much for your help.
Avatar
B33fb0n3
Please Mark Solution
Avatar
Sun bearOP
Image
I keep trying and it's not working
Avatar
B33fb0n3
&752637460550385834
Avatar
Sun bearOP
Please mark this message as solution, thank you very much.
Avatar
Sun bearOP
It' still not working.
Avatar
require("anay-208")
@Sun bear mark solution is working now so you can mark it