Cand Dev
Cand Dev
  • 120
  • 1 917 534
How to Integrate Auth.js (Beta) for Authentication in Next.js | 2024 Tutorial
In this tutorial, we'll show you how to integrate Auth.js (Beta) for authentication in a Next.js application. We'll also be using Prisma and PostgreSQL to manage our database. Follow along as we explore the new features and improvements in the latest version of Auth.js
Here you can watch how to get google id and google secret ua-cam.com/video/k1TL-AzavvY/v-deo.htmlsi=OgQSbjCaqYywGqvU
👨‍💻Code:
[Github] github.com/candraKriswinarto/learn-nextjs-authjs
🔗Source:
[Auth.js] authjs.dev/getting-started/installation
[Initialize Prisma Client] www.prisma.io/docs/orm/more/help-and-troubleshooting/help-articles/nextjs-prisma-client-dev-practices
#programming
Переглядів: 1 201

Відео

How to Create a Date and Time Picker Form | Next.js & Shadcn
Переглядів 1,7 тис.Місяць тому
In my personal opinion, this is the best way to create a date and time picker form when working with React. In this video, I'll show you step by step how to create this beautiful form from scratch. 👨‍💻Code: [github] github.com/candraKriswinarto/date-time-picker 🔗Source: [Time Picker OpenStatus] time.openstatus.dev/ [Shadcn Docs] ui.shadcn.com/docs #programming
This is How I Create a Responsive Navbar
Переглядів 7712 місяці тому
Learn how to create a responsive navbar using Next.js, Tailwind CSS, and Shadcn UI. This guide makes it super simple, helping you build a stylish and functional navbar with ease. Great for beginners and developers looking to save time. 👨‍💻Code: [link code] github.com/candraKriswinarto/responsive-navbar 🔗Source: [shadcn ui] ui.shadcn.com/docs/components/sheet [lucide react] lucide.dev/icons/ #pr...
Auto Scroll with React Intersection Observer | Next.js
Переглядів 7572 місяці тому
In this video, we continue from our previous tutorial on implementing infinite scroll in Next.js by adding auto scroll functionality using the React Intersection Observer. We'll walk you through the process of setting up the Intersection Observer to automatically load more content as you scroll, enhancing the user experience without the need for a "Load More" button. How to create load more but...
Implementing Infinite Scroll in Next.js Using Server Actions
Переглядів 1,5 тис.2 місяці тому
We will learn how to Iimplementing infinite scroll in Next.js with server actions. 👉Timestamps: 0:00 - Intro 01:15 - Install Next.js 01:59 - Create the UI Post List 11:53 - Api integration 🔗Source: [jsonplaceholder] jsonplaceholder.typicode.com/posts [jsonplaceholder params] github.com/typicode/json-server [next.js] nextjs.org/docs/getting-started/installation #programming
React DND Kit: Creating Vertical Sortable Lists Tutorial
Переглядів 4,6 тис.4 місяці тому
Discover how to make sortable lists in React using DND Kit. This easy-to-follow guide walks you through every step. Great for beginners and pros! 👨‍💻Code: [github]: github.com/candraKriswinarto/vertical-sortable-list 🔗Source: [dnd kit docs]: docs.dndkit.com/presets/sortable [vite]: vitejs.dev/guide [tailwind css]: tailwindcss.com/docs/guides/vite #programming
Internationalization in NextJs 14 with Next-Intl | i18n
Переглядів 49 тис.6 місяців тому
In this video, we will explore the implementation of next-intl within the Next.js app router using server components. Additionally, we will demonstrate the creation of a select button in the navbar, allowing users to switch between the English and Indonesian languages. 👨‍💻Code: [github] github.com/candraKriswinarto/nextlingo 🔗Source: [next-intl docs] next-intl-docs.vercel.app 🚀Live: nextlingo-b...
Next.js 14 Authentication Tutorial with Clerk
Переглядів 22 тис.7 місяців тому
In this tutorial, we'll learn how to implement Clerk with Next.js, using the latest version of this technology. By following this video, you will see how easy it is to add authentication to your Next.js project 👨‍💻Code: github.com/candraKriswinarto/nextjs-auth-with-clerk 🔗Source: [Clerk docs] clerk.com/docs #programming
Horizontal Scroll Animation in React with Pure CSS
Переглядів 2,5 тис.7 місяців тому
This tutorial shows you how to create a smooth horizontal scroll in React using just CSS. Some websites use this slider to list brand images. 👨‍💻Code: github.com/candraKriswinarto/auto-horizontal-scroll #programming
Easy Grid Layouts with Tailwind CSS for Beginners
Переглядів 17 тис.7 місяців тому
Creating grids may seem complex, but in this video, I'll show you how it's actually really simple and easy. 👨‍💻Code: github.com/candraKriswinarto/grid-layout #programming
Add Authentication to Next.js: Login with Google
Переглядів 21 тис.8 місяців тому
Learn how to add Login with Google to your Next.js app using NextAuth.js, Prisma, and Supabase. Part 1 - Create the Form: ua-cam.com/video/GkpEWkKQego/v-deo.htmlsi=Y1XGX-05jIf4Zgml Part 2 - Email and Password Auth: ua-cam.com/video/bicCg4GxOP8/v-deo.htmlsi=7YFt3rPCEhN7wO8w part 3 - Login with google ua-cam.com/video/k1TL-AzavvY/v-deo.html 🔗Source: [supabase] supabase.com/ [prisma.io] www.prisma...
3 Ways to Add Custom Google Fonts in Next.js 14
Переглядів 12 тис.8 місяців тому
Learn three simple ways to add Google Fonts to your Next.js 14 projects. Whether you're a beginner or an experienced developer, this quick tutorial will show you easy steps to customize your web design and make your sites stand out. 🔗Source: [nextjs docs] nextjs.org/docs/pages/building-your-application/optimizing/fonts 👋🏻 mynameischand.tech Timestamps: 0:00 - Demo 01:21 - Method 1 | variables a...
Simple Next.js Image Upload with UploadThing
Переглядів 16 тис.8 місяців тому
The essay way to upload file in next.js is use uploadthing 🔗Source: [uploadthing docs] docs.uploadthing.com/ 🛠️on progress: mynameischand.tech #programming
Build a Photo Gallery With React
Переглядів 6 тис.8 місяців тому
Let's create nice images gallery in react !! Wanna see how to create full stack image gallery? click here: ua-cam.com/video/7mUnGh4XRek/v-deo.htmlsi=Ej9sR9zXa62BQijH 👨‍💻Code: github.com/candraKriswinarto/react-images-gallery 🔗Source: [package-github] github.com/igordanchenko/yet-another-react-lightbox [package-docs] yet-another-react-lightbox.com/ 🚀Live: react-images-gallery-nu.vercel.app/ 🛠️on...
Full-Stack Blog App Tutorial | Next.js and Prisma
Переглядів 13 тис.9 місяців тому
Let's dive into creating a blog app with Next.js where we'll explore a variety of concepts. For authentication, we'll implement Google login using NextAuth and store user data in a PostgreSQL database. Additionally, we'll leverage Prisma for efficient database querying. I hope this video proves helpful to you all! Complete Sign-Up and Sign-In with Next.js ua-cam.com/video/bicCg4GxOP8/v-deo.html...
How to Create Horizontal Scroll Animation with Just CSS
Переглядів 2 тис.9 місяців тому
How to Create Horizontal Scroll Animation with Just CSS
How to Create Infinite Scroll in React | TanStack React Query
Переглядів 18 тис.10 місяців тому
How to Create Infinite Scroll in React | TanStack React Query
How to Intercept Routes in Next js | Image Gallery
Переглядів 3,7 тис.10 місяців тому
How to Intercept Routes in Next js | Image Gallery
How to Fetch Data Effectively on Search Input | React
Переглядів 1,8 тис.10 місяців тому
How to Fetch Data Effectively on Search Input | React
Full-Stack Next.js Blog App with Prisma and Tanstack React Query
Переглядів 33 тис.11 місяців тому
Full-Stack Next.js Blog App with Prisma and Tanstack React Query
Build a Complete Sign-Up and Sign-In with Next.js, NextAuth, PostgreSQL, and Prisma
Переглядів 80 тис.Рік тому
Build a Complete Sign-Up and Sign-In with Next.js, NextAuth, PostgreSQL, and Prisma
Create Form and Validation With Shadcn UI | NextJs 13
Переглядів 33 тис.Рік тому
Create Form and Validation With Shadcn UI | NextJs 13
First Impression: What is Shadcn UI and How to Use It?
Переглядів 5 тис.Рік тому
First Impression: What is Shadcn UI and How to Use It?
Building a Marvel-Pedia App: Next.js 13 Project
Переглядів 2,5 тис.Рік тому
Building a Marvel-Pedia App: Next.js 13 Project
Build Age Calculator App in React: Project for beginner
Переглядів 3,3 тис.Рік тому
Build Age Calculator App in React: Project for beginner
Full Stack Image Gallery App Tutorial | React, Firebase, Firestore
Переглядів 13 тис.Рік тому
Full Stack Image Gallery App Tutorial | React, Firebase, Firestore
Learn React by Building a Gradient Generator App
Переглядів 944Рік тому
Learn React by Building a Gradient Generator App
Create a To-Do App with Next.js 13: Learn CRUD Operations and Tailwind CSS UI
Переглядів 69 тис.Рік тому
Create a To-Do App with Next.js 13: Learn CRUD Operations and Tailwind CSS UI
Next.js 13: What's New and How to Use It?
Переглядів 1,5 тис.Рік тому
Next.js 13: What's New and How to Use It?
React Pagination with Tanstack Query: Using keepPreviousData and isPreviousData
Переглядів 4,7 тис.Рік тому
React Pagination with Tanstack Query: Using keepPreviousData and isPreviousData

