import { gql, useMutation, useQuery } from '@apollo/client' import { signIn } from 'next-auth/react' import { useEffect } from 'react' import Col from 'react-bootstrap/Col' import Container from 'react-bootstrap/Container' import Row from 'react-bootstrap/Row' import AccordianItem from './accordian-item' import Qr, { QrSkeleton } from './qr' import styles from './lightning-auth.module.css' import BackIcon from '@/svgs/arrow-left-line.svg' import { useRouter } from 'next/router' import { FAST_POLL_INTERVAL, SSR } from '@/lib/constants' function QrAuth ({ k1, encodedUrl, callbackUrl, multiAuth }) { const query = gql` { lnAuth(k1: "${k1}") { pubkey k1 } }` const { data } = useQuery(query, SSR ? {} : { pollInterval: FAST_POLL_INTERVAL, nextFetchPolicy: 'cache-and-network' }) useEffect(() => { if (data?.lnAuth?.pubkey) { signIn('lightning', { ...data.lnAuth, callbackUrl, multiAuth }) } }, [data?.lnAuth]) useEffect(() => { if (typeof window.webln === 'undefined') return // optimistically use WebLN for authentication async function effect () { // this will also enable our WebLN wallet await window.webln.enable() await window.webln.lnurl(encodedUrl) } effect() }, [encodedUrl]) // output pubkey and k1 return ( ) } function LightningExplainer ({ text, children }) { const router = useRouter() return (
router.back()}>

{text || 'Login'} with Lightning

This is the most private way to use Stacker News. Just open your Lightning wallet and scan the QR code.
You can use any wallet that supports lnurl-auth. These are some wallets you can use:
  • Alby
  • Balance of Satoshis
  • Blixt
  • Breez
  • Blue Wallet
  • Coinos
  • LNBits
  • LNtxtbot
  • Phoenix
  • Simple Bitcoin Wallet
  • Sparrow Wallet
  • ThunderHub
  • Zap Desktop
  • Zeus
} /> {children}
) } export function LightningAuthWithExplainer ({ text, callbackUrl, multiAuth }) { return ( ) } export function LightningAuth ({ callbackUrl, multiAuth }) { // query for challenge const [createAuth, { data, error }] = useMutation(gql` mutation createAuth { createAuth { k1 encodedUrl } }`) useEffect(() => { createAuth() }, []) if (error) return
error
return data ? : }