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) => (
+        // Google will refuse OAuth signin if it's inside a webview (i.e. Facebook)
-          <div key={provider.name}>
+        insideWebeview &&
-            <SignInButton provider={provider} />
+        <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" />

messages/en.json

@@ -17,6 +17,7 @@
       "title-3": "How much are my expenses?",
       "text-1": "These are the questions this simple and free app will help you with ...",
       "text-2": "... try it & use it completly free!",
+      "in-app-browser-warning": "<strong>WARNING:</strong> we detected you're using an in-app browser.<br></br>This might prevent this app to work properly.<hint>Please use a regular browser to sign in (rezije.app) 😉</hint>",
       "video-url": "/welcome-demo-vp9-25fps-1500bps.webm",
       "image-url": "/hero.png",
       "video-title": "Demo osnovnih koraka u aplikaciji"

messages/hr.json

@@ -15,15 +15,16 @@
       "title-1": "Koji računi su stigli?",
       "title-2": "Koji su plaćeni?",
       "title-3": "Koliki su mi troškovi?",
-      "text-1": "To su pitanja na koja će vam ova jednostavna aplikacija odgovoriti ...",
+      "text-1": "To su pitanja na koja će ti ova jednostavna aplikacija odgovoriti ...",
-      "text-2": "... isprobajte je i koristite potpuno besplatno!",
+      "text-2": "... isprobaj je i koristi potpuno besplatno!",
+      "in-app-browser-warning": "<strong>UPOZORENJE!</strong><br></br>Detektirali smo da je web stranica otvorena u in-app pregledniku. To može dovesti do probleme u radu ove web aplikacije. <hint>Molimo otvori web aplikaciju u normalnom web pregledniku (rezije.app) 😉</hint>",
       "video-url": "/welcome-demo-vp9-25fps-1500bps.webm",
       "image-url": "/hero.png",
       "video-title": "Demo osnovnih koraka u aplikaciji"
     },
     "card-1": {
       "title": "Prijenos režija u idući mjesec",
-      "text": "Sve vaše nekretnine i pripadajuće režije se automatski prenose u idući mjesec, tako da ne morate svaki mjesec ponovno unositi iste podatke.",
+      "text": "Sve tvoje nekretnine i pripadajuće režije se automatski prenose u idući mjesec, tako da ne moraš svaki mjesec ponovno unositi iste podatke.",
       "video-url": "/kopiranje-mjeseca-demo.webm",
       "image-url": "/status-color-demo.png",
       "video-title": "Demo kopiranja mjeseca"