Forem: Afolabi Esther

Subscription app (part 5)

Afolabi Esther — Fri, 19 Apr 2024 21:38:04 +0000

In the previous post, I created a login route.

In this post, I'll be creating a user route and a middleware to verify a user.

Before a user can access the profile page after logging in or signing up, a request needs to be sent with the token received to verify the user before getting access to the profile page.

The user route will be a protected route and it'll send the user details. The user needs to sign up or login before hitting the route.

The user route will receive the token, extract the payload from the token, verify it and return the data to the client.

A middleware will be created for this steps.

This middleware intercepts the request to get access to a protected route.

It will extract the token from the request header, verify it and check if the user is authenticated before getting access to a protected route. If the the user is not authenticated, then it will throw an error.

Creating the middleware

In the src directory, create a new directory named "middleware."

Then inside it, create a file named "checkAuth.ts"

Create and export a function which takes in the request, response and next parameters

Logic for verifying the token:

get the token from the request header (ln 9)
check if there's a token (ln 11–19)
extract the token (ln 21).
In a try-and-catch block, verify the token with JWT and set a property on the user to have the verified email and catch any errors.( ln 23–41)

Make sure to define the type for Typescript

To define the property for the user in typescript
in the project root, create a @types directory, express directory and an index.ts file

And add the types to the tsconfig.json file.

execute the next route (ln 31)

Using the middleware...

Create the user route

In the auth.ts file, create a get request for getting the user profile.

And import the middleware.

right here, the user route is created with the middleware placed in-between the path and the call-back function
find the user in the DB (ln 146)
send the data to the client (ln. 148–157)

Testing the code...

In postman:

create a new GET request
change the route url
login an existing user to get a token
copy the token and place inside of the header
send

Yay! I got the token verified and the user data.

In the next post, I will be setting up Stripe and creating the subs/prices route.

Generate token

Afolabi Esther — Tue, 02 Apr 2024 12:08:34 +0000

In the previous post, I setup and connected the database with the server, verified the email in the database, hashed the password, and saved the user to DB.

In this post, I'll be sending back a token once the user has been saved to DB. Also, create a login route.

5. Send back token

After a user has been signed up successfully, a token has to be sent back to give the user access to the application.

The token will be a jwt (json web token). This article gives a great explanation.

The token is a way of identifying who the user is on the frontend.

The token has to be created and sent to the client, and then the client will send back the token to the server with every single request made.

The token consists of 3 parts: the header, the payload, and the verify signature.

Create the token

I installed the package

npm install jsonwebtoken

Also, install the types
npm install @types/jsonwebtoken --save-dev

Code explanation:

64–70: create a const variable named token
generates a JWT containing the user's email and sets its expiration to 1 hour.
the JWT_SECRET secret key is crucial for signing the JWT and ensuring its integrity.
ln 73 - 83: send back token to the user with user information.

Testing the coding...

Signing up with a new email.

Yay! I got a token and the user data.

Create login route

The login steps will be:

get user data from the client and find the user in the DB
compare the hashed password
send back a token

Get and find user

-ln 94: right here, I get user data from the request body
-ln 96: find user in DB
-ln 98 - 104: if there's no user, send this error

If there's no error from this step, go ahead to compare the passwords

Compare passwords

ln 108: using bcryptjs to compare the password from the request body with the hashed password from the database
ln 110-119: check if isMatch is false, send this error message

If there's no error from this step, send back a token

Send back a token

Just as it's done in the sign-up route.

Testing the API...

create another post request named "login" (simply duplicate the sign-up request)
put in the appropriate url
in the body, put in the email and password of an existing user

Checking what happens if I use an incorrect password

In the next post, I'll create a check authentication middleware that extracts and verifies the token (gotten from the client) to get the user information.

Set up MongoDB

Afolabi Esther — Fri, 22 Mar 2024 21:59:21 +0000

Following the validation of username, email, and password in the previous post, we'll now verify if the provided email address already exists within the database.

The steps for checking email:

once we pass the validation step,
get the email and fetch a particular record in the database that has that email
if we get back a record, then send a response that the "email is already used, you can't create an account with it."
if it returns null, then this step is passed, and we can go ahead and hash the password.

Firstly, we need to setup and connect the database with the server to execute these steps.

Secondly, we need to define how the user entity will look inside the database.

Setting up the database (MongoDB)

The doc is well detailed and very easy to follow to get started with MongoDB.

