Effortless Auth in Next.js 14: Use Auth.js & Drizzle ORM for Secure Login

แชร์
ฝัง
  • เผยแพร่เมื่อ 12 พ.ย. 2024

ความคิดเห็น • 68

  • @srymisclick
    @srymisclick ปีที่แล้ว +36

    This is the Auth.js docs we all needed 😅

    • @SamMeechWard
      @SamMeechWard  ปีที่แล้ว +13

      The Auth.js team has a lot on their plate, especially trying to keep up with changes to next.js. It's a shame the docs end up suffering because of it.

  • @codingtranquility
    @codingtranquility 9 หลายเดือนก่อน +3

    Amazing guide, I can't tell you how log I was brute forcing my way against the docs. The current state of web dev with the constant migrations and upgrades is tough, but I'm glad there are content creators like you putting out quality up to date content!

  • @merveillevaneck5906
    @merveillevaneck5906 ปีที่แล้ว +11

    this was disgustingly well done...recently went through the same steps and after rethinking my mental models i have to say this stack is looking pretty damn good. thanks for the brilliant video!

    • @SamMeechWard
      @SamMeechWard  ปีที่แล้ว

      Thank you 🤗
      Let me know if this all works out for you or if I missed anything

  • @Crono1000
    @Crono1000 7 หลายเดือนก่อน

    You nailed down every part of this setup that every one of us needed to know. Well done!
    Liked and Subscribed for life! ❤

  • @simonjanca
    @simonjanca 6 หลายเดือนก่อน

    This is so great. Finally after hours of staring docs I made the "simple" auth working :)

  • @Diego_Cabrera
    @Diego_Cabrera ปีที่แล้ว +1

    I am currently trying to update my website to have some special content for certain users. I think this is the route i'll be taking for my authentication. Thanks for the amazing explanation.

  • @AntNZ
    @AntNZ 9 หลายเดือนก่อน

    Now I get it. I have been struggling with the beta version \ docs. You got me over the hurdle 🙏🙏🙏🙏

  • @ignaciogmg
    @ignaciogmg 11 หลายเดือนก่อน

    Sam, I was struggling quite a bit trying to implement the new auth method with drizzle and this REALLY helped me a lot. Thanks so much!! You've got a new suscriber 😉

  • @developerpranav
    @developerpranav 11 หลายเดือนก่อน

    Needed this exactly! Been enjoying your videos, thanks a lot! Getting to learn a lot about S3 file management and securing your endpoints.

  • @RedRobotDevelopment
    @RedRobotDevelopment 2 หลายเดือนก่อน

    Great tutorial! I think the Next.js Dashboard example from the official guide also uses the beta installation but for me, I don't really like to use beta or canary libs for production code. Are there any other options for implementing auth.js with Next.js 14 without using a beta package?

  • @fabouwes9240
    @fabouwes9240 6 หลายเดือนก่อน

    Thanks for this beauty !
    Next time, Could you create a tutorial on how to use Lucia with Drizzle-Neon ?

  • @darrenpierre9903
    @darrenpierre9903 9 หลายเดือนก่อน

    Hey I've been trying to learn how to use auth.js into my application for several days now and I couldn't find any resource except yours that actually explains what parts you need and explain their role . Thank you so much for the video . I was wondering how did you learn how to use auth.js ?

  • @Alex.Shalda
    @Alex.Shalda 6 หลายเดือนก่อน

    so thorough, thank you!

  • @duechilidance5388
    @duechilidance5388 หลายเดือนก่อน

    great video, very helpful, thanks

  • @rahulsingh-bk3wd
    @rahulsingh-bk3wd หลายเดือนก่อน

    Thanks for the helpful video

  • @boy4everjoy
    @boy4everjoy 6 หลายเดือนก่อน

    for adding roles you would just add another field in your db and check if the role matches agaisnt your own criteria and safeguard either a page or part of your code? I think thats kinda what I got from reading docs. whats your opinion?

  • @noelalfaro
    @noelalfaro 7 หลายเดือนก่อน

    I ran into an issue where after pushing the schema that includes the user, verificationToken, session, account to my vercel postgres db, i get an error saying "Error: multiple primary keys for table "user" are not allowed" I've looked over my schema files and I am only declaring one primary key. I can't find any relevant help online and would really appreciate any help!

  • @brahimo4701
    @brahimo4701 7 หลายเดือนก่อน

    I just wondering how can I catch a dynamic route inside the middleware eg. /[slug]

  • @coffeeaddict7652
    @coffeeaddict7652 ปีที่แล้ว

    This helped me so much. Thanks!

  • @liu-river
    @liu-river 10 หลายเดือนก่อน +1

    Wait, you are using database strategy and middleware works? How come nextauth doc says only supports jwt when using middleware?

    • @googoochu3923
      @googoochu3923 9 หลายเดือนก่อน +1

      Docs statement for database or orm that aren't compatible for edge runtime. He is using drizzle and neon both compatible for edge so you can use database strategy.

  • @BuhuuRecords
    @BuhuuRecords 3 หลายเดือนก่อน

    I am using TURSO, I have created a scheme according to the documentation and I get errors on the server side when I try to log in
    "proto": {
    "message": "SQLite error: no such table: user",
    "code": "SQLITE_UNKNOWN".
    }
    Does anyone know what this could be about? I don't have a user table, I have users according to the documentation....

  • @krudeboy3835
    @krudeboy3835 8 หลายเดือนก่อน +2

    yea for some react NEXTAUTH doesnt export "handlers" and "auth" so this way doesn't work with Next14 and v4 next auth. NextAuth is the actual GET and POST handler. Sad how quickly the just update everything and not document it.

  • @jsantos1220
    @jsantos1220 6 หลายเดือนก่อน

    Im doing this with the version "next-auth": "^5.0.0-beta.17" witch is the latest now, and the user came by default with id, emailVerified too, they add it or i paste something extra without knowing?

  • @Ripening
    @Ripening 6 หลายเดือนก่อน

    In case anybody is struggling with this problem: I kept getting an error when trying to sign up 'column "id" of relation "session" does not exist'. In the end, I just went in to the schema copied from authjs and added an extra column to the sessions table as: 'id: text('id').notNull().primaryKey()'. Maybe it'll cause problems later, I don't know, but it worked and I can now log in.

  • @gbtech8602
    @gbtech8602 10 หลายเดือนก่อน

    Hi Sam can i use this new version of authjs with express. i have application which uses express backend.

  • @loo6942
    @loo6942 9 หลายเดือนก่อน

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

  • @vasubhensdadiya6670
    @vasubhensdadiya6670 4 หลายเดือนก่อน

    Sir, can you give me the name of the theme and font you use in your VS Code?

  • @metagravity
    @metagravity 6 หลายเดือนก่อน

    Hey , am getting an error like when directed to github that page not found

  • @homescriptone
    @homescriptone 6 หลายเดือนก่อน

    How do you customize your login page ?

  • @AuthentCollabServices
    @AuthentCollabServices 19 วันที่ผ่านมา

    can you please do a video on next-auth-cognito

  • @aliarefjs
    @aliarefjs 9 วันที่ผ่านมา

    with Github ??? please do it with other providers I am new to Authjs

  • @parmetra
    @parmetra 11 หลายเดือนก่อน

    Great lesson! Thank you!
    I would still like to learn more about role modeling, so that some part of the site is only accessible to the admin.
    And an additional question: is it possible to bind authentication via Next-Auth together with NextJS + NestJS, since I have the REST API built on Nest?
    For example, so that some API requests are processed only for administrators.

  • @universe_decoded797
    @universe_decoded797 ปีที่แล้ว

    I have used drizzle and authjs drizzledapter for a while, but please make a video how to use custom credentials login with drizzle

  • @semyaza555
    @semyaza555 5 หลายเดือนก่อน

    Does Auth.js still not work on React Native?

  • @rohansen6872
    @rohansen6872 11 หลายเดือนก่อน

    Was Really Really helpful

  • @sealuke2724
    @sealuke2724 11 หลายเดือนก่อน

    its very helpful Next 14 + next-auth@beta (v5)

  • @최대한-h5g
    @최대한-h5g ปีที่แล้ว

    Thanks for upload this Posting it is great helpful :)

  • @juliushernandez9855
    @juliushernandez9855 8 หลายเดือนก่อน

    Can i use auth.js already for project?

  • @NickFields4
    @NickFields4 ปีที่แล้ว +1

    Thanks Sam!
    [Disclaimer] I can't fully watch till after work.
    But right off the bat I'm wondering if this method has left you woth limited deployment options?
    I remember toying with NextAuth OpenNext via SST a while back. It had hefty complexity to get working and was quite finicky thereafter.
    Is this deployable only to vercel in your experience?
    SST?
    Amplify?
    Etc?

    • @SamMeechWard
      @SamMeechWard  ปีที่แล้ว

      I would strongly suggest everyone avoid Amplify, but I just tested it using SST and it works great:
      dfg0bi35ewl48.cloudfront.net/
      I had to add this env var but that's all AUTH_URL=dfg0bi35ewl48.cloudfront.net
      And I had to slightly adjust the way I was importing my server actions, but that's a next thing, not a next auth thing.

  • @hugosantos978
    @hugosantos978 ปีที่แล้ว

    Thanks for sharing.

  • @szuhanchou6307
    @szuhanchou6307 8 หลายเดือนก่อน

    Thanks for this awesome tutorial.
    I'm using same set-up but with Postgres.js as the DB driver. I'm getting this error when compelling the middleware component. I wonder has anyone experienced this before? I have put buffer & stream-browserify in next.config.js. Thanks for reading it!
    Module build failed: UnhandledSchemeError: Reading from "node:stream" is not handled by plugins (Unhandled scheme).
    Webpack supports "data:" and "file:" URIs by default.
    You may need an additional plugin to handle "node:" URIs.
    Import trace for requested module:
    node:stream

    • @henritouchard6228
      @henritouchard6228 5 หลายเดือนก่อน

      did you find a solution ? I found many similar conversations about it, seems to be a known bug but i didn't find a solution yet

  • @hichambelhoucin9060
    @hichambelhoucin9060 11 หลายเดือนก่อน

    that was helpful thank you ♥♥♥

  • @Furki4_4
    @Furki4_4 11 หลายเดือนก่อน

    Hey, I'm trying to add custom columns to the user table but having some problems. Docs says "First, create a schema that includes the minimum requirements for a next-auth adapter. You can select your favorite SQL flavor below and copy it. Additionally, you may extend the schema from the minimum requirements to suit your needs." However, it doesn't actually use my table schemas. It uses the default table schema as in the docs even if I customize it. you can see them when you inspect into the source code. Am I missing something or is this adapter strictly implemented ;_;
    Thank for the video btw

    • @SamMeechWard
      @SamMeechWard  11 หลายเดือนก่อน

      You should be able to copy the default schema than add on some custom optional fields. Or you could create something like a “profile” table with extra details and reference the use table

  • @googoochu3923
    @googoochu3923 9 หลายเดือนก่อน

    Btw session interface modification isnt working for me. Cant tell is it only me or everyone?

    • @codingtranquility
      @codingtranquility 9 หลายเดือนก่อน

      Yeah the user isn't returning for me

  • @kacperkepinski4990
    @kacperkepinski4990 11 หลายเดือนก่อน

    what if I want to customize the button and place it in a different place?

    • @SamMeechWard
      @SamMeechWard  11 หลายเดือนก่อน

      You need to set that all up yourself on your one page. You need to setup a custom button and link to the correct social login provider

  • @jintz2
    @jintz2 11 หลายเดือนก่อน +1

    Great job copy pasting!

  • @Tanner-cz4bd
    @Tanner-cz4bd 11 หลายเดือนก่อน

    why not with prisma?

  • @fjobeir
    @fjobeir 11 หลายเดือนก่อน

    Thanks!

    • @SamMeechWard
      @SamMeechWard  11 หลายเดือนก่อน

      Thank you 😊

  • @Love-id8gu
    @Love-id8gu 11 หลายเดือนก่อน

    Hello!❤
    Please make an example of authorization in control panel (Nextjs 14, typescript, server actions, nextauth 5, prisma, shadcn ui, react-hook-form, zod, sonner). User authorization, user registration, user roles.😘
    Thank you very much!!! 😇

  • @dinoDonga
    @dinoDonga ปีที่แล้ว

    You don't have to use your phone to confirm. clicking "use you password" in the "having trouble box" will simply open up the password field.
    That being said i thought it had a real genuine touch lol

  • @akshar234
    @akshar234 9 หลายเดือนก่อน

    Every time I use next auth, something is always broken. I am starting to hate this whole ecosystem in general now :(
    Nice video btw, I had some hard time setting up next auth, their docs is a mess

  • @vinniv6806
    @vinniv6806 ปีที่แล้ว

    yeah... now do the same with custom provider (you get JWT token from external api).... 😁😁

  • @andrewiglinski148
    @andrewiglinski148 ปีที่แล้ว

    When the f-ck did v14 come out? I still have two apps in v13 still in active development lol.

    • @SamMeechWard
      @SamMeechWard  ปีที่แล้ว

      🤗
      Don't worry, there's no changes to the APIs, it's mostly performance and stability improvements.

    • @merveillevaneck5906
      @merveillevaneck5906 ปีที่แล้ว

      ya you can basically just go ahead and upgrade your next dependencies and it will work without a hitch@@SamMeechWard

  • @ahndeux
    @ahndeux ปีที่แล้ว

    Damn. You lost me at the first 1 minute mark.

  • @treyrader
    @treyrader ปีที่แล้ว

    lolol