wpcodevo/nextauth-nextjs13-prisma wpcodevo/nextauth-nextjs13-prisma

  • Stars
    star
    247
  • Rank 164,117 (Top 4 %)
  • Language
    TypeScript
  • Created over 1 year ago
  • Updated 11 months ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
wpcodevo/nextauth-nextjs13-prisma
github

wpcodevo

Reviews

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

Repository Details

In this tutorial, I'll walk you through setting up authentication in your Next.js 13 app directory using NextAuth.js. It's worth noting that while we use the NextAuth package in this tutorial, you may be using the Auth.js package by the time you read this, as the libraries are now interchangeable.

1. Setup and Use NextAuth.js in Next.js 13 App Directory

In this tutorial, I'll walk you through setting up authentication in your Next.js 13 app directory using NextAuth.js. It's worth noting that while we use the NextAuth package in this tutorial, you may be using the Auth.js package by the time you read this, as the libraries are now interchangeable.

Setup and Use NextAuth.js in Next.js 13 App Directory

Topics Covered

  • Setup the Next.js 13 Project
  • Setup Next Auth API Route
    • Create Reusable Buttons
  • Three Ways of Getting the NextAuth Session Data
    • Get the Session in a Server Component
    • Get the Session in an API Route
    • Get the Session in a Client Component
  • Integrate a Database
    • Setup PostgreSQL
    • Setup Prisma ORM
  • Implement the NextAuth Authentication Code
  • Store Custom Keys in the JWT
  • Different Ways to Protect Routes
    • Client-Side Route Protection
    • Server-Side Route Protection
    • Protect an API Route
    • Middleware Route Protection
  • Implement the Account Registration Logic
    • Create the API Route to Register Users
    • Create the Form Component
    • Create the Account Registration Page

Read the entire article here: https://codevoweb.com/setup-and-use-nextauth-in-nextjs-13-app-directory/

2. Next.js - Use Custom Login and SignUp Pages for NextAuth.js

In this article, you will learn how to integrate custom login and signup pages with NextAuth.js in the new Next.js 13 app directory. Am going to assume that you have already set up NextAuth in your project and that you are only looking for a way to integrate your custom login and signup pages.

Next.js - Use Custom Login and SignUp Pages for NextAuth.js

Topics Covered

  • Run the NextAuth Project on your Computer
  • Test the NextAuth Project
    • Register an Account
    • Log into your Account
    • Access a Protected Page
  • Configure the NextAuth API Endpoint
  • Create the Custom Login Page
    • Create the Login Form
    • Create the Login Page
  • Create the Custom SignUp Page
    • Create the SignUp Form
    • Create the Account Registration Page
  • Create the API Handler for Account Registration
  • Conclusion

Read the entire article here: https://codevoweb.com/nextjs-use-custom-login-and-signup-pages-for-nextauth-js/

3. Next.js - Add Google and GitHub OAuth2 using NextAuth.js

In this article, you will learn how to integrate Google and GitHub OAuth providers with NextAuth.js in the new Next.js 13 app directory. It's worth noting that I am using a specific pull request recommended by the NextAuth team that is compatible with the new Next.js 13 app directory.

Next.js - Add Google and GitHub OAuth2 using NextAuth.js

Topics Covered

  • Run the NextAuth Project Locally
  • Explore the GitHub and Google OAuth Flow
    • Sign in with Google OAuth2
    • Sign in with GitHub OAuth
  • Configure NextAuth with Google and GitHub OAuth
  • Implement the Google and GitHub OAuth2
    • Create the Client-Side Form
    • Create the Server-Side Page Component
  • How to Generate the Google OAuth2 Credentials
  • How to Generate the GitHub OAuth Credentials
  • Conclusion

Read the entire article here: https://codevoweb.com/nextjs-add-google-and-github-oauth2-using-nextauth-js/

More Repositories

1

JWT_Authentication_React

JWT Authentication and Authorization with React, RTK Query, Material UI, React Hook Form and Zod.
TypeScript
215
star
2

