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 (10)

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
 
srini2024 profile image
Srinivasan

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

Collapse
 
vulcanwm profile image
Medea

that's true

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!