• Johnson Manasseh

  • Let's grow together

Phone

0123 456 789

Address

121 King Street, Melbourne Victoria 3000 Australia

Building a Full-Stack Web App in 45 Days – Day 21 (Authentication and Security)

Security is important for any web app. It ensures that only the right people can access the right data while keeping everything safe from attacks.

Today, I’ll talk about how I added authentication, stored user data securely, and protected my app from common security risks.

1. What is Authentication?

Authentication is how an app verifies a user’s identity before giving access. Instead of using emails and passwords, I decided to use phone number authentication for a faster and easier login experience.

Why Phone Number Login?

  • No need to remember passwords – Users just enter their phone number.

  • Faster login – No email verification steps.

  • Better user experience – Especially helpful for mobile users.

Why Twilio Instead of Firebase?

I initially considered Firebase Authentication, but I faced issues when trying to remove reCAPTCHA verification. Since I wanted a smoother login flow, I switched to Twilio, which allows sending OTPs (one-time passwords) via SMS.

How It Works:

  1. The user enters their phone number.

  2. The backend sends an OTP using Twilio.

  3. The user enters the OTP.

  4. If the OTP is correct, they are logged in, and a secure session is created.

2. Where to Store Login Tokens?

Once a user logs in, we need to store their authentication token. Since passwords are not involved, the focus is on keeping login sessions secure.

Storage Options:

  • Local Storage: Not the safest option because it’s exposed to the browser.

  • HTTP-Only Cookies: A better choice since JavaScript cannot access them, making it harder for attackers to steal tokens.

For better security, I’m storing authentication tokens in HTTP-only cookies.

Facebook
Twitter
LinkedIn

4. Protecting the App from Common Attacks

There are many ways hackers try to break into apps. Here’s how I protected mine:

SQL Injection

Hackers try to insert harmful code into database queries.
Solution: Use prepared statements or ORMs to safely handle database queries.

Cross-Site Scripting (XSS)

Attackers inject harmful scripts into web pages to steal user data.
Solution: Always sanitize user inputs and avoid inserting raw HTML into the app.

Cross-Site Request Forgery (CSRF)

A hacker tricks users into performing unwanted actions while logged in.
Solution: Use CSRF tokens, which confirm that requests are made by the real user.

Brute Force Attacks

Hackers try guessing passwords by testing many combinations.
Solution: Add rate limiting so users can only try logging in a few times before being blocked.

5. Keeping APIs Secure

Since users log in with phone numbers, security is a top priority to prevent unauthorized access and protect data. Here’s how I secured both the authentication system and the API itself:

Securing Authentication (Phone Number Login)

  • OTP Expiry – OTPs expire quickly to prevent reuse.

  • Rate Limiting – Limits OTP requests to prevent abuse (e.g., too many OTP requests from the same number).

  • Token Expiry – Authentication tokens expire after a set time, so users must reauthenticate after a while.

Securing API Access

  • Authentication Tokens – Only logged-in users with valid tokens can access protected data.

  • Enable CORS – Blocks unwanted requests from unknown sources.

  • Limit API Requests – Prevents attackers from overwhelming the system with too many requests.

  • Log and Monitor Requests – Tracks suspicious activity to detect and stop attacks early.

These steps ensure that both user authentication and API access remain safe while keeping the login experience smooth.

Skyrocket your customer base with our digital marketing specialists

Get a free consultation
limited time

6. Expiring Tokens for Extra Security

Tokens should not last forever. If a hacker steals a token, they can use it to access the app. To prevent this:

  • Tokens expire after a set time (e.g., 1 hour).

  • Users need to log in again after expiration.

  • Refresh tokens can be used to get a new access token without logging in again.

Next Steps

Now that the app is secure, the next step is making it faster and more efficient. In the next blog (Day 28), I’ll cover how I deployed the app, managed environments, and ensured smooth scalability. Stay tuned!

How do you handle authentication and security in your projects? Let me know in the comments!

 

“Don’t miss out on our latest computer science, technology, lifestyle, and design updates! Keep our notifications on to stay up-to-date.”

Want to get weekly knowledge ?

Get notified whenever we post new stuffs.