API Integration for Front-End Developers: A Practical Guide to Connecting Interfaces and Data

📘 Chapter 3: Authentication and Secure API Access

🧭 What You’ll Learn

By the end of this chapter, you will:

• Understand different types of API authentication
• Implement Bearer Token-based authentication
• Store and manage API tokens securely
• Handle login, logout, and token refresh flows
• Attach authorization headers in API requests
• Protect sensitive routes with token verification
• Implement secure access in React, Vue, or plain JavaScript apps

🔐 What Is Authentication in API Access?

Authentication is the process of verifying who the user is. When interacting with secure APIs, you typically need to prove your identity before gaining access to protected data or resources.

🔑 Common Authentication Methods:

🔒 Bearer Token Authentication (JWT)

The Bearer Token, often a JWT (JSON Web Token), is the most widely used authentication mechanism in modern frontend apps.

🔁 Basic Flow:

1. User logs in using credentials
2. API returns a JWT (token)
3. Frontend stores the token (usually in localStorage or cookies)
4. Token is attached in the Authorization header of subsequent API requests
5. Backend verifies the token and returns data if valid

📌 Sample Token Response

json

{

  "token": "eyJhbGciOiJIUzI1NiIsInR5..."

}

📬 Authorization Header Format

http

Authorization: Bearer <your_token_here>

🔄 Step-by-Step: Implementing Secure Login Flow

1. 🧾 Login API Request

js

async function loginUser(credentials) {

  const response = await fetch('https://api.example.com/auth/login', {

    method: 'POST',

    headers: { 'Content-Type': 'application/json' },

    body: JSON.stringify(credentials)

  });

  if (!response.ok) throw new Error('Login failed');

  return await response.json();

}

2. 📦 Store the Token (LocalStorage Example)

js

const data = await loginUser({ email: 'user@example.com', password: '123456' });

localStorage.setItem('token', data.token);

⚠️ Avoid storing sensitive tokens in localStorage for high-security apps—use HttpOnly cookies if possible.

3. 📤 Send Token in Future Requests

js

const token = localStorage.getItem('token');

fetch('https://api.example.com/user-profile', {

  headers: {

    'Authorization': `Bearer ${token}`

  }

});

Or using axios:

js

axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

🔁 Logout and Token Cleanup

js

function logout() {

  localStorage.removeItem('token');

  window.location.href = '/login';

}

🔐 Refresh Tokens

JWTs often expire for security reasons. In such cases, apps implement refresh tokens.

Token Flow:

js

// Example: Use refresh token endpoint

const res = await fetch('/auth/refresh-token', {

  method: 'POST',

  credentials: 'include' // send cookies

});

Most refresh token flows require secure, cookie-based storage.

🧠 Protecting Routes in Front-End Apps

✅ Protected Route Example (React)

jsx

function PrivateRoute({ children }) {

  const token = localStorage.getItem('token');

  return token ? children : <Navigate to="/login" />;

}

✅ Guarding Routes (Vue.js)

js

router.beforeEach((to, from, next) => {

  const token = localStorage.getItem('token');

  if (to.meta.requiresAuth && !token) {

    next('/login');

  } else {

    next();

  }

});

⚠️ CORS and Authentication

If your front-end and API are hosted on different domains, you must configure CORS on the server to accept:

• Custom headers like Authorization
• Cookies (for refresh token flow)
• Proper origin whitelisting

Server-side must include:

http

Access-Control-Allow-Origin: https://your-frontend.com

Access-Control-Allow-Headers: Authorization, Content-Type

🧾 Real-World Login Form Example (HTML + JS)

html

<form id="loginForm">

  <input type="email" name="email" required />

  <input type="password" name="password" required />

  <button type="submit">Login</button>

</form>

<script>

document.getElementById('loginForm').addEventListener('submit', async (e) => {

  e.preventDefault();

  const form = new FormData(e.target);

  const email = form.get('email');

  const password = form.get('password');

  const res = await fetch('/api/login', {

    method: 'POST',

    headers: { 'Content-Type': 'application/json' },

    body: JSON.stringify({ email, password })

  });

  const data = await res.json();

  localStorage.setItem('token', data.token);

});

</script>

🛡️ Securing the Front-End Side

🧠 Common Authentication Errors

📋 Summary: Authentication Essentials

✅ Summary

In this chapter, you’ve learned:

• How Bearer token authentication works
• How to store and send tokens securely
• How to use fetch() and axios to access protected endpoints
• How to handle login, logout, and token expiration
• How to protect UI routes in React, Vue, and plain JavaScript
• The importance of secure token handling, CORS, and best practices