Next.js Authentication - AuthJS / NextAuth for Role-Based Security

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

Пікірлер: 104

  • @ClarityCoders
    @ClarityCoders7 ай бұрын

    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.

  • @NewDaricha

    @NewDaricha

    5 ай бұрын

    😍

  • @nmdpa3

    @nmdpa3

    Ай бұрын

    Thanks. Any chance you'll do same with Next.js 14 and Auth.js 5?

  • @xanthe69
    @xanthe692 ай бұрын

    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

  • @hameeeed5992

    @hameeeed5992

    27 күн бұрын

    GOAT!

  • @user-wk9rj7ci4c
    @user-wk9rj7ci4c6 ай бұрын

    Amazing video. Very well explained without being superfluous. Tutorial videos like this are such a rarity.

  • @CivilianJointTaskForce
    @CivilianJointTaskForce7 ай бұрын

    You are a great Programmer, thanks for the lecture.

  • @user-ni4xk8pg7r
    @user-ni4xk8pg7r7 ай бұрын

    I just completed the previous project, the Ticketing App, from the same instructor, thanks for this one👍

  • @ClarityCoders

    @ClarityCoders

    7 ай бұрын

    Great to hear thanks for watching. Let me know if you have any other tutorials you need!

  • @MedAliBeel
    @MedAliBeel4 ай бұрын

    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

  • @A03L
    @A03L5 ай бұрын

    I saw this course on udemy, I'm glad you provide this for free!!!

  • @okch4m
    @okch4m7 ай бұрын

    Really needed this. Saved for future use 👍

  • @jirayuvijjakajohn295
    @jirayuvijjakajohn2957 ай бұрын

    I just completed it. Good one keep it up FCC

  • @user-yf2qv6gq1q
    @user-yf2qv6gq1q7 ай бұрын

    Thanks for this tutorial great explanation

  • @NewDaricha
    @NewDaricha5 ай бұрын

    Thanks for such a great tutorial video.

  • @promtpking
    @promtpking6 ай бұрын

    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

  • @BlueHat1
    @BlueHat126 күн бұрын

    What a great tutorial! Very helpful and clear.

  • @user-kq5vl8ii8w
    @user-kq5vl8ii8w4 ай бұрын

    Really Great Tutorial Video and Project

  • @arumals3995
    @arumals39954 ай бұрын

    Thanks for this really useful tutorial.

  • @ayushtiwari1504
    @ayushtiwari15046 ай бұрын

    Doubt 🚨 How do I authorise my api routes to ensure security. Btw best video on Next Auth i found on KZread uptill now.

  • @yanferaraque1051
    @yanferaraque10516 ай бұрын

    thank you, it was a great tutotrial, would be great if you can show us how to deploy it in Netlify too.

  • @BaoNguyen-yy3vw
    @BaoNguyen-yy3vw5 ай бұрын

    Great video, thanks pro🥳🥳

  • @beinspiredwithquotes
    @beinspiredwithquotes6 ай бұрын

    thanks for the lecture

  • @omc345
    @omc3457 ай бұрын

    I like the fact that the instructor defines environmental variables at 25:57 🫡

  • @symoleon97

    @symoleon97

    5 ай бұрын

    They know what they did. They probably deleted the keys after making the video

  • @collinsk8754
    @collinsk87542 ай бұрын

    Great tutorial. Thanks.

  • @patty181188
    @patty1811882 ай бұрын

    Thank you so much for creating this tutorial, it's so easy to follow.

  • @ThanakitChokbunsuwan
    @ThanakitChokbunsuwanАй бұрын

    A big thanks. This saved my life

  • @DeveloperLeon
    @DeveloperLeon3 ай бұрын

    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?

  • @ondersabahat101
    @ondersabahat1017 ай бұрын

    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?

  • @thinpiglin

    @thinpiglin

    7 ай бұрын

    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? 🙋

  • @parspy694

    @parspy694

    7 ай бұрын

    you put parenthesis into the folder's name if you want Next.js ignore that folder and not consider as a routing page

  • @warrenb2856
    @warrenb28567 ай бұрын

    28:15 Maybe the interface has changed, but make sure you go to API & Services.

  • @alexanderkomanov4151
    @alexanderkomanov41517 ай бұрын

    GREAT!!!

  • @razlar2080
    @razlar20805 ай бұрын

    Thank You

  • @alanprophett9936
    @alanprophett9936Күн бұрын

    Thanks!!

  • @seancoonce9845
    @seancoonce98454 ай бұрын

    I’m curious (and new to NextJS) why do you say, “you should try to shy away from client side components when you can”?

  • @TheDoguBati
    @TheDoguBati6 ай бұрын

    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 ?

  • @CodingValk
    @CodingValk7 ай бұрын

    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

  • @symoleon97

    @symoleon97

    5 ай бұрын

    It is changing for about 1 year now, so I think the video wouldn't be outdated very soon 😅

  • @BenjiFriedman
    @BenjiFriedman6 ай бұрын

    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?

  • @a.b.x.543

    @a.b.x.543

    4 ай бұрын

    maybe try this session?.user?.role === admin

  • @BenjiFriedman

    @BenjiFriedman

    4 ай бұрын

    @@a.b.x.543 totally, thanks

  • @azamattugelbay
    @azamattugelbay7 ай бұрын

    Hello why you doesn't use sever actions instead

  • @joshuafoxworth6972
    @joshuafoxworth69724 ай бұрын

    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?

  • @JaiShreeRam5964
    @JaiShreeRam59644 ай бұрын

    Using next 14 and I am not able to use the default (sigin and other) pages of next auth???

  • @ThanakitChokbunsuwan

    @ThanakitChokbunsuwan

    Ай бұрын

    same bro. tried to access api/auth/signin. I got status 500

  • @itexpert4193
    @itexpert41937 ай бұрын

    great

  • @techiesakar
    @techiesakar5 ай бұрын

    I want NextAuth to call signOut event when refresh token expire. Is there any way to do it ?

  • @loo6942
    @loo69424 ай бұрын

    at 47:08, what if I want to use my own login in my middleware before using NextAuth?

  • @Samoniel2910
    @Samoniel29105 ай бұрын

    const options = {...} export default options worked for me, otherwise it was 500 error

  • @deivymorales1
    @deivymorales17 ай бұрын

    al prinicipio me daba error con userRole no is defined, portanto me toco definirlo en el alcance global

  • @Victor-dd7el
    @Victor-dd7el7 ай бұрын

    but how can I use a similar library in a go app?

  • @Tanner-cz4bd
    @Tanner-cz4bd7 ай бұрын

    Finally

  • @leonzeng4139
    @leonzeng41394 ай бұрын

    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.

  • @opickyayat3132
    @opickyayat31324 ай бұрын

    Can NextAuth use for api auth with another domain access it

  • @Samner42
    @Samner427 ай бұрын

    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

  • @ZainRamzan-pt8cm
    @ZainRamzan-pt8cm5 ай бұрын

    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

  • @miguel8yuri

    @miguel8yuri

    3 ай бұрын

    Try having the request http instead of https

  • @user-fc9cj1fp6b
    @user-fc9cj1fp6b3 ай бұрын

    Should add a session:{stratigy:"jwt"} in the options config, or there would be no 'role' property in the server side session.

  • @joeyreyes9666
    @joeyreyes96662 ай бұрын

    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?

  • @MuhammadUmair-gy5le
    @MuhammadUmair-gy5le6 ай бұрын

    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.

  • @bringmemore2621

    @bringmemore2621

    6 ай бұрын

    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 !!

  • @ukkashrecords7046

    @ukkashrecords7046

    4 ай бұрын

    thnx love u saved my day@@bringmemore2621

  • @user-tz3bc3dl7g
    @user-tz3bc3dl7g4 ай бұрын

    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

  • @reactdeveloper2368
    @reactdeveloper2368Ай бұрын

    If I'm implementing Google Oauth only what will be value of NEXTAUTH_URL?

  • @waitwhat-jh7vr
    @waitwhat-jh7vr4 ай бұрын

    is this also applicable on `pages`?

  • @herozero777
    @herozero77718 күн бұрын

    A great tutorial indeed. Thanks for this, but sadly after 6 months, it's already outdated as NextAuth v5 uses very different function names.

  • @leonzeng4139
    @leonzeng41394 ай бұрын

    what's the file name to keep secret, env.local? It's not clean in the video.

  • @JohnJohn-tn3lc
    @JohnJohn-tn3lc2 ай бұрын

    How to place scopes?

  • @muhammadyafizhambatubara461
    @muhammadyafizhambatubara46127 күн бұрын

    done

  • @gregoryyang6747
    @gregoryyang67472 ай бұрын

    So this is still about the old NextAuth 4 right, please change the title, which is misleading as AuthJS 5 makes significant changes

  • @user-uk8up1uw6r

    @user-uk8up1uw6r

    Күн бұрын

    agree

  • @amelianceskymusic
    @amelianceskymusic7 ай бұрын

    Is Ctrl+Shift+L necessary?

  • @ClarityCoders

    @ClarityCoders

    7 ай бұрын

    Nope just lazy. Thanks for watching.

  • @ukkashrecords7046
    @ukkashrecords70464 ай бұрын

    middleware is not working for me in next 14

  • @user-mh1km3mv7z
    @user-mh1km3mv7z4 ай бұрын

    do something to put google auth in here your thing is already setup

  • @abdullahmehar2931
    @abdullahmehar29315 ай бұрын

    some how this is not working for me now

  • @roko7378
    @roko73787 ай бұрын

    why am I getting "missing script dev" logged onto my terminal at 14:13??

  • @0xN1nja

    @0xN1nja

    7 ай бұрын

    run npm install

  • @roko7378

    @roko7378

    7 ай бұрын

    @@0xN1nja tried it but I’m still having the same problem :(

  • @roko7378

    @roko7378

    7 ай бұрын

    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 🤦🏻‍♂️🤦🏻‍♂️

  • @sguitas
    @sguitas6 ай бұрын

    This works with next.js 14?

  • @drbv27

    @drbv27

    22 күн бұрын

    yes works perfect

  • @roko7378
    @roko73786 ай бұрын

    why is my .env.local file not working??

  • @Lucious_LT

    @Lucious_LT

    Ай бұрын

    Mine too, having client_id error

  • @user-cn6lz8nn1r
    @user-cn6lz8nn1r3 ай бұрын

    Use typescript

  • @devrano48
    @devrano482 ай бұрын

    middleware makes the routing slower...

  • @frenchmike
    @frenchmike2 ай бұрын

    26:00

  • @booi_mangang
    @booi_mangangАй бұрын

    No ts is a deal breaker

  • @kelvinebima9571
    @kelvinebima95716 ай бұрын

    Lovely video but it’s not differentiating roles.

  • @user-mh1km3mv7z
    @user-mh1km3mv7z4 ай бұрын

    yeah broken tutorial sorry :/ please do a write up with this it would have been helpful

  • @AntNZ
    @AntNZ4 ай бұрын

    Is it just me or is Next-Auth v4 and beta all now completely unusable?

  • @worseize
    @worseize7 ай бұрын

    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😂

  • @nadyashaymardanova6000
    @nadyashaymardanova60007 ай бұрын

    🙅

  • @AntNZ
    @AntNZ4 ай бұрын

    What the hell happened - it was such a good project and is now dead.

  • @user-mh1km3mv7z
    @user-mh1km3mv7z4 ай бұрын

    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

  • @user-pf4ij5he7t

    @user-pf4ij5he7t

    Ай бұрын

    did you solve the problem man? i'm at the same issue borther

  • @bizimsiti
    @bizimsitiАй бұрын

    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