Once I had the auth logic worked out on the backend of my Coding with Callie website builder, I shifted my focus to the UI. I made a custom React hook ‘useUser’ to fetch user details from the API 💡
Here’s how it works…
If there’s no JWT cookie in the document, we can skip calling the API completely. A user cannot be logged in without a JWT, so we’re safe to load the application with the default guest user. All we need to do is switch the ‘loading’ variable to ‘false’ and return out of the hook 🚀
Otherwise, we want to call the API. There are three possible results of this API call:
🥳 The JWT is valid and an actual user is returned
⏲️ The JWT is invalid and a guest user is returned
😡 Something goes wrong and the API returns an error
If we get a legit response, we’ll update the user with it. Otherwise, we’ll log the error message so we can debug. Regardless of the result, we’ll flip ‘loading’ to ‘false’ and exit our hook 🪝
From there, we can load different components based on the information we get from that return user object 🪄
What do you think?! 🤔
Want to develop your codings skills and network with other developers? Join the Coding with Callie community!
Coding with Callie – https://coding-with-callie.com/
LinkedIn – https://www.linkedin.com/company/coding-with-callie/