phone_website

An eCommerce website template built with HTML, CSS, and JAVASCRIPT.
HTML
199
star
3

golang-mongodb-api

In this article, you'll learn how to build a CRUD gRPC API server with Golang, MongoDB-Go-driver, and Docker-compose. You'll also build a gRPC client to interact with the gRPC API.
Go
165
star
4

nextjs13-react-query

Are you interested in using React Query in your Next.js 13 app directory? If so, you've come to the right place! In this article, I'll guide you through the process of setting up React Query and making the QueryClient accessible to all components in the component tree.
TypeScript
127
star
5

rust-axum-jwt-auth

Are you interested in building a secure authentication system for your Rust web application? Look no further than the Axum framework and JSON Web Tokens (JWTs)! Axum is a fast and scalable Rust web framework that provides a reliable and efficient platform for developing microservices and APIs.
Rust
112
star
6

golang-gorm-postgres

This article will teach you how to create a CRUD RESTful API in a Golang environment that runs on a Gin Gonic server and uses a PostgreSQL database. We’ll also discuss how you can build models, connect to the running SQL database server, and run database migrations with the GORM library.
Go
109
star
7

trpc-nextjs-prisma

In this article, we’ll build a type-safe tRPC CRUD API with Next.js, PostgreSQL, and Prisma. This tRPC example in Next.js will showcase how to use tRPC on the backend and later we will consume the API on the frontend app.
TypeScript
96
star
8

fastapi_mongodb

This article will teach you how to create a CRUD RESTful API with Python, FastAPI, PyMongo, MongoDB, and Docker-compose to perform the basic Create/Read/Update/Delete operations against a database.
Python
94
star
9

node_typeorm

In this article, you'll learn how to build CRUD RESTful API with Node.js, ExpressJs, TypeORM, and PostgreSQL. We will define the database schema with TypeORM and run the migration command to push the TypeORM schema to the database. Next, we will create higher-level CRUD function to perform the CRUD operations.
TypeScript
93
star
10

2fa-nodejs

This article will teach you how to secure a Node.js API by implementing two-factor authentication (2FA) system using tokens generated by Google Authenticator or Authy. The one-time passcode (OTP) can be delivered via different methods like SMS but we will use Google Authenticator or Authy to reduce the complexity of the project.
TypeScript
69
star
11

python_fastapi

This article will teach you how to create a CRUD RESTful API with Python, FastAPI, SQLAlchemy ORM, Pydantic, Alembic, PostgreSQL, and Docker-compose to perform the basic Create/Read/Update/Delete operations against a database.
Python
68
star
12

node_prisma_postgresql

In this comprehensive article, you'll learn how to set up a Node.js API Project with ExpressJs, Prisma, PostgreSQL, Redis, and Docker-compose. The API will run on an Express server and use Postgres for data storage.
TypeScript
66
star
13

nextjs13-redux-toolkit

In this tutorial, you'll learn how to set up and use Redux Toolkit and RTK Query in your Next.js 13 project. It's worth noting that at the time of writing, Next.js 13 is still in beta.
CSS
64
star
14

nextjs-fastapi-framework

In this article, you will learn how to seamlessly integrate a FastAPI project into your Next.js application and deploy the entire project on Vercel. But that's not all! We won't stop at integration; we will take it a step further by building a simple Todo application.
TypeScript
59
star
15

ecommerce-website-4

HTML
57
star
16

LC09-ecommerce-website

Build ecommerce website with html css and Javascript step by step
HTML
56
star
17

react-query-axios

TypeScript
54
star
18

jwt_authentication_authorization_node

TypeScript
53
star
19

rust-axum-postgres-api

Are you interested in building a Rust API with CRUD functionalities using the Axum framework and PostgreSQL database? If so, you're in the right place! In this article, I will guide you through building a functional note-taking application API using Rust, Axum, SQLX, and PostgreSQL.
Rust
50
star
20

