LINE LIFF (Front-end Framework)
Do not answer LIFF questions from memory — LINE updates APIs frequently and training data is unreliable. Always consult the references below.
Reference for building, reviewing, and debugging LIFF web apps inside LINE.
Workflow
Build
- Read references/guidelines.md (registration, endpoint URL rules, environment compatibility)
- Load the relevant reference for the feature being implemented
- For architecture or design choices, consult references/experts.md for directional guidance
- Write code following specs and constraints from references
Review / Debug
- Read references/guidelines.md (URL constraints, authentication flow, API availability)
- Load relevant references for the code being reviewed
- Cross-check code against specs (endpoint URL rules, scope requirements, environment limitations, init order)
- For design pattern concerns, consult references/experts.md
- Report violations with reference to specific constraints
Environment Variables
LIFF_ID=LIFF app ID (from LINE Developers Console)
LINE_LOGIN_CHANNEL_ID=LINE Login Channel ID (for server-side JWT verification)
LINE_LOGIN_CHANNEL_SECRET=Channel secret (server-side only)
CHANNEL_ACCESS_TOKEN=Channel access token (for LIFF Server API — manage LIFF apps programmatically)
SDK
Install via CDN or npm. For tree-shaking (reduce ~34% bundle size), use pluggable SDK.
SDK installation, CDN/npm setup, pluggable SDK → references/api.md § Pluggable SDK
Initialization
liff.init({ liffId: 'YOUR_LIFF_ID', withLoginOnExternalBrowser: true })
.then(() => { /* use LIFF APIs */ })
.catch(err => console.error(err.code, err.message));
- Must be called before all LIFF APIs (except pre-init methods)
withLoginOnExternalBrowser: true — auto-trigger login in external browserliff.ready — Promise that resolves when init completes
Getting Started
- Create a LINE Login channel in LINE Developers Console
- Add a LIFF app and set the Endpoint URL (HTTPS required)
- Integrate SDK, call
liff.init()
- Or scaffold with
npx @line/create-liff-app (React/Vue/Svelte/Next.js/Nuxt/vanilla)
Core API Summary
Authentication & Profile
| Method | Description | Scope |
|---|
liff.isLoggedIn() | Check login status | — |
liff.login() | Trigger login (external browser only) | — |
liff.logout() | Log out | — |
liff.getProfile() | Get userId, displayName, pictureUrl | profile |
liff.getDecodedIDToken() | Get decoded JWT (email, etc.) | openid + email |
liff.getIDToken() | Get raw JWT (for server verification) | openid |
liff.getFriendship() | Check friendship with linked OA | profile |
Messaging
| Method | Description | Restriction |
|---|
liff.sendMessages([...]) | Send to current chat (max 5) | LIFF browser only |
liff.shareTargetPicker([...]) | Pick friends/groups to share | Check isApiAvailable first |
Device & Navigation
| Method | Description |
|---|
liff.scanCodeV2() | QR code scanner (enable in Console) |
liff.openWindow({url, external}) | Open URL |
liff.closeWindow() | Close LIFF (unreliable in external browser) |
Context
| Method | Description |
|---|
liff.getContext() | Get type, userId, groupId, roomId, viewType |
liff.getOS() | 'ios', 'android', 'web' |
liff.isInClient() | Whether running in LINE app |
liff.permanentLink.createUrlBy(url) | Create permanent link |
View Sizes
| Type | Coverage |
|---|
| Full | 100% screen |
| Tall | ~75% |
| Compact | ~50% |
Key Constraints
- Endpoint URL:
liff.init() only works at or below the registered Endpoint URL
- URL handling: modify URLs only after
liff.init() resolves
- Universal Links: use
https://liff.line.me/{liffId} as primary entry point
- Token security: send raw ID Token to server for verification, never expose decoded token → see server-auth.md
- Login behavior differs: auto in LIFF browser, manual in external browser
- Deprecated APIs:
liff.scanCode() → use scanCodeV2(); liff.getLanguage() → use getAppLanguage(); liff.permanentLink.createUrl() → use createUrlBy() (may be removed in v3)
Reference Index
| File | Topic |
|---|
| references/api.md | LIFF v2 API complete reference, pluggable SDK modules, error codes |
| references/guidelines.md | Registration, endpoint URL rules, authentication flow, UI/UX, environment compatibility |
| references/navigation.md | LIFF URLs, liff.state, permanent links, LIFF-to-LIFF transitions, browser minimization |
| references/plugins.md | LIFF plugin development, hooks system, official plugins (Inspector, Mock) |
| references/server-api.md | LIFF Server API (v1) — programmatic LIFF app CRUD (create, update, list, delete) |
| references/server-auth.md | Server-side ID Token (JWT) verification |
| references/cli.md | LIFF CLI — local HTTPS dev server, app CRUD, Inspector debugging, ngrok |
| references/experts.md | LIFF domain experts for architecture guidance |
SDK & Tools