Multi Role Login using Node JS, Express, MySQL, and React JS (Complete Tutorial)

In this video you will learn how to create a multi-role or multi-user login using node js, express, mysql, and react js.
Not only that,
You will also learn how to set access rights based on the logged in user or better known as RBAC (Role-Based Access Control).
Apart from that, you will also learn how to keep users logged in when the page reloads without having to save user info in LocalStorage, SessionStorage, or Cookies.
So that our application will be safe from XSS (Cross-Site Scripting) and CSRF (Cross-Site Request Forgery) attacks.
And many more...
Buy Me a Coffee ☕☕☕→ trakteer.id/codermedia
Chapters:
0:00 Intro
2:01 Backends & Dependencies
3:56 index.js and .env
10:02 Databases and Connections
11:35 Models and Associations
17:36 Setup Controllers Files
19:40 Setup File Routes
24:21 Database Sync
26:29 Users Controller
43:11 Auth Controller
51:19 AuthRoute Routing
56:27 Connect Session Sequelize
1:00:20 AuthUser Middleware & Protected Route
1:08:33 Products Controller
1:36:25 Create React App + Redux Toolkit
1:37:33 Install Dependencies
1:38:41 Clean Up Files
1:41:05 Components, Pages, Routing
2:21:20 Axios Default Credentials
2:22:20 authSlice Redux
2:24:51 Login AsyncThunk
2:32:48 Login Components
2:43:05 Get User Login & Logout
2:45:36 Protected Dashboard
2:53:45 Protected All Pages
3:02:21 Product List
3:07:47 Delete Product
3:11:40 Add New Product
3:17:50 Edit Product
3:23:11 User List & Delete User
3:27:20 Add New User
3:33:30 Update User
3:40:41 Outro
SourceCode:
Backend → github.com/mfikricom/Login-Mu...
Frontend → github.com/mfikricom/Login-Mu...

