fix: change cookie sameSite config

api/functions/is-logged-in/is-logged-in.js

@@ -29,11 +29,13 @@ const isLoggedInHandler = async (req, res) => {
                 .clearCookie('login_session', {
                     secure: true,
                     httpOnly: true,
+                    sameSite: "none",
                 })
                 .cookie('Authorization', token, {
                     maxAge: 3600000 * 24 * 30,
                     secure: true,
                     httpOnly: true,
+                    sameSite: "none",
                 })
                 .json({
                     logged_in: true

api/functions/login/login.js

@@ -16,6 +16,7 @@ router.get('/login', (req, res) => {
         maxAge: 1000 * 60 * 2, // 2 mins
         secure: true,
         httpOnly: true,
+        sameSite: "none",
     })
 })
 
@@ -38,6 +39,7 @@ const loginHandler = async (req, res) => {
                 maxAge,
                 secure: true,
                 httpOnly: true,
+                sameSite: "none",
             })
             .json(data);
     }

api/functions/logout/logout.js

@@ -8,6 +8,7 @@ const logoutHandler = (req, res, next) => {
         .clearCookie('Authorization', {
             secure: true,
             httpOnly: true,
+            sameSite: "none",
         })
         .redirect("/")
         .end()

src/features/Auth/pages/LoginPage/LoginPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react"
+import { useCallback, useEffect, useState } from "react"
 import { Helmet } from "react-helmet";
 import { BsFillLightningChargeFill } from "react-icons/bs";
 import { Grid } from "react-loader-spinner";
@@ -6,7 +6,10 @@ import { useNavigate } from "react-router-dom";
 import { useMeQuery } from "src/graphql"
 import { CONSTS } from "src/utils";
 import { QRCodeSVG } from 'qrcode.react';
-import { IoQrCode } from "react-icons/io5";
+import { IoQrCode, IoRocketOutline } from "react-icons/io5";
+import Button from "src/Components/Button/Button";
+import { FiCopy } from "react-icons/fi";
+import useCopyToClipboard from "src/utils/hooks/useCopyToClipboard";
 
 
 
@@ -51,14 +54,19 @@ const useLnurlQuery = () => {
 
 
 export default function LoginPage() {
-    const [showQr, setShowQr] = useState(false)
     const [isLoggedIn, setIsLoggedIn] = useState(false);
-    const navigate = useNavigate()
+    const navigate = useNavigate();
+    const [copied, setCopied] = useState(false);
 
-    const { loadingLnurl, lnurlAuth, error } = useLnurlQuery()
-    console.log(lnurlAuth);
+    const { loadingLnurl, lnurlAuth, error } = useLnurlQuery();
+    const clipboard = useCopyToClipboard()
 
 
+
+    useEffect(() => {
+        setCopied(false);
+    }, [lnurlAuth])
+
     const meQuery = useMeQuery({
         onCompleted: (data) => {
             if (data.me) {
@@ -70,22 +78,47 @@ export default function LoginPage() {
             }
 
         }
-    })
+    });
 
-    const startPolling = () => {
-        const interval = setInterval(() => {
-            fetch(CONSTS.apiEndpoint + '/is-logged-in', {
-                credentials: 'include'
-            }).then(data => data.json())
-                .then(data => {
-                    if (data.logged_in) {
-                        clearInterval(interval)
-                        meQuery.refetch();
-                    }
-                })
-        }, 2000)
+    const copyToClipboard = () => {
+        setCopied(true);
+        clipboard(lnurlAuth);
     }
 
+    const refetch = meQuery.refetch;
+    const startPolling = useCallback(
+        () => {
+            console.log('HEEY');
+
+            const interval = setInterval(() => {
+                fetch(CONSTS.apiEndpoint + '/is-logged-in', {
+                    credentials: 'include'
+                }).then(data => data.json())
+                    .then(data => {
+                        if (data.logged_in) {
+                            clearInterval(interval)
+                            refetch();
+                        }
+                    })
+            }, 2000);
+
+            return interval;
+        }
+        , [refetch],
+    )
+
+
+
+    useEffect(() => {
+        let interval: NodeJS.Timer;
+        if (lnurlAuth)
+            interval = startPolling();
+
+        return () => {
+            clearInterval(interval)
+        }
+    }, [lnurlAuth, startPolling])
+
 
 
 
@@ -114,33 +147,27 @@ export default function LoginPage() {
     else
         content = <div className="max-w-[326px] border-2 border-gray-200 rounded-16 p-16 flex flex-col gap-16 items-center" >
             <p className="text-body1 font-bolder text-center">
-                Login
+                Login with lightning ⚡
             </p>
-            <p className="text-gray-600 text-body4 text-center">
-                Zero credentials authentication.
-                <br />
-                All you need is a connected <a href='https://getalby.com'
-                    target='_blank'
-                    className="underline text-primary-500"
-                    rel="noreferrer"
-                >WebLN wallet</a> that supports lnurl-auth, & you are good to go !!
-            </p>
-            <a
-                href={lnurlAuth}
-                onClick={startPolling}
-                className='block text-black font-bolder bg-yellow-200 hover:bg-yellow-300 rounded-12 px-16 py-12 active:scale-90 transition-transform'>
-                Login with WebLN <BsFillLightningChargeFill className="scale-125" />
-            </a>
-
-            <div className="text-gray-500 text-body5 font-bold">OR</div>
-            {!showQr && <button className="text-blue-500 text-body4 px-12 py-8 hover:bg-gray-100 rounded-8" onClick={() => { setShowQr(true); startPolling() }}>
-                Scan QR <IoQrCode width={'100%'} />
-            </button>}
-            {showQr && <QRCodeSVG
+            <QRCodeSVG
                 width={160}
                 height={160}
                 value={lnurlAuth}
-            />}
+            />
+            <p className="text-gray-600 text-body4 text-center">
+                Scan this code or copy + paste it to your lightning wallet. Or click to login with your browser's wallet.
+            </p>
+            <div className="flex flex-wrap gap-16">
+                <a href={lnurlAuth}
+                    className='grow block text-body4 text-center text-white font-bolder bg-primary-500 hover:bg-primary-600 rounded-10 px-16 py-12 active:scale-90 transition-transform'
+                >Click to connect <IoRocketOutline /></a>
+                <Button
+                    color='gray'
+                    className='grow'
+                    onClick={copyToClipboard}
+                >{copied ? "Copied" : "Copy"} <FiCopy /></Button>
+            </div>
+
         </div>;
 
     return (