Up next in 10
Creating a middleware to decode user from a JWT _ Complete React Course in Hindi #51
692 views
Feb 11, 2024
In the 51st episode of the "Complete React Course in Hindi," the tutorial explores the creation of a middleware for decoding user information from a JSON Web Token (JWT) in the iNotebook project. This video provides a comprehensive guide on implementing middleware that plays a crucial role in authenticating and decoding JWTs, allowing for secure extraction of user details during various interactions with the backend. The instructor walks viewers through the step-by-step process of creating this middleware, offering practical insights into enhancing the security and functionality of the iNotebook project. Whether you're a React developer aiming to strengthen your understanding of authentication mechanisms or a learner interested in middleware implementation, this tutorial equips you with the skills to create a robust decoding middleware for JWTs in the iNotebook project.
View Video Transcript
0:00
तो अभी तक हम लोगों ने अपनी Node.js अप्लिकेशन के अंदर कुछ राॉट्स बनाय��
0:03
यहाँ पर मैं एक काम करना चाहूंगा और मैं यहाँ पर इस particular फाइल मे��
0:07
मार्क करना चाहूंगा राॉट एंदर राॉट टू करके राॉट एंदर और राॉट ट��
0:14
तो मैं चाहता हूँ कि ख़ुशत दिख जाए कि कौन सा राॉट किसलिये यहाँ पर बना हुआ ह��
0:18
तो मैंने यहाँ पर राॉट वन कर दिया यहाँ पर मैं राॉट टू कर दूँगा और ऐसा करने से क्या होगा
0:23
कि मैं एक bigger picture देख पाँगा तो यहाँ पर मेरे पास दो राॉट से है��
0:27
एक तो user को create करने का एक user को login करने का अब हम लोग क्या करने वाले हैं
0:31
एक third route बनाने वाले हैं जो कि क्या करेगा? हमको logged in user की detail देग��
0:36
ठीक है? और मैं यहाँ पर क्या करूँगा? लिखूंगा route3 और इसमें मैं लिखूंगा get user detail
0:44
get logged in user details और using post मैं post request ही यहाँ पर यूज करने वाला हूँ इसमे��
0:55
और मैं API auth get user इस नाम से बनाओंगा और इसमें login required होने वाला है ठीक है
1:01
तो मैं यहाँ पर login required करूँगा यानि कि हमको token भेजना पढ़ेग��
1:06
अब यह काम हम कैसे करेंगे यह मैं आप लोगों को जलदी से बता देता हूँ तो यहाँ पर एक route मैं बिलकुल वैसे ही बनाओंग��
1:11
जैसे मैंने अभी तक अपने routes बनाए है बस यहाँ पर करूँगा क्या
1:15
कि ID लेकर यानि कि जो मेरा authentication token होगा उसको लेने के बा��
1:20
मैं यहाँ पर कुछ ऐसा करूँगा कि उससे सारी की सारी details को fetch कर लूँग��
1:26
तो यहाँ पर एक try-catch लोग मैं यहाँ पर डालूँगा try-catch और try के अंदर, catch के अंदर तो वही डालूँग��
1:34
मैं जो अभी तक डाल रहा हूँ कुछ भी अगर unexpected error आ जाता ह��
1:38
तो उसको console पे लॉग करने का और उसके बाद internal server error भेजने क��
1:42
और वर्ना मैं क्या करूँगा मैं यहाँ पर लिखूंगा const user is equal to
1:46
await और उसी के सासत्बुझे यहाँ पर चाहिए किसी तरीके से user की id
1:53
क्योंकि जो मेरा token आने वाल है उसमें user की id हो गई लेट ज़िन आजूम कि मेरे पास यह user id आ जाती ह��
1:58
अभी के लिए मैं यहाँ पर user id is equal to तुडू लिख देता हूँ आणि कि मुझे user id अभ��
2:04
अभी यहाँ पर user id मुझे काम करना है अब मैं क्या करूँगा कि यह user मेरे पास जैसे ही आ जाएग��
2:11
मैं यहाँ पर लिखूँगा dot और यह बात दिहान से सुनना मैं यहाँ पर dot सेलेक्ट करके सारी की सारी फील्��
2:17
सेलेक्ट कर सकता हूँ except the password तो मैं यहाँ पर इसे करने से क्या होगा यह भी मैं आपलोग को जल्दी से बता देता हू��
2:24
तो अगर मैं thunder client में आता हूँ और collections में आता हूँ iNotebook authentication में आता हूँ तो मैं यहाँ पर जल्दी स��
2:31
लॉग इन वाला यह जो मैंने बना रखा है इसको मैं सेंड करता हूँ और यहाँ पर एरर क्यों आ गया connection was refused by the server
2:39
क्योंकि मेरा note bond नहीं चल रहा है तो जल्दी से note bond चलाता हू��
2:43
और यहाँ पर अभी यह कह रहा है कि app crashed ऐसा क्या हो गय��
2:49
यार जो app ही crash हो गई मेरी मैंने जरूर यहाँ पर कुछ गलती कर रही है तो मैंने यहाँ पर लिखा रहा है const user is equal to await य��
2:55
find user by id सब कुछ ठीक ठीक तो किया यार तो क्या दिक्कत आ रही ह��
2:59
await यहाँ पर मुझे इस function को async मनाना पड़ेगा और मैंने यहीं पर लिखना शुरू कर दिया एक और मैंने बहुत चाँ मज़ाग कर दिय��
3:05
यहाँ पर कि मैंने यह सब चीज़े लगा ही नहीं मैंने यहीं पर लिखना शुरू कर दिय��
3:09
तो मैं क्या करूँगा कि जो मेरा route 3 है सबसे वेले तो उसको मैं कुछ इस तरह से बनाओंग��
3:14
और यह करने के बाद मैं यह चीज़ भी close करूँगा और अभी जो है मेरी आप चल जानी चाहिए चल ग��
3:20
और मैं इसको send करूँगा यहाँ पर तो ते कुछ आफ टोकन मिल रहा है अब किसी तरह से मुझे इस आफ टोकन को डिकोड करना पड़ेग��
3:26
और डिकोड करने के बाद इसमें से मुझे जो user id है वो निकालनी पड़ेगी और उसके बाद एक बाद मैंने user id निकाल ली इसमें से आफ टोकन के user में से तब मैं उसको यहाँ पर पास कर सकता हूँ ठेक है तो यह काम कैसे किया जाएगा अच्छा मेरा जो आफ टोकन है ��
3:56
मैं उनमें एक हेडर भेज़ दूँगा आफ टोकन के नाम का ठेक है और उस हेडर को मैं क्या करूँगा उस हेडर में से जो भी डेटा होगा उसको निकाल कर मैं यहाँ पर फेच कर लूँगा लेकिन अगर मैं यहाँ पर कोड लिखता हूँ मेरी बात को द्यान से सुनना ��
4:26
कि अगर मैंने जो हमारा यूजर है उसकी आईडी लेने का कोड यहाँ पर लिख दिया तो वो कोड मुझे उन हर एंट पॉंट्स में कॉपी करना पड़ेगा जहां जहां मुझे आफ्ट्रेंटिकेशन की जरूरत है अब मानलो मैं इस अप्लिकेशन को एक स्केलेबल अ��
4:56
परशान हो जाएंगे कि यार ये middleware क्या होता है अब अगर आप लोगों नोट जीयर के middleware के बारे में नहीं पता तो middleware
5:01
बिसिकली एक function होता है जो की कॉल किया जाएगा जब भी आपके जो लोगएन रिकॉर्ट वाले रूट्स हैं उन पर कोई भ��
5:08
तो मैं आपर क्या करूँगा जल्दी से एक middleware लिखूँगा और मैं middleware के लिए एक आपर folder बना लेता हूँ तो मैं आप��
5:14
middleware मैंने लगता है इसको routes के अंदर डाल दिया बड़ा मैं इसको भार निकाल लूँगा मैं इसको भार निकाल लेता हूँ त��
5:20
middleware मेरा यहां पर आ गया तो यह जो middleware की spelling में अलग दिख दी मैंने कोई बात नहीं अब ठीक कर दिय��
5:26
मैंने इसको तो middleware के अंदर मैं क्या करूँगा एक middleware लिखूँगा और इस middleware का नाम मैं रख देता हू��
5:32
login.js तीक है या मैं यहाँ पर fetchuser.js रख देता हूँ तीक है औ��
5:40
इसके अंदर मैं क्या करूँगा इसके अंदर मैं एक function लिखूँगा क्योंकि जैसे की मैंने आपलोग को बताया कि जो middleware
5:45
होता है वो एक function ही होता है और middleware के बारे में आपलोगो जाधा नहीं पता तो मैं आपलोगो बहुत एक short में बता रहा हू��
5:51
कि जिन जिन roots में मुझे यह चाहिए होगा मैं यहाँ पर as a second
5:55
argument मैं एक दूसरा middleware पास कर दूँगा यहाँ पर और उसके बाद यह वाला function रन होगा बसिकली क्या होगा कि मानलो मै��
6:01
getter user में हूँ और मैं यहाँ पर fetch user मैं एक middleware
6:06
जो है वो use करना चाहता हूं तो मैं यहाँ पर यह जो fetch user है यह वाला middleware दे दूँगा और यह देनी के बा��
6:12
जो मेरे async function है वो run होगा ठीक है तो यह जो fetch user है भी बसिकली क्या करेगा user को fetch कर लेगा ठीक ह��
6:17
तो देखो मैं यह काम कैसे करता हूं ठीक है तो मैं क्या करूँगा जो request और response है उनको मैं modify क��
6:23
दूँगा और उसकी बाद मुझे request में मेरे user मिल जाएगा ठीक है तो यह काम कैसे करेगा यह भी मैं आप लोग��
6:29
तो मैं सबसे पहले क्या करूँगा जो JWT है उसको import करूँगा और यार इतना कौन type करेगा हम ल��
6:34
आलसी मानस हैं तो यहां से copy करेगे ठीक है bcrypt की जरूरत शायद मुझे पढ़ी की नहीं बड़ अगर पढ़��
6:39
बिए आउंगा मैं यहाँ पर import कर लूँगा लेकिन मुझे bcrypt की जरूरत नहीं बढ़ेगी हाँ तो अब मैं यहां पर क्या करूँग��
6:44
simple से लिखूंगा module.exports is equal to fetch users user ठीक है और fetch user क्या होगा fetch user एक function होगा ठीक ह��
6:54
तो मैं यहाँ पर लिख देता हूँ fetch user is equal to और मैं यहाँ पर एक const लगा दूँग��
6:59
const लगा दूँगा यहाँ पर एक तो basically मैं क्या कर रहा हूँ क��
7:03
यह जो मेरा middleware है जो की request, response और next लेक��
7:07
तो basically क्या होता है की request, response और next एक middleware लेता ह��
7:12
और at the end हम क्या करेंगे कि next को call करेंगे ताकि जो next वाला middleware हो वो call हो जाएं ठीक है इस case मे��
7:18
कौन सा next function call होगा यह वाला call होगा जो मैंने आपर अभी आपको दिखाया async वाला यह function call होगा ठीक है त��
7:24
यहाँ पर हमारे पास request में user ले आएंगे हम और उसके बात यह run होगा तो मेरे पास request में already user होगा त��
7:31
जहां जहां मुझे ऐसे routes मिलेंगे जहां पर login की ज़रूरत है वहां मुझे सिर्फ इतना करना होगा कि मेरे इस वाले parameter
7:37
के बाद fetch user डालना है बस मुझे as a second argument ठीक है तो यह काम हम लोग कर देंगे ठीक है अब क्या करेंगे कि इसक��
7:44
save करेंगे इसको save करेंगे और यहां पर function लिखेंगे तो यहां पर मुझे करना क्या है get the user from the JWT token and append
7:57
and add id to request object सिम्पल सा काम है बहुती simple सी भाष��
8:03
में लिख दिया मुझे बता है crash होगा यह application ठीक कर दूँगा अभी थोड़ी धर में ठीक है तो क्या करूँग��
8:07
मैं यहां पर बहुती simple सा काम करूँगा सबसे पहले तो मैं token लेकर आओंगा मैं कहूँगा const token is equal to अ��
8:13
देखना मैं token कासे लेकर आओंगा token मैं header से लेकर आओंगा तो मैं लिखूँगा request.header और इस header का ना��
8:22
मैं auth token रख देता हूँ ठीक है इस header का नाम मै��
8:26
auth token रख दिया तो मैं जब भेजूँगा प्री request तो इस header का नाम मैं इसी नाम से भेजूँगा auth token नाम स��
8:31
भेजूँगा request को अब मैं क्या करूँगा कि अगर token मौजूद नहीं है तब मैं क्या करूँगा access denied कर दूँग��
8:38
तो मैं लिखूँगा if not of token तब मैं क्या करूँगा response.send औ��
8:43
मैं एक bad request भी भेजूँगा तो status और यहाँ पर मै��
8:48
access denied भेजूँगा basically मैं access denied I think it's 401 if I'm
8:55
not wrong unauthorized error हाँ यही भेजूँगा 401 और यहाँ पर मैं लिखूँगा .send और क्या भेजूँगा मैं यहाँ पर ए��
9:04
error भेजूँगा और लिखूँगा please authenticate using a valid token टोकें ठीक है मैं कुछ इस तरह से काम करूँगा अगर token मौजू��
9:15
नहीं है तो और उसके बाद मैं क्या करूँगा यहाँ पर इ��
9:19
token में से निकालूँगा क्या मैं आपर निकालूँगा string is equal to और मैं लिखूँगा jwt.verify बिसिकली मै��
9:28
verify करूँगा यह जो मेरा token है और उसी के साथ सा��
9:32
मैं क्या करूँगा जो मेरा secret था यहाँ पर जो मैंने यहाँ पर secret रखा हुआ था क्या था मेरा secret
9:37
jwt.secret अब आईडियली मुझे इसको किसी environment variable में डालना चीए था टीके .env.local बगेरा बड़ अभ��
9:45
के लिए मैं इसको hardcode कर रहा हूँ वैसे इसको not a good idea कि आप दो जगह hardcode करें क्योंकि अग��
9:49
इस mismatch हो गया तो दिक्कत हो जाएगी ठीक है तो यहाँ पर मैं इसको इस तरह से डाल दिया अब क्या होग��
9:53
अब देखना क्या होगा अब मैं यहाँ पर लिखोंगा request.user इस equal to string.user टीक है यहाँ string ना करक��
10:00
मैं इसको data कर देता हूँ यहाँ data.user टीक है तो जो user है वो मुझे मिल जाएगा और इसके बाद मुझ��
10:05
यहाँ पर next चला देना है ठीक है I hope कि यह चीज़ आप लोगों समझ में आ गई अब क्या हो सकता ह��
10:12
कि जो हमारा token है वो सकता है वैलिड ना हो ठीक ह��
10:16
तो उस चीज़ को मैं क्या करूँगा कि try catch में डाल दूँग��
10:21
तो मैं बेसिकली यह जो तीन चीज़े ने को try में डाल लूँगा और catch के अंदर मैं क्या करूँगा response.send 401 ठीक ह��
10:30
और मैं चाहूँ तो यह चीज़ भेज सकता हूँ पुरा 401 status भेजना था तो rest.status करना चीज़ ह��
10:38
चलो मैंने इसको copy कर दिया है अच्छा ठीक है फॉर्मेट डॉकिमेट अभी यह रो रहा है पता नहीं क्यो��
10:42
देखना पड़ेगा क्या दिक्कद आ रही है तो यह चीज मैंने कर दी ठीक है तो यह fetch user जो है यह मैंने complete कर दिया ठीक ह��
10:47
अब देखना मैं क्या करूँगा मैं यहाँ पर fetch user को export कर रहा हू��
10:51
अब मैं लिखोंगा fetch user is equal to require यहाँ पर authentication वाल��
10:55
फाइल के टॉप पर लिखोंगा fetch user is equal to require fetch user
10:59
और in fact मैंने जो folder बनाया fetch user के लिए कहांपर बनाय��
11:03
folder मैंने middleware के अंदर बनाया है तो मैं यहाँ पर लिखोंगा dot dot slash middleware और fetch user तो dot dot slash क्योंकि एक कदम पीछे जाना ह��
11:13
fetch user dot dot slash middleware fetch user हाँ यह काम करना चीज़ी है तो यहाँ पर देख��
11:20
चल गया मेरा सर्वा तीक है अब देखना मैं क्या करूँगा अब मैं अपने thunder line में जाकर एक नई request बनाओंग��
11:27
लिखोंगा new request और इस request का नाम क्या होगा get user data ठीक ह��
11:33
enter मारूंगा और user data लेने के लिए मेरे पास क्या ह��
11:38
मेरे पास यह वाला endpoint है और हाँ एक चीज़ और करूँगा user id इस बार मेरे पास क्या होगी user id मेरे पास user id नहीं होग��
11:45
मेरे पास request में appended होगी तो मैं लिखोंगा request ड़ाट मैंने काँपर add किया है user id यह भी देख लेता हू��
11:51
तो मैंने request ड़ाट user ड़ाट id लिखोंगा मैं ठीक है तो मैं कुछ ऐसा कर सकता हूँ भ��
11:56
तो अब मैं क्या करूँगा कि यहाँ पर जाओंगा इसको भी open in a new tab कर लेता हू��
12:02
login using credentials वाले को ता कि मुझे यह जो domain है यह copy करने को मिल जा��
12:08
और यहाँ पर आप लोग देखो कि यह get user get user यहाँ पर हमें मिल गया ठीक ह��
12:17
तो यह get user मुझे यहाँ पर मिल गया है और get user मिलने के बा��
12:21
मैं क्या करूँगा कि जो मेरा header है header नहीं header क्या करूँगा header के अंद��
12:29
header के अंदर मैं यह जो auth token है उसको append करूँगा ठीक ह��
12:33
तो यहाँ पर मैं auth token को append करूँगा auth token कहाँ से आएगा मेरे पास यहाँ से आएग��
12:39
ठीक है तो मैं auth token को यहाँ पर append करता हू��
12:44
और उसी के साथ साथ मैं send करता हूँ इसको ठीक है यह कह रहा है cannot get
12:48
मुझे post करना है basically तो यहाँ पर मैं ने यहाँ पर click कर दिय��
12:52
और यह processing कुछ जाधर टाइम लग रहा है पता नहीं क्या दिक्करते है ज़रूर कुछ गलबड़ है कैंसल करता हू��
12:56
आपिऐ आफ्ट केट यूजर आपिऐ आफ्ट केट यूजर सब कुछ ठीक ठीक ह��
13:02
यूजर इस इकल तो तिस नहीं है तो मैं response ही send नहीं कर रहा हूँ ठीक ह��
13:06
तो मुझे response send करना पड़ेगा तो response send करने के लिए मैं क्या करूँगा यहाँ पर लिगदूंग��
13:26
प्लीज आफ्ट केट यूजर आफ़्ट केट यूजर आफ़्ट केट यूजर आफ़्ट केट यूजर आफ़्ट केट यूजर आफ़्ट केट यूजर आफ़्ट केट यूजर आफ़्ट केट यूजर आफ़्ट केट यूजर आफ़्ट केट यूजर आफ़्ट केट ��
13:56
और उस फोल्डर के नाम में रखूंगा notes ठीक है जुकि वो जो होगा notes का crud होग��
14:03
create, read, update, delete ठीक है I hope कि आप लोग समझ ग��
14:07
authentication के अंदर ये end points जो रखे हुआ किस तरह काम कर रहे हैं notes के अंदर भी कुछ end points मैं डालने वाला हू��
14:13
किस तरह काम करेंगे वो भी आपको दिखाऊंगा अगर आप लोगों ने अभी तक react की playlist आक्सेस नहीं कर रहे है��
14:18
तो ज़रूर करें आक्सेस और अभी के लिए इस वीडियो में इतने हैं आपको बहुत ख़ुशत आपको वाचने के लिए बहुत खुशत आपको वाचने के लिए बहुत खुशत आपको वाचने के लिए बहुत खुशत आपको वाचने के लिए बहुत खुशत आपको वाचने के लिए बहुत खुशत आपको वाचने के लिए बहुत खुशत ��
#Reference
#Technical Reference