LNURL authentication

src/lib/lnurl.ts

@@ -1,4 +1,6 @@
-import { bech32, utf8 } from '@scure/base'
+import { Identity } from '@arkade-os/sdk'
+import { secp256k1 } from '@noble/curves/secp256k1.js'
+import { bech32, hex, utf8 } from '@scure/base'
 
 const emailRegex =
   /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
@@ -75,6 +77,50 @@ export const getCallbackUrl = (lnurl: string): string => {
   return utf8.encode(bytes)
 }
 
+export const parseLoginLnUrl = (lnurl: string): { k1?: string; url: string } => {
+  const { bytes } = bech32.decodeToBytes(lnurl)
+  const url = utf8.encode(bytes)
+  const queryParams = new URLSearchParams(url.split('?')[1])
+  const tag = queryParams.get('tag')
+  if (tag === 'login') {
+    return { k1: queryParams.get('k1')!, url }
+  }
+
+  return { url }
+}
+
+export const loginLnUrl = async (lnurl: string, k1: string, identity: Identity): Promise<Response> => {
+  const k1bytes = hex.decode(k1)
+  const sig = await identity.signMessage(k1bytes, 'ecdsa')
+  const key = await identity.compressedPublicKey()
+  const url = new URL(lnurl)
+
+  const derSigEncoding = secp256k1.Signature.fromBytes(sig).toHex('der')
+  url.searchParams.delete('tag')
+  url.searchParams.set('sig', derSigEncoding)
+  url.searchParams.set('key', hex.encode(key))
+
+  const targetUrl = url.toString()
+
+  // if current page is localhost, use cors proxy
+  if (window.location.hostname === 'localhost') {
+    const corsProxyUrl = `https://api.allorigins.win/raw?url=${encodeURIComponent(targetUrl)}`
+    return fetch(corsProxyUrl, {
+      method: 'GET',
+      headers: {
+        Accept: 'application/json',
+      },
+    })
+  }
+
+  return fetch(targetUrl, {
+    method: 'GET',
+    headers: {
+      Accept: 'application/json',
+    },
+  })
+}
+
 export const checkLnUrlConditions = (lnurl: string): Promise<LnUrlResponse> => {
   return new Promise<LnUrlResponse>((resolve, reject) => {
     const url = getCallbackUrl(lnurl)

src/providers/navigation.tsx

@@ -13,6 +13,7 @@ import ReceiveSuccess from '../screens/Wallet/Receive/Success'
 import SendForm from '../screens/Wallet/Send/Form'
 import SendDetails from '../screens/Wallet/Send/Details'
 import SendSuccess from '../screens/Wallet/Send/Success'
+import LnUrlLogin from '../screens/Wallet/Send/LnUrlLogin'
 import Transaction from '../screens/Wallet/Transaction'
 import Unlock from '../screens/Wallet/Unlock'
 import Vtxos from '../screens/Settings/Vtxos'
@@ -50,6 +51,7 @@ export enum Pages {
   SendForm,
   SendDetails,
   SendSuccess,
+  LnUrlLogin,
   Settings,
   Transaction,
   Unlock,
@@ -87,6 +89,7 @@ const pageTab = {
   [Pages.SendForm]: Tabs.Wallet,
   [Pages.SendDetails]: Tabs.Wallet,
   [Pages.SendSuccess]: Tabs.Wallet,
+  [Pages.LnUrlLogin]: Tabs.Wallet,
   [Pages.Settings]: Tabs.Settings,
   [Pages.Transaction]: Tabs.Wallet,
   [Pages.Unlock]: Tabs.None,
@@ -140,6 +143,8 @@ export const pageComponent = (page: Pages): JSX.Element => {
       return <SendDetails />
     case Pages.SendSuccess:
       return <SendSuccess />
+    case Pages.LnUrlLogin:
+      return <LnUrlLogin />
     case Pages.Settings:
       return <Settings />
     case Pages.Transaction:

src/screens/Wallet/Send/Form.tsx

@@ -34,7 +34,7 @@ import { ConfigContext } from '../../../providers/config'
 import { FiatContext } from '../../../providers/fiat'
 import { ArkNote } from '@arkade-os/sdk'
 import { LimitsContext } from '../../../providers/limits'
-import { checkLnUrlConditions, fetchInvoice, fetchArkAddress, isValidLnUrl } from '../../../lib/lnurl'
+import { checkLnUrlConditions, fetchInvoice, fetchArkAddress, isValidLnUrl, parseLoginLnUrl } from '../../../lib/lnurl'
 import { extractError } from '../../../lib/error'
 import { getInvoiceSatoshis } from '@arkade-os/boltz-swap'
 import { LightningContext } from '../../../providers/lightning'
@@ -159,6 +159,13 @@ export default function SendForm() {
   useEffect(() => {
     if (!sendInfo.lnUrl) return
     if (sendInfo.lnUrl && sendInfo.invoice) return
+    const { k1 } = parseLoginLnUrl(sendInfo.lnUrl)
+    if (k1) {
+      // Navigate to login confirmation screen
+      navigate(Pages.LnUrlLogin)
+      return
+    }
+
     checkLnUrlConditions(sendInfo.lnUrl)
       .then((conditions) => {
         if (!conditions) return setError('Unable to fetch LNURL conditions')

src/screens/Wallet/Send/LnUrlLogin.tsx

@@ -0,0 +1,130 @@
+import { useContext, useEffect, useState } from 'react'
+import Button from '../../../components/Button'
+import ErrorMessage from '../../../components/Error'
+import ButtonsOnBottom from '../../../components/ButtonsOnBottom'
+import { NavigationContext, Pages } from '../../../providers/navigation'
+import { FlowContext } from '../../../providers/flow'
+import Padded from '../../../components/Padded'
+import Header from '../../../components/Header'
+import Content from '../../../components/Content'
+import FlexCol from '../../../components/FlexCol'
+import Loading from '../../../components/Loading'
+import { WalletContext } from '../../../providers/wallet'
+import { loginLnUrl, parseLoginLnUrl } from '../../../lib/lnurl'
+import { extractError } from '../../../lib/error'
+import { consoleError } from '../../../lib/logs'
+import WarningBox from '../../../components/Warning'
+import Table from '../../../components/Table'
+import TypeIcon from '../../../icons/Type'
+import InfoIcon from '../../../icons/Info'
+import Success from '../../../components/Success'
+
+export default function LnUrlLogin() {
+  const { sendInfo, setSendInfo } = useContext(FlowContext)
+  const { navigate } = useContext(NavigationContext)
+  const { svcWallet } = useContext(WalletContext)
+
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [success, setSuccess] = useState(false)
+  const [domain, setDomain] = useState('')
+  const [k1, setK1] = useState('')
+
+  useEffect(() => {
+    if (!sendInfo.lnUrl) {
+      navigate(Pages.SendForm)
+      return
+    }
+
+    const { k1: parsedK1, url } = parseLoginLnUrl(sendInfo.lnUrl)
+    if (!parsedK1) {
+      navigate(Pages.SendForm)
+      return
+    }
+
+    setK1(parsedK1)
+
+    // Extract domain from URL
+    try {
+      const urlObj = new URL(url)
+      setDomain(urlObj.hostname)
+    } catch {
+      setDomain('Unknown service')
+    }
+  }, [sendInfo.lnUrl, navigate])
+
+  const handleConfirm = async () => {
+    if (!sendInfo.lnUrl || !svcWallet || !k1) return
+
+    setLoading(true)
+    setError('')
+
+    try {
+      const { url } = parseLoginLnUrl(sendInfo.lnUrl)
+      const response = await loginLnUrl(url, k1, svcWallet.identity)
+      const data = await response.json()
+
+      if (data.status === 'OK') {
+        setSuccess(true)
+        setLoading(false)
+      } else {
+        setError(data.reason || 'Login failed')
+        setLoading(false)
+      }
+    } catch (err) {
+      consoleError(err, 'error logging in with LNURL')
+      setError(extractError(err) || 'Failed to login')
+      setLoading(false)
+    }
+  }
+
+  const handleCancel = () => {
+    setSendInfo({ ...sendInfo, lnUrl: undefined })
+    navigate(Pages.SendForm)
+  }
+
+  const handleBack = () => {
+    setSendInfo({ ...sendInfo, lnUrl: undefined })
+    navigate(Pages.Wallet)
+  }
+
+  if (!sendInfo.lnUrl || !k1) {
+    return <Loading text='Loading...' />
+  }
+
+  const tableData = [
+    ['Service', domain, <TypeIcon key='service-icon' />],
+    ['Challenge', k1, <InfoIcon key='challenge-icon' />],
+  ]
+
+  return (
+    <>
+      <Header text='LNURL Login' back={success ? handleBack : handleCancel} />
+      <Content>
+        {loading ? (
+          <Loading text='Signing...' />
+        ) : success ? (
+          <Success headline='Login successful!' text={`You have successfully signed in to ${domain}`} />
+        ) : (
+          <Padded>
+            <FlexCol>
+              <ErrorMessage error={Boolean(error)} text={error} />
+              <WarningBox text='By signing this message, you are authenticating yourself to this service. Make sure you trust this website before proceeding.' />
+              <Table data={tableData} />
+            </FlexCol>
+          </Padded>
+        )}
+      </Content>
+      <ButtonsOnBottom>
+        {loading ? null : success ? (
+          <Button onClick={handleBack} label='Back to Wallet' />
+        ) : (
+          <>
+            <Button onClick={handleCancel} label='Cancel' secondary />
+            <Button onClick={handleConfirm} label='Sign' disabled={Boolean(error)} />
+          </>
+        )}
+      </ButtonsOnBottom>
+    </>
+  )
+}