Security Best Practices
Access Token Management
Never Hardcode Tokens
❌ Bad:
typescript
const client = new FigmaClient({
token: 'your-figma-token-here' // Never do this!
})
✅ Good:
typescript
const client = new FigmaClient({
token: process.env.FIGMA_ACCESS_TOKEN
})
Environment Variables
- Create a
.envfile:
bash
FIGMA_ACCESS_TOKEN=your-token-here
- Add
.envto.gitignore:
text
.env
.env.local
.env.*.local
- Create a
.env.examplefile:
bash
FIGMA_ACCESS_TOKEN=
Token Providers
The library supports multiple token providers for flexible token management:
Environment Variable Provider (Default)
typescript
import { FigmaClient } from '@figma-vars/core'
const client = new FigmaClient({
fileKey: 'your-file-key'
// Uses FIGMA_ACCESS_TOKEN by default
})
Custom Provider
typescript
import { FigmaClient, TokenProvider } from '@figma-vars/core'
class CustomTokenProvider implements TokenProvider {
async getToken(): Promise<string> {
// Implement your token retrieval logic
return 'your-token'
}
}
const client = new FigmaClient({
fileKey: 'your-file-key',
tokenProvider: new CustomTokenProvider()
})
Browser Environment
When using in the browser:
- Use a backend proxy to handle token management
- Implement proper CORS policies
- Use environment-specific variables:
typescript
const client = new FigmaClient({
fileKey: 'your-file-key',
token: import.meta.env.VITE_FIGMA_ACCESS_TOKEN // Vite
// or
token: process.env.NEXT_PUBLIC_FIGMA_ACCESS_TOKEN // Next.js
})
Additional Security Tips
- Rotate tokens regularly
- Use token with minimal required permissions
- Implement rate limiting
- Monitor token usage
- Set up proper error handling for token-related issues
Next Steps
- Learn about React integration
- Explore advanced usage
- Check out the API reference