• Stars
    star
    812
  • Rank 54,776 (Top 2 %)
  • Language
    TypeScript
  • Created 6 months ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Next Auth v5 - Advanced Guide (2024)

image

This is a repository for Next Auth v5 - Advanced Guide (2024)

VIDEO TUTORIAL

Key Features:

  • ๐Ÿ” Next-auth v5 (Auth.js)
  • ๐Ÿš€ Next.js 14 with server actions
  • ๐Ÿ”‘ Credentials Provider
  • ๐ŸŒ OAuth Provider (Social login with Google & GitHub)
  • ๐Ÿ”’ Forgot password functionality
  • โœ‰๏ธ Email verification
  • ๐Ÿ“ฑ Two factor verification
  • ๐Ÿ‘ฅ User roles (Admin & User)
  • ๐Ÿ”“ Login component (Opens in redirect or modal)
  • ๐Ÿ“ Register component
  • ๐Ÿค” Forgot password component
  • โœ… Verification component
  • โš ๏ธ Error component
  • ๐Ÿ”˜ Login button
  • ๐Ÿšช Logout button
  • ๐Ÿšง Role Gate
  • ๐Ÿ” Exploring next.js middleware
  • ๐Ÿ“ˆ Extending & Exploring next-auth session
  • ๐Ÿ”„ Exploring next-auth callbacks
  • ๐Ÿ‘ค useCurrentUser hook
  • ๐Ÿ›‚ useRole hook
  • ๐Ÿง‘ currentUser utility
  • ๐Ÿ‘ฎ currentRole utility
  • ๐Ÿ–ฅ๏ธ Example with server component
  • ๐Ÿ’ป Example with client component
  • ๐Ÿ‘‘ Render content for admins using RoleGate component
  • ๐Ÿ›ก๏ธ Protect API Routes for admins only
  • ๐Ÿ” Protect Server Actions for admins only
  • ๐Ÿ“ง Change email with new verification in Settings page
  • ๐Ÿ”‘ Change password with old password confirmation in Settings page
  • ๐Ÿ”” Enable/disable two-factor auth in Settings page
  • ๐Ÿ”„ Change user role in Settings page (for development purposes only)

Prerequisites

Node version 18.7.x

Cloning the repository

git clone https://github.com/AntonioErdeljac/next-auth-v5-advanced-guide.git

Install packages

npm i

Setup .env file

DATABASE_URL=
DIRECT_URL=

AUTH_SECRET=

GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

RESEND_API_KEY=

NEXT_PUBLIC_APP_URL=

Setup Prisma

npx prisma generate
npx prisma db push

Start the app

npm run dev

Available commands

Running commands with npm npm run [command]

command description
dev Starts a development instance of the app

More Repositories

1

next13-airbnb-clone

TypeScript
1,767
star
2

next13-ai-saas

TypeScript
1,059
star
3

next13-discord-clone

TypeScript
973
star
4

next13-ecommerce-admin

TypeScript
856
star
5

next13-messenger

TypeScript
830
star
6

notion-clone-tutorial

TypeScript
795
star
7

next13-lms-platform

TypeScript
676
star
8

next13-spotify

TypeScript
636
star
9

next-netflix-tutorial

TypeScript
586
star
10

next13-ecommerce-store

TypeScript
523
star
11

next13-trello

TypeScript
513
star
12

next13-ai-companion

TypeScript
392
star
13

twitter-clone

TypeScript
372
star
14

next14-twitch-clone

TypeScript
244
star
15

ts-node-mongo-rest-api-tutorial

Repository for a REST API using MongoDB, Node.js and TypeScript
TypeScript
223
star
16

next14-miro-clone

TypeScript
205
star
17

python-tensorflow-google

Notes taken from Google Machine Learning Course provided to public for practice & correction.
Python
188
star
18

passport-tutorial

This is a repository for my Medium.com article
JavaScript
170
star
19

js-blog-tutorial

This is a tutorial for a Medium story
JavaScript
97
star
20

js-chat-tutorial

A repository for chat app tutorial using React.js, Socket.io and Node.js
JavaScript
53
star
21

file-upload-tutorial

A repository for Medium.com tutorial
JavaScript
50
star
22

AntonioErdeljac

34
star
23

prisma-db-starter

TypeScript
27
star
24

messenger-video

TypeScript
27
star
25

lingo-early-access

TypeScript
26
star
26

next-auth-monogdb

TypeScript
18
star
27

carrotDB

A JSON based database for Node.js ๐Ÿฅ•
JavaScript
17
star
28

tailwind-labs-tutorial

JavaScript
10
star
29

actions-demo

TypeScript
10
star
30

fl0-clerk-next

TypeScript
9
star
31

problem-1

TypeScript
9
star
32

nextjs-blog

JavaScript
9
star
33

tailwind-css-recipes

JavaScript
8
star
34

workshop-lucia-auth

TypeScript
8
star
35

NearChat

Chatting app based on your location using React.js & Node.js
JavaScript
7
star
36

angular-exercise

Repository for exercise with Angular 9
TypeScript
6
star
37

backend-recreation

TypeScript
5
star
38

youtube-clone

Youtube clone
JavaScript
4
star
39

next13-lms

TypeScript
4
star
40

ts-autocomplete

TypeScript
4
star
41

citycoin-web

CSS
3
star
42

design-practice

TypeScript
3
star
43

problem-2

TypeScript
3
star
44

js-pokedex

A pokedex app built with Webpack and React.js.
JavaScript
2
star
45

products-gtm-ts

TypeScript
2
star
46

webassembly-demo

JavaScript
2
star
47

wer2018

2
star
48

JobScheduler

Repository for a job scheduler assignment
JavaScript
2
star
49

webrtc-video-chat

JavaScript
2
star
50

vue-practice

HTML
1
star
51

expo-stack-navigator

Expo & React Native practice
JavaScript
1
star
52

trainingtogether-backend

JavaScript
1
star
53

typescript-basics

TypeScript
1
star
54

Boxlio

JavaScript
1
star
55

codeburn-io

Gatsby starter for creating a blog
1
star
56

React-Native-Superagent

Repository for React Native project w/ Superagent Ajax calls
JavaScript
1
star
57

peerjs-react-chat

TypeScript
1
star
58

workshop-3

TypeScript
1
star
59

javascript-dom

Repo for practicing DOM manipulation with JS
JavaScript
1
star
60

trainingtogether-app

JavaScript
1
star
61

flow-wizard

TypeScript
1
star