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

Поділитися
Вставка
  • Опубліковано 14 жов 2024

КОМЕНТАРІ • 113

  • @ClarityCoders
    @ClarityCoders 11 місяців тому +20

    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.

    • @Malestani24
      @Malestani24 9 місяців тому

      😍

    • @nmdpa3
      @nmdpa3 5 місяців тому

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

  • @xanthe69
    @xanthe69 6 місяців тому +7

    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

  • @Parijat-l7r
    @Parijat-l7r 11 місяців тому +8

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

    • @ClarityCoders
      @ClarityCoders 11 місяців тому +1

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

  • @ayushtiwari1504
    @ayushtiwari1504 10 місяців тому +4

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

  • @AttilaDobai-k2q
    @AttilaDobai-k2q 10 місяців тому +2

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

  • @A03L
    @A03L 9 місяців тому +2

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

  • @MedAliBeel
    @MedAliBeel 8 місяців тому

    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

  • @BlueHat1
    @BlueHat1 4 місяці тому +1

    What a great tutorial! Very helpful and clear.

  • @gregoryyang6747
    @gregoryyang6747 6 місяців тому +8

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

  • @CivilianJointTaskForce
    @CivilianJointTaskForce 11 місяців тому +4

    You are a great Programmer, thanks for the lecture.

  • @omc345
    @omc345 11 місяців тому +3

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

    • @symoleon97
      @symoleon97 9 місяців тому

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

  • @DeveloperLeon
    @DeveloperLeon 7 місяців тому

    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?

  • @warrenb2856
    @warrenb2856 11 місяців тому +1

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

  • @promtpking
    @promtpking 10 місяців тому

    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

  • @herozero777
    @herozero777 4 місяці тому +1

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

    • @traezeeofor
      @traezeeofor 3 місяці тому

      Yeah so sad. considering freeCodeCamp tutorials are always the best

  • @ondersabahat101
    @ondersabahat101 11 місяців тому +1

    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 11 місяців тому

      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 11 місяців тому +7

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

  • @ahmadpiran9806
    @ahmadpiran9806 19 днів тому

    Hi. Thanks for your time. But how about edge compatibility in authjs?! You didn't talk about this at all!

  • @patty181188
    @patty181188 6 місяців тому

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

  • @yanferaraque1051
    @yanferaraque1051 10 місяців тому

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

  • @okch4m
    @okch4m 11 місяців тому +1

    Really needed this. Saved for future use 👍

  • @マグロ-c7b
    @マグロ-c7b 7 місяців тому

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

  • @LajosMárton-s4p
    @LajosMárton-s4p 8 місяців тому

    Really Great Tutorial Video and Project

  • @JirayuVijjakajohn
    @JirayuVijjakajohn 11 місяців тому

    I just completed it. Good one keep it up FCC

  • @bizimsiti
    @bizimsiti 5 місяців тому +3

    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

  • @seancoonce9845
    @seancoonce9845 8 місяців тому

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

  • @Malestani24
    @Malestani24 9 місяців тому

    Thanks for such a great tutorial video.

  • @Хулиородригес
    @Хулиородригес 3 місяці тому

    Thanks a lot, very useful video, all works great

  • @CodingValk
    @CodingValk 11 місяців тому +10

    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 9 місяців тому

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

  • @KarthickRajan-y2x
    @KarthickRajan-y2x 11 місяців тому

    Thanks for this tutorial great explanation

  • @arumals3995
    @arumals3995 8 місяців тому

    Thanks for this really useful tutorial.

  • @BenjiFriedman
    @BenjiFriedman 10 місяців тому +1

    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?

  • @beinspiredwithquotes
    @beinspiredwithquotes 10 місяців тому

    thanks for the lecture

  • @collinsk8754
    @collinsk8754 6 місяців тому

    Great tutorial. Thanks.

  • @ThanakitChokbunsuwan
    @ThanakitChokbunsuwan 5 місяців тому

    A big thanks. This saved my life

  • @Samoniel2910
    @Samoniel2910 9 місяців тому +1

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

  • @MuhammadUmair-gy5le
    @MuhammadUmair-gy5le 10 місяців тому +2

    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 10 місяців тому +1

      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 8 місяців тому

      thnx love u saved my day@@bringmemore2621

  • @joshuafoxworth6972
    @joshuafoxworth6972 8 місяців тому

    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?

  • @BaoNguyen-yy3vw
    @BaoNguyen-yy3vw 9 місяців тому

    Great video, thanks pro🥳🥳

  • @razlar2080
    @razlar2080 9 місяців тому

    Thank You

  • @alanprophett9936
    @alanprophett9936 4 місяці тому

    Thanks!!

  • @muhammadyafizhambatubara461
    @muhammadyafizhambatubara461 4 місяці тому

    done

  • @adamspodniak5822
    @adamspodniak5822 Місяць тому

    I have one Q. Im using jwt for sessions and my problem is, that when i delete a user from db, but that user is still logged in, it simply doesnt kill his session and he still has full access to my next.js app until his session expires. Any Suggestions how to solve this ?

  • @reactdeveloper2368
    @reactdeveloper2368 5 місяців тому

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

  • @leonzeng4139
    @leonzeng4139 8 місяців тому

    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.

  • @joeyreyes9666
    @joeyreyes9666 6 місяців тому

    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?

  • @stacked-dev
    @stacked-dev 9 місяців тому

    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 7 місяців тому

      Try having the request http instead of https

  • @JaiShreeRam5964
    @JaiShreeRam5964 8 місяців тому +1

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

    • @ThanakitChokbunsuwan
      @ThanakitChokbunsuwan 5 місяців тому

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

  • @azamattugelbay
    @azamattugelbay 11 місяців тому

    Hello why you doesn't use sever actions instead

  • @loo6942
    @loo6942 8 місяців тому

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

  • @TheDoguBati
    @TheDoguBati 10 місяців тому

    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 ?

  • @DmytroShevchyshen
    @DmytroShevchyshen 8 місяців тому

    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

  • @AlexanderMoyer-k3b
    @AlexanderMoyer-k3b 8 місяців тому

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

  • @itexpert4193
    @itexpert4193 11 місяців тому

    great

  • @tinys_smash_
    @tinys_smash_ 2 місяці тому

    for some reason the middleware is not working at all for me and its allowing any registered user to get to my admin panel

  • @techiesakar
    @techiesakar 9 місяців тому

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

  • @alexanderkomanov4151
    @alexanderkomanov4151 11 місяців тому

    GREAT!!!

  • @opickyayat3132
    @opickyayat3132 9 місяців тому

    Can NextAuth use for api auth with another domain access it

  • @Victor-dd7el
    @Victor-dd7el 11 місяців тому

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

  • @leonzeng4139
    @leonzeng4139 8 місяців тому

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

  • @devrano48
    @devrano48 6 місяців тому

    middleware makes the routing slower...

  • @Samner42
    @Samner42 11 місяців тому

    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

  • @waitwhat-jh7vr
    @waitwhat-jh7vr 8 місяців тому

    is this also applicable on `pages`?

  • @King111-l6t
    @King111-l6t 7 місяців тому

    Use typescript

  • @bartreaccion
    @bartreaccion 11 місяців тому

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

  • @kelvinebima9571
    @kelvinebima9571 10 місяців тому

    Lovely video but it’s not differentiating roles.

  • @antwarior
    @antwarior 2 місяці тому

    i kept getting errors at the profile?.email how to fix that? im lost there, i fixed one part but still many errors using that

    • @antwarior
      @antwarior 2 місяці тому

      nevermind, i fixed everything and its all working perfectly

  • @antwarior
    @antwarior 2 місяці тому

    thank god you didnt use typescript, would of just ruined the entire tutorial for me

  • @JohnJohn-tn3lc
    @JohnJohn-tn3lc 6 місяців тому

    How to place scopes?

  • @AlexanderMoyer-k3b
    @AlexanderMoyer-k3b 8 місяців тому

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

  • @amelianceskymusic
    @amelianceskymusic 11 місяців тому

    Is Ctrl+Shift+L necessary?

    • @ClarityCoders
      @ClarityCoders 11 місяців тому

      Nope just lazy. Thanks for watching.

  • @worseize
    @worseize 11 місяців тому +1

    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😂

  • @ukkashrecords7046
    @ukkashrecords7046 8 місяців тому

    middleware is not working for me in next 14

  • @AntNZ
    @AntNZ 8 місяців тому

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

  • @abdullahmehar2931
    @abdullahmehar2931 9 місяців тому

    some how this is not working for me now

  • @roko7378
    @roko7378 11 місяців тому

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

    • @0xN1nja
      @0xN1nja 11 місяців тому

      run npm install

    • @roko7378
      @roko7378 11 місяців тому

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

    • @roko7378
      @roko7378 11 місяців тому +1

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

  • @Tanner-cz4bd
    @Tanner-cz4bd 11 місяців тому

    Finally

  • @sguitas
    @sguitas 10 місяців тому

    This works with next.js 14?

    • @drbv27
      @drbv27 4 місяці тому

      yes works perfect

  • @booi_mangang
    @booi_mangang 5 місяців тому

    No ts is a deal breaker

  • @roko7378
    @roko7378 10 місяців тому

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

    • @Lucious_LT
      @Lucious_LT 5 місяців тому

      Mine too, having client_id error

  • @shwetupadhyay4822
    @shwetupadhyay4822 3 місяці тому

    37:47

  • @frenchmike
    @frenchmike 6 місяців тому

    26:00

  • @AntNZ
    @AntNZ 8 місяців тому

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

  • @nadyashaymardanova6000
    @nadyashaymardanova6000 11 місяців тому

    🙅

  • @AlexanderMoyer-k3b
    @AlexanderMoyer-k3b 8 місяців тому

    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

    • @박성진-r1f6e
      @박성진-r1f6e 5 місяців тому

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