Building Whinst Part 12: Creating a custom sign in page, adding authentication form validation and password encryption.

In the previous sub-articles, I talked about how I added authentication functionality to the Whinst web app. This article is a continuation from there, talking about the features and functionality I've added to improve upon the existing authentication functionality. In this article, I'll walk you through how I created a custom sign-in page, added form validation to the sign-in and sign-up pages and set up password encryption. Let's dive in🏊🏾‍♂️

As mentioned in the previous sub-articles, I'm using the NextAuth library for authentication in the Whinst web app. To keep things short, NextAuth simplifies the process of setting up authentication so much so that it comes with a default sign-in page if you're not looking to create your own. To set up my custom login page I first had to create the page and then define the page path in the authentication configuration as shown in the code below.

  pages:{
        signIn:"/authentication/sign-in",
    }

After this, I started building the page, something that was pretty straightforward😅 because I had already done most of the work when creating a custom sign-up page a few days ago. To set up the login functionality all I had to do was import the sign-in function from the authentication configuration page and after trying it out everything worked like magic😄.

Adding authentication form validation👨🏾‍💻

I'm using Formik for the forms in the Whinst web app and Yup for validating the data that will be input into these forms. For the authentication process, the main fields in the forms are names, email and password. I set up basic validation for these which are; required for all fields, email type for email, a minimum character limit for passwords and a password confirmation that is supposed to match the first password entered. I did this similar to the code below

   validationSchema: Yup.object({
       firstName: Yup.string()
         .max(15, 'Must be 15 characters or less')
         .required('Required'),
       lastName: Yup.string()
         .max(20, 'Must be 20 characters or less')
         .required('Required'),
       email: Yup.string().email('Invalid email address').required('Required'),
     }),

Password encryption🔐

To set up password encryption I used an encryption library called Bycrypt. What bycrypt does is hash a password into a bunch of random characters to prevent hackers from obtaining a user's password. In the Whinst web app, I set bycrypt at the backend and the frontend when creating a new user and when signing in respectively. On the backend bycrypt hashes the password that is sent from the frontend via the API endpoint and then stores it in the database in its encrypted form. On the frontend when a user is signing in, bycrypt compares the password that is returned from the backend with the password that is entered by the user, If the passwords match the user can then access the web app.

With these essential features and functionalities now implemented, authentication is almost a hundred percent complete with the last remaining addition being setting up email verification. Thanks for reading and see you in the next one🙏.

Building Whinst Part 12: Creating a custom sign in page, adding authentication form validation and password encryption.

Creating a custom sign-in page🔨

Adding authentication form validation👨🏾‍💻

Password encryption🔐