two_factor_reactjs

This article will teach you how to secure a React.js app by implementing two-factor authentication (2FA) feature using TOTP tokens generated by Google Authenticator, Authy, or Chrome's Authenticator extension
TypeScript
48
star
21

nextjs13-user-signin-signup

In this article, we'll explore how to implement JWT authentication in Next.js 13 API route handlers. We'll cover the process of generating and verifying JWTs, handling authentication errors, and protecting sensitive API endpoints.
TypeScript
47
star
22

rust-postgres-crud-sqlx

In this article, you'll learn how to build a CRUD API in Rust using SQLX, Actix-web, and PostgreSQL. Learning how to build a CRUD API as a developer will equip you with valuable skills for building robust, maintainable, and scalable applications.
Rust
46
star
23

golang-fiber-jwt

In this comprehensive guide, you'll learn how to implement JWT (JSON Web Token) authentication in a Golang application using GORM and the Fiber web framework.
Go
45
star
24

rust-axum-jwt-rs256

In this article, you'll learn how to build a secure and efficient backend API in Rust with JWT access and refresh tokens functionality. We'll leverage the high-performance Axum framework and SQLX to store data in a PostgreSQL database.
Rust
45
star
25

fullstack-rust-app

In this article, I'll walk you through the process of building a backend API using the Actix web framework, SQLX, PostgreSQL, and Docker. Once we've created a powerful backend, we'll move on to building a single-page app using the Yew.rs framework.
Rust
43
star
26

fastapi_sqlalchemy

In this article, I'll provide you with a simple and straightforward guide on how you can build a CRUD app with FastAPI and SQLAlchemy. The FastAPI app will run on a Starlette web server, use Pydantic for data validation, and store data in an SQLite database.
Python
43
star
27

nextauth-nextjs14-prisma

In this tutorial, you will learn how to set up NextAuth v5 in Next.js 14. With the release of NextAuth v5, a couple of breaking changes have been introduced, and getting NextAuth up and running in a Next.js 14 project requires a bit of setup.
TypeScript
42
star
28

nextjs14-supabase-ssr-authentication

In this article, you'll learn how to integrate Supabase with Next.js 14 for email and password authentication, as well as Google and GitHub OAuth.
TypeScript
41
star
29

nextjs-flask-framework

In this article, you will learn how to integrate a Flask API project with Next.js and deploy them on Vercel.
TypeScript
41
star
30

golang-postgresql-api

This article will teach you how to set up a SQLC API project with Golang, standard Database/SQL package, Gin Gonic, PostgreSQL, Golang-migrate, and Docker-compose. You will also learn how to generate Golang database CRUD functions and Structs with the SQLC compiler. The SQLC Golang API will use a PostgreSQL database and run on the Gin Gonic HTTP server. We will use the Golang-migrate package to push the SQL schema to the database.
Go
39
star
31

nextjs13-trpc-setup

Are you interested in using tRPC in the new Next.js 13 app directory? Look no further! In this article, I'll walk you through the process of setting up a tRPC server and client in the Next.js 13 app directory step by step.
CSS
35
star
32

nextjs-trpc-crud-app

This article will teach you how to build a full-stack tRPC CRUD (Create, Read, Update, and Delete) app with Next.js. The tRPC API will be built on Next.js edge runtime and the tRPC client will be created with React.js. For data storage, we'll use Prisma ORM to query and mutate an SQLite database.
TypeScript
35
star
33

simple-api-rust-axum

If you're new to Rust and eager to build your first API, you're in luck: this article will guide you step by step through building a simple REST API in Rust using the Axum framework.
Rust
35
star
34

vue-query-axios

Vue
34
star
35

two_factor_golang

This article will teach you how to secure a Golang API by implementing two-factor authentication (2FA) using TOTP codes generated by an authenticator app like Google Authenticator or Authy.
Go
34
star
36

complete-restful-api-in-rust

In this article, you will learn how to build a Rust API with unit testing in mind. This means we will take a modular approach, which will make our lives easier when writing unit tests.
Rust
33
star
37

