Up next in 10
Adding Encryption to login and signup for Codeswear.com _ NextJs Tutorial for Beginners #56
848 views
Feb 13, 2024
"Adding Encryption to Login and Signup for Codeswear.com" is the 56th tutorial in the "NextJs Tutorial for Beginners" series. In this video, viewers will learn how to enhance the security of the login and signup functionalities on the Codeswear.com website by implementing encryption techniques. The tutorial focuses on backend development within Next.js, covering topics such as user data encryption, password hashing, and secure data transmission. Viewers will be guided through the process of integrating encryption libraries or frameworks to encrypt sensitive user information, such as passwords, before storing them in the database. Additionally, the tutorial may explore implementing secure communication protocols, such as HTTPS, to encrypt data transmission between the client and the server. By following along with this tutorial, beginners can gain practical experience in implementing robust security measures to protect user data in their web applications developed with Next.js.
View Video Transcript
0:00
हमारा authentication system जब तक smooth नहीं होगा, secure नहीं होगा तब
0:04
तक हम user को best experience नहीं मिलेगा। इसलिए हम लोग करने वाले हैं
0:08
इस authentication system को secure encryption की सहायता से। चलते हैं computer
0:12
screen में और आप लोगों को मैं दिखाऊँगा किस तरह से encryption incorporate
0:16
करेंगे quotesware dot com पर और क्यों जरूरत रही है encryption की
0:20
हम लोग JWD का इस्तेमाल कर रहे हैं। हम लोग यहाँ पर passwords को
0:23
save तो कर ही रहे हैं लेकिन encrypt करके save कर रहे हैं का क्या मतलब है? ये
0:27
सारी की सारी चीजें देखेंगे। let's get started। So
0:39
guys next years आगे तक पहुंच हमने चीजें सीख ली है। अब
0:44
यहाँ पर इस video में हम लोग करने क्या वाले हैं कि सबसे पहले तो जो हमने
0:49
sign up root बनाया है, उसको सा better करना है कहीं ना कहीं। हम लोग को पता
0:52
है कि plain text में password को store करना अच्छी बात नहीं होती है। अच्छे बच्चे नहीं
0:56
करते हैं ऐसा काम गंदे बच्चे करते हैं। तो मैं इसको format
1:02
document भी कर लेता हूँ। अच्छे बच्चों की बात ही आई है तो। अब मैं क्या करूँगा यहाँ पर
1:05
हमारा जो sign up है इसके अंदर मैं जो password है उसको
1:09
directly request dot body में से निकाल रहा हूँ। मैं करूँगा क्या कि
1:13
जो user है हमारा जब मैं इसको बना रहा हूँ मैं जो name होगा
1:17
सब कुछ मैं request dot body में से निकालूंगा, तो मैं एक काम करता हूं
1:21
मैं यहां पर कुछ इस तरह से restructuring syntax का इस्तेमाल करता हूं
1:25
मैं यहां पर लिखूंगा con name, email is equal to कुछ इस
1:30
तरह से request dot body ठीक है और मैं ऐसे करूंगा। किसके अंदर
1:34
से निकाल लो रे भाई, ठीक है, name, email और जो password
1:38
होगा वो क्या होगा ये एक बहुत सवाल है, ठीक है। अभी
1:42
मैं इसको blank रखता हूं मैं बताऊंगा blank क्यों रखा है अभी हम इसको update करने वाले हैं इसलिए
1:46
blank रखा है, मैं आप लोगों को मिलवाना चाहता हूं crypto JS से ठीक है? crypto
1:52
JS ठीक है ये crypto currency वाला crypto नहीं है, ये cryptography वाला crypto है
1:55
ठीक है वैसे दोनों cryptography ही होती है वो भी but अभी के लिए हमें
1:59
simply यहां पर या at crypto JS करना है तो मैं यहां पर या at
2:05
Crypto dash cha करूंगा। और ये install कर देगा crypto package ठीक
2:12
है wait करूंगा इसके install होने तक का और ये करने के बाद मैं simply
2:15
क्या करूंगा कि सबसे पहले तो इसको इसमें से AES को require
2:20
करूंगा और मैं ऐसा क्यों कर रहा हूं आप लोगों को बताता हूं। देखो मुझे simply करना क्या है अपने
2:24
passwords को encrypt करना है। मैं ये जो ciphertext is equal to
2:28
crypto dot A dot encrypt my message with a secret key ये
2:32
काम करना चाहता हूं और मैं बताता हूं मेरे कहने का क्या मतलब है। देखो यार अगर
2:35
हम अपने password को encrypt कर देंगे जब हम किसी भी password को एक secret key से encrypt
2:39
करते हैं तो simple एक हम लोग को मिलता है मैं ये
2:44
undep चला लेता हूं, और वो क्या मिलता है हमको ये मैं बताता हूं। सबसे
2:48
पहले मैं crypto JS को import करूंगा और इसके बाद जो मेरा password होगा मैं
2:51
यहां पर लिखूंगा crypto dot a dot encrypt और अपनी secret key
2:55
से मैं इसको encrypt कर दूंगा ठीक है और secret key definitely secret होनी चाहिए
2:59
वो आप किसी को नहीं बताओगे ठीक है। यहां पर इस तरह
3:04
से encrypt करेंगे। इस तरह से और हम क्या करेंगे जो हमारा
3:11
request dot body dot password है इसको encrypt करेंगे एक secret key
3:14
से। और इसको मैं secret one two three कह देता हूं। अब यहां पर आप लोगों
3:18
को मैं एक दिखाता हूं, ये जो मेरी secret ये है मैंने इससे encrypt कर दिया
3:22
है इसको और ये एक text बना दिया है, ठीक है, अब मैं इसमें dot two string
3:25
भी चला दूंगा और जिस तरह से documentation कह रही है बस simply मैं उस तरह
3:29
से करता जाऊंगा ठीक है, तो यहां पर ये दिक्कत आ गई semicolon की दिक्कत
3:32
आ गई मुझे semicolon नहीं लगाना है यहां पर तो कुछ इस तरह से मैं इसको encrypt कर दूंगा
3:36
और उसके बाद मैं database में save कर दूंगा, तो एक आप लोगों को दिखाना चाहता हूं
3:40
कि अब मैं sign up करूंगा तो मैं एक काम करता हूं, एक account बनाता हूं
3:44
और मैं directly यहां जाकर भी account बना सकता हूं। अब मैं
3:48
अगर account बनाऊंगा Harry at code with harry dot com और ये
3:53
मैंने क्या कर दिया मुझे sign up करना है sign in नहीं करना है, तो
3:57
email ये डालूंगा password one two three डाल रहा हूं, याद रखना मुझे याद नहीं आया तो याद दिलाना
4:01
ठीक है, name is Harry मैंने name डाल दिया ठीक है sign
4:05
up किया, your account has been created, let's see, let's see कि
4:09
account create भी हुआ कि नहीं। ये आ गया देखो यहां पर at the end Harry at the rate of
4:13
code with the rate dot com और हमारा password आप लोग देखो यहां पर encrypt हो चुका
4:16
है। अगर आप लोगों को नहीं दिख रहा है तो आप लोग यहां पर देखो encrypt हो चुका है हमारा password
4:20
ये देखो ये पूरा का पूरा आह encrypted password है हमारा। चलो
4:24
आपने कह दिया कि यार चलो encrypt करके save कर दिया, password क्यों नहीं save कर दिया plain
4:28
text में ये समझाता हूं। देखो यार अगर मैं password को plain text में save कर दूंगा
4:32
database में ना hack हो गया तो क्या होगा? तो दिक्कत ये होगी
4:35
कि मेरे database को अगर किसी ने hack कर लिया तो problem
4:39
मेरी पास हो जाएगी कोई भी किसी के भी account में घुस सकता है infact hacker किसी के भी account
4:43
में घुस सकता है अगर hack हो गया database तो मैं नहीं चाहता कि मेरा database hack
4:46
होने के बाद भी, users को access मिले ठीक है, hacker को access
4:50
मिले basically users के account का, ठीक है? तो मैं जब encrypt
4:54
कर रहा हूं इसको तो मैं एक secret key से encrypt कर रहा हूं जो कि मैं किसी को बताऊंगा
4:57
नहीं है and obviously इतनी terrible secret key नहीं होने वाली है, secret one two three ये बहुत ही
5:01
खतरनाक सी दिखने वाली है secret key होने वाली है कुछ इस तरह से ये भी खतरनाक
5:05
नहीं है मैं तो अभी, बनाऊंगा और खतरनाक आपको दिखाऊंगा जब बनाऊंगा तो
5:08
तो क्या होगा कि इस password को encrypt करके ये बनाया जा
5:12
सकता है, ठीक है, ये बनाया जा सकता है, ये जो लिखा हुआ है U two
5:16
FSD ये जो इतना encrypted text है लेकिन इस encrypted text से
5:20
password नहीं बनाया जा सकता, ये special तरह के functions होते हैं। इसीलिए
5:24
इनको use किया जाता है, ठीक है, तो ये crypto JS ने हमारी मदद करी है ऐसा करने
5:27
में अब कोई भी मुझे password देगा उसका मैं ये बना लूंगा और इन
5:31
दोनों को match कर लूंगा। लेकिन अगर मुझे ये मालूम है तो मैं इसका
5:34
password नहीं बना सकता, ठीक है। खैर मैं किसी और video बना कर समझा
5:38
दूंगा इस की detail को कि ये क्यों encrypt किए जाते हैं passwords क्या कहानी है
5:42
इसकी, ये सब समझा दूंगा एक video में interesting सी है, ये
5:45
कहानी भी आप लोगों को सुना दूंगा बहुत जल्दी but अभी के लिए हम लोग क्या करेंगे login
5:49
dot JS के अंदर हम पहले ये check कर रहे थे कि request dot body
5:53
dot password बराबर है user dot password के कि नहीं, मैं क्या
5:56
करूंगा ये check करूंगा कि, जो हमारा request dot body dot password
6:02
है। ah sorry encrypted request dot body dot password है वो user
6:05
के password के बराबर है कि नहीं? क्योंकि अब user dot password हो चुका है
6:09
मेरा ये वाली string ठीक है, तो अगर आप लोगों को इसके basics नहीं आते
6:12
तो मैं एक बार बहुत जल्दी से बता देता हूं आपको देखो यार आप आए किसी भी
6:16
website पर आपने एक account बनाया ठीक है, उस account को बनाते आपने दिया
6:20
एक password, let us say password one two three ठीक है? इस password
6:23
one two three को encrypt करेगा server और उसके बाद save करेगा, जब हम ये encryption
6:27
का इस्तेमाल करते हैं ये one way होता है ये hash function one way होता है। होता है यानी कि password
6:31
one, two, three से जो एक सा अजीब सा text है वो generate
6:34
किया जा सकता है, लेकिन इस से अजीब से text से password
6:38
generate नहीं किया जा सकता वापस ठीक है, ये इस तरह के functions होते हैं तो अब मैं
6:42
क्या करूंगा यहां पर इसको crypto को यहां पर मैं paste करूंगा
6:45
ठीक है और मैं क्या करूंगा request dot password ah body dot
6:49
password को encrypt करूंगा जिस तरह से मैंने इसको encrypt किया ठीक है और
6:53
same secret key से encrypt कर दूंगा, तो मैं exactly ये जो है
6:57
Exactly ये मैं copy करूंगा और यहां पर paste करूंगा ठीक है request
7:01
dot body dot password में ठीक है तो मैं को जिस तरह से कर दूंगा
7:04
अब मैं one two three डालूंगा अगर login करूंगा और यहां पर
7:09
harry at code with harry dot com और one two three डालूंगा
7:13
तो यहां पर invalid credentials दिखा रहा है ऐसा क्यों हुआ? मुझे देखना तो
7:17
user request dot body dot email इसके बराबर है और जो request
7:23
dot body dot password secret one two three मैंने password one two
7:26
three इस्तेमाल किया था ना, password one two three इस्तेमाल किया था हां। तो
7:31
password जब मैंने one two three इस्तेमाल किया था तो ऐसा दिक्कत क्यों आ रही है? password
7:35
one two three इस्तेमाल किया गया था name is Harry और password
7:40
क्या है, password क्या है? क्या मैंने password one two three इस्तेमाल
7:44
किया था हां तो मैं इन दोनों को match कर रहा हूं तो ये नहीं आ रहा है ठीक है secret one
7:48
two three ही इस्तेमाल किया है dot two string भी किया है। अगर ये
7:51
दोनों equal है तो ये मुझे access दे देना चाहिए इसको तो
7:56
मैं दो चीजें print करूंगा अभी यहां पर और वो दो चीजें हैं सबसे
7:59
पहले तो मैं console dot log user dot password करूंगा यानी कि
8:03
user के password को मैं print करूंगा और दूसरी जो मैं print करने वाला
8:06
हूं वो मेरी क्या होने वाली है वो मेरी होने वाली है ये
8:10
पूरी ये क्या generate कर रही है ठीक है और इसमें dot two string
8:14
भी मैं run कर दूंगा ठीक है dot two string ठीक है
8:18
और अब मैं login करके देखता हूं, ठीक है। अब मैं login
8:23
करके देखूंगा। one two three login invalid credential इसने दिखा दिया लेकिन
8:29
मेरे console में इसने दो चीजें print करके दिखाई होंगी। तो ये
8:32
अलग है और ये अलग है। तो फिर ऐसा इसलिए हो रहा है क्योंकि
8:36
मुझे decrypt function का इस्तेमाल करना चाहिए, basically होता क्या है कि every
8:39
time हम encrypt करेंगे ये हमें अलग अलग values देगा और उसका
8:44
reason होता है salt ठीक है तो मैं ये किसी एक video में समझा दूंगा, अलग अलग algorithms
8:47
की अलग-अलग working होती है, exactly AES की working अगर हम लोग देखेंगे
8:52
तो हमें इस तरह से encrypted match नहीं करना है हमें actually decrypt करना
8:55
होगा request dot body dot password और उसको match करना हमको, हमको
9:00
user dot password को decrypt करना और उसको match करना इस से, तो
9:03
instead of doing crypto dot A dot encrypt ये मैं क्या करूंगा
9:08
मैं कहूंगा crypto dot A dot decrypt मैं decrypt करूंगा और मैं
9:14
यहां पर कुछ इस तरह से करूंगा और इसको यहां paste करूंगा
9:19
ah decrypt user dot password। secret one two three और ये मैं
9:24
देखता हूं सब कुछ सही है कि नहीं, crypto ये यहां बंद हुआ, dot
9:29
two string ठीक है अब ये error क्यों दे रहा है okay तो ये if का भी मुझे
9:33
बंद करना है कुछ इस तरह से और मेरा काम हो जाएगा, तो अब देखते
9:36
हैं अब काम करना चाहिए इसको तो मैं आ जाऊंगा दोबारा से यहां पर और
9:41
इसके बाद मैं one two three लिखूंगा invalid credentials ये कैसा मजाक
9:45
है, ये कैसा है रे बबुआ, ये कैसा है क्या मैंने decrypt
9:50
को ठीक से use किया है? क्या मैंने decrypt को ठीक से use किया है dot
9:54
decrypt hypertext secret की okay तो decrypt करते वक्त मुझे two string
9:57
करने की जरूरत नहीं है। मुझे two string के साथ साथ ये
10:01
भी देने की जरूरत है तो मैं json dot parse करूंगा और फिर कुछ इस तरह
10:04
से करूंगा, तो मुझे एक काम और करना है तो सबसे पहले मुझे bytes
10:08
लेनी है decrypt करते तो मैं एक काम करूंगा, सबसे पहले bytes लूंगा
10:12
तो मैं एक काम करूंगा यहां पर लिखूंगा const bytes is equal
10:17
to कुछ इस तरह से और यहां पर मैं user dot password
10:23
लिखूंगा। और मैं decrypted pass is equal to कर दूंगा, ये jason
10:34
dot parse ये इस तरह से। ठीक है byte dot two string
10:38
और कुछ इस तरह से और ये मैं करूंगा तो, decrypted password
10:44
से मैं इसको match कर सकता हूं फिर। I hope this will work। ठीक
10:48
है? save करता हूं और ये करने के बाद Harry at the
10:52
rate code with Harry और ये sign in किया मैंने कुछ हुआ
10:56
क्यों नहीं लगता है कोई error आया, unexpected end of Jason output
11:01
ऐसा क्यों हुआ? ऐसा क्यों हुआ, ऐसा क्यों हुआ? syntax error आया
11:07
unexpected end of JSON output सबसे पहले ये देखता हूं कि यार
11:11
ये byte dot two string ये क्या क्या है? console dot lock
11:17
करके ये पता चलेगी। दोबारा से sign in करूंगा और यहां पर
11:22
ये पता चलेगी console dot log मैंने किया, email and password, email
11:27
and password ये है user dot password नहीं ये नहीं है, ये
11:31
in fact blank लग रहा है मुझे। okay तो secret key one
11:34
to three मैंने गलत दिया है, secret one to three मुझे देना होगा। ठीक है और
11:38
अब देखता हूं कि क्या रहता है, हां you have successfully locked
11:42
in तो मैंने secret actually गलत दिया था तो मैं इसको यहां से हटाऊंगा और
11:46
अब मेरा काम बन चुका है तो अगर मेरा request dot body dot password decrypted password
11:50
के बराबर है तब मैं user को login करने दूंगा तो इस तरह से हम encryption
11:53
decryption use कर सकते हैं, crypto JS का AS algorithm use कर
11:57
सकते हैं, ठीक है। यहां पर और भी बहुत तरह के algorithms available है crypto
12:01
के अंदर सारे algorithms की working आप लोगों को जानने की जरूरत नहीं है but
12:05
again एक particular algorithm के साथ किस तरह से काम करना है ये आपको जानने की
12:08
जरूरत है। अब मैं एक account बनाऊंगा, एक fresh account बनाऊंगा और उसके बाद
12:12
check करूंगा कि क्या वो account काम कर रहा है कि नहीं मैं sign up पे जाऊंगा और
12:16
यहां पर लिखूंगा name name at the rate game dot com और
12:21
password होगा name game ठीक है? तो name at the rate game
12:25
dot com, name at the rate game dot com और password था
12:31
name game login करूंगा और ये आ गया error ऐसा क्यों होगा
12:37
ऐसा क्यों हुआ unexpected token A in jason at position one। ऐसा
12:43
क्यों हुआ? ऐसा क्यों हुआ? तो मैं जब login कर रहा हूं
12:47
तो मैं login क्यों नहीं कर पा रहा हूं। तो यहां पर मैंने email
12:51
दिया name at the rate game dot com, password दिया name game, unexpected
12:55
token A in json at position one लिख कर आ रहा है और
12:59
मुझे यहां पर ये दोबारा से print करनी अब। console dot log
13:07
ये मुझे print करनी अब मैं sign in करूंगा अगर तो देखूंगा
13:13
कि क्या दिक्कत आ रही है, five hundred error आ गया दोबारा से name
13:17
game तो password name game है, ठीक है? तो ये unexpected token
13:21
A in JSON at position one कहां पर आ रहा है ये मुझे देखना होगा यार। मैं
13:26
jason dot parse कर रहा हूं bytes dot two string को, तो जब मैं
13:29
decrypted password को parse कर रहा हूं तो मुझे इसको parse करने
13:33
की जरूरत नहीं है सबसे पहली बात तो। मुझे यहां पर एक string चाहिए एक
13:37
string है। and that's about it मुझे simply एक string चाहिए तो
13:41
मुझे pass करने की जरूरत नहीं है जैसे को ठीक है तो ये गलती मैं कर रहा था। एक और
13:45
account बनाऊंगा यार एक और error आ गया एक और account बनाऊंगा इस बार बनाऊंगा game
13:49
at the rate of harry dot com ठीक है और इसका password
13:53
होगा game Harry but मुझे सबसे पहले sign up करना होगा फिर login करूंगा
13:59
game Harry रख दिया उसका password। तो game Harry एक बंदा है
14:04
जिसने अपना account बनाया है और अब login करेंगे। और ये game
14:10
Harry login भी हो चुका है, ठीक है, obviously console पर password इस तरह से print करना
14:14
अच्छी बात नहीं है वैसे भी मैं सारे console logs हटाने वाला हूं एक time पर तो
14:17
कोई tension वाली बात नहीं है। तो इस तरह से हम लोग crypto JS का इस्तेमाल कर सकते हैं
14:21
इस तरह से हम लोग use कर सकते हैं encryption को login
14:25
और sign up में add कर सकते हैं encryption को basically। आने वाले videos में हम लोग
14:28
देखेंगे JWD को किस तरह से इस्तेमाल करना है और किस तरह से login के बाद मैं JSON
14:32
web token को save कर दूंगा local host में, local storage में और
14:36
local storage में save करने के बाद हम लोग कहीं से भी उसको retrieve करके ये पता
14:40
लगा पाएंगे कि user locked in है कि नहीं ठीक है अगर वो locked in
14:44
होगा user तब simple सी है कि हम लोग उसके orders वगैरह
14:48
ये सब दिखाएंगे और अगर वो login नहीं होगा तो हम उसको
14:52
login करने के लिए बोलेंगे जैसे ही वो click करेगा please login to continue something
14:56
like that हम दिखाएंगे। So I hope कि आपने next day की playlist को जरूर access
14:59
कर लिया होगा। अभी के लिए इस video में इतना है guys, thank you so much guys for
15:03
watching this video and I will see you next time।
#Computer Education
#Hacking & Cracking
#Network Security
#Other
#VPN & Remote Access