Skip to content

Sandipan Das

Hire me

Next.js Tutorials · React Development Tips · Tutorial

Next-Auth login authentication

tutorial with NextJs App directory, React Hook Form, MongoDB, Vercel

Sandipan Das
Sandipan Das · full-stack developer, Kolkata, IndiaPublished · Updated · 1 min read
Next-Auth login authentication — cover image

Sign-in is one of the first things a Next.js app needs, and NextAuth handles it well: credentials, Google and GitHub logins, and sessions you can read on both the client and the server. In this video, I walk through how I integrate NextAuth into the Next.js app directory, step by step.

I also bring in React Hook Form, MongoDB and Shadcn/UI, so the result is a working sign-in you can build on. You will learn how to:

✨Integrating and Setup NextAuth in the Nextjs app directory

✨Setup Credentials Provider, Google Provider, and Github Provider

✨Get NextAuth Session Data In Client and Server Components

✨Upload the NextJs app in Vercel

✨Use MongoDB Compass and Atlas in the NextJs app

✨ Use React Hot Toast and React Hook Form in NextJs



Share:X·LinkedIn·Email

Related

  • Article

    ISR in Next.js: The Perfect SEO & Performance Strategy

    ISR in Next.js came out of a project I was working on once — a dynamic blog where content was king. It had great design, engaging posts, and an audience hungry for fresh updates. But something wasn’t right. I noticed…

    · 3 min read · by Sandipan Das
  • Next.js Tutorials

    How I Made My Next.js App Resilient After Vercel's API Fetching Time Limits

    A few months ago I was working on a Next.js project for a client, well before Vercel's API fetching time limits became my problem. Everything was going smoothly — pages were loading fast, data arrived when it was supposed to,…

    · 5 min read · by Sandipan Das
  • Next.js Tutorials

    Fix typescript error: Unexpected any and empty object issues

    To fix typescript error messages on a new project, start here. Two ESLint errors show up on every fresh Next.js and TypeScript project: Unexpected any , and the warning that {} allows any non-nullish value. Both come from next/typescript .…

    · 2 min read · by Sandipan Das

If you'd rather not do it yourself

Everything above works. You just need the time for it.

Follow the steps and fix it yourself. Or send the site to the team and get on with your day.
WhatsApp Now
Schedule a Meeting

900+ projects completed since 2017, from Kolkata, India.

Keep going

Schedule a Meeting