Up next in 10
Adding Login Component to iNotebook _ Complete React Course in Hindi #69
462 views
Feb 11, 2024
In the 69th episode of the "Complete React Course in Hindi," the tutorial introduces the implementation of a Login component to the iNotebook project. This video provides a step-by-step guide on creating a dedicated Login component, allowing users to authenticate and access their notes securely. The instructor walks viewers through the process of integrating the Login functionality into the iNotebook application, demonstrating how to handle user input, manage authentication states, and enhance the overall user experience. Whether you're a React developer looking to extend your authentication features or a learner eager to understand the integration of login components, this tutorial offers practical insights into adding the Login component to the iNotebook project.
View Video Transcript
0:00
तो अब टाइम आ चुका है लॉगिन फंक्षिणालिटी को आइट करने का जानी कि हम यूजर को एक्सेस तभी देंगे जब वो लॉगिन करेग�
0:06
क्योंकि यार किसी और के notes हम किसी को भी कैसे दिखा देंगे या�
0:09
तो सोचो आपने कोई personal information यहाँ पर डाली हुई है मानलो आपने यहाँ पर अपनी girlfriend का number डाला हुआ ह�
0:15
और कोई और login करके वो number ले ले मतलब कहने का मतलब यह है मज़ाक की बात नहीं ह�
0:21
कि यार अगर कोई भी इंसान notes लेने के लिए आता है या पर तो हमें confidentiality maintain करनी बड़ी है उस इंसान क�
0:27
और उस इंसान के notes हम तब ही दिखाएंगे जब वो हमको एक valid or token देगा इस चीज को UI पर करने के लिए मैं यापर button मनाओंग�
0:34
लॉग इन और साइन अप का ठीक है तो ऐसा बटन मनाने के लिए मैं क्या करूंगा सीधा आऊंगा अपने नेव बार के अंदर और नेव बार के अंदर मैं दो बटन मनाऊंगा इसको बटन आउटलाइन सक्सेस ना करके मैं इसको बटन प्राइमरी कर देता हूं ठीक है एक ही �
1:04
और यह जो है यहाँ पर एक link रहेगा ठीक है तो यह लोग इन साइन अप यहाँ पर बूट्स फ्रेड के अंदर अगर मैं आप लोगों को बटन दिखाऊं तो बटन के अंदर आपको एक रेफ चाहिए तो आप कुछ इस तरह से बटन मना सकते हो ठीक है तो यहाँ पर मैंने क�
1:34
कि मैंने ऐसे कर दिया रोल इस इक्वल टू बटन और हाई क्लास और डालूंगा जो कि बहुत इंपोर्टेंट ह�
1:41
एम एक्स टू तक यह एक दूसरे दूरी बना कर रखें वरना चिपके जाने देखो दूसरे से अभी दूरी बना रहे हैं अच्छ�
1:48
जाते हैं ठीक है लॉग इन पर क्लिक करने पर इंसान लॉग इन कर पाए साइन पर क्लिक करने पर इंसान साइन अप क�
1:53
पाए ठीक है और इस अमेजिक रियल को थोड़ी देर छलो इसको ठीक करता हूं थोड़ी देर में ठीक है और अब ऑफिस प�
1:59
जाता है अगर तो वो login sign up पर कभी भी जा सके अब यहाँ पर अगर आपने देखा हो तो मैंने link और two क�
2:04
इस्तेमाल किया हुआ है तो मैं a tag का use नहीं करूँगा मैं use करूँगा link का ठीक है और href का use
2:09
नहीं करूंगा मैं टू का यूज करूंगा यहां पर मैं लिख दूंगा लॉग इन और यहां पर मैं लिख दूंगा साइन आ�
2:16
टू इगॉल टू साइन आफ साइन आफ ठीक है और यह करने के बाद मैं क्या करूंगा आपको दिखाता हूं कि मैं इसक�
2:25
लोड करूंगा अभी मैं लॉग इन पर क्लिक करूंगा तो देखो स्लाइश लॉग इन यह क्लिक करूंगा तो स्लाइश साइन अ�
2:30
ठीक है लेकिन यहां पर कोई कंपोनेंट लोड नहीं हुआ हमें वह काम करना है कहां पर जाकर करना है हमें वह करन�
2:36
app.js में जाकर अपने react router की सहायता से दो कंपोनेंट बनाएंगे लॉग इन और एक साइन अप ठीक है तो यहा�
2:43
पर यह खुल गया बंद कर देता हूं इसको एक तो लॉग इन बनाऊंगा लॉग इन डॉट जेस आरेफ सी ही रफ सी और यहां पर आ�
2:53
लॉग इन लिख देता हूं ठीक है यहां पर लिख दूंगा एम साइन अप एक साइन अप कंपोनेंट बनाऊंगा और यहां पर र�
3:01
फिर से देखूंगा रफ सी ठीक है एंटर बार हूंगा और यहां पर टाप दबा कर लिख दूंगा आई एम साइन अप ठीक है और वहीं करूंगा जो कि इस कोर्स में शायद कम से कम 10 बार तो कर दिया होगा लॉग इन और साइन अप साइगन अप ठीक है और यहां पर साइन �
3:31
पर भी आऊंगा भी मैं इसे निप्ट हूंगा भी पहले मैं लॉग इन और साइन बना लूंगी दूरी कुछ ज्यादा ही नहीं होग�
3:36
इन दोनों के बीच में एक काम करते हैं एमेक्स टू सिर्फ पर एक में लगा देता हूं एमेक्स टू कहां गया कहां लगाय�
3:42
ने बार में बार का यह रहा है में एक्स वन लगा देता है में स्टूटर ज्यादा हो जाएगा वन स्टाइल इज इगल्ट�
3:48
करके भी लगा सकते हैं आप लोग ठीक है अब हां एमेक्सवन ठीक है दूरी ठीक है तो ज्यादा दूरी हो गई ज्याद�
3:53
यह भी अच्छी नहीं होती है, ठीक है, sign up मैं sign up component पर आ गया, login मैं login component पर आ गया, home मैं home पर आ गया
3:59
about मैं about पर आ गया, ठीक है, तो यहाँ पर देखो, login, sign up, और यह बढ़िया चल रहा है, अब मुझे यहाँ पर एक sign up form चाहिए
4:06
एक login form चाहिए ताकि मैं login करवा सकूँ user को और उसके बाद मेरी strategy क्या रहेग�
4:11
कि कोई भी अगर home पे जाता है तो वो इस page को नहीं देख पाएग�
4:15
इमिडिटली redirect हो जाएगा अगर और token valid नहीं है तो ठीक ह�
4:20
और उसी के साथ साथ अगर already user logged in है तो login sign up उसको नहीं paused उसको नहीं दिखेगा उसको लॉग औट दिखेगा ठीक है यह भी मुझे ए�
4:27
फंक्शनलिटी मनानी है तो चलो स्टार्ट करते हैं लॉग इन के साथ लॉग इन के साथ स्टार्ट करते हैं लॉ�
4:32
वाला जो मेरा end point है वो thunder line में यहाँ पर मौझूद है authentication क�
4:37
अंदर ठीक है तो user login using credentials ठीक है तो यह वाल�
4:40
जो end point है postPoint end point है मेरा यह मुझे यहाँ पर करना है simple सा का�
4:45
ठीक है करते हैं यह भी करेंगे ठीक है अभी के लिए मैं क्या करता हूँ कि यहाँ प�
4:48
आ जाता हूं अपने login.js के अंदर यहाँ पर एक बहुत ही सिंपल सा form डाल देता हूं जो क Patrol पर अवेलेबल है फॉर्म्�
5:31
लिखकर आईए तो यहां पर देखो ईमेल एड्रेस और मैं इसको फॉर इज इकुल टो ईमेल करता हूं मुझे बतान�
5:38
सब लोग कमेंट में फीडबैक देना कि यह रखूं मैं नहीं रखूं यह डिस्ट्रैक्शन भी हो जाता है कभी-कभी ठीक ह�
5:43
देखो मैंने कंट्रोल भी करा और टाइप इग्ल टो ईमेल आईडी इग्ल टो ईमेल नेम इग्ल टो ईमेल ठीक ह�
5:50
name is equal to email कर देता हूँ और उसी के साथ साथ यहाँ पर id is equal to password करूँगा ठीक ह�
5:56
और name is equal to password करूँगा ठीक है और इतना करने के बा�
6:04
ये एक form है क्योंकि तो मैं यहाँ पर एक on submit यूज़ करूँगा देखो यार पहले मैंने on submit यूज़ नहीं कर रहा था ठीक ह�
6:10
देखो एक काम करने के कई तरीके होते हैं मैंने एक button में click करके एक listener लगा दिया उस प�
6:15
आप form के submit होने पर कुछ करवा सकते हो तो जो चीज दिमाग में आती है वो मैं करता हू�
6:19
और मैं ये सब को बोल रहा हूँ अभी की ऐसा नहीं है कि आप लोगो क�
6:23
जैसे मैं कर रहा हूँ exactly वैसे ही करना है बस concepts को आप लोग समझ ल�
6:27
आपने एक बार ये सारे के सारे hooks समझ लिये किस तरह से context
6:31
API काम करती है ये समझ लिया है तो उसके बार आप अपने logic बना कर बहुत सारे लोग मुझ�
6:35
से कह रहे थे comment में बहुत सारे तो नहीं कुछ लोग कह रहे थे कि use reducer का इस्तेमाल करो ठीक ह�
6:41
तो यार वो सारे के सारे concepts हम लोग आगे देखेंगे अभी मैंने सोचा कि simple रखता हूँ चीज़ों को already context API मे�
6:47
थोड़ा बहुत कुछ है समझने लाइक तो मैंने सोचा चीज़ों को complicated नाई बनाओ तो अच्छा ह�
7:07
default ठीक है अब ये चीज़ ना मुझे थोड़ी सी दिक्कत दे रही है लेकिन अगर आप लोग को य���ियर चाहि�
7:13
मैं न्यूट्रल हूँ इस चीज़ को लेकर मुझे ऐसा लगता है कि यार ये स्क्रीन कास्ट अगर यहाँ पर लिख लिख कर आ रहा ह�
7:17
बार बार शायद लोगों के सर में दर्द हो जाए इसको देख देख कर तो मुझे जरूर बताएं कमेंट में कि कैसा लगत�
7:21
है आपको यह अच्छा लगता है तो इसको आन रखा जाएगा कि वीडियो से कमेंट में वोटिंग करना और वोट देने आन�
7:27
ठीक है यह नहीं कि घर पर बैठे हो वोट देना ठीक है कमेंट करना मतलब इन और प्रेवेंट डिफॉल्ड मैंन�
7:32
कर दिया यहां पर हैंडल सबमेट जैसे ही होगा मैं चाहता हूं कि हम फैच एपीआई की साहिता से इस एं�
7:37
इन पॉइंट को लिखें तो मैं यहां पर जो मेरा लॉग इन है मैं यहां पर प्रेस करूंगा मैं कुम फैच ठीक ह�
7:46
यूअरल यूअरल यह रहा और एचटीडीपी लगा लेता हूं यहां पर और यूअरल के साथ मुझे क्या देना है मुझे डाट�
7:54
सबसे पहले तो हैडर देना है ठीक है हैडर क्या देना है कंटेंट एप्लीकेशन जैसन तो यह मैं सारे ज�
8:00
यूज नहीं कर रहा हूं भी कंपोनेंट्स उनको बंद कर रहा हूं ठीक है नोट स्टेट के अंदर मैंने फैच एपिआई क�
8:05
बॉयलर प्लेट सा लिखा हुआ है उसको मैं यूज करूँगा ठीक है और यह जो यू आर एल है यह मैं ऐसे कर देता हूँ ठीक है कंट्रोल एक्स वैसे आइडली आप लोग क्या करना ना कि एक कॉन्फिक फाइल बना लेना ठीक है अगर आपको नोट जैसे आती है तो आपको response.json
8:37
और हम क्योंकि await यूज़ करने हैं इस method को async बनाना पड़ेग�
8:40
right click करके मैंने format document कर दिया save किया और auto कर अभी मैं hard code नहीं करूँग�
8:46
देखते जाओ मैं क्या करूँगा अब इसका response आएगा ठीक है जैसे यह response आएग�
8:51
अब मुझे सबसे पहले तो console.log डॉट लॉग जेसन करना है ठीक है कंसोल डॉट लॉग जेसन करना है और जैसे मैं कंसोल डॉट लॉग जेसन करूंगा मैं इस फॉर्�
9:01
को जैसे सबमेट करूंगा वैसे मुझे कंसोल में मिलना चाहिए कुछ ना कुछ ठीक है तो यहां पर देखो बहुत सारे ईमे�
9:08
मैं देखता हूँ कि कौन सा credential valid है यहाँ पर मैंने request दे रखी ह�
9:11
email b mehta और password scam 2021 ठीक है यह एक valid email और password combination है scam 2021 ठीक ह�
9:21
submit कर रहा हूँ और यह page reload हो गया शायद reload हो गया ना page हाँ यह देखो get request आ ग�
9:28
तो get request नहीं यार मुझे चाहिए post request ठीक है तो यहाँ पर मुझे मैथड इग्ल्ड पोस्ट करना है नकी गेट ठीक है पोस्ट करना है और अभी देखता हूं कि अगर मैं कुछ भी डालता हूं यहाँ पर कुछ भी डालता हूं तो पेज रिलोड हो रहा है ठीक है विच इस प्रॉब्लम मैं इसको रिलोड करके अब मैं स�
10:20
कंट्रोल F करके जो फॉर है उसको बना दो फॉर इस इकुल टू बना द�
10:24
HTML 4 ठीक है सबसे पहले class is equal to से नहीं बढ़ लेता हूँ ठीक ह�
10:30
सारे को replace करता हूँ, 4 is equal to को कर दूँगा, HTML 4
10:36
ठीक है, replace all, control s, reload, और सारे error नहीं गई, यह कहाँ पर आ रहा error
10:43
class, class, class, यार, यह क्यों आ रहा है अब error, class, class, class
10:50
class name कर तो दिया मैंने सब जगह, लगता है मैंने वो जो button लगाया है न, nav bar में
10:55
उसमें आ रहा है एरर एंड आई एम एबसलूटली करेक्ट सही जवाब एक करोड़ रुपए मेरे लिए यहां पर प�
11:02
क्लास хочу कर दूंगा ठीक है सेव किया मैंने और सेव करके अब भी एरर आया आगर नहीं चलो कुछ नहीं करूंग�
11:10
भी क्या कर लेता अगर आप जाता था ठीक है तो यहां पर क्या करूंगा मैं कि यह जो ईमेल है इसको मैं लेक�
11:15
आऊंगा क्या ईमेल था वह जो बीमेथा वाला ईमेल था वह लेकर आऊंगा बीमेथा थ्री और स्कैम ट्वेटी ट्वेटी वर्�
11:21
अच्छा ठीक है सबमिट और यहां पर ऐड आ गया क्या अगर आ गया क्या ऐड आ गया एंटर वैलेड ईमेल लोकेशन बॉड�
11:31
ओके एंटर वैलेड ईमेल पासवर्ड कैन ऑट बी ब्लैंक ओके तो यहां पर एक प्रॉब्लम है मैं बताता हूं क्या प्रॉब्ल�
11:38
मैंने content type application json दिया तो अगर हम बात करने request की अगर हम request की बात करें जो की network के थरू गई ठीक है वो गई हमारी post request बिल्कुल साइज जो हमारा data गया उसको भी देखना पड़ेगा preview response initiator और मैंने बता है क्या गड़बड कर दी मैंने एक बहुत बड़ी गड़बड ये कर दी कि �
12:08
पासवर्ड तो मैं इसे कॉपी करूंगा यहां पर और यहां पर कहां पर यह जस्ट हेडर्स के बाद है कॉमा लगाक�
12:16
हेडर्स के बाद कॉमा लगाकर यहां पर कुछ इस तरह से ठीक है तो मैं क्या करूंगा ईमेल और पासवर्ड क�
12:23
जाएगा इमेल पासवर्ड ठीक है इमेल पासवर्ड को बेजूंगा और उसी के साथ-साथ यहां पर मैं क्या करूंगा कि वही�
12:32
करूंगा जो कि मैंने पहले किया है मैं तो रेफ का यूज कर सकता हूं या फिर मैं ऑन चेंज लेकर आऊंगा ऑन चें�
12:38
यूज करा मैंने कहीं नहीं करा था यार ऑनचेंज यूज कहां करा है ऑनचेंज यूज भूल गया मैं कहां करा है मैंन�
12:45
शायद नोट नोट में किया नोट्स वाले कंपोनेंट में किया नोट टॉट जीएस में कहां गया वह कंपोनेंट यह रह�
12:51
component यह रहा हमारा on change ठीक है simple सा काम करना है और यह चीज काम करेगी क्यों काम करेग�
12:57
यह बड़ा generic सा on change है specific सा on change नहीं है कहने का मतलब यह है कि मैं अगर यहां प�
13:04
use use state use state hook का इस्तेमाल करूँ तो मेरी state का नाम क्या है एक तो email है मेरी state का ना�
13:11
और email initial state blank कर देता हूँ और एक password है ठीक ह�
13:15
और set password ठीक है और यह भी मैं blank रख रहा हूँ ठीक ह�
13:23
मैं क्या करूँगा कि value is equal to क्या कर दूँगा यहाँ प�
13:26
जो मेरा यह input है यहाँ पर और यह वाला जो input है यहाँ प�
13:30
मैं space देखके value is equal to कर दूँगा यहां पर ऊपर email यहां पर password ठीक है तो यहां पर क्या होगा कि यह चीज कॉपी करके यहां पर आ जाएगी ठीक ह�
13:38
और यह चीज change हो जाएगी जैसे ही मैं in fact मुझे एक चीज करनी चाहिए थी यार मैं credentials करता हूँ ठीक ह�
13:48
और set credentials करता हूँ ठीक है और use state और ये एक object होग�
13:55
जिसके अंदर होगा email जो की blank होगा और password जो की दुबारा से blank होगा ठीक ह�
14:03
और मैं यहाँ पर credentials.email credentials.password करूँगा ठीक है credentials.email credentials.password अब मैं यहाँ पर क्या करूँग�
14:12
on change में मैं set credentials करूँगा ठीक है और जो मेरा credentials थ�
14:17
उसके साथ सा read.target.name और यह चीज़ आजाएगी ठीक है देखता हूँ कि यह चीज़ काम कर रही है कि नही�
14:23
use state is not defined अबी लाता हूँ यार क्यों नेंचल ले रहे हो use state from react
14:29
ठीक है control s और email is not defined password is not defined
14:33
यह कैसा मज़ाक है यह कैसा मज़ाक है ओके credentials तो मैं यहां पर ऐसे लिखूंगा credentials.e-mail और credentials.password ठीक ह�
14:46
यहां पर ठीक है तो save कर दिया इसको कि क्या हुआ credentials.password ऐसे क्यों दिखा रहा ह�
14:52
email password credentials.password password password यह ऐसे error क्यों दिखा रहा ह�
15:01
है तो मुझे यहां पर ऐसे करना पासवर्ड ठीक है आप � spanning रहता है ओके सो वी लुक्स लाइक वियाग गुड़ इसक�
15:43
नहीं लगाए दोनों में तो आप चीज भी लगाना यार ऑन चीज भी लगाना है ऑन चीज इस इकॉल टू ऑन चीज उप�
15:52
है ठीक है बस इतना करना है अभी शायद यह आ जाएगा अभी मैं भी मेथा यह लालूंगा इस सम्मिट करूंगा और देख�
15:57
टोकन मिल गया मुझे ये ठीक है और मैं एक चीज और करूँगा ठीक है एक चीज और करूँगा सार�
16:03
end points में in fact इसके लिए मुझे अपनी API में जाना पड़ेगा कि मैंना success को true
16:08
या false कर दूँगा ठीक है उससे बता है क्या होगा उससे मुझे पता जल जाएगा कि मुझ�
16:13
success मिली की नहीं मिली, send point को use करते वक्त, ठीक है, तो मेरा auth.js के अंदर है
16:19
जहाँ पर मैं login कर रहा हूँ, ठीक है, यह auth indicator user, तो यहाँ पर
16:24
जब मैं response भेज रहा हूँ, ठीक है, देखो मैं भेज रहा हूँ, res.send
16:28
success, और auth token, ठीक है, तो यहाँ पर मैं लिख दूँग�
16:34
success is equal to true ठीक है और अगर कोई भी गड़बड होती है तो success is equal to
16:40
false हो जाएगी ठीक है success is equal to false और यह एक pattern के हिसाब स�
16:48
आप रखो एक तो success रख लो ठीक है और उसे के साथ सा�
16:52
एक message रख लो message क्या message है अगर success फॉल्स तो किस मैसेज से फॉल्स हुई सक्सेस ठीक है और जो मैसेज आप यूजर को दिखाना चाहते हो वह रखो यहा�
17:01
पर मैं यह सिर्फ एक एंड पॉइंट के लिए कर रहा हूं बड़ा इडियल याद इसको हर एंड पॉइंट के लिए करो मै�
17:06
बोर नहीं करना चाहता आपको यहाँ पर सक्सेस को फॉल्स कर दो ठीक है यह काम करो ऊपर जाकर सक्सेस को ना यहां प�
17:12
सक्सेस को फॉल्स ही कर दो कॉंस्ट सक्सेस इकल टू फॉल्स कॉंस्ट नहीं लेट सक्सेस इकल टू फॉल्स कि हम चेंज करना है सक्सेस क�
17:19
अब मैं इसको save करूँगा तो मेरा server restart होगा मैं reload करूँगा इसको और यहाँ पर मैं request भेजूँगा तो देखो success true मुझे मिल रहा है इससे मुझे पता जल जाएगा कि success true हो चुका है और मैं directly यहाँ पर बोल दूँगा कि भाई देखो अगर success true है तब क्या कर दो कहा गया मेरा login
17:49
आपको नहीं मिला देखने को ठीक ह�
18:19
तो मैं यहाँ पर क्या करूँगा कि save the odd token and redirect ठीक ह�
18:25
तो मैं क्या करूँगा local storage.set item करूँगा और यहाँ पर लिखूँगा token
18:31
और लिख दूँगा json.oddtoken ठीक है तो मैं local storage में अपने token को save कर लिय�
18:38
local storage में token को save करने के बाद मैं क्या करूँगा और यहाँ पर redirect करने के लिए मैं use history hook का इस्तेमाल करूँगा ठीक है अगर आप लोग कोई थोड़ा सा fancy सा लग रहा है तो मैं बता दूँ क्या है तो मैं यहाँ पर क्या करूँगा लिखूँगा let history is equal to let history is equal to use history ठीक है यह use history hook है एक देखो यह import भी हो गया react router में से अब मैं क्�
19:12
documentation में चलेंगे और देखेंगे क्या दिक्का है ठीक है सेव किया मैंने और इसको रिलोड करूंगा ठीक ह�
19:17
सारे errors चले गए submit किया और यहाँ पर मैं आ गया देखो आ गया लॉग इन हो गया मैं ठीक है तो मैं आ�
19:24
लॉग इन तो कर पा रहा हूं ठीक है लेकिन अभी भी बहुत सारा काम बाकी है कि या अगर मैं यहाँ पर लॉग इन पर हूं ठीक है और कोई लॉग इन कर रहा है और टोकन ऑलरेडी मौजूद है तो सबसे पहले तो मैं यह लॉग इन दिखाऊंगा नहीं किसी को फिर उसी क�
19:54
जो मैंने आप लोगों से करी दी बहुत कम लोगों ने किया यार पहले वीडियो पर जाकर आप एक review अपन�
19:58
पोस्ट कर दोगे तो दिल से बहुत खुशी होगी अभी के लिए इस वीडियो में इतना है गाइ�
20:02
थैंक ये सो मच गाइस पर वाचिंग इस वीडियो and I will see you next time