Ready-to-use authentication flow
Secure authentication system with Line login integration and Firebase Auth backend, ready to use out of the box.
Next.js SSG + Tailwind CSS
Built with Next.js Static Site Generation for optimal performance and Tailwind CSS for beautiful, responsive designs.
Default deployment to Firebase hosting
Seamless deployment to Firebase hosting with pre-configured settings for a smooth production experience.
Authentication Flow
LIFF Initialization
The app initializes the LINE LIFF SDK and checks if the user is already logged in.
LINE Login
User clicks the login button and is redirected to LINE's login page. After successful login, they're redirected back with authentication tokens.
Firebase Integration
The app sends the LINE ID token to a Firebase Cloud Function, which verifies it and creates a Firebase custom token. It also creates or updates the user's document in Firestore.
User Session
The app signs in to Firebase using the custom token and loads the user profile data from Firestore. Authentication state is maintained using React context.
Logout Process
When logging out, the app signs out from both Firebase and LINE, and the UI is updated to show the login button again.