This guide provides a clear step-by-step process to set up authentication in a Next.js application using NextAuth.js. The authentication flow includes email verification, GitHub OAuth, and Prisma as the database adapter.
NextAuth.js offers a comprehensive open-source authentication solution tailored for Next.js applications.
Providers: (Using a built-in OAuth Provider: GitHub & Email), Google, Facebook, Twitter..
Adapter: (used: Prisma), Supabase, Drizzle ORM, TypeORM..
1- GitHub
This require using nodemailer with 2.2 Using a configuration object and
database adapters for storing the Email verification token.
The email will be send via email provider with the magic link to confirm the user and return the user the home page
Using prisma as an NextAuth adapter and database see docs
1 - Install prisma
2 - Create a db.ts following Prisma Docs
3 - Import prisma from db.ts (Not from "@prisma/client") and pass it into the adapter: adapter: PrismaAdapter(prisma)
4- Create a schema: npx prisma init (This will create DATABASE_URL in the .env and the prisma directory)
5- In the schema.prisma pass prisma models from Prisma Schema
This is the setup for Prisma to work with nextAuth
will use Supabase. Once created got to settings / database / connection string / URI
Copy the link and pass it as a value to the DATABASE_URL along with your pw.
6 - When ready npx prisma db push
-
GITHUB_ID & GITHUB_SECRET: github.com settings / Developer Settings / OAuth Apps --> Create new
(Temporary)
homepage URL: `http:localhost:3000` Authorization callback URL: `http:localhost:3000/api/auth/callback/github`
Utilize Resend for email service and generate an API Key.
Set environment variables as recommended in the Resend Documentation
EMAIL_SERVER_USER=resend
EMAIL_SERVER_PASSWORD= `YOUR_API_KEY`
EMAIL_SERVER_HOST=smtp.resend.com
EMAIL_SERVER_PORT=465
EMAIL_FROM=onboarding@resend.dev
Update EMAIL_FROM after verifying your website on Resend.
- app > auth > page.tsx: Utilize AuthRoute() for routing.
- Create client-side components with click handlers:
- app > components > GithubButton.tsx
- app > components > SignInFrom.tsx
- app > components > LogOutButton.tsx
1- Public Pages: Users access public pages like the Homepage and /auth.
2- Email Verification: Upon login, users receive a magic link via email for account confirmation.
3- Protected Routes: Clicking the magic link redirects users to the protected route, ensuring secure access to authenticated pages.