Nikita Dev
Nikita Dev
  • 25
  • 499 087
MERN Authentication App with JWT (and TypeScript)
In this video you'll learn how to add JWT authentication to a MERN stack application. You will learn how to sign, refresh and invalidate JWT tokens, as well as implement account verification & password reset flows. The frontend is built with React, Chakra UI and React-Query. The backend is built with TypeScript, Express and MongoDB. We will use Resend to send emails.
Source Code: github.com/nikitapryymak/mern-auth-jwt/tree/youtube
0:01 App Walkthrough
5:37 Auth Flow Diagram
Backend
7:31 Initializing the backend
14:36 API Architecture
17:50 Database connection
25:33 Error handling middleware
33:46 Register endpoint
1:25:21 Login endpoint
1:41:40 Logout endpoint
1:52:16 Refresh endpoint
2:07:57 Verify Account endpoint
2:15:12 Resend Integration
2:25:31 ForgotPassword endpoint
2:35:41 ResetPassword endpoint
2:43:53 User endpoint
2:56:05 GetSessions endpoint
3:01:17 DeleteSession endpoint
Frontend
3:07:31 Initializing the frontend
3:16:02 Login page
3:35:12 Register page
3:41:22 VerifyEmail page
3:50:35 ForgotPassword page
3:58:45 ResetPassword page
4:10:37 Adding authentication to frontend
4:24:30 Profile page
4:27:56 Sessions page
4:43:00 Refreshing tokens
Resend: resend.com
Cookie SameSite Attribute: portswigger.net/web-security/csrf/bypassing-samesite-restrictions
Support Me: www.buymeacoffee.com/nikitadev
Contact Me: nikitadev292@gmail.com
Music from Uppbeat:
uppbeat.io/t/avbe/night-in-kyoto
License code: XENVHU3KMICGEHPW
#react #javascript #nodejs
zhlédnutí: 259

Video

