Complete Login/Signup MERN Stack | Mongo, Express, React and Node Authentication with Deployment

แชร์
ฝัง
  • เผยแพร่เมื่อ 26 ก.ย. 2024
  • Login and Signup using MERN Stack | Mongo, Express, React and Node Authentication with Deployment
    Github Link for Code: github.com/imr...
    MongoDB Cloud Video: • 🔴 Setup MongoDB on clo...
    Vercel : vercel.com/
    Linkedin: / imran-mind
    Twitter (X): / imran1mind
    Welcome to our comprehensive tutorial on implementing authentication in a MERN stack application! In this video, we will guide you through creating a complete login and signup system using MongoDB, Express.js, React.js, and Node.js. By the end of this tutorial, you will have a fully functional authentication system and understand how to deploy your application.
    What You Will Learn:
    Setting Up the Environment: Learn how to configure your development environment for the MERN stack.
    Backend with Node.js and Express: Set up a server using Node.js and Express, and connect to MongoDB.
    User Model and Routes: Create a user model with Mongoose and define authentication routes for login and signup.
    Password Hashing: Implement secure password hashing with bcrypt to protect user passwords.
    JWT Authentication: Generate and verify JSON Web Tokens (JWT) for user sessions.
    Frontend with React: Build a responsive user interface using React, with forms for login and signup.
    API Integration: Connect the React frontend with the Node.js backend through RESTful APIs.
    Error Handling and Validation: Implement robust error handling and form validation to enhance user experience.
    Deployment: Deploy your MERN stack application to a cloud platform (e.g., Heroku) and make it accessible online.
    Who Is This For?
    React Challenges - • 🚀 Countdown Timer -Rea...
    mern project,
    login signup mern stack,
    login signup mern,
    login register mern stack ,
    login register react js mongodb,
    login register react js,
    login register page in react js,
    login register,
    mern stack signup login app,
    mern stack project,
    mern stack signup login app,
    mern stack sign up,
    mern stack authentication,
    mern stack authentication jwt,
    mern stack auth,
    mern stack authentication project,
    mern stack authorization,
    mern stack auth project,
    mern stack auth app,
    mern stack auth0,
    mern stack authentication and authorization,
    mern stack user authentication ,
    mern stack jwt auth,
    mern stack project with jwt authentication,
    node js tutorial
    node js tutorial for beginners
    node js tutorial for beginners in hindi
    node js api tutorial
    node js rest api
    node js event loop
    how to create api in node js express
    node js api authentication with jwt
    nodejs architecture in hindi
    node js and express js interview questions
    node js and express js crash course
    node js and express tutorial for beginners
    node js and express js tutorial code step by step
    node js and express js tutorial with project
    node js and express js in one video
    node js and express js difference
    jwt authentication
    jwt authentication node js
    jwt token
    jwt architecture
    jwt token authentication web api
    jwt tutorial
    node js mongoose
    node js mongoose connection
    node js mongodb react
    node js mongoose express
    node js mongoose project
    node js mongoose tutorial
    node js mongoose schema
    node js mongoose update
    mongodb atlas tutorial
    file system in node js
    promise tutorial javascript
    async await
    validation in node js
    node js validate request body
    validate jwt token node js
    node js middleware
    node js middleware tutorial
    node js middleware jwt,
    how to deploy mern app on vercel,
    how to deploy mern app,
    authentication in node js,
    node js project,
    authentication node js,
    json web token authentication node js,
    node js authentication,
    login api in node js,
    node js jwt authentication,
    authentication and authorization in node js,
    nodejs jwt authentication mongodb,
    authentication in node js express,
    jwt authentication,
    jwt authentication node js mongodb,
    mern login and registration jwt,
    nodejs authentication and authorization,
    user authentication in react js,
    express api,
    json web token,
    jwt authentication node js react mongodb,
    what is jwt token authentication in hindi,
    login signup react js node js mongodb,
    how to connect mongodb with mongoose in vscode,
    mern auth,
    mern stack authentication,
    authentication in node js,
    error handling in express js,
    form validation in react js,
    heroku,
    how jwt works,
    how to deploy mern project on vercel,
    how to deploy react app on vercel,
    imran shaikh,
    mern stack for beginners,
    #NodeJS
    #Authentication
    #JWT
    #MongoDB
    #ExpressJS
    #WebDevelopment
    #ProgrammingTutorial
    #Coding
    #Security
    #APIDevelopment
    #JavaScript
    #JSONWebTokens
    #TechTutorial
    #BackendDevelopment
    #SoftwareDevelopment
    #NodeJSAPI
    #MongoDBTutorial
    #WebSecurity
    #DeveloperTips
    #LearnCoding
    #MERN #Authentication #NodeJS #ReactJS #MongoDB #ExpressJS #FullStackDevelopment #WebDevelopment #Deployment

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

  • @albasalb1406
    @albasalb1406 2 หลายเดือนก่อน +11

    I saw almost 5 videos from big famous youtube channels but none were able to clear this whole process .Thank you .

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

      Thanks for your compliment.
      I'm glad I could help you.
      Please share this video with needy people 🙏

  • @harshitjadaun-r5m
    @harshitjadaun-r5m 2 หลายเดือนก่อน +4

    imran bhai genuinely bol raha hoo , mere ko kahi se bhi authentication samjh nahi aa rahi thi ,or abhi is video ke baad me jwt authentication bhool nahi sakta , thank you .

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

      Ohh waw happy to hear that I could help you.pleease share to the needy people

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

      thankyou sir

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

    I watch multiple videos from other TH-cam channels but no one able to clear the content in better way. This video was really helpful. Thank you so much.

  • @akshatkumar5551
    @akshatkumar5551 4 วันที่ผ่านมา

    An amazing video, everything is quite detail, and there is also side by side demonstration of what is actually happening by each line of code.

    • @imranshaikh0404
      @imranshaikh0404  4 วันที่ผ่านมา

      Glad you liked it, please share this video.

  • @Dev-Phantom
    @Dev-Phantom หลายเดือนก่อน +2

    best ever explanation on backend part . Thanks for sharing such a wonderful content. on full stack

  • @ahmadanjum1816
    @ahmadanjum1816 29 วันที่ผ่านมา

    Bhaii videoo buht he help full thii mujhe error a gya tha project my apne persnal issue a gya tha to apki video dekhi to solve ho gya bhaii thank😍😍 uu allah pak ko asy he izat dy ameen god bless you brother

    • @imranshaikh0404
      @imranshaikh0404  29 วันที่ผ่านมา

      Thanks , Glad I could help you.

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

    Sucessfully deployed my mern application thankyou sir

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

    Imraan bhai thank you. Ye samjhne m bhut asani Hui aur iss project ne bhut saare confusion dur kar deye hai

    • @imranshaikh0404
      @imranshaikh0404  2 หลายเดือนก่อน +1

      Glad you liked it, Stay tuned for more interesting projects

  • @gomennasaiaibo
    @gomennasaiaibo 3 หลายเดือนก่อน +1

    THIS VIDEO WAS REALLY HELPFUL
    I TOOK A COUPLE OF HOURS TO FOLLOW ALONG AND FINALLY DEPLOYED IT ON VERCEL
    YOUR TEACHING IS REALLY GOOD
    HOPE YOU MAKE A VIDEO ON NEXT JS AS WELL
    I FOUND YOUR CHANNEL JUST NOW, I'LL CHECK THEM OUT

    • @imranshaikh0404
      @imranshaikh0404  3 หลายเดือนก่อน +2

      Thank you so much for your kind words! I'm thrilled to hear that you found the video helpful and successfully deployed your app on Vercel. 🎉 Your feedback means a lot to me, and I'll definitely consider making a video on Next.js in the future. Stay tuned, and happy coding! 😊🚀

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

    The way imran sir explain concept is awesome.

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

      Thanks, Glad you liked it.

  • @SanthoshS-w5m
    @SanthoshS-w5m 10 วันที่ผ่านมา

    Thank You so much bhai ... This video helps me to learn about jwt clearly .. here after i will be a subscriber of your channel

  • @AllInOne-iy5wg
    @AllInOne-iy5wg 2 หลายเดือนก่อน

    such a helpful tutorial.. keep Grinding.. Thanks for guidance till last.. and you are real gem. more power to you.

  • @Dev-Phantom
    @Dev-Phantom หลายเดือนก่อน +1

    it was so interesting while doing this project.

  • @cjonyoutube3011
    @cjonyoutube3011 6 วันที่ผ่านมา

    Awesome Video, Keep going BHAI

  • @alishoh2108
    @alishoh2108 14 ชั่วโมงที่ผ่านมา +1

    Bro i will try this, your idea is like mine and i happy to find this thanks bro

  • @Vaibhav-uf2vi
    @Vaibhav-uf2vi 10 วันที่ผ่านมา +1

    kya bat hai sir 👌

  • @VivoMobile-yg9zh
    @VivoMobile-yg9zh หลายเดือนก่อน +1

    Thanks Sir

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

    God bless you. Thank you 🙇❤

  • @Vaibhav-uf2vi
    @Vaibhav-uf2vi 10 วันที่ผ่านมา +1

    good video 👍

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

    Loved the tutorial. Thank you. Hoping for more such content in future.

  • @el-dorado7358
    @el-dorado7358 26 วันที่ผ่านมา

    sir please explain vercel.json , routes -> "dest": "index.js"

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

    backend host karte time The package `@versel/node` is not published on the npm registry yeh error arra

  • @MRROBOT-fc5ny
    @MRROBOT-fc5ny 2 หลายเดือนก่อน

    thanks you so much sir u saved my time

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

      Glad you liked it, Stay tuned for more interesting projects

  • @tusharsingh1915
    @tusharsingh1915 10 วันที่ผ่านมา

    Good content, keep i tup

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

    Sir can you make videos with typescript also. 🙏

  • @nitishyadav1867
    @nitishyadav1867 26 วันที่ผ่านมา

    Bhai u are awesome.

  • @arthkulkarni5306
    @arthkulkarni5306 25 วันที่ผ่านมา

    thank you sir, great video

  • @satishk1770
    @satishk1770 2 หลายเดือนก่อน +1

    Frontend System Design Questions ( Nested Comments ) react js please 🙏🙏🙏🙏🙏🙏🙏🙏🙏

  • @nilesh6439
    @nilesh6439 3 หลายเดือนก่อน +2

    Sir is this new series like MERN series?

  • @user-uc7nb5ml6j
    @user-uc7nb5ml6j 2 หลายเดือนก่อน

    You are a Muslim and u are using 'Ram" Happy to see this 😘🥳

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

    Next js me bhi banaiye next tutorial.

  • @PrashantRajput-c3b
    @PrashantRajput-c3b 27 วันที่ผ่านมา

    Thankyou Sir..❤

  • @MindsetMastery550
    @MindsetMastery550 25 วันที่ผ่านมา

    thank u sir

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

    43:28 FrontEnd starts

  • @learncodingg664
    @learncodingg664 11 วันที่ผ่านมา

    thank

  • @yogesh__tiwari_cs22
    @yogesh__tiwari_cs22 26 วันที่ผ่านมา

    deployment ka baad jwt token local storage me show hoga ?

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

    Sir but ek problem hai aapki .env file jisme mongodb cloud ka password and URL dono hai, vo to github pe push hogayi hai , ye to bad practice hai na?

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

      Yeah I know but l later I have deleted, anyhow i have changed mongodb password later on.

  • @Shorya_verma86
    @Shorya_verma86 24 วันที่ผ่านมา

    GOOD

  • @pritisharma9951
    @pritisharma9951 3 หลายเดือนก่อน +4

    *sir koi mern project banwa do na thoda accha bada jo resume me show kar sake or samaz samaz kar pura bana sake dekh dekh kar aesa koi bhi videos nhi h accha yt pe...aap meran ka 1 bhut accha or thoda bada sa project banao jisme a to z sari chije ho har type ki Library or jab library use karna ho tabhi install Karo bata kar pehle se na karo install is se understanding acchi hoti h hamari or har 1 chij acche se clear Karo hume samaz aaye har 1 chij k aesa kyu kese Kiya like spoon feeding please sir aese project ki need h hume❤*

    • @imranshaikh0404
      @imranshaikh0404  3 หลายเดือนก่อน +2

      Sure

    • @pritisharma9951
      @pritisharma9951 3 หลายเดือนก่อน +1

      @@imranshaikh0404 thankyou sir ummid h ki aap aaj kal me hi uspe kam shuruaat karenge

  • @najafshaikh1976
    @najafshaikh1976 27 วันที่ผ่านมา

    Great✨

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

    mene apki git clone ki hai but ye mere data base men ni jaa raha mene url bhi change ki hai please guide me asap

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

      Can you please pin point your issue

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

    Nice 👍

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

    bHai Hindi + English Mix kar di aapne , explain ke time english me and summary time hindi me ,
    hindi me hi bna dete pura ,

  • @tilakbahadur9634
    @tilakbahadur9634 24 วันที่ผ่านมา

    Can you make video on "forgot password"

    • @imranshaikh0404
      @imranshaikh0404  24 วันที่ผ่านมา

      Thanks for you feedback, Noted.

  • @Dev-Phantom
    @Dev-Phantom หลายเดือนก่อน +1

    cool

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

    joi not working

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

    please drawn and explain on white board too

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

      Thanks for your feedback 😀 👍

  • @VIJAYBratPandey
    @VIJAYBratPandey 3 หลายเดือนก่อน +1

    mern pe or video sir agla koi task manager type project

    • @imranshaikh0404
      @imranshaikh0404  3 หลายเดือนก่อน +1

      Thanks for your feedback

  • @suvrajitmondal2325
    @suvrajitmondal2325 20 วันที่ผ่านมา

    Is the token http only?

    • @imranshaikh0404
      @imranshaikh0404  20 วันที่ผ่านมา

      No, that's a different approach

    • @suvrajitmondal2325
      @suvrajitmondal2325 20 วันที่ผ่านมา

      @@imranshaikh0404 why and how? Please tell me.

  • @coding24335
    @coding24335 3 หลายเดือนก่อน +1

    Make a big project for us

  • @AdityaKumar-yq3ub
    @AdityaKumar-yq3ub หลายเดือนก่อน

    bahut time lag code krne me

  • @Dev-Phantom
    @Dev-Phantom หลายเดือนก่อน

    bbest lecture

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

    23:34 iski ma 🤣