КОМЕНТАРІ

  • @oone_piece
    @oone_piece День тому

    can u make a crud operation

  • @oone_piece
    @oone_piece 2 дні тому

    thank u

  • @MiguelSantos-ml2kq
    @MiguelSantos-ml2kq 2 дні тому

    Thanks a lot! You really saved me :) That was what I precisely needed!

  • @Mrnobody-t1z
    @Mrnobody-t1z 2 дні тому

    i get a 404 error when i try to go to localhost:3000/api/auth/signin what is the issue? I am fairly new to programming

    • @Mrnobody-t1z
      @Mrnobody-t1z 2 дні тому

      nevermind... im an idiot i figured it out 😭

  • @alangiovanni5204
    @alangiovanni5204 6 днів тому

    Great video! thank you vert much!

  • @prakharverma2286
    @prakharverma2286 6 днів тому

    Thanks man

  • @AnanthaGnaneswar21MIS702
    @AnanthaGnaneswar21MIS702 7 днів тому

    Bro is doing god's work. Thank you!!!

  • @sachindabas8675
    @sachindabas8675 8 днів тому

    Very well explained, Thanks

  • @khallingstad
    @khallingstad 8 днів тому

    fantastic tutorial :D Thank you! Keep up the great work!

  • @yoann590
    @yoann590 8 днів тому

    Hey Candid, i have an issue when i run npx prisma migrate dev --name init, the terminal stands still and doesn't give any response. Can you help me ?

    • @yoann590
      @yoann590 8 днів тому

      I find the solution, the default port seems to not work (6543), i switched it on 5432 and its working now !

  • @xtremeandroidsupport3837
    @xtremeandroidsupport3837 8 днів тому

    great video thanks !!

  • @Vinex-ye1du
    @Vinex-ye1du 11 днів тому

    Lebih baik pakai clrek atau auth bang?

  • @Vinex-ye1du
    @Vinex-ye1du 11 днів тому

    Anjay keren autu subs pokonya

  • @Vinex-ye1du
    @Vinex-ye1du 11 днів тому

    I see tulisan hati

    • @CandDev
      @CandDev 11 днів тому

      Orang indo nih pasti

  • @tsykin
    @tsykin 11 днів тому

    Can you do a tutorial on session revalidation with Next-Auth/Auth.js?

  • @jsbr
    @jsbr 14 днів тому

    Nice

  • @AngelaCui-fn2tn
    @AngelaCui-fn2tn 14 днів тому

    Thank you for sharing! Any idea how to add 'Remember me' to sign in page?

  • @nami-san4642
    @nami-san4642 16 днів тому

    25:02 if did use axios most efficient and less code!! over all i really like video

  • @proenglishschool3120
    @proenglishschool3120 17 днів тому

    Awesome how to without any unnecessary content. Great job! Maybe you can show how to do both horizontal drag from list to list as well as sortable.

  • @cristianscoop7487
    @cristianscoop7487 20 днів тому

    thanks bro

  •  21 день тому

    Thanks, it was helpful.

  • @ivanparkan
    @ivanparkan 21 день тому

    slas) thx for tut)

  • @skshoaibff
    @skshoaibff 21 день тому

    Can i do js instead of ts?

  • @abdulrafay1951
    @abdulrafay1951 22 дні тому

    can you do lucia/auth.js with next.js and react native/expo? there's no tutorial. It would be great if you do it so we can avoid any services like clerk and supabase auth

  • @PauloJsx
    @PauloJsx 22 дні тому

    O que você acha do Payload CMS? Você já usou? Se sim, acha uma boa escolha?

    • @CandDev
      @CandDev 22 дні тому

      I haven't heard of Payload CMS before, but it sounds interesting. I'll definitely look into it and learn more about it. Thanks for the recommendation!

  • @k303k
    @k303k 22 дні тому

    Pls make tuto for nextjs with Jest and nextjs with shadcn+storybook pls.

  • @khaliltourabi7515
    @khaliltourabi7515 22 дні тому

    Do it with credentials and prisma no one use a provider while learning first time

    • @CandDev
      @CandDev 22 дні тому

      you can check my other video, but this is use next-auth ua-cam.com/video/bicCg4GxOP8/v-deo.htmlsi=q8bqSAqF79CSV3OG

    • @khaliltourabi7515
      @khaliltourabi7515 22 дні тому

      Okey thank you!

  • @kuraudio
    @kuraudio 22 дні тому

    do with credentials please with prisma

  • @survivordaqwv9002
    @survivordaqwv9002 23 дні тому

    Thank you for this video! Can you make a video on RTL languages too? Would be really appreciated.

  • @wyeththompson3233
    @wyeththompson3233 24 дні тому

    Thank you sir! One note on using local images, I had to wrap the file location in require() :)

  • @younes-47
    @younes-47 25 днів тому

    Great tutorial, exactly what i was looking for, thank you

  • @nahrulk
    @nahrulk 25 днів тому

    bro i request this many times at shadcn official.. tankyu bang

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

    respect

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

    This is the tutorial I've been looking for!

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

    pls do some tutorial for next typescript jest react query and msw pls

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

    How it stack over one by one ?

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

    38:53

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

    How to use next-intl in client components?

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

    Hi Cand. When I run npx prisma migrate dev --name init. The terminal stands still and doesn't give any response. please help me!

    • @yoann590
      @yoann590 8 днів тому

      Hey i have the same issue , did u find an answear for this problem ?

  • @user-ki2kc9li8t
    @user-ki2kc9li8t Місяць тому

    I am a Korean who was looking for information about dnd kit. I can't speak English, but I think I got a feel for it by watching the code. I enjoyed the video.

    • @CandDev
      @CandDev 22 дні тому

      Happy to hear that!

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

    Thanks. Clicking a nav link does not close the menu.

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

    Your explanation was super smooth, smoother than infinite scrolling itself. Thank you so much, mate, for making this video.

    • @CandDev
      @CandDev 22 дні тому

      You're welcome!

  • @AfaqAhmed-p9w
    @AfaqAhmed-p9w Місяць тому

    hy dear , i want to create otp section when user is register and login. please create otp verification video

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

    Lovely!

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

    Very helpful, thanks.

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

    your english is horrible

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

    This is so helpful thanks alot

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

    You could have added the link to the previous one you made.

    • @CandDev
      @CandDev 22 дні тому

      You can check it now in the video description ✅

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

    Great

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

    😎👍🏻