google-github-oauth2-rust

This article will teach you how to integrate Google OAuth2 into your Rust application, all without relying on third-party OAuth crates such as https://crates.io/crates/oauth2.
Rust
33
star
38

ecom5

HTML
30
star
39

google-github-oauth2-nodejs

In this article, I'll walk you through the process of setting up Google OAuth2 in a Node.js application, including creating the OAuth project on the Google API console, configuring the OAuth Client ID and secret, and implementing the necessary code in the Node.js project.
TypeScript
30
star
40

rust-axum-mysql

In this article, you'll discover how to use the Axum framework to build a RESTful API in Rust that supports basic CRUD (Create, Read, Update, Delete) operations against a MySQL database.
Rust
29
star
41

nextjs13-simple-app

In this article, you will learn how to build a fullstack application in the new Next.js 13 app directory. Next.js 13.2 introduced a new approach to building APIs in the App Router (app), where we can create custom request handlers for a given route using the Web Request and Response APIs.
TypeScript
28
star
42

nextjs-typegraphql-api

This article will teach you how to build a full-stack CRUD App with Next.js, React Query, GraphQL Code Generator, React-Hook-Form, Zod, and graphql-request to perform Create/Update/Get/Delete operations.
TypeScript
27
star
43

google-github-oath2-reactjs

In this article, you'll learn how to implement Google OAuth2 in a React.js application, including creating a project in the Google API Console, configuring the application's client ID and redirect URI, and implementing the necessary code in the React application.
TypeScript
27
star
44

totp-rust

In this comprehensive guide, you'll learn how to implement two-factor authentication (2FA) in a Rust application using OTP tokens generated by an Authenticator app like Authy, Google Authenticator, or Chrome's Authenticator extension.
Rust
26
star
45

rust-jwt-hs256

In this article, we will delve into the implementation of JWT authentication in Rust, covering all crucial steps from generating and verifying JWT tokens with the HS256 algorithm, to registering users, signing them in, logging them out, and safeguarding private routes.
Rust
25
star
46

simple-api-actix-web

In this comprehensive guide, you'll build a simple CRUD API in Rust using the Actix Web framework and an in-memory database.
Rust
25
star
47

nextjs14-react-query

This article will teach you how to set up and use React Query v5 in the new Next.js 14 app directory. With the recent release of React Query v5, it has generated considerable buzz in the React ecosystem, primarily due to improvements in Automatic Data Synchronization and Performance Optimizations.
TypeScript
24
star
48

yt-ecommerce-2

CSS
22
star
49

nextjs14-trpc-react-query

In this comprehensive guide, we will explore the process of integrating tRPC, React Query v5, and Prisma within the Next.js 14 App Router. tRPC is a modern RPC framework that allows you to define your API using TypeScript interfaces and generates both server and client code for you.
TypeScript
21
star
50

rust-yew-signup-signin

In this comprehensive guide, you will learn how to build a single-page frontend web application in Rust using the Yew.rs framework. The application will include essential authentication features such as user sign-up, login, logout, and restricting access to protected pages.
Rust
21
star
51

rust-axum-mongodb

In this article, we'll explore how to create a robust API that supports Create, Read, Update, and Delete operations using the Axum framework and MongoDB.
Rust
21
star
52

lc16-ecommerce-website

build ecommerce website with html css and javascript from scratch step by step
HTML
20
star
53

golang-fiber-jwt-rs256

In this comprehensive guide, you'll learn how to properly refresh JSON Web Tokens (JWTs) using the RS256 algorithm and Redis. The integration of Redis will give us the ability to effortlessly revoke or invalidate the JWTs when necessary.
Go
20
star
54

nextauth-nextjs14-drizzle

In this tutorial, we'll cover the complete process of integrating Drizzle ORM with NextAuth v5 in Next.js 14.
TypeScript
19
star
55

simple-api

