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
very helpful! rapi banget codingannya bang, mudah dibaca. penjelasan juga mudah dipahami jadi nambah ilmu baru. keep up the good work!
nah ketemu juga video yg bikin pengen belajar reactjs sama express. semangat terus mas ngontennya dan berbagi ilmunya
alhamdulillah akhirnya kelar ngikutin tutorial ini, walau banyak kesalahan untung bisa membaca dan mengatasi hehe
Hebat.... layak untuk dijadikan panutan....
Selama ini saya selalu ragu dengan cara kerja Middleware, melalui tutorial anda, AKHIRNYA saya bisa mengerti maksudnya. Terimakasih.
Tq banget bang tutorial nya... Smoga makin skukses dan mnjadi amal jariyah ya bang
Akhirnya bang update lagi ini dia yg saya tunggu²
thank you banget kak tutorialnya!! sangat membantu banget untuk saya yang masih pemula coba buat project dengan react
Keren! Sangat jelas. Terimakasih!
Ijin like dan komen om 😊. ا لحمدلله Terimakasih atas ilmunya.
akhirnya nemu ilmu paket komplit .. ijin subscribe bang😇
Terimakasih, mudah dimengerti... 👍
very good myfreind this combinations are perfect and vary usefule that there is no videos related in youtube keep going thanks
Pada sisi backend Controllers Users.js perlu ditambah validasi: if(password === "" || password === null) return res.status(404).json({msg: "Empty Password"});
@Metaternal_UNM
10 ай бұрын
nice
thanks banget bang, kebantu banget buat ngerjain project tugas akhir
Bang sangat bermanfaat banget, mkasih bnyak bang ilmunya, bkin yg lebih kompleks lagi bang dari projek ini
makasi bang untuk ilmunya salam dari negeri tertinggal Papua
makasih banyak abang,, semoga berkah buat abang. maju terus bang !
keren makasih banyak bang tutrorialnya, sekaligus tutorial pasangin pagination dong bang, digabungin sama yang kemarin gabisa gagal mulu hehe
Mantap bang🔥👍 Ditunggu versi e-commercer bang🙏
thanks mas materinya sangat mudah dipahami
Mantap bg, lanjut tutor express js , react nya.
Terimakasih banyak bang.. jazakalloh khoiron katsiro.. sesuai request saya kemarin.. 🙏🙏
@CoderMediax
Жыл бұрын
Sama-sama mas
terimakasih banyak, sangat menolong masa depan saya . izin mengikuti ilmu ini. semoga berkah bang fikri
@CoderMediax
Жыл бұрын
sama-sama mas
Mas terimakasih banyak yaaa, semoga apa yg anda bagikan menjadi berkah
@CoderMediax
Жыл бұрын
Amin
Alhamdulillah, tutorial yg membantu banget, Empat Jam yang Keren abiss. Terima kasih bang.
@CoderMediax
Жыл бұрын
sama-sama
Ni orang pro banget..😯
Gercep lah.. gasss losss.
tutor nya mantep mas fikri 👍👍
yang ditunggu, terimakasih bang
@CoderMediax
Жыл бұрын
Sama-sama
Super keren bang, terima kasih banyak bang 🎉
Terimakasih mas Fikri!!🙏🙏
wiss keren parah, terima kasih mas. ilmunya sangat bermanfaat, terima kasih sudah berbagi
@CoderMediax
Жыл бұрын
Sama-sama mas
sangat berkualitas materinya
dr sekian bayak tutor yang ini yang masuk ke otak ...nakasih bang semoga di lancarkan dari semua urusan...sehat selalu bang
@CoderMediax
Жыл бұрын
Amin
@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.
Luar biasa , terimakasih mas fikri atas kontennya 👍💯
@CoderMediax
Жыл бұрын
Sama-sama mas
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?
udah mulai paham bagaimana konsep login , ribet juga ya hahah
Terimakasih bang tutorialnya semoga abang sehat selalu bahagia selalu+duit banyak bang amin😊
Bang full tutorial yg ada inputan date sama time crudnya 🙏🏻
wah mantabs bang dah solve, jalan,,terimakasih ya...
@muhajirajir5238
Жыл бұрын
Saya mau koneksiin ke modul jwt untuk frontendmya masih eror bang...hehhe..
Ijin tanya bang, cara upload frondend ke shared hosting gimana bang? Atau harus pakai vps?
Mantap maseeh
Thank you so much. Love & Respect from Bangladesh!
@CoderMediax
Жыл бұрын
You are welcome
ntaps bet bang lengkap bener
Makasih bang, suara mu kayak rocky gerung , keren
Memang terbaik!
@CoderMediax
Жыл бұрын
Terima kasih
Terimakasih bang bantunya tutorial
Luar biasa mas 👍🏻👍🏻👍🏻
@CoderMediax
Жыл бұрын
Terima kasih mas
Mantep bang tutorial'a, mudah d mengerti penjelasan'a...tambahin notif saat hapus data'a gimana bang? jd saat hapus data muncul notif dulu
Sumpah keren banget , Terimakasih banyak bang
@CoderMediax
Жыл бұрын
Sama-sama
tengkyu bg, auto subs
Mantap ini Suhunya Suhu Tutor..detail dan sabar...klo boleh minta kontaknya..sy mau perdalam PerJavaan..Mahar bisa diatur..
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."
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 🙏
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?
bagus banget bang tutor nya
mantap bang.. semua penjelesan sangat lengkap... makasih kapan kapan bikin versi nextjs fullstack nya bang gak pake express
@CoderMediax
Жыл бұрын
Tunggu Aja!
bang bikin versi mongo db nya, emang the best ini cahnnel
kalau node js pakai session bisa gak login di android java/kotlin sama bisa dipakai di load balancer?
kereenn videonya, sangat bermanfaat. izin bertnya, bagaimana caranya mengubah dan menambah colum pada model tabel yang sudah ada ?
@CoderMediax
Жыл бұрын
tinggal tambahkan fieldnya di model, kemudian jalankan fungsi sync() dengan menambahkan force: true Seperti ini: sync({ force: true });
@azhamalbarrasyid9012
Жыл бұрын
@@CoderMediax makasihh bang🙏
makasih bang tutorialnya. Apakah nggak ada lanjutan deploy untuk project ini bang?
auto subs, I need it ao much
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?
Terimakasih banyak ilmunya
@CoderMediax
Жыл бұрын
Sama-sama
bang fikri, ketika di deploy di netlify/vercel kok gak jalan ya login nya? padahal di local lancar
Tutorial yang mantap, tapi maaf mas, kalo bisa videonya dibagi per-part, agar penotonn tidak bosn
bang request cara upload project nya ke hosting dong, saya terkendala soal nya bwt upload ke hosting cara setting di env dan running nya.
Mantap bang, next bikin next js dong bang 🙏
Thank you !
Kasih Tutor juga Cara deploy ke cpanel bang kalo bisa 🙏
Bang request extjs plus codeigniter atau laravel sebagai backend
Bagaimana role aksesnya dibatasi hanya bisa view, add, edit atau delete terhadap suatu menu atau komponen...🙏
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?
Sangat mencerahkan.
terimakasih tutorialnya bang, ada komunitasnya gak bang
paket lengkap ini namyanya bang, keren abis. btw untuk rekam layarnya pakai aplikasi apa bang?
@CoderMediax
Жыл бұрын
Pake OBS Studio
suaranya mirip sama parsinta bg 😄
Thank you so much for this project !
bang cookie -parser expressjs itu gk berfungsi clearCookienya kalo udah di hosting, mohon bantuannya bang
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
bang fikri isdebest cokk
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
Please make JWT Authentication in this existing project
bang mau nanya, saya upload ke hosting cpanel error require of es module lsnode.js not supported pdhl node version nya sama
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 🙏
keren bg
thanks bang
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.
Bang tutorial ini udah di up di blog belum ? 🙏🏻 kalo belum ditunggu bang.. terimakasih
Thankssss a lot
hi, its very helpful tutorial. could you please add database sql files.. I think its missing in the github as well .. thanks
bang bikin video tutorial login multi role react bootstrap pliss😊
bang request frontendnya ga pakai react tapi pakai ejs boleh ta?
Mas, waktu async DB terjadi error. Esm loader
Bikin express mysql next js dong bang 🙏🙏🙏
kalau tanpa install orm seperti sequelize apq yang terjadi bg?
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 ?
om adakah tutorial untuk deploy agar bisa di akses public ?
Kalo kita buat CRUD productnya pake REDUX. Itu di slicenya kita tambahin createEntityAdapter ya biar lebih mudah manipulasi data di redux?
@CoderMediax
Жыл бұрын
yap benar sekali.