Handle LIFF LINE In-App Browser

App.tsx

import { useEffect, useState } from "react";
import liff from "@line/liff";
import "./App.css";

function App() {
  const [message, setMessage] = useState("");
  const [data, setData] = useState({
    isInLineInAppBrowser: false
  });
  const [error, setError] = useState("");

  useEffect(() => {
    liff
      .init({
        liffId: import.meta.env.VITE_LIFF_ID
      })
      .then(() => {
        setMessage("LIFF init succeeded.");
        const { userAgent } = navigator;
        setData({
          isInLineInAppBrowser: !liff.isInClient() && userAgent.includes("Line")
        });
      })
      .catch((e: Error) => {
        setMessage("LIFF init failed.");
        setError(`${e}`);
      });
  }, [message]);

  const handleClick = async () => {
    const liffUrl = await liff.permanentLink.createUrlBy(window.location.href);
    window.location.href = liffUrl;
  };

  return (
    <div className="App">
      <h1>create-liff-app</h1>
      {data && data.isInLineInAppBrowser && (
        <div>
          <p>You're opening LIFF App on LINE In-App Browser...</p>
          <button onClick={handleClick}>Open in LINE</button>
        </div>
      )}
    </div>
  );
}

export default App;