Пікірлер: 480

  • @danielfebrian61
    @danielfebrian6110 ай бұрын

    very helpful! rapi banget codingannya bang, mudah dibaca. penjelasan juga mudah dipahami jadi nambah ilmu baru. keep up the good work!

  • @danyliekkusuma4574
    @danyliekkusuma4574 Жыл бұрын

    nah ketemu juga video yg bikin pengen belajar reactjs sama express. semangat terus mas ngontennya dan berbagi ilmunya

  • @ferdiaxis1819
    @ferdiaxis1819 Жыл бұрын

    alhamdulillah akhirnya kelar ngikutin tutorial ini, walau banyak kesalahan untung bisa membaca dan mengatasi hehe

  • @quantum1010
    @quantum1010 Жыл бұрын

    Hebat.... layak untuk dijadikan panutan....

  • @RizaHariati
    @RizaHariatiАй бұрын

    Selama ini saya selalu ragu dengan cara kerja Middleware, melalui tutorial anda, AKHIRNYA saya bisa mengerti maksudnya. Terimakasih.

  • @AdamerzChannel
    @AdamerzChannel Жыл бұрын

    Tq banget bang tutorial nya... Smoga makin skukses dan mnjadi amal jariyah ya bang

  • @kirin2684
    @kirin2684 Жыл бұрын

    Akhirnya bang update lagi ini dia yg saya tunggu²

  • @nuramaliaputri9524
    @nuramaliaputri952411 ай бұрын

    thank you banget kak tutorialnya!! sangat membantu banget untuk saya yang masih pemula coba buat project dengan react

  • @RizaHariati
    @RizaHariati28 күн бұрын

    Keren! Sangat jelas. Terimakasih!

  • @budi6228
    @budi6228 Жыл бұрын

    Ijin like dan komen om 😊. ا لحمدلله Terimakasih atas ilmunya.

  • @rizkywahyudi-mv9ey
    @rizkywahyudi-mv9ey Жыл бұрын

    akhirnya nemu ilmu paket komplit .. ijin subscribe bang😇

  • @marsania2339
    @marsania2339 Жыл бұрын

    Terimakasih, mudah dimengerti... 👍

  • @arashramy8903
    @arashramy8903 Жыл бұрын

    very good myfreind this combinations are perfect and vary usefule that there is no videos related in youtube keep going thanks

  • @soegaraedy
    @soegaraedy Жыл бұрын

    Pada sisi backend Controllers Users.js perlu ditambah validasi: if(password === "" || password === null) return res.status(404).json({msg: "Empty Password"});

  • @Metaternal_UNM

    @Metaternal_UNM

    10 ай бұрын

    nice

  • @salpinnnn
    @salpinnnnАй бұрын

    thanks banget bang, kebantu banget buat ngerjain project tugas akhir

  • @helmi9159
    @helmi9159 Жыл бұрын

    Bang sangat bermanfaat banget, mkasih bnyak bang ilmunya, bkin yg lebih kompleks lagi bang dari projek ini

  • @alanaronggear6025
    @alanaronggear6025 Жыл бұрын

    makasi bang untuk ilmunya salam dari negeri tertinggal Papua

  • @syahidsyah9285
    @syahidsyah9285 Жыл бұрын

    makasih banyak abang,, semoga berkah buat abang. maju terus bang !

  • @adepermana399
    @adepermana399 Жыл бұрын

    keren makasih banyak bang tutrorialnya, sekaligus tutorial pasangin pagination dong bang, digabungin sama yang kemarin gabisa gagal mulu hehe

  • @dhanielbawias9933
    @dhanielbawias9933 Жыл бұрын

    Mantap bang🔥👍 Ditunggu versi e-commercer bang🙏

  • @angsa_77
    @angsa_779 ай бұрын

    thanks mas materinya sangat mudah dipahami

  • @seputarboruto
    @seputarboruto Жыл бұрын

    Mantap bg, lanjut tutor express js , react nya.

  • @ipsurbakti1006
    @ipsurbakti1006 Жыл бұрын

    Terimakasih banyak bang.. jazakalloh khoiron katsiro.. sesuai request saya kemarin.. 🙏🙏

  • @CoderMediax

    @CoderMediax

    Жыл бұрын

    Sama-sama mas

  • @zumardirahman925
    @zumardirahman925 Жыл бұрын

    terimakasih banyak, sangat menolong masa depan saya . izin mengikuti ilmu ini. semoga berkah bang fikri

  • @CoderMediax

    @CoderMediax

    Жыл бұрын

    sama-sama mas

  • @dandanismail
    @dandanismail Жыл бұрын

    Mas terimakasih banyak yaaa, semoga apa yg anda bagikan menjadi berkah

  • @CoderMediax

    @CoderMediax

    Жыл бұрын

    Amin

  • @soegaraedy
    @soegaraedy Жыл бұрын

    Alhamdulillah, tutorial yg membantu banget, Empat Jam yang Keren abiss. Terima kasih bang.

  • @CoderMediax

    @CoderMediax

    Жыл бұрын

    sama-sama

  • @dashacantika1470
    @dashacantika1470 Жыл бұрын

    Ni orang pro banget..😯

  • @andriksuprayitno3139
    @andriksuprayitno3139 Жыл бұрын

    Gercep lah.. gasss losss.

  • @ghost32bit
    @ghost32bit Жыл бұрын

    tutor nya mantep mas fikri 👍👍

  • @allone258
    @allone258 Жыл бұрын

    yang ditunggu, terimakasih bang

  • @CoderMediax

    @CoderMediax

    Жыл бұрын

    Sama-sama

  • @bakulimpian8815
    @bakulimpian8815 Жыл бұрын

    Super keren bang, terima kasih banyak bang 🎉

  • @malfazakki1803
    @malfazakki18039 ай бұрын

    Terimakasih mas Fikri!!🙏🙏

  • @nandopookey9195
    @nandopookey9195 Жыл бұрын

    wiss keren parah, terima kasih mas. ilmunya sangat bermanfaat, terima kasih sudah berbagi

  • @CoderMediax

    @CoderMediax

    Жыл бұрын

    Sama-sama mas

  • @wongmotolink3646
    @wongmotolink3646 Жыл бұрын

    sangat berkualitas materinya

  • @iwanhermawan4407
    @iwanhermawan4407 Жыл бұрын

    dr sekian bayak tutor yang ini yang masuk ke otak ...nakasih bang semoga di lancarkan dari semua urusan...sehat selalu bang

  • @CoderMediax

    @CoderMediax

    Жыл бұрын

    Amin

  • @doraemon743

    @doraemon743

    Жыл бұрын

    @@CoderMediax bang, ada kontak? saya download script mschool tapi pas login admin tetep dihalaman admin saja tidak mau masuk, bisa fix bang? nnt saya bayar gpp.

  • @azizalfauzi9420
    @azizalfauzi9420 Жыл бұрын

    Luar biasa , terimakasih mas fikri atas kontennya 👍💯

  • @CoderMediax

    @CoderMediax

    Жыл бұрын

    Sama-sama mas

  • @lucaboscolo5410
    @lucaboscolo5410 Жыл бұрын

    Thank you so much for this video! I have been looking for something like this for a long time!! I have a question for you, can you please help me? When I update the price of a product, instead of changing the previous price with the new price I would like to increase and decrease the previous price. So that newPrice = prevPrice +/- submittedValue. How can I obtain this result?

  • @MizuGoT
    @MizuGoT9 ай бұрын

    udah mulai paham bagaimana konsep login , ribet juga ya hahah

  • @andre-wv9eg
    @andre-wv9eg5 ай бұрын

    Terimakasih bang tutorialnya semoga abang sehat selalu bahagia selalu+duit banyak bang amin😊

  • @nun98
    @nun98 Жыл бұрын

    Bang full tutorial yg ada inputan date sama time crudnya 🙏🏻

  • @muhajirajir5238
    @muhajirajir5238 Жыл бұрын

    wah mantabs bang dah solve, jalan,,terimakasih ya...

  • @muhajirajir5238

    @muhajirajir5238

    Жыл бұрын

    Saya mau koneksiin ke modul jwt untuk frontendmya masih eror bang...hehhe..

  • @bakulimpian8815
    @bakulimpian8815 Жыл бұрын

    Ijin tanya bang, cara upload frondend ke shared hosting gimana bang? Atau harus pakai vps?

  • @hafidnurfirmansyah2839
    @hafidnurfirmansyah2839 Жыл бұрын

    Mantap maseeh

  • @mdsafikulislam7430
    @mdsafikulislam7430 Жыл бұрын

    Thank you so much. Love & Respect from Bangladesh!

  • @CoderMediax

    @CoderMediax

    Жыл бұрын

    You are welcome

  • @yogidwitama2480
    @yogidwitama2480 Жыл бұрын

    ntaps bet bang lengkap bener

  • @rickytv7877
    @rickytv78778 ай бұрын

    Makasih bang, suara mu kayak rocky gerung , keren

  • @jokomaulana3513
    @jokomaulana3513 Жыл бұрын

    Memang terbaik!

  • @CoderMediax

    @CoderMediax

    Жыл бұрын

    Terima kasih

  • @martinpasaribu4864
    @martinpasaribu48646 ай бұрын

    Terimakasih bang bantunya tutorial

  • @danitakeuchi9221
    @danitakeuchi9221 Жыл бұрын

    Luar biasa mas 👍🏻👍🏻👍🏻

  • @CoderMediax

    @CoderMediax

    Жыл бұрын

    Terima kasih mas

  • @chekgue
    @chekgue Жыл бұрын

    Mantep bang tutorial'a, mudah d mengerti penjelasan'a...tambahin notif saat hapus data'a gimana bang? jd saat hapus data muncul notif dulu

  • @wahyufirman300
    @wahyufirman300 Жыл бұрын

    Sumpah keren banget , Terimakasih banyak bang

  • @CoderMediax

    @CoderMediax

    Жыл бұрын

    Sama-sama

  • @mygameplayone
    @mygameplayone5 ай бұрын

    tengkyu bg, auto subs

  • @riyadhuljannah
    @riyadhuljannah Жыл бұрын

    Mantap ini Suhunya Suhu Tutor..detail dan sabar...klo boleh minta kontaknya..sy mau perdalam PerJavaan..Mahar bisa diatur..

  • @mulyanasantosa7783
    @mulyanasantosa7783 Жыл бұрын

    bang saya nemukan error ini di authSlice "redux.js:426 Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers."

  • @dandysyahputra2413
    @dandysyahputra241311 ай бұрын

    Thankyou banget bang tutorialnya sangat mencerahkan, Mau nanya bang, saat send request menggunakan rest client, itu terjadi error : read ECONNRESET => ini juga terjadi hal yang sama saat saya pakai postman, Server running, db juga running bang. Mohon pencerahannya, terimakasih 🙏

  • @user-rg2yl8en8s
    @user-rg2yl8en8s8 ай бұрын

    Good day sir. I have followed through your videos and made lots of notes. I must say I have learnt a lot and very grateful. I successfully managed to deploy the app on netlify for frontend and railway for backend. The app works well on normal browsers, e.g chrome and Android devices. However, the "get" request specifically the "me" function when logging in yields a 401 error unauthorized when using a mobile browser like Samsung internet Explorer or safari and Chrome on Apple mobile device. Any reason that the app setup might not be compatible with mobile browsers or Apple mobile devices?

  • @tiktokcruel4202
    @tiktokcruel4202 Жыл бұрын

    bagus banget bang tutor nya

  • @aqmalcode9563
    @aqmalcode9563 Жыл бұрын

    mantap bang.. semua penjelesan sangat lengkap... makasih kapan kapan bikin versi nextjs fullstack nya bang gak pake express

  • @CoderMediax

    @CoderMediax

    Жыл бұрын

    Tunggu Aja!

  • @foradev
    @foradev Жыл бұрын

    bang bikin versi mongo db nya, emang the best ini cahnnel

  • @mrfirstname578
    @mrfirstname578 Жыл бұрын

    kalau node js pakai session bisa gak login di android java/kotlin sama bisa dipakai di load balancer?

  • @azhamalbarrasyid9012
    @azhamalbarrasyid9012 Жыл бұрын

    kereenn videonya, sangat bermanfaat. izin bertnya, bagaimana caranya mengubah dan menambah colum pada model tabel yang sudah ada ?

  • @CoderMediax

    @CoderMediax

    Жыл бұрын

    tinggal tambahkan fieldnya di model, kemudian jalankan fungsi sync() dengan menambahkan force: true Seperti ini: sync({ force: true });

  • @azhamalbarrasyid9012

    @azhamalbarrasyid9012

    Жыл бұрын

    @@CoderMediax makasihh bang🙏

  • @takayumaja9438
    @takayumaja9438 Жыл бұрын

    makasih bang tutorialnya. Apakah nggak ada lanjutan deploy untuk project ini bang?

  • @mryanrizky
    @mryanrizky11 ай бұрын

    auto subs, I need it ao much

  • @soundrecord2159
    @soundrecord215911 ай бұрын

    hallo kak, makasih kak atas pembelajarannya saya mau tanya kak, aplikasi saya jalan dengan tutorial kakak, tapi jika saya mau login di PC lain dengan IP Local nya, gagal login kak, bisa informasinya kak?

  • @danyrahmansyah7066
    @danyrahmansyah7066 Жыл бұрын

    Terimakasih banyak ilmunya

  • @CoderMediax

    @CoderMediax

    Жыл бұрын

    Sama-sama

  • @fajaragungnugroho6914
    @fajaragungnugroho6914 Жыл бұрын

    bang fikri, ketika di deploy di netlify/vercel kok gak jalan ya login nya? padahal di local lancar

  • @taufanaziesamudra8325
    @taufanaziesamudra8325 Жыл бұрын

    Tutorial yang mantap, tapi maaf mas, kalo bisa videonya dibagi per-part, agar penotonn tidak bosn

  • @rhidayscrew1798
    @rhidayscrew1798 Жыл бұрын

    bang request cara upload project nya ke hosting dong, saya terkendala soal nya bwt upload ke hosting cara setting di env dan running nya.

  • @naxiryu1425
    @naxiryu1425 Жыл бұрын

    Mantap bang, next bikin next js dong bang 🙏

  • @cangunduz75
    @cangunduz75 Жыл бұрын

    Thank you !

  • @Slime-en6nv
    @Slime-en6nv Жыл бұрын

    Kasih Tutor juga Cara deploy ke cpanel bang kalo bisa 🙏

  • @bakulimpian8815
    @bakulimpian8815 Жыл бұрын

    Bang request extjs plus codeigniter atau laravel sebagai backend

  • @hermansyam
    @hermansyam10 ай бұрын

    Bagaimana role aksesnya dibatasi hanya bisa view, add, edit atau delete terhadap suatu menu atau komponen...🙏

  • @jatirahardio3727
    @jatirahardio37276 ай бұрын

    mas diakhir video ketika update user kalo di saya harus menyertakan password dan confpassword, sedangkan di video yang mas tunjukkan itu tidak pakai. padahal saya sudah sama persis mengerjakan coding seperti yang mas tunjukan di video. ada saran atau masukan mas?

  • @kodokpink6169
    @kodokpink6169 Жыл бұрын

    Sangat mencerahkan.

  • @dqwira
    @dqwira Жыл бұрын

    terimakasih tutorialnya bang, ada komunitasnya gak bang

  • @nurrahmad858
    @nurrahmad858 Жыл бұрын

    paket lengkap ini namyanya bang, keren abis. btw untuk rekam layarnya pakai aplikasi apa bang?

  • @CoderMediax

    @CoderMediax

    Жыл бұрын

    Pake OBS Studio

  • @EkoAgustiawan
    @EkoAgustiawan5 ай бұрын

    suaranya mirip sama parsinta bg 😄

  • @amineedderraz1763
    @amineedderraz17632 ай бұрын

    Thank you so much for this project !

  • @apiprahmansyahidan9502
    @apiprahmansyahidan9502 Жыл бұрын

    bang cookie -parser expressjs itu gk berfungsi clearCookienya kalo udah di hosting, mohon bantuannya bang

  • @BRAJABUANAWIDODO
    @BRAJABUANAWIDODO4 ай бұрын

    Bang bisa gag kita buat user dan pasword nya menggunakan excel biar bisa bikin nya sekaligus banyak , dan langsung apload di admin nya ....menggunakan apa ya bang

  • @VvazoLsky
    @VvazoLsky Жыл бұрын

    bang fikri isdebest cokk

  • @sendymaulana1919
    @sendymaulana19193 ай бұрын

    semua berjalan lancar pada saat di localhost tapi kenapa pada saat sudah di upload ke hosting, api/be berjalan lancar tapi untuk di frontend pada saat login berhasil tapi di kembalikan ke halaman login kembali karena pada saat get product/ get me (401 Unauthorized), tapi login berhasil. mohon arahan nya hehe

  • @mdsafikulislam7430
    @mdsafikulislam7430 Жыл бұрын

    Please make JWT Authentication in this existing project

  • @adriannomarwan
    @adriannomarwan Жыл бұрын

    bang mau nanya, saya upload ke hosting cpanel error require of es module lsnode.js not supported pdhl node version nya sama

  • @danialrasyid-pf1of
    @danialrasyid-pf1of Жыл бұрын

    bang izin mau tanyaa itu waktu saya di bagian frontend nah itu sudah saya buat sampai login awalny berhasil bang sampe keluarin messagenya dan berhasil masuk nah setelah itu ntah terpencet atau ada yang terhapus itu jadi kek gabisa bang cuman menampilkan bacground react biru tanpa erorr tapi tidak memunculkan code frontendnya gituu bangg bisa kasih saran kah 🙏

  • @kalinggapadelmuhamad4986
    @kalinggapadelmuhamad4986 Жыл бұрын

    keren bg

  • @folksfenmin
    @folksfenmin3 ай бұрын

    thanks bang

  • @the_doctor4616
    @the_doctor461610 ай бұрын

    Mau nanya saya sudah mengikuti tutorial ini tapi pas saya lihat tabel session kok banyak banget emang itu normal atau gimana karena saya pikir session akan digenerate saat login saja bukan saat request ke url.

  • @nun98
    @nun98 Жыл бұрын

    Bang tutorial ini udah di up di blog belum ? 🙏🏻 kalo belum ditunggu bang.. terimakasih

  • @genosthegreat7870
    @genosthegreat7870 Жыл бұрын

    Thankssss a lot

  • @MDIbrahim-zw1lz
    @MDIbrahim-zw1lz6 ай бұрын

    hi, its very helpful tutorial. could you please add database sql files.. I think its missing in the github as well .. thanks

  • @intanrosiana
    @intanrosiana Жыл бұрын

    bang bikin video tutorial login multi role react bootstrap pliss😊

  • @ainunnafiah3806
    @ainunnafiah3806Ай бұрын

    bang request frontendnya ga pakai react tapi pakai ejs boleh ta?

  • @heybradds
    @heybradds Жыл бұрын

    Mas, waktu async DB terjadi error. Esm loader

  • @ejkk3171
    @ejkk3171 Жыл бұрын

    Bikin express mysql next js dong bang 🙏🙏🙏

  • @khai3891
    @khai3891Ай бұрын

    kalau tanpa install orm seperti sequelize apq yang terjadi bg?

  • @benson2234
    @benson22348 ай бұрын

    Bang mau nanya pas login component itu pas masuk browser trus ketik email Ama sandi UD benar tapi dia ga nav ke dashboard diconsole TDK ada error juga kira" knp bg ?

  • @MrEgadwi
    @MrEgadwi Жыл бұрын

    om adakah tutorial untuk deploy agar bisa di akses public ?

  • @syariful_umam
    @syariful_umam Жыл бұрын

    Kalo kita buat CRUD productnya pake REDUX. Itu di slicenya kita tambahin createEntityAdapter ya biar lebih mudah manipulasi data di redux?

  • @CoderMediax

    @CoderMediax

    Жыл бұрын

    yap benar sekali.