MERN Authentication Tutorial #10 - Making a useSignup Hook
HTML-код
- Опубликовано: 28 июл 2022
- In this MERN auth lesson, you'll create a custom, reusable React hook that we can use to sign new users up to the application.
⭐⭐ Get the full course now (without ads) on the Net Ninja Pro site:
netninja.dev/p/mern-auth-tuto...
⭐⭐ Get access to all free & PREMIUM courses on Net Ninja Pro:
net-ninja-pro.teachable.com/p...
🐱💻 Access the course files on GitHub:
github.com/iamshaunjp/MERN-Au...
🐱💻 MERN Stack Tutorial:
On Net Ninja Pro - • Figma for Web Developers
On RUclips - • MERN Stack Tutorial #1...
🐱💻 React Tutorial:
On Net Ninja Pro - codinginpublic.dev/projects/p...
On RUclips - • Full React Tutorial #1...
🔥🔥🔥 Other resources:
VS Code - code.visualstudio.com/
MongoDB Atlas - code.visualstudio.com/
I get your notifications and I'm like this guy is out of this world. You're my man! Thanks
Thanks David :)
This current course completely improve my hook and context approch, thank's .
You're very welcome!
Awesome work mate! Love your efforts! ❤❤❤❤
i'm so lucky to have found your channel online, i hope you post the next video today, thank you very much
Thanks for your support :)
I'm loving this series. Thanks dude ♥
Glad to hear it! :) thanks Lyes
Great course🔝🔝🔝🔝🔝 I hope the third part of the series involves refreshtokens!! 🎉🎉🎉🎉🎉🎉
AAAAAAAAAAAAAAWESOME TUTORIAL ! Thnx a lot Shaun !
Another reason why I prefer express-session over JWT--the credentials are automatically stored in a cookie 😊
great lesson 👍
Why did you choose to store the user session in local storage? Wouldn't cookies be a better place?
i wonder this too
it is little complicated to pass cookie
Show us a video of your 1 million subscribers award from RUclips when you get it! I think you were at 25k subscribers when I started watching your tutorials. Your the best teacher on RUclips. Thanks for everything bro! Do you think you'll do a modern css course? I'm lost on all the different updates and what systems to use now..
hey, thanks for sticking with me all this time :). I will share my award when I get it! Also, I will probably do a big modern HTML/CSS course on udemy at some point later in the year (hopefully!).
would love to see this video redone with react query :)
Thank you for the video! At the end you mentioned that you will check local storage to see if it already has the user. Is that a good way to see if user is already logged in? What if user does not let you write to local storage? What is a better way to keep track if user is already logged in?
Hi!! Awesome work! Can you please make video on react monorepo?
Great series! I only wonder if locally storing the token keeps it safe from XSS attacks?
Two questions : I was under the impression that when we consumed our context, we could only do so from certain components which were being provided with. But here I have noticed we are consuming a context (useAuthContext) inside a custom hook? So I assume the idea that we must consume our context within a component being provided with this context is not always the case? (since the custom hook useSignup is not being provided with unless I'm missing something ...) Second question : how long does information stay inside the local storage? Thank you!
Awesome 👏🏻
Thanks 🤗
Question: Will the button ever appear disabled? Doesn't the signup function always return the value of isLoading to be false?
Bro can you please create a tutorial on webhook api implementation. Like how razorpay and stripe is providing payment event's to the webhook subscriber
Awesome video +++++++++++++++++++ 🙂
how are you seeing the authcontext state in the console?
Since the sign-in logic doesn't utilise any React hooks, should the logic not be stored inside a utility function instead of a hook?
It is not updating the error and isloading at first time. It is updating the prev state after second click
is react context is really necessary?
Im getting "All fields must be filled" as my error message instead of "Email already in use"
Fixed it: Typo
const response = await fetch('/api/user/signup', {
method: 'POST',
headers: {'Content-Type': 'application/json'}, //this was 'Context-Type' instead of 'Content-Type'
body: JSON.stringify({ email, password })
Check your spelling
thanks
You're welcome dude!
I forgot status(400) in signup page and response.ok evaluated to true and i was not getting error even though i made error. please check those lines in case youare gettign the same error. it will save you one hour
is it safe and is it standard industry practice to store token inside localStorage?
It is definitely not safe and not standard practice. Those tokens should be kept as httpOnly cookies (i.e., disappear once the application's process terminates).
Hi.
I am watching your mern authentication playlist and am really enjoying it.
but in this video i could not understand the functionality of isLoading variable. can you please explain that to me?
thanks in advance :)
This method is mainly used in asynchronous fetches. Fetching some data from a server takes some time, therefore, you create this state and tell your code to set setLoading to true until the data is fully fetched. And until it is fully fetched, you can tell the browser to show, for example, LOADING THE DATA. PLEASE WAIT text. And when setLoading is false, this text disappears. Here he used it to disable using the signup button, because, when you write an email in the input button and submit it, it should first compare if the email exists in the server data or not. If the data is not fully fetched, it cannot compare it.
@@alimirhashimli2727 got it. Thanks a lot!
@@alimirhashimli2727 Question: Will the button ever appear disabled? Doesn't the signup function always return the value of isLoading to be false?
Please reply to my question🙃@@alimirhashimli2727
@@ibrahim525 It doesn't appear disabled in this case because I think the process is too fast for us to notice it being disabled/the css is not appearing different when it becomes disabled. Also, the moment you make the function call to signup, setIsLoading is set to True until the process terminates, which then setIsLoading is set to False, whether the process was a success or a failure because in both cases this particular process ended its job. I'm a beginner though.
Has anyone come across this error "cannot destructure property 'signup' of............ Because it is undefined" ? Please help!!!!!
You need to look up the signup object that you are trying to destructure. Destructuring only works if the property exists on the object if the object is null or undefined you are going to get this error. Look into where is the object signup coming from and check whether it is null or undefined.
😍😍🔥
I just bought the course and I have nothing. The videos ain't showing, the github is empty ? What this is all about ?
Arey u talking about the netninja pro
Can someone please tell me were to find the source code. I am having a poblem with signing up and I get this error "User.signup is not a function"
in the description of the video
😍
First :)
1. Failed to load resource: the server responded with a status of 404 (Not Found) api/user/signup:1
2. Uncaught (in promise) SyntaxError: Unexpected token '
ruclips.net/video/PNtFSVU-YTI/видео.html it solved same error for me
POST ..../api/user/signup 404 (Not Found)
Uncaught (in promise) SyntaxError: Unexpected end of JSON input
did you ever figure out this problem? If so, what did you do to fix it? I have the same issue.
can you show your code
same issue have you fixed it?
same issue here
Make sure that the json object that you are trying to send on the server side is inside the object guys.
body: JSON.stringify({email, password})