Building a web app (Whinst) Part 11: Setting up user authentication (2/2)

Building Whinst

This article is a continuation of the previous article which talked about how I set up logging in with user credentials such as email and password. In this article, I’ll walk you through how I set up user registration in the Whinst web app. Let’s dive in🏄🏻‍♂️.

How I set up user registration👨🏽‍💻

The backend: In the backend or server-side I first set up an API endpoint for the creation of a new user in the database. I also set up simple logic to check if the user being created already exists or not. When a POST request is sent to the API endpoint it takes the user data sent from the front end and gets the email then checks if it already exists in the database or not. If it exists it sends an error back to the frontend and if it doesn’t it creates a new user in the database and then sends the newly created user details back to the frontend.

The frontend: On the frontend I first set up a simple form powered by Formik. I then created a signup function that takes the data input into the form by the user and sends it to the backend via the API endpoint mentioned in the paragraph above. If the user is successfully created you get redirected to a sign-in page where the login details of the newly created user can be entered to gain access to the web app.

With authentication functionality now set up and working, I’ve moved on to adding some other functionality such as a verification email, form validation and password encryption to further complete the authentication process. Thanks for reading and see you in the next one🙏.

Share

Leave a Comment

Your email address will not be published. Required fields are marked *