This tutorial will teach you how to build a simple CRUD API in Rust using the Warp web framework and Tokio. We'll use Rust and a few well-known libraries to create a RESTful API that runs on a Warp HTTP server and stores data in memory.
Rust
19
star
56

grpc-node-prisma

In this guide, you will learn how to build a complete CRUD gRPC API server and client with TypeScript in a Node.js environment that runs on an Expressjs framework and uses a Prisma database ORM. We'll create five RPC services on the gRPC server that are going to be evoked by the gRPC client to perform the basic CRUD (Create, Read, Update, and Delete) operations.
TypeScript
19
star
57

rust-mysql-crud-sqlx

In this article, we will explore how to use Rust, Actix Web, SQLX, and MySQL to build a CRUD (Create, Read, Update, Delete) API.
Rust
18
star
58

Blog_MUI_React-hook-form

Login and Signup Forms with React, React Hook Form, TypeScript and Material UI
TypeScript
16
star
59

mern-yt-clone

JavaScript
15
star
60

react-rtkquery-crud-app

In this comprehensive guide, you'll build a React.js CRUD app using Redux Toolkit and RTK Query hooks. In brief, we'll create RTK Query hooks that React will use to perform CRUD operations against a REST API.
TypeScript
15
star
61

lc26-food-delivery-website

Responsive Food Delivery Website with HTML, CSS and JavaScript
SCSS
15
star
62

portfolio2

HTML
14
star
63

google-github-oauth2-golang

Go
14
star
64

jacket_website

HTML
14
star
65

nextjs13-apollo-client

In this article, you'll discover how to set up and use Apollo Client in the new Next.js 13 app directory. Specifically, you'll learn how to use Apollo Client in both React Server and Client Components.
TypeScript
14
star
66

lc12-travel-website

Travel website with HTML, CSS and JAVASCRIPT.
HTML
13
star
67

ecommerce4

HTML
13
star
68

nextjs13-mongodb-setup

Are you interested in using MongoDB with the new Next.js 13 app directory? If so, you're in luck! In this article, we'll explore how to set up and use MongoDB in the new Next.js 13 App Router.
TypeScript
13
star
69

deno-mongodb

In this tutorial, we'll cover how to build a Deno API that supports CRUD operations and stores data in a MongoDB database. The example API will run on an Oak middleware framework that will include routes to create, retrieve, update, and delete documents in the database.
TypeScript
12
star
70

fruit__website

HTML
11
star
71

trpc-react-node-mongodb

TypeScript
11
star
72

crud-app-sequelize

In this article, you'll learn how to build a complete CRUD API with Node.js and Sequelize. The REST API will run on an Express.js server and have endpoints for performing CRUD operations against a PostgreSQL database.
TypeScript
11
star
73

animated_login_signup

CSS
10
star
74

LC-24-deliveroo

Responsive Food Ordering Website with HTML, CSS and JavaScript
CSS
10
star
75

javascript__shopping__cart

JavaScript
10
star
76

node-react-trpc-crud-app

In this guide, you'll create a full-stack note application that follows the CRUD (Create, Read, Update, and Delete) architecture with tRPC and use Prisma ORM to store data in an SQLite database. We'll build the tRPC API with Node.js and the UI with React.js.
TypeScript
10
star
77

reactjs-crud-note-app

In this comprehensive guide, you'll learn how to build a CRUD application with React.js, Tailwind CSS, React Query, React-Hook-Form, and Axios. In brief, we'll use CRUD (CREATE, READ, UPDATE, DELETE) methods to perform basic operations against a data layer via REST API.
TypeScript
10
star
78

lc28-fashion-ecommerce-website

Fashion ecommerce website with html scss css and javascript
SCSS
9
star
79

reactjs-axios

TypeScript
9
star
80

rust-user-signup-forgot-password-email

In this article, we will explore the process of building a REST API in Rust with features like user registration, email verification, login, and logout capabilities. Our API will be powered by the high-performance Axum framework and will utilize the SQLx toolkit to store data in a SQLite database.
Rust
9
star
81

