DEV Community

Medea
Medea

Posted on

Login and Signup with Next.js

I recently started learning Next.js and I wanted to improve my Next.js skills, so I decided to make a simple Login and Signup Website with Next.js and MongoDB.

The website has 4 pages and 3 API routes:

  • /: where the user can see if they have logged in or not, and view all the other pages they can access
  • /login: a page where the user can login
  • /signup: the page where the user can signup for an account
  • /profile: where the user can check their account creation date
  • /api/signup: the API route where a user's account is created
  • /api/login: the API route where the password entered is checked
  • /api/logout: the API route where the username cookie is deleted

I have used cookies to check if the user has logged in.
The cookies are set and deleted in the /api routes but read using getServerSideProps.

The full source code can be viewed in this GitHub repo:

Login and Signup with Next.js

This template uses Next.js and MongoDB to create a simple login and signup website.

To use this template, simply fork the repo, and added your MongoDB URI to the .env file with the key MONGODB_URI.

To view the template in action, visit https://login-signup-nextjs.vercel.app




Can you check out the code and give me ways I can improve?

Top comments (12)

Collapse
 
stcollier profile image
Samuel Collier •

Hey, this is really cool! It might be nice to add email verification so that people can't just spam accounts. Otherwise nice work :)

Collapse
 
vulcanwm profile image
Medea •

that seems like a great idea, ill try it out! thanks :)

Collapse
 
mahesh4net profile image
Techno is live •

I have tried it, but its authentication is not secure enough, i was able to bypass login at all.
you are just setting a cookie named username which can have a user's registered name. i just added the username cookie and my username manually and it logged me in. WITHOUT ANY PASSWORD !

Collapse
 
vulcanwm profile image
Medea •

yes i know
i made this post ages ago and have never actually used this method myself
my recommendation is to use an auth client like next auth

Collapse
 
sonicx180 profile image
sonicx180 •

It's cool, but I'd recommend using next connect for API routes.

Collapse
 
vulcanwm profile image
Medea •

oh ill try that out

Collapse
 
nicu420 profile image
Onța Nicolae •

Image description

Collapse
 
vulcanwm profile image
Medea •

that shows up sometimes…
I’ll try to find out how to fix it

Collapse
 
orunto profile image
Orunto Eniola •

In case you're still wondering what it is. It's an issue from the user's end and it cannot be fixed unless with a stronger password.

Thread Thread
 
vulcanwm profile image
Medea •

oh okay thats fine then, thanks!

Collapse
 
srini2024 profile image
Srinivasan •

Good Post, Password Strength Checker Validation feature would have been good too

Collapse
 
vulcanwm profile image
Medea •

that's true