Build a Browser Code Editor in React (Monaco React Editor)
zhlédnutí 13KPřed 4 měsíci
In this video you'll learn how to build an in-browser code editor that supports multiple languages! We'll use the Monaco react library for the code editor, Chakra UI to style our app, and the Piston API to execute our code. Source Code: github.com/OneLightWebDev/react-code-editor-app Monaco React Editor: www.npmjs.com/package/@monaco-editor/react Piston API: piston.readthedocs.io/en/latest/api-...
How to Crop Images in React (react-image-crop)
zhlédnutí 12KPřed 5 měsíci
In this video you'll learn how to use the react-image-crop library to crop images in React! You'll also learn how to use the HTML Canvas element to draw images. Source Code: github.com/OneLightWebDev/react-image-cropper React Image Crop: www.npmjs.com/package/react-image-crop Support Me: www.buymeacoffee.com/nikitadev Contact Me: nikitadev292@gmail.com #react #javascript #programming
Complete Tailwind CSS Tutorial (with React)
zhlédnutí 945Před 6 měsíci
In this video you'll learn about Tailwind CSS! I'll show you how to use some of the common utility classes, add dark mode, customize the theme, add responsive cards, and more! Source Code: github.com/OneLightWebDev/tailwind-css-tutorial Tailwind CSS: tailwindcss.com Tailwind Components: tailwindcomponents.com 0:01 Intro 00:24 Documentation 10:16 Set Up With React 12:44 Animations 13:11 Building...
Create a Modal With React Portals
zhlédnutí 3,3KPřed 7 měsíci
In this video you'll learn how to use React portals to render a modal. You will also learn how to manage app UI state using Jotai (to handle opening/closing the modal). Code: github.com/OneLightWebDev/react-portals React Portals: react.dev/reference/react-dom/createPortal#reference Jotai: jotai.org/ Github: github.com/nikitapryymak Support Me: www.paypal.com/paypalme/nikitapryymak Contact Me: o...
Resize Images with Node.js and AWS Lambda (and S3)
zhlédnutí 8KPřed 8 měsíci
In this video you'll learn how to create, modify, deploy, and test an AWS Lambda. I will show you how to set permissions through IAM roles/policies, and also how to set up S3 triggers to invoke your Lambda when an image is uploaded to a bucket. We will use the Sharp NPM package to easily resize images, and the AWS S3 SDK to interact with our buckets. Code: github.com/OneLightWebDev/image-resize...
React Table Tutorial (TanStack Table)
zhlédnutí 59KPřed 8 měsíci
In this video you'll learn how to create a complex, customizable table using the TanStack table library. The table will include lots of cool features like column resizing, custom column cells, sorting, filtering & pagination! You will learn about TanStack Table concepts such as: ColumnDefinitions, FilterState, FilterFn's, PaginationState & more! Lastly, you will learn how to build various UI co...
Build a Video Streaming Service on AWS! (S3 + CloudFront)
zhlédnutí 18KPřed 9 měsíci
In this video you'll learn how to set up a video streaming service on AWS. You will learn about the benefits of using a CDN, as well as how to set up a CloudFront distribution with an S3 bucket. Github: github.com/nikitapryymak Support Me: www.paypal.com/paypalme/nikitapryymak Contact Me: onelightwebdev@gmail.com #aws #s3 #cloudfront
Custom React Hook for Fetching Data (useQuery)
zhlédnutí 6KPřed rokem
In this video you'll learn how to create a custom react hook for fetching data. You will also learn the process of iterating and refactoring code as you follow the tutorial. Code: github.com/OneLightWebDev/react-custom-hooks Github: github.com/nikitapryymak Support Me: www.paypal.com/paypalme/nikitapryymak Contact Me: onelightwebdev@gmail.com #react #javascript #reacthooks
How to Save React State to Local Storage (with Context API)
zhlédnutí 7KPřed rokem
In this video you'll learn how to save your react app state to local storage so that relevant data will be persisted. Codesandbox: codesandbox.io/p/sandbox/react-context-with-local-storage-oonpvx?file=/src/App.jsx Context API Explanation: czcams.com/video/bJMwH1FWSmU/video.html Contact Me: onelightwebdev@gmail.com Github: github.com/nikitapryymak Support Me: www.paypal.com/paypalme/nikitapryymak
How to Send Emails with Next JS and Nodemailer
zhlédnutí 73KPřed rokem
In this video you'll learn how to build a contact form in Next JS that sends emails using API routes and Nodemailer. I'll be using a gmail account in this video, but it will work with other email providers as well. Starting Files: github.com/nikitapryymak/next-js-nodemailer Finished Files: github.com/nikitapryymak/next-js-nodemailer/tree/finished-files Contact Me: onelightwebdev@gmail.com Githu...
Upload Images with React & Node JS to AWS S3
zhlédnutí 17KPřed rokem
In this video you'll learn how to create a responsive user interface using React and Chakra UI, and a Node JS backend that handles image uploads. You'll also learn how to store and retrieve images from AWS S3. Starting Files: github.com/nikitapryymak/react-node-s3-image-upload Finished Files: github.com/nikitapryymak/react-node-s3-image-upload/tree/finished-files Setup AWS Credentials: docs.aws...
Error Handling in NodeJS (Complete Guide) | Node Tutorial
zhlédnutí 38KPřed rokem
In this video you'll learn about what kinds of errors to handle in NodeJS, how to best handle them, and how to create your own custom errors. Code: github.com/nikitapryymak/node-error-handling Node Middleware: czcams.com/video/iIfkuL3v-b8/video.html Node Request Validation: czcams.com/video/_svzevhv4vg/video.html Contact Me: onelightwebdev@gmail.com Support Me: www.paypal.com/paypalme/nikitapry...
React Context API Tutorial (with useContext) | React Hooks
zhlédnutí 4,3KPřed rokem
In this video you'll learn how to use the React Context API with the useContext hook. Contact Me: onelightwebdev@gmail.com Github: github.com/nikitapryymak Support Me: www.paypal.com/paypalme/nikitapryymak #react #javascript
How Does JWT Authentication Work? (JSON Web Token) | Tokens vs Sessions
zhlédnutí 16KPřed rokem
In this video you'll learn about how JWT Authentication works, and how token authentication differs from sessions. Contact Me: onelightwebdev@gmail.com Github: github.com/nikitapryymak Support Me: www.paypal.com/paypalme/nikitapryymak #jwt #jsonwebtoken #jwtauth
How Does DNS Work? (Domain Name System)
zhlédnutí 308Před rokem
How Does DNS Work? (Domain Name System)
How to Validate Requests in Node JS (with Joi validator) | Node JS Tutorial
zhlédnutí 25KPřed 2 lety
How to Validate Requests in Node JS (with Joi validator) | Node JS Tutorial
What is middleware in Express JS? | Node JS Tutorial
zhlédnutí 3,4KPřed 2 lety
What is middleware in Express JS? | Node JS Tutorial
React Formik Tutorial with Yup (React Form Validation)
zhlédnutí 103KPřed 2 lety
React Formik Tutorial with Yup (React Form Validation)
Javascript ES6 Modules Tutorial
zhlédnutí 1,1KPřed 2 lety
Javascript ES6 Modules Tutorial
How to Import and Export Modules in Node JS (CommonJS)
zhlédnutí 4,1KPřed 2 lety
How to Import and Export Modules in Node JS (CommonJS)
Basic Node + MySQL API Tutorial | CRUD Operations
zhlédnutí 408Před 2 lety
Basic Node MySQL API Tutorial | CRUD Operations
How to Install and Connect to a MYSQL Server on Mac (CLI & GUI)
zhlédnutí 7KPřed 2 lety
How to Install and Connect to a MYSQL Server on Mac (CLI & GUI)
React Loading Skeleton Tutorial
zhlédnutí 64KPřed 2 lety
React Loading Skeleton Tutorial
React Dark Theme Toggle With Styled Components Tutorial
zhlédnutí 14KPřed 2 lety
React Dark Theme Toggle With Styled Components Tutorial

