Next.js Authentication - AuthJS / NextAuth for Role-Based Security
Vložit
- čas přidán 1. 06. 2024
- Learn how to use NextAuth, soon to be called AuthJS. Learn how to use this tool to add authentication to Next.js 13.5. Dive into the world of role-based authentication and learn how to implement authentication on both server-rendered and client-rendered pages. Discover how to leverage out-of-the-box OAuth providers like Google and GitHub, and explore the process of creating your custom authentication provider using MongoDB. Stay ahead in the world of authentication with this comprehensive guide!
💻 Code: github.com/ClarityCoders/Next...
✏️ Course developed by @ClarityCoders
⭐️ Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:01:41) Environment Setup / Extension Review
⌨️ (0:02:24) Project Creation
⌨️ (0:03:28) Install NextAuth (Auth.js) / Create Project Structure
⌨️ (0:15:36) Create NextAuth (Auth.js) API - Options / Routes
⌨️ (0:25:39) Setup built-in OAuth Provider - (Google / GitHub)
⌨️ (0:29:47) Login / Logout Funtionality
⌨️ (0:37:45) Protecting Pages - Server Side Page
⌨️ (0:40:10) Protecting Pages - Client Side Page
⌨️ (0:46:12) Protecting Pages - Middleware
⌨️ (0:53:58) Creating Custom Provider (Creating a Database of Users)
⌨️ (0:55:16) MongoDB Atlas Signup / Setup
⌨️ (0:58:04) Create User Models (Mongoose Schema)
⌨️ (1:00:37) User Form to Create Users
⌨️ (1:10:30) Create Users API
⌨️ (1:18:45) Setup Custom Provider
🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news
Thanks again for the invite to the channel! These videos come out on my channel first along with more videos please check out my channel if you haven't already. Any questions or future projects you would like to see let me know. Keep Coding.
😍
Thanks. Any chance you'll do same with Next.js 14 and Auth.js 5?
Quick tip: If you want to create a folder and a file inside it, instead of creating the folder first and then creating the file, you can create a file named "folder name/filename" to do the same. An example would be create a file called Member/page.jsx which would create the page.jsx file in the Member folder
GOAT!
Amazing video. Very well explained without being superfluous. Tutorial videos like this are such a rarity.
I just completed the previous project, the Ticketing App, from the same instructor, thanks for this one👍
Great to hear thanks for watching. Let me know if you have any other tutorials you need!
You are a great Programmer, thanks for the lecture.
I saw this course on udemy, I'm glad you provide this for free!!!
thanks FCC and ClarityCode, it really help me understand the basics of nextauth and to implement it correctly in one of my test projects keep up
Really needed this. Saved for future use 👍
I just completed it. Good one keep it up FCC
What a great tutorial! Very helpful and clear.
Doubt 🚨 How do I authorise my api routes to ensure security.
Btw best video on Next Auth i found on CZcams uptill now.
I like the fact that the instructor defines environmental variables at 25:57 🫡
They know what they did. They probably deleted the keys after making the video
you guys always putting out stuff like you reading our minds lol! ... request could you please do a tutorial on MQL5 as in metatrader's language for building trading bots
Great video, thanks! I wonder, what if you want more roles than just Admin and User? What if you want the Admin to be able to create new roles and select which permissions they have?
Thanks for this tutorial great explanation
thank you, it was a great tutotrial, would be great if you can show us how to deploy it in Netlify too.
Thank you for this beautiful lesson. I'm starting to watch other videos on the channel. Why did you write folders like "components" and "models" in parentheses? Can you explain please?
Thanks for the great tutorial!
I'm curious with the parentheses too. Is this just a naming convention, or there are functions in Next I'm missing? 🙋
you put parenthesis into the folder's name if you want Next.js ignore that folder and not consider as a routing page
28:15 Maybe the interface has changed, but make sure you go to API & Services.
Really Great Tutorial Video and Project
Thanks for such a great tutorial video.
Thanks for this really useful tutorial.
I’m curious (and new to NextJS) why do you say, “you should try to shy away from client side components when you can”?
thanks for the lecture
Great video, thanks. Question-- how could I conditionally show a link in the navigation based on whether the user has the admin role or not?
maybe try this session?.user?.role === admin
@@a.b.x.543 totally, thanks
A great tutorial indeed. Thanks for this, but sadly after 6 months, it's already outdated as NextAuth v5 uses very different function names.
Should add a session:{stratigy:"jwt"} in the options config, or there would be no 'role' property in the server side session.
Thanks for the video. It seems like a bad implementation to put admin privileges hard coded in the code. That means that anyone with github access can see who has admin on your site and it means that you need a code change to add or remove privileges? Is there any other way of handling this?
Hello, I’m new to the coding community, but wouldn’t this video be out dated because nextAuth.js is changing to auth.js and the step for the new documentation are different
It is changing for about 1 year now, so I think the video wouldn't be outdated very soon 😅
Great tutorial. Thanks.
A big thanks. This saved my life
when i create clientMember page, i recieved this error "sync/await is not yet supported in Client Components". but in video, everything is okey. I didnt understand why
Im having hard time creating credentials login because i want user id as well and when i try to add user id to session callback it gives undefined .id is undefined error. How do i go about this one solve the issue ?
Thank you so much for creating this tutorial, it's so easy to follow.
at 47:08, what if I want to use my own login in my middleware before using NextAuth?
I have a quick question. I've implemented cookies and JWT authentication in my NestJS backend. Now I'm working on the Next.js frontend, and I have a server component that sends a request to the backend (Nest) to get protected data. However, I'm receiving an "unauthorized" message from the backend in the server component.
Note: I'm using HTTPS-only cookies and ngrok for HTTPS in development.
How to solve this? means how i can configure next js
How i can forwards the secure cookies from Server compoents to the nest js backend that are comming from the browser
Try having the request http instead of https
Hello why you doesn't use sever actions instead
Great video, thanks pro🥳🥳
Using next 14 and I am not able to use the default (sigin and other) pages of next auth???
same bro. tried to access api/auth/signin. I got status 500
when github oath, what's the application name and Authorization callback URL,it's not clean to do?
Is there a document for the video. some words are not clean to follow.
HI! Thx for the video. Have you tried to enable App Check for Firebase? Official docs say to do it this way:
const appCheck = initializeAppCheck(app, {
provider: new ReCaptchaEnterpriseProvider(/* reCAPTCHA Enterprise site key */),
isTokenAutoRefreshEnabled: true // Set to true to allow auto-refresh.
});
But it works only for the client side, but signInWithEmailAndPassword we call on the server, so it does not use the app check token and I got: An error (auth/firebase-app-check-token-is-invalid.)
Do you know how to handle it? Thx in advance
al prinicipio me daba error con userRole no is defined, portanto me toco definirlo en el alcance global
const options = {...} export default options
worked for me, otherwise it was 500 error
Hey I have errors
I'm stuck in `middleware` section. When I click on `CreateUser` link without having a `login` session. It shows me `Only Admins` text. It should redirect me to login.
In last next.js version you have to put middleware.ts in the same level with the pages or app folder. If the pages/app folder is in root add it in root level. If the pages/app folder is inside src you have to add it inside src folder. Worked like a charm !!
thnx love u saved my day@@bringmemore2621
Can NextAuth use for api auth with another domain access it
If I'm implementing Google Oauth only what will be value of NEXTAUTH_URL?
but how can I use a similar library in a go app?
with secret keys i’m not able to commit to github unless i get rid of the secret keys… what’s the workaround? i’m assuming there’s a way to encrypt it or something?
bro help me connect this with your tickets app I wrote it all, but I would like every user to see only their created tickets
Thank You
is this also applicable on `pages`?
what's the file name to keep secret, env.local? It's not clean in the video.
Is Ctrl+Shift+L necessary?
Nope just lazy. Thanks for watching.
How to place scopes?
GREAT!!!
done
do something to put google auth in here your thing is already setup
why am I getting "missing script dev" logged onto my terminal at 14:13??
run npm install
@@0xN1nja tried it but I’m still having the same problem :(
Basically I had a folder containing all of my code inside another folder… so the fix was to cd into that folder containing the code and running npm run dev inside of it 🤦🏻♂️🤦🏻♂️
middleware is not working for me in next 14
So this is still about the old NextAuth 4 right, please change the title, which is misleading as AuthJS 5 makes significant changes
This works with next.js 14?
yes works perfect
some how this is not working for me now
why is my .env.local file not working??
Mine too, having client_id error
great
Use typescript
middleware makes the routing slower...
yeah broken tutorial
sorry :/
please do a write up with this it would have been helpful
Lovely video but it’s not differentiating roles.
No ts is a deal breaker
Is it just me or is Next-Auth v4 and beta all now completely unusable?
Finally
🙅
26:00
They make so much css staff to make it seems messy and hard , but if you need working example you need 5 mins and few lines of code but if you show that then you can’t be payed well😂
What the hell happened - it was such a good project and is now dead.
can you start with configuring the console.cloud.google?
at 28:26 your google cloud is all set up with other things but mine asks for "Configure Consent Screen" but it sends me to See Setting up OAuth 2.0 and i obviously have no idea what to do since im at this tutorial
did you solve the problem man? i'm at the same issue borther
I want NextAuth to call signOut event when refresh token expire.
Is there any way to do it ?