implemented webview detection & warning

app/[locale]/login/page.tsx

@@ -1,10 +1,13 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { Main } from '@/app/ui/Main';
 
 import { authConfig } from "@/app/lib/auth";
 import { SignInButton } from '@/app/ui/SignInButton';
 import Image from 'next/image';
 import { getTranslations } from "next-intl/server";
+import isWebview from "is-ua-webview";
+import { headers } from 'next/headers'
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 
 type Provider = {
   id: string;
@@ -37,6 +40,12 @@ const Page:FC = async () => {
 
   const providers = await getProviders();
   const t = await getTranslations("login-page");
+  // get userAgent from NextJS
+
+  const headersList = headers();
+  const userAgent = headersList.get("user-agent") as string;
+
+  const insideWebeview = isWebview(userAgent);
 
  return (
     <Main>
@@ -47,14 +56,32 @@ const Page:FC = async () => {
       </h1>
       <p className="p mt-[1em] text-center">{t("main-card.text-1")}</p>
       <p className="p mb-[1em] text-center">{t("main-card.text-2")}</p>
-      <span className="flex justify-center">
       {
-        Object.values(providers).map((provider) => (
-          <div key={provider.name}>
-            <SignInButton provider={provider} />
+        // Google will refuse OAuth signin if it's inside a webview (i.e. Facebook)
+        insideWebeview &&
+        <div className="card card-side bg-base-100 shadow-xl max-w-[30em] mx-auto mb-4">
+          <figure className='pl-4 pr-1 pt-[2rem] min-w-[100px] max-w-[100px] self-start'>
+            <ExclamationTriangleIcon className="text-red-600 self-start" />
+          </figure>
+          <div className="card-body pl-2">
+            {
+              t.rich("main-card.in-app-browser-warning", {
+                  br: () => <br />,
+                  strong: (chunks:ReactNode) => <strong className='text-indigo-300' >{chunks}</strong>,
+                  hint: (chunks:ReactNode) => <span className='text-indigo-300 block'> {chunks}</span> 
+              })
+            }
           </div>
-        ))
+        </div>
       }
+      <span className="flex justify-center">
+        {
+          Object.values(providers).map((provider) => (
+            <div key={provider.name}>
+              <SignInButton provider={provider} />
+            </div>
+          ))
+        }
       </span>
       <video className="m-auto mt-4" title={t("main-card.video-title")} role="img" data-js-id="hero" loop muted playsInline autoPlay poster={t("main-card.image-url")}>
         <source src={t("main-card.video-url")} type="video/webm" />