Komentáře

  • @danish7335
    @danish7335 Před 16 hodinami

    this video gives me the exploration about how seniors write code at scale

  • @farzad6310
    @farzad6310 Před dnem

    Awesome, You said hard topic like this very easy, Thanks brother

  • @vvek_7
    @vvek_7 Před dnem

    Thanks for the explaination

  • @pulserudeus7968
    @pulserudeus7968 Před 3 dny

    awesome! this explanation is the best out there! thanks man! instant subscriber here 🔥

  • @whizzie3367
    @whizzie3367 Před 3 dny

    Wow

  • @angkearith123
    @angkearith123 Před 3 dny

    Just discovered your channel. Really love your videos

  • @regilearn2138
    @regilearn2138 Před 3 dny

    Hi Nikita, appreciate you for this,In real world what is the recommended why to store user login data. session or cookie and how to handle if use refresh the page an all. would appreciate if you can add your thought on this. most of the senior level jobs they ask this type on this questions.

  • @regilearn2138
    @regilearn2138 Před 3 dny

    wow, Would appreciate if you can tech us how to add Lambda function for this

  • @raheelafzal5406
    @raheelafzal5406 Před 3 dny

    best of the best

  • @xixu8705
    @xixu8705 Před 3 dny

    this is great! but I can't start my server. "Command to start the server is not configured. Please set the command that must be used to start the serve.." how to fix it?

  • @kemcadams7210
    @kemcadams7210 Před 4 dny

    This would have been nore useful for me if it used standard html table markup instead of chakra components

  • @aleksey6151
    @aleksey6151 Před 4 dny

    Great video every minute of it was helpful! 👍

  • @OnlyJavascript
    @OnlyJavascript Před 4 dny

    this is amazing. thanks for the tut. could you please show us how to host this using a vps(hostinger).

    • @nikita-dev
      @nikita-dev Před 4 dny

      yes, I’m planning to make a video to dockerize this app and deploy it to the cloud

    • @OnlyJavascript
      @OnlyJavascript Před 4 dny

      @@nikita-dev thank you so much

  • @prashlovessamosa
    @prashlovessamosa Před 4 dny

    great thanks for sharing nikita

  • @smailhal
    @smailhal Před 4 dny

    Bro we need this type of tutorial . Do more (just watched the intro and that's very promising)

  • @mystories878
    @mystories878 Před 4 dny

    take love bro

  • @lucasaguiar3063
    @lucasaguiar3063 Před 5 dny

    Thanks very much

  • @BishalLama-fh8bx
    @BishalLama-fh8bx Před 6 dny

    How to add HTML and CSS??

  • @cyberblitz
    @cyberblitz Před 7 dny

    this is great. However, it would have been better of you covered how you could create extra rows

  • @harsh0037
    @harsh0037 Před 7 dny

    9:02 i have a error like zip' is not recognized as an internal or external command

  • @plasthree
    @plasthree Před 9 dny

    This is the most beautiful way i have seen 😮. Thanks so much.

  • @vienong2772
    @vienong2772 Před 9 dny

    How to enter data from the keyboard?

  • @hmvarshney5222
    @hmvarshney5222 Před 10 dny

    Great course! Simple and to-the-point, unlike others.

  • @jackpaterson5324
    @jackpaterson5324 Před 11 dny

    it works👍

  • @Parhoom
    @Parhoom Před 12 dny

    Excellent explanation. thank you! <3

  • @thebjorn
    @thebjorn Před 12 dny

    That was awesome :-) Thank you so much for taking the time to make this tutorial (I know it takes some serious effort to make something look this easy). Our videos are now online :-D

  • @tinotaylor
    @tinotaylor Před 12 dny

    Would this be ok for something like a course platform? Wondering about performance and users having loading issues and encoding. 🙂

  • @pedropastoriz
    @pedropastoriz Před 14 dny

    thank you!!

  • @farshadbagheri6180
    @farshadbagheri6180 Před 15 dny

    I wish you would explain rotation and zoom Because one gets confused in SetCanavasPreview

  • @ricksegalCanada
    @ricksegalCanada Před 15 dny

    Thanks for taking the time to do this video. Your explanation style is excellent as all too often youtubers forget we don't know and they forget to explain things properly. Well done.

  • @appstuff6565
    @appstuff6565 Před 16 dny

    Hey Nikita thanks for this. Im using Nextjs and supabase and im now requiring to use a smtp, for sending sign up and reset emails only, so what do you think is the best way to do about this? Nodemailer + Amazon SES? or can I just use nodemailer alone

    • @nikita-dev
      @nikita-dev Před 16 dny

      Honestly I would recommend just using AWS SES or Resend

    • @appstuff6565
      @appstuff6565 Před 15 dny

      @@nikita-dev thanks nikita.

  • @nickpeshev9239
    @nickpeshev9239 Před 18 dny

    i got some problem implementing row selection with server side pagination and using tanstack table without typescript.Anyone wanna help ?

  • @himansuiii
    @himansuiii Před 18 dny

    Thankssssssssssssssss

  • @siddharthsaurav7244
    @siddharthsaurav7244 Před 18 dny

    When using this approach to render a video in React apps, I encounter problems playing large videos in the Safari browser. How can we fix this?

  • @arounaouattara6037
    @arounaouattara6037 Před 18 dny

    Thanks

  • @contuwontu
    @contuwontu Před 19 dny

    Thank you for this video, really appreciate it! I have downloaded mysql but when running it ( pasted this /usr/local/mysql/bin/mysql) an error message says file not found & does not let me enter the password. How do I fix this issue?

  • @diletant_av
    @diletant_av Před 19 dny

    Никит, спасибо большое за хорошее объяснение. Пережимать можно уже на бэке, например, с помощью sharp

  • @preciousegwuenu2938
    @preciousegwuenu2938 Před 19 dny

    Thanks, it helped

  • @WriteCodeWithMaan
    @WriteCodeWithMaan Před 19 dny

    How can we access the sharp library without adding any dependency or without adding any layer to lambda? How your lambda function is reading the sharp library?

  • @AliMohammed-gc5mx
    @AliMohammed-gc5mx Před 20 dny

    is any one can download this video ? if yes i need how can i prevent this ?

  • @kirankumarrudraraju2429

    Excellent explanation and very easy to understand..thank you

  • @vladuk1love
    @vladuk1love Před 21 dnem

    Hey! I have a problem with canvas preview. If my image is 16:9 everything is fine, but with a 9:16 image the canvas preview also changes resolution and becomes rectangular(I need a square)

  • @PRISM600
    @PRISM600 Před 22 dny

    How can i add C++ here? I tried with cpp different version but couldnt able to execute it for cpp,,it would be helpfull if you guide me with this..Thank you..

  • @murshid956
    @murshid956 Před 22 dny

    In the first form, what is the purpose of using handleBlur?

  • @richardwebb114
    @richardwebb114 Před 23 dny

    Great video. Thank you Nikita Dev!

  • @murshid956
    @murshid956 Před 24 dny

    great video\

  • @ryostyles9904
    @ryostyles9904 Před 25 dny

    how to resize the image?

    • @nikita-dev
      @nikita-dev Před 24 dny

      you would need to use a separate package to resize the image (on the frontend), or send it to a backend service that resizes the image.

  • @maxgriffiths6968
    @maxgriffiths6968 Před 25 dny

    This is perfect. Honestly

  • @harshjain3122
    @harshjain3122 Před 25 dny

    Great video, by the way, are you Indian or Russian? Great accent and a very soothing voice.

  • @DJ_Melech
    @DJ_Melech Před 27 dny

    anyone having trouble getting their Toast to pop up when an e-mail is sent?