Just follow the "Chapter 1 Atlas" six guides.

These guides provide clear and concise instructions to ensure a smooth and successful database launch.

NB: Copy your credentials from the security quick-start in a safe place.

The steps are:

Sign Up for a MongoDB Account
Create a Cluster
Add a Database User
Configure a Network Connection
Load Sample Data (skip this step)
Get Connection String

connecting your app

copy the connection string👆

Once the above steps are done, save your connection string to your app.

Save the URI

Copy the URI and save it to your app.

To save...

inside the server, create a .env file
then save your URI " MONGO_URI=[ your URI ]"
replace the password part with the credential you saved earlier from the security quick-start.

Connecting the database

Mongoose package lib will be utilized to connect to the MongoDB database.

install mongoose and dotenv packages. The dotenv package helps to readenvironment variables inside the .env file.
"npm install mongoose dotenv"
inside index.ts, import mongoose and dotenv

The code above:

ln 9: read the URI inside the .env file.
ln 16-23: connect to DB
pass in the URI
log some message if we're connected or catch any error if something went wrong.

Yay! MongoDB is connected.

NB: If you get this error when connecting to the database,
"Error: MongooseServerSelectionError: Could not connect to any servers in your MongoDB Atlas cluster. One common reason is that you're trying to access the database from an IP that isn't whitelisted. Make sure your current IP address is on your Atlas cluster's IP whitelist"

Simply do this:

Define the user entity

create a directory named "models" in the src directory.
then create a user.ts file in the models directory. This is where we define the user entity.

The code above:

import mongoose
get schema from mongoose
create a new schema and define the properties we want a user to have.
then export the userSchema

2. Verify if email already exists

Back to the auth file...

import the userSchema as User (with this, we can perform CRUD operations on the DB)

ln 34: extract these values from the incoming request body object
ln 36: the code here find a particular user that has the email we get from the req body in the DB
since there's no user yet in our DB it will return null.
we'll check this step later once we create a user
ln 38: here we specify what should happen if there's a user (send a response that email is in use)

3. Hash the password

We'll be using the bcryptjs library to hash the passwords. It securely hashes a user's password before storing it in a database, protecting sensitive information from unauthorized access.

Install the package
npm install bcryptjs

Also install the types
npm install @types/bcryptjs --save-dev

The code above:

import bcrypt
after checking the email,
ln 50: we declares a constant variable named hashedPassword to store the hashed password result. Then we call the hash function from the bcrypt library (which takes in a password and a salt value) and await its completion.
incase you're wondering what a salt value is: Bcrypt automatically generates a unique salt for each password, making it extremely difficult to crack even if multiple users have the same password.

Now that the password is secure, let's save the user.

4. Save the user to the DB

ln 54: we declare a constant variable named newUser to store the newly created user object. Then calls the create function on the User model we imported
pass in the provided email and hashed password.
waits for the user creation to complete before proceeding.

This will successfully create a new user record in the database.

Testing the code...

Registration successful 👇

new user saved to the DB with a hashed password.👇

Let's see what we get if we use the same email.

Ta da! We got a response that it's in use👍

Errors I got

ERROR 1

I wanted to restart the server, then I got this error

I realized I hadn't navigated to the server directory using the cd command. What a classic case.

Just in case you are about to smash your PC, please do this.

ERROR 2

Just when I thought I was done, another error popped up!

To resolve a process conflict, I terminated all running Node.js processes using the task manager and then re-executed the script within VSCode.

The journey continues in the next post, where we'll explore token generation and transmission.

Create sign-up route

Afolabi Esther — Tue, 19 Mar 2024 00:58:48 +0000

In the last post, I created the project directory and had the server running.

In this post, I'll be working on the auth (sign-up route).

The logic to implement in the sign-up route are:

validate email and password
check if email is not already used
hash the password..(not storing the password in plain text incase the DB gets breached)
save the user to the database
send back token

Make sure to:

install express validator lib package (an express middleware for validator)

"npm install --save express-validator"

