Next Auth V5 Advanced Features - Settings, Roles & Protection

Code With Antonio · 1M views · 2023 · 8:00:57

Open on YouTube

Web developmentSecurity & hackingtutorialdated

Why Stack Overflow recommends it

Stack Overflow users link it as the step-by-step guide they are following when they set up Next Auth v5, and many of the posts are questions from people stuck partway through it.

Recommended by 1 people across 1 different months, 2024 to 2024.

What it is

An eight-hour tutorial by Code With Antonio that builds a full authentication system in Next.js 14 using Auth.js (next-auth v5). It covers credentials and OAuth login, email verification, password reset, two-factor auth, user roles, middleware, and a settings page, with source code provided.

What people said

Recommends hersh · 2024-02 · Stack Overflow · on “How to Implement JWT Token Authentication for API Routes and Pages in Next.js 13?”

You may want to look into NextAuth.js [LINK] which is an open-source authentication solution specifically for Next.js. You should be able to follow their docs [LINK] to configure NextAuth to use JWT. In addition to docs, you could also look into this video tutorial [this video] of setting up Next auth - it's quite comprehensive. I believe the tutorial uses Next 14 but the concepts should be transferable to V 13.

Cites DAANISH AZIM SHEIKH · 2024-02 · Stack Overflow · on “[auth][details] { "provider: credentials"} [auth] [cause] {TypeError: "ikm'} also data is undefined in login form”

These were my files and i used nextjs, prisma supabase, server actions i tried to auth bby watching this video [this video] . i tried console the the code it shows the error ikm which crypto error please help me solve this problem or any other solution server auth.config.ts import type { NextAuthConfig } from "next-auth" import { getUserByEmail } from "./data/user"; import { LoginSchema } from "./schemas"; import bcrypt from "bcryptjs"; import Credentials from "next-auth/providers/credentials"; export default { providers: [ Credentials({ async authorize(credentials) { const validatedFields = LoginSchema.safeParse(credentials); if (validatedFields.success) { const { email, password } = validatedFi

Cites louisdev · 2024-06 · Stack Overflow · on “Keep getting CallbackRouteError fired when trying to use signIn function in (next-)authjs v5”

I am a beginner/intermediate developer attempting to create a NextJS 14 powered app for a friend of mine, but I seem to keep running into the same problem. I am loosely following this tutorial [this video] by CodeWithAntonio with some slight tweaks to work for me. I have already tried going back through the tutorial more times than I can count to find a fix, but seemingly I cannot find one. I am using NextJS 14 App-directory, with a Neon database and the Prisma adapter due to some incompatibilities with DrizzleORM in its current state. This is my auth.ts file in the root directory: import NextAuth from "next-auth"; import { PrismaAdapter } from "@auth/prisma-adapter"; import { db } from "@/lib/db

Cites Wer Wer · 2024-06 · Stack Overflow · on “Is there a way to pass my middleware.ts const that checks if user is logged in to other api, domain logic or page.tsx? (open to new suggestions too)”

I'm trying to build an authentication feature for my web app following this online tutorial [this video] . I created the middleware.ts for my web app, and saw that there is a const isLoggedIn so i thought i can use this boolean in every other pages to constantly authenticate if user is logged in. so i abstracted it out like this export const checkIsLoggedIn = (req: any): boolean => { return !!req.auth; }; since this is the middleware which is server action, and my components are all client actions, i decided to create an api such that checkisloggedin will be passed from middleware.ts -> check-auth.ts (the api) -> main-nav.tsx (the component i want to use to check if user is logged in). but when i

Cites Djamil Brz · 2024-07 · Stack Overflow · on “API & Middleware Problem, can't reach /api/auth/providers”

i'm following a tutorial [this video] about Next Auth V5 i'm trying my best to follow but i'm a beginner at coding,timestamp of where i'm stuck is 2:09:45 / 8:00:56 on the Middleware & Login part, my problem is that i can't reach "localhost:3000//api/auth/providers" //route.ts import { handlers } from "@/auth"; export const { GET, POST } = handlers; //./auth.ts: import NextAuth from "next-auth"; import GitHub from "next-auth/providers/github"; import Google from "next-auth/providers/google"; export const { auth, handlers, signIn, signOut } = NextAuth({ providers: [GitHub, Google], }); //app/api/auth/[...nextauth]/route.ts: import { handlers } from "@/auth" export const { GET, POST } = handlers i

Cites Zuno · 2024-11 · Stack Overflow · on “How do I persist NextAuthV5/Authjs login error to the front end?”

I'm re-creating my app from PHP to Next.js using Auth.js - trying to follow this guide [this video] I am doing things a little differently (using mysql2 not Prisma) and I'm new to React/Next.js/Auth.js which is probably where I'm going wrong! I can successfully log in, but I cannot get the specified errors to the front end if the credentials don't match. These are the three files. log-in-form.tsx 'use client' import { useForm } from 'react-hook-form' import * as z from 'zod' import { zodResolver } from '@hookform/resolvers/zod' import { LogInSchema } from '../../../../../../constants/validation-schemas' import { logIn } from '../../../../../../actions/users/log-in' export default function LogInFo