My first time adding User Authentication / Login Logout integration to my client project was an awesome experience. I’ve always been just doing the CRUD, Component before and giving me the opportunity to do the Login credentials was pretty cool.

Anyway, these “how to’s” are what I’m basing my code from now on ( until I learn a better approach to do it ) going forward.

So the important thing about doing any kind of challenging task is to cut them down first into little pieces and then do them one at a time.

Here’s how the login authentication is built based on what I gather on the web:

Login Page ( UI ) - you have to have a small UI component to put down your username and password

Login Logic for forms - this includes the state management / or putting your login information and passing it to the API

Tokens & Session storage - when API sees your login information, it’ll usually respond with something that confirms that you have the correct details. Depending on your project, mine returns the user details and tokens. Which we need to access data and pages that require tokens or authentication to open.

Protect Routes - if we have multiple pages, we might need to protect some pages that require users' information and authentication before accessing. Protecting them with some kind of redirect is one that I have used on my current project.

Logout Function - removing any traces of user information on our browser.

Just a simple login form will do for this how to’s:

 function for our form to be able to change the input fields, then 

2. Interacting with the API with our credentials. We needed to know if we entered the correct or incorrect credentials and check if there’s a return data from our API. Back in our 

 function, we just wanted to see in our console what data our API is going to give to us.

 this object will depends on the server or API you are using, at this moment the API I’m using requires this headers and the credentials are required to be passed in the body.

We now have a basic Login page that responds to our entered credentials. We should have been able to see what kind of message/response it has and use that response to our application.

Usually, in any login authentication, the server will respond with a token, token expiration, and user details. With this information, we can store them in our browser's local storage to be used for application. 

Displaying the user details ( name ) in the frontend 

Using the tokens to get other API information we might need 

Logging off the app automatically when the token expires

Back on the handleSubmit function, we can store our login API response in the local storage.

Again depending on your API returned data, we can add them to our 

 to be used on different parts of our site. Now we have 

This one is where I struggled a lot when I was doing the user authentication as I was not really familiar with HOC ( High Order Component - more on that soon ) back then and still right now 😅 and Context API. We need to create some kind of a way to create restrictions/protection on some pages/routes that we wanted only logged-in users to view.

In this case, I’m just going to make sure the user can’t see the home page 

 that’s why in token and session storage, we redirect the user after logging in. Now we’ll create a way to make sure non-logged-in users can’t see our home page 

Let’s start by making sure that when a valid user logged in, we can access his data everywhere in our App. We’re going to use Context API here.

function here as well, so we can use it anywhere in our application in the future.

2. Create our High Order Component to make sure that if a non-logged in user cannot access our home page, and redirects to our login page. Basically, what we’re doing is creating a component that takes a component as an argument and returns a new component. With the new component, we’re checking first if the user has logged-in information and is valid before rendering the component. ( too much use of the word component here 🤣 ).

We just need to wrap this component in any pages we wanted to ask/require authentication.

 function. This will be easy as we just need to clear out the 

 that we created earlier when logging in.

 function into the component you needed it.

Congratulations! 🥳 Now you have a working user authentication component. 

This is how I did my first ever User Authentication task, and there is for sure a better approach than what I have, and there’s a better tool as well to use for easier user authentication. 

 where I see lot’s of developer is currently using for thier next.js authentication. 

Check out the whole code in my GitHub Repository: 

https://github.com/owaaquino/Login-Authentication

Login / Logout /  User Authentication

All right, so this one was so FUN! ( emphasis on Fun! ), I’ve been trying to do this for a couple of days and finally managed to find a solution. Thanks, ChatGPT!

Honestly, I’m not really good at doing this routing and paginating stuff. I had to use my old codes before and paste them in. Unfortunately, my old codes won’t work this time as I’m using a different approach and tried 

 for the first time on a blog. ( I am used to doing stuff on GraphQL with Gatsby, and I have a ready-to-paste old code ).

All right, this one was so FUN! ( emphasis on Fun! ). I’ve been trying to do this for a couple of days and finally managed to find a solution. Thanks, ChatGPT! 

Tags

Login / Logout / User Authentication

NextJS + Sanity.io Pagination Fun! 😒