Download and set up Postman (we'll be using this to test the API). Check out this article to learn what postman is and how to set it up.

Creating the sign-up route

Create a routes folder inside of the src directory (this will house our routes)

What I did here:

create a auth.ts file ( this will house the auth route)
ln 1 : import express from express
ln 2: get body & validationResult from express-validator (we'll be using these to validate user's email and password in the post request)
ln 4 : get router from express and store in a variable
with this router variable we can create multiple routes for this file and export it

-ln 7 - 30: create a post request for signing up
Breakdown:

call the post method on the router, which takes in 2 arguments (path and request handler)
in-between the path and the handler, we add what we want to validate

1. Validate username, email and password

ln 13: catch the validation error with validationResult which returns an array of errors
ln 15: Check if the validation error(array) isn't empty. If this is true, throw/send back some errors as responses in JSON format.

ln 26 : if there's no error, send a response that the credentials are valid

Let's check if this works...

Configure the authRoutes

in the root app (index.ts)
ln 2: import authRoutes from the auth file.
configure the authRoutes in the root application by utilizing app.use()
specify the root path and specify all of the routes
so, to get the signup route, all we need to do is to go to

"localhost:8080/auth/signup"

Testing the API with Postman

Correct credentials

Right here:

create a new collection
create a post request
input the url "http://localhost:8000/auth/sign-up"
inside the body , check raw and set to JSON
then put in the username, email and password
click send

What if we put in an invalid email and password? We get this response.

Error response

In the next post, I'll be checking if email is not already used (in this step, I'll be creating the database and connecting it to the server).

Setting up!

Afolabi Esther — Fri, 15 Mar 2024 11:39:29 +0000

What exactly am I building?

A full-stack MERN application.

It's a subscription app for a hair product where a user can subscribe on a monthly basis to get access to specific hair products and resources based on the plan choosen.

It will consist of:

a landing page (hero page)
sign-up, login & logout features
payment session (using Stripe)

So,I'm using Laith Harb video as my base tutorial(Laith is a superb tutor...check his videos out) which helps me understand the core logics/functionalities. Also I'll be going through some backend codes on GitHub to see how I can improve the app later on.

🔴Alert! It's a Typescript project so brace up for errors😅.

Let's get started.

1.Setting up the project

Create a directory for the project named subscription_app.
Open up the CMD prompt and move into the directory.
Execute a command to create a react app using Vite. Clara gave a thorough explanation here.

Once react app is created, right-click on the project directory and open with vscode.

I'll be working on the API first(the main focus of this documentation). The frontend won't be hard to implement since I already know how to work with React.

2. Building the API

In the root of the project directory, create a server directory
Open the terminal window and move into the server folder, "cd server."
initialize a node application with " npm init -y"

3.Install some dependencies.

"npm install express"

express,

"npm install @types/express @types/node typescript ts-node-dev --save-dev"

types for express & node
typescript, and
ts-node-dev (this package allows us to run typescript application inside of development),

" npm install nodemon -g"

install nodemon globally (it hot reloads our application)
run this command "tsc -init" to initialize that it's a typescript project

3. Getting the app running

Create a src directory ( where our code will live)
Then, create an index.ts file ( this will be the root of our express app)
in the index.ts file
import express
create an express app
create a route
listen at a particular port

Don't forget to save.

Next...

in the package.json
create a new script "start:dev": "nodemon --watch './*/.ts' --exec ts-node src/index.ts"
this call nodemon to watch for changes in "any typescript file that's in any directory that has the extension .ts". If there's any changes nodemon should execute ts-node and rerun the root application.

So let's run the script (server)...

"npm run start:dev"

Also run the url in the browser

"localhost:8080."

It should display your response.

We have the server up and running!

In the next post, I'll be working on the auth(sign-up route)

Freewriting Tech Blog

Afolabi Esther — Mon, 11 Mar 2024 17:39:54 +0000

Hi everyone!
Welcome to my page.

I'm starting this "freewriting" blog to document my learning, share things I'll be building, and also to be seen by anyone who would find it useful.

As I've mentioned, it's a "freewriting" blog (with some humor sprinkled), not a perfect technical blog. So I'm open to feedback from more experienced developers and writers.

I'm inspired by Tamrat on Medium platform. The approach he took was to learn something then explain it to himself in his own words.

I'm a frontend developer with 2 years of experience exploring the backend world. I'm so curious to see how things work over "there."

So, as I'm building, I'll be sharing my thought process, explaining concepts, challenges, issues, and solutions to problems I encounter.

To get started, I'll be challenging myself to build a full-stack subscription app using React, Typescript, Expressjs, and MongoDB. It's my first time building this, though I'm familiar with the frontend stack (Reactjs). I'm eager to learn new things to sharpen my skills.