meti-frontend/AUTH_HEADER_SETUP.md
2025-08-15 23:03:15 +07:00

2.3 KiB

Authorization Header Setup

Current Status

Backend URL: Fixed to http://localhost:4002
Authorization Header: Still needs to be set

How to Set the Authorization Header

Option 1: Edit .env file directly

# Open the .env file
nano .env
# or
code .env

Find this line:

NEXT_PUBLIC_API_AUTH_HEADER=

And set it to your actual auth header value:

# Examples:
NEXT_PUBLIC_API_AUTH_HEADER=Bearer your_jwt_token_here
# or
NEXT_PUBLIC_API_AUTH_HEADER=Basic dXNlcjpwYXNz
# or
NEXT_PUBLIC_API_AUTH_HEADER=ApiKey your_api_key_here
# or
NEXT_PUBLIC_API_AUTH_HEADER=your_custom_header_value

Option 2: Use sed command

# Replace with your actual auth header
sed -i '' 's/NEXT_PUBLIC_API_AUTH_HEADER=/NEXT_PUBLIC_API_AUTH_HEADER=Bearer your_token_here/g' .env

What Type of Auth Does Your Backend Expect?

1. Bearer Token (Most Common)

NEXT_PUBLIC_API_AUTH_HEADER=Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

2. Basic Authentication

NEXT_PUBLIC_API_AUTH_HEADER=Basic dXNlcjpwYXNz

3. API Key

NEXT_PUBLIC_API_AUTH_HEADER=ApiKey your_api_key_123

4. Custom Header

NEXT_PUBLIC_API_AUTH_HEADER=your_custom_value

Test Your Backend First

Before setting the header, test your backend with curl to see what format it expects:

# Test without auth header
curl --location 'http://localhost:4002/api/v1/auth/login' \
--header 'Content-Type: application/json' \
--data-raw '{
    "email": "superadmin@example.com",
    "password": "ChangeMe!Super#123"
}'

# Test with different auth header formats
curl --location 'http://localhost:4002/api/v1/auth/login' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer test_token' \
--data-raw '{
    "email": "superadmin@example.com",
    "password": "ChangeMe!Super#123"
}'

After Setting the Header

  1. Save the .env file
  2. Restart your Next.js app:
    npm run dev
    
  3. Check the browser console to see if the auth header is now set
  4. Try logging in again

Debug Information

The app now logs:

  • Backend URL being called
  • Whether auth header is set
  • Response status and data

Check your browser console (F12 → Console) to see this information.