- 25
- 499 087
Nikita Dev
United States
Registrace 26. 02. 2022
Helping others with fullstack development. React, Node, TypeScript, AWS and more!
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
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)
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 Dark Theme Toggle With Styled Components Tutorial
zhlédnutí 14KPřed 2 lety
React Dark Theme Toggle With Styled Components Tutorial
this video gives me the exploration about how seniors write code at scale
Awesome, You said hard topic like this very easy, Thanks brother
Thanks for the explaination
awesome! this explanation is the best out there! thanks man! instant subscriber here 🔥
Wow
Just discovered your channel. Really love your videos
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.
wow, Would appreciate if you can tech us how to add Lambda function for this
best of the best
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?
This would have been nore useful for me if it used standard html table markup instead of chakra components
Great video every minute of it was helpful! 👍
this is amazing. thanks for the tut. could you please show us how to host this using a vps(hostinger).
yes, I’m planning to make a video to dockerize this app and deploy it to the cloud
@@nikita-dev thank you so much
great thanks for sharing nikita
Bro we need this type of tutorial . Do more (just watched the intro and that's very promising)
take love bro
Thanks very much
How to add HTML and CSS??
this is great. However, it would have been better of you covered how you could create extra rows
9:02 i have a error like zip' is not recognized as an internal or external command
Please reply me
This is the most beautiful way i have seen 😮. Thanks so much.
How to enter data from the keyboard?
Great course! Simple and to-the-point, unlike others.
it works👍
Excellent explanation. thank you! <3
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
Would this be ok for something like a course platform? Wondering about performance and users having loading issues and encoding. 🙂
thank you!!
I wish you would explain rotation and zoom Because one gets confused in SetCanavasPreview
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.
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
Honestly I would recommend just using AWS SES or Resend
@@nikita-dev thanks nikita.
i got some problem implementing row selection with server side pagination and using tanstack table without typescript.Anyone wanna help ?
Thankssssssssssssssss
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?
Thanks
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?
Никит, спасибо большое за хорошее объяснение. Пережимать можно уже на бэке, например, с помощью sharp
Thanks, it helped
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?
is any one can download this video ? if yes i need how can i prevent this ?
Excellent explanation and very easy to understand..thank you
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)
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..
In the first form, what is the purpose of using handleBlur?
Great video. Thank you Nikita Dev!
great video\
how to resize the image?
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.
This is perfect. Honestly
Great video, by the way, are you Indian or Russian? Great accent and a very soothing voice.
Thank you! I’m Ukrainian
anyone having trouble getting their Toast to pop up when an e-mail is sent?