Authentication
Securing API access

Pixl presents
Pasting your API key into frontend code? Great, now everyone has it. Learn keys and tokens, and where they belong.Pasting your API key into frontend code? Great, now everyone has it. Learn keys and tokens, and where they belong.

Lots of APIs are open to anybody. You can check the weather or look up public info without logging in. But most APIs need to know who you are, and that's called authentication. It's how you prove your identity to an API.
Why APIs Need Authentication#
There are a few really good reasons APIs make you authenticate.
Security. Without authentication, anybody could read or change your data. Imagine if any random person could read your emails or delete your photos (yikes).
Billing. Lots of APIs charge based on usage. They need to know who to send the bill to.
Rate Limiting. APIs often cap how many requests you can make per hour. They need to keep track of who's making them.
Personalization. APIs send back different data for different people. Your shopping cart isn't the same as somebody else's.
Types of Authentication#
There are a handful of ways to authenticate with an API. Let's look at the most common ones.
API Keys#
An API key is kinda like a special password for your app. It's a long string of letters and numbers that identifies you.
API Key: sk_live_abc123xyz789def456ghiWhen you make a request, you include this key, and the server checks whether it's valid.
How to get an API key.
- Sign up for the service
- Go to your account settings or developer dashboard
- Find "API Keys" or "Developer Settings"
- Create a new key
Where to put the key.
Most APIs want the key in a header.
GET /products
Authorization: Bearer sk_live_abc123xyz789def456ghiSome APIs use a query parameter instead.
GET /products?api_key=sk_live_abc123xyz789def456ghiBearer Tokens#
Bearer tokens work like API keys, but they're usually temporary. You log in with your username and password, the API hands you a token, and that token only works for a limited time.
Step 1. Log In#
Send your username and password.
POST /login
{ "email": "[email protected]", "password": "yourpassword" }Step 2. Get a Token#
The API sends a token back.
{ "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..." }Step 3. Use the Token#
Include the token in your future requests.
GET /my-account
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...The word "Bearer" matters. It tells the API what kind of authentication you're using.
OAuth#
OAuth is a step up in complexity. It's what gets used when you want to let an app get at your data from another service WITHOUT handing over your password.
Say an app has a "Sign in with Google" button. Here's what happens.
- The app sends you to Google
- You log in to Google directly
- Google asks "Allow this app to access your data?"
- You say yes
- Google gives the app a special token
- The app uses that token to access your Google data
You never gave the app your Google password. Google handled the login, and that's the safer way to do it.
How Authentication Works#
Now that you know the types of authentication, let's see how the whole process actually flows. Try putting these steps in the right order to see how an API authenticates a request.
Keeping Secrets Safe#
Your API keys and tokens are sensitive. If someone else gets them, they can pretend to be you.
Never Put Keys in Your Code#
Bad.
const apiKey = "sk_live_abc123xyz789def456ghi";If that code ends up on GitHub, anybody can see your key.
Use Environment Variables#
Good.
const apiKey = process.env.API_KEY;The key gets stored separately from your code.
Never Share Keys in Chat or Email#
If you need to share a key with a teammate, use a secure method. Plenty of teams use password managers or secure vaults for this.
Rotate Keys Regularly#
If you think a key might be out in the wild, delete it and make a new one. Most services make this pretty easy.
Common Headers#

Most APIs use headers for authentication. Here are the patterns you'll see the most.
Bearer Token.
Authorization: Bearer your_token_hereAPI Key in Header.
X-API-Key: your_key_hereBasic Auth (username and password).
Authorization: Basic base64_encoded_credentialsExample: Using an API Key#
Let's say you're using a weather API. Here's how it goes.
Step 1. Sign Up#
Head to the weather service website and make an account.
Step 2. Get Your Key#
Find the API section and generate a key. You might see something like this.
Your API Key: wx_a1b2c3d4e5f6g7h8i9j0Step 3. Make Requests#
Include the key in your requests.
GET https://api.example.com/forecast?city=Seattle
Authorization: Bearer wx_a1b2c3d4e5f6g7h8i9j0Step 4. Get Data#
If the key is valid, you get data. If it isn't, you get a 401 error.
Error Codes Related to Auth#
When authentication fails, you'll see specific error codes.
| Code | Meaning |
|---|---|
| 401 Unauthorized | No key/token provided, or it's invalid |
| 403 Forbidden | Key is valid, but you're not allowed to do this |
If you get a 401, run through these.
- Did you include the key?
- Is the key spelled right?
- Is the key still active?
TL;DR#
- Authentication proves who you are to an API
- API keys are long strings that identify your app
- Bearer tokens are usually temporary and expire
- OAuth lets apps get at your data without knowing your password
- Never put API keys straight into your code
- Use environment variables to store secrets
- If a key gets exposed, delete it and make a new one
What's Next?#
Now you've got the theory down, so it's time to put it to work. In the next lesson you'll learn how to actually make API calls from code using JavaScript's fetch() function...
This lesson ends with a short activity.