rust-jwt-rs256

This guide will walk you through the process of implementing RS256 JWT authentication with Rust, using asymmetric keys (private and public keys) to ensure strong security. The API will be hosted on a high-performance Actix Web server and will store data in a PostgreSQL database.
Rust
9
star
82

Django_Crud_Project

In this article, you'll learn how to build a CRUD API with Django and Django REST framework. The RESTful API will have endpoints for performing CRUD operations against an SQLite database.
Python
8
star
83

lc18-vanilla-js-source-code

JavaScript
8
star
84

golang-fiber

In this article, you'll learn how to build a CRUD API in Golang using the Fiber web framework and GORM. The REST API will run on a Fiber HTTP server and use GORM to persist data in a PostgreSQL database.
Go
8
star
85

rust-mongodb-crud

This comprehensive guide will teach you how to build a CRUD (Create, Read, Update, and Delete) API using the Rust programming language and MongoDB as the database.
Rust
8
star
86

nextjs14-trpc-authentication

In this article, you will explore the implementation of user registration, login, and logout functionalities in Next.js 14 using tRPC (Type Remote Procedure Call). tRPC is a library designed to streamline the development of full-stack applications with a primary emphasis on type safety.
TypeScript
8
star
87

Django_2FA_Project

In this article, you'll learn how to add two-factor (2FA) authentication to a Django REST API using TOTP tokens generated by an Authenticator app like Chrome's Authenticator extension, Authy or Google Authenticator.
Python
7
star
88

react-query-axios-tailwindcss

This article will give you a comprehensive overview of JSON Web Token authentication with React.js, React Query, React-Hook-Form, Zod, and a RESTful API. You will learn how to validate forms with the React-Hook-Form library, make queries and mutations with React Query, register new users, verify their email addresses, sign the users into the React app, and log them out of the app.
TypeScript
7
star
89

file_upload_golang

This article will teach you how to upload single and multiple files on a Golang web server.The tutorial focuses on image upload, but the concepts can be extended and used for any file type.
Go
7
star
90

nextjs13-context-api

Do you want to use React Context API to manage states globally and avoid prop drilling in your Next.js 13 app directory? If so, you've come to the right place. This article will guide you through the process of setting up and implementing the React Context API in your Next.js 13 app.
CSS
7
star
91

trpc-react-node-prisma

TypeScript
6
star
92

LC29-restaurant-website

CSS
6
star
93

setup-redux-toolkit

In this guide, I will show you how to set up Redux Toolkit and RTK Query with React and TypeScript the right way. Although it's possible to bootstrap a React app with Redux Toolkit support using a single command, this may not be sufficient for more complex state management requirements.
TypeScript
6
star
94

nextjs13-prisma-setup

In this article, you will learn how to set up and use Prisma ORM in the new Next.js 13 app directory. We'll cover everything from initializing Prisma to seeding the database with test data and applying migrations.
TypeScript
6
star
95

golang-fiber-sqlite

Have you been wanting to build a simple API in Golang, but don't know where to start? Look no further than this tutorial, where I'll guide you through the process step by step.
Go
6
star
96

nextjs-server-action-app

In this article, we will explore everything you need to know about Server Actions. If you're not already familiar with Server Actions, here's a simple description. Server Actions are a newly introduced feature in Next.js 13 that enables us to directly mutate data on the server from the frontend.
TypeScript
6
star
97

2fa_fastapi

This article will teach you how to secure a FastAPI app by implementing two-factor (2FA) authentication using TOTP tokens generated by an authenticator application like Chrome's Authenticator extension, Google Authenticator or Authy.
Python
6
star
98

cart-page

CSS
5
star
99

portfolio3

HTML
5
star
100

simple-api-rocket

This article will teach you how to build a simple CRUD API with Rust using the Rocket framework. We'll create a RESTful API that runs on a Rocket HTTP server and persists data in an in-memory database.
Rust
5
star