Implementation of authentication with complete features using Next.js, Prisma, and Next-Auth. Auth.js v5 beta is used for authentication. The project includes features such as login, register, forgot password, reset password, change profile data, Github OAuth, Google OAuth, and email verification.
![next-auth](https://private-user-images.githubusercontent.com/50306963/326328348-a08cacc3-4f43-4a18-aafb-381f3f647355.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjExNjg4NTksIm5iZiI6MTcyMTE2ODU1OSwicGF0aCI6Ii81MDMwNjk2My8zMjYzMjgzNDgtYTA4Y2FjYzMtNGY0My00YTE4LWFhZmItMzgxZjNmNjQ3MzU1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE2VDIyMjIzOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTQ0YjA2YWMzNTEzYTRlZDlkMWVjMjkzN2I1ZmQ3MTJhYWJmMDg3ZGNiOTMyYmRlNWNjOGYxOTUwYjcxMjExMWYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.p9zMYsJiISxaSzUw2UY2x7zYEwDCpw5x_xmmi_ptwRQ)
This project includes the following features:
- Login
- Register
- Forgot Password
- Reset Password
- Change Profile Data
- Github OAuth
- Google OAuth
- Email Verification
Packages that are used in the project:
- bcryptjs -
bun add bcryptjs
- for hashing password - @types/bcryptjs -
bun add -D @types/bcryptjs
- for typescript - uuid -
bun add uuid
- for generating unique id - @types/uuid -
bun add -D @types/uuid
- for typescript - react-icons -
bun add react-icons
- for icons - winston -
bun add winston
- for logging - react-spinners -
bun add react-spinners
- for loading spinner - [crypto] (https://nodejs.org/api/crypto.html) - // built-in package, no need to install - for generating random token
callbackUrl: http://localhost:3000/api/auth/callback/[provider]
signinUrl: http://localhost:3000/api/auth/signin/[provider]
How to set up Google OAuth:
- [Google Console](https://console.developers.google.com/)
- open the console, create a project, go to the OAuth consent screen, create app-name, add email, and save
- go to credentials, create credentials, OAuth client ID, web application
- add http://localhost:3000 to authorized javascript origins
- add http://localhost:3000/api/auth/callback/google to authorized redirect URIs
- copy client ID and client secret
Type npx shadcn-ui@latest init
Will generate some packages after the installation
clsx
class-variance-authority
@radix-ui/react-icons
tailwind-merge
tailwindcss-animate
Then add some component using: npx shadcn-ui@latest add [component]
When you add a component, it will add some packages related to the component
1. npx shadcn-ui@latest add button
added @radix-ui/react-slot
2. npx shadcn-ui@latest add form
added react-hook-form, zod, @hookform/resolvers, @radix-ui/react-label
3. npx shadcn-ui@latest add dropdown-menu
added @radix-ui/react-dropdown-menu
4. npx shadcn-ui@latest add react-avatar
added @radix-ui/react-avatar
5. npx shadcn-ui@latest add sooner
added next-themes & sooner
6. npx shadcn-ui@latest add switch
added @radix-ui/react-switch
7. npx shadcn-ui@latest add select
added @radix-ui/react-select
8. npx shadcn-ui@latest add dialog
added @radix-ui/react-dialog
9. npx shadcn-ui@latest add input
-nothing added
10. npx shadcn-ui@latest add badge
-nothing added
11. npx shadcn-ui@latest add card
-nothing added
Install prisma
- prisma -
bun add -D prisma@latest
, - @auth/prisma-adapter -
bun add @auth/prisma-adapter
- next-auth v5 beta -
bun add next-auth@beta
Then initialize prisma
npx prisma init
Automatically install packages
@prisma/client@latest
- create
db.ts
and callprisma client
package ("./lib/db.ts")
In .env file, add the following:
DATABASE_URL="your_db_url"
AUTH_SECRET="" // generate secret using **npx auth secret**
Create middleware.ts
, auth.ts
, and auth.config.ts
(root folder)
Create routes.ts
(root folder) for auth routes
and public routes
Create database name in neon postgresql https://console.neon.tech/app/welcome
Then add scripts in package.json :
"postinstall": "prisma generate"
"db:generate": "npx prisma generate"
"db:migrate": "npx prisma migrate dev"
"db:studio": "npx prisma studio"
If you want to use the auth
function in the layout, you can use the following code:
// layout.tsx (root folder)
import { auth } from "@/auth"
const session = await auth()
return (
<SessionProvider session={session}>
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
</SessionProvider>
)
Create a new account in Resend using email
Open official documentations and choose Next
quick start
Link: Resend
Install Resend package
in the project
bun add resend
Create mail.ts
in lib
folder and add the following code
import { Resend } from "resend"
const resend = new Resend(process.env.RESEND_API_KEY)
const domain = process.env.RESEND_DOMAIN
// other code