User authentication which is the process of identifying a person trying to access an application, is an essential feature found in most applications and Whinst is no exception to this. This article will be divided into 2 sub-articles which are logging in with credentials, user registration. In this article which is the first sub-article, I’ll walk you through how I set up authentication with credentials and how it works. Let’s dive in🚣🏾♂️.
Setting up authentication with credentials🔒
Authentication with credentials is the use of user credentials such as email, username and password to gain access to an application.
Database and API: To set this up I first had to create a user with credentials in the database. I then connected the database to the frontend via an API endpoint that queries a single user from the database and serves this to the frontend.
Frontend: The Whinst frontend is built in Nextjs so for authentication, I used NextAuth which is a Nextjs authentication library. NextAuth makes the authentication process pretty simple which is a good thing because authentication isn’t the easiest functionality to implement😅. Without going too much into the technical details of it, NextAuth offers credential login and a wide range of 3rd party OAuth login options. For Whinst I’ll be using credentials for authentication but I might add a 3rd party package later.
I first had to define some authentication options such as the providers I’ll be using and also what credentials I’ll be taking from users. I then added some simple logic that works when a user clicks the sign-in button, It takes the credentials given and via the endpoint and database checks to see whether the user is registered. If a user is registered, the user details and an encrypted token are returned and stored in the browser cookies to keep the user logged in until they sign out. For now, I’m using the default next auth login page until I create a custom login page. This allows me to access the application using the user credentials I created in the database.
With this setup, I’ve moved on to adding functionality for the creation of users within the application which I’ll write about in the next sub-article of this article. Thanks for reading and see you in the next one🙏.