Custom Domains for Territories

.env.development

@@ -170,6 +170,7 @@ AWS_ACCESS_KEY_ID=AKIAIOSFODNN7EXAMPLE
 AWS_SECRET_ACCESS_KEY=wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
 PERSISTENCE=1
 SKIP_SSL_CERT_DOWNLOAD=1
+LOCALSTACK_ENDPOINT=http://localhost:4566
 
 # tor proxy
 TOR_PROXY=http://tor:7050/
@@ -183,4 +184,7 @@ CPU_SHARES_IMPORTANT=1024
 CPU_SHARES_MODERATE=512
 CPU_SHARES_LOW=256
 
-NEXT_TELEMETRY_DISABLED=1
+NEXT_TELEMETRY_DISABLED=1
+
+# DNS resolver for custom domain verification
+DNS_RESOLVER=1.1.1.1

.env.production

@@ -23,3 +23,6 @@ DB_APP_CONNECTION_LIMIT=4
 DB_WORKER_CONNECTION_LIMIT=2
 DB_TRANSACTION_TIMEOUT=10000
 NEXT_TELEMETRY_DISABLED=1
+
+# DNS resolver for custom domain verification
+DNS_RESOLVER=1.1.1.1

api/acm/index.js

@@ -0,0 +1,50 @@
+import AWS from 'aws-sdk'
+// TODO: boilerplate
+
+AWS.config.update({
+  region: 'us-east-1'
+})
+
+const config = {
+  s3ForcePathStyle: process.env.NODE_ENV === 'development'
+}
+
+export async function requestCertificate (domain) {
+  // for local development, we use the LOCALSTACK_ENDPOINT which
+  // is reachable from the host machine
+  if (process.env.NODE_ENV === 'development') {
+    config.endpoint = process.env.LOCALSTACK_ENDPOINT
+  }
+
+  // TODO: Research real values
+  const acm = new AWS.ACM(config)
+  const params = {
+    DomainName: domain,
+    ValidationMethod: 'DNS',
+    Tags: [
+      {
+        Key: 'ManagedBy',
+        Value: 'stackernews'
+      }
+    ]
+  }
+
+  const certificate = await acm.requestCertificate(params).promise()
+  return certificate.CertificateArn
+}
+
+export async function describeCertificate (certificateArn) {
+  // for local development, we use the LOCALSTACK_ENDPOINT which
+  // is reachable from the host machine
+  if (process.env.NODE_ENV === 'development') {
+    config.endpoint = process.env.LOCALSTACK_ENDPOINT
+  }
+  const acm = new AWS.ACM(config)
+  const certificate = await acm.describeCertificate({ CertificateArn: certificateArn }).promise()
+  return certificate
+}
+
+export async function getCertificateStatus (certificateArn) {
+  const certificate = await describeCertificate(certificateArn)
+  return certificate.Certificate.Status
+}

api/resolvers/domain.js

@@ -0,0 +1,62 @@
+import { validateSchema, customDomainSchema } from '@/lib/validate'
+import { GqlAuthenticationError, GqlInputError } from '@/lib/error'
+import { randomBytes } from 'node:crypto'
+
+export default {
+  Query: {
+    customDomain: async (parent, { subName }, { models }) => {
+      return models.customDomain.findUnique({ where: { subName } })
+    }
+  },
+  Mutation: {
+    setCustomDomain: async (parent, { subName, domain }, { me, models }) => {
+      if (!me) {
+        throw new GqlAuthenticationError()
+      }
+
+      const sub = await models.sub.findUnique({ where: { name: subName } })
+      if (!sub) {
+        throw new GqlInputError('sub not found')
+      }
+
+      if (sub.userId !== me.id) {
+        throw new GqlInputError('you do not own this sub')
+      }
+      domain = domain.trim() // protect against trailing spaces
+      if (domain && !validateSchema(customDomainSchema, { domain })) {
+        throw new GqlInputError('Invalid domain format')
+      }
+
+      if (domain) {
+        const existing = await models.customDomain.findUnique({ where: { subName } })
+        if (existing && existing.domain === domain) {
+          throw new GqlInputError('domain already set')
+        }
+        return await models.customDomain.upsert({
+          where: { subName },
+          update: {
+            domain,
+            dnsState: 'PENDING',
+            sslState: 'WAITING',
+            certificateArn: null
+          },
+          create: {
+            domain,
+            dnsState: 'PENDING',
+            verificationTxt: randomBytes(32).toString('base64'),
+            sub: {
+              connect: { name: subName }
+            }
+          }
+        })
+      } else {
+        try {
+          return await models.customDomain.delete({ where: { subName } })
+        } catch (error) {
+          console.error(error)
+          throw new GqlInputError('failed to delete domain')
+        }
+      }
+    }
+  }
+}

api/resolvers/index.js

@@ -20,6 +20,7 @@ import { GraphQLScalarType, Kind } from 'graphql'
 import { createIntScalar } from 'graphql-scalar'
 import paidAction from './paidAction'
 import vault from './vault'
+import domain from './domain'
 
 const date = new GraphQLScalarType({
   name: 'Date',
@@ -56,4 +57,4 @@ const limit = createIntScalar({
 
 export default [user, item, message, wallet, lnurl, notifications, invite, sub,
   upload, search, growth, rewards, referrals, price, admin, blockHeight, chainFee,
-  { JSONObject }, { Date: date }, { Limit: limit }, paidAction, vault]
+  domain, { JSONObject }, { Date: date }, { Limit: limit }, paidAction, vault]

api/resolvers/sub.js

@@ -310,6 +310,9 @@ export default {
 
       return sub.SubSubscription?.length > 0
     },
+    customDomain: async (sub, args, { models }) => {
+      return models.customDomain.findUnique({ where: { subName: sub.name } })
+    },
     createdAt: sub => sub.createdAt || sub.created_at
   }
 }

api/typeDefs/domain.js

@@ -0,0 +1,25 @@
+import { gql } from 'graphql-tag'
+
+export default gql`
+  extend type Query {
+    customDomain(subName: String!): CustomDomain
+  }
+
+  extend type Mutation {
+    setCustomDomain(subName: String!, domain: String!): CustomDomain
+  }
+
+  type CustomDomain {
+    createdAt: Date!
+    updatedAt: Date!
+    domain: String!
+    subName: String!
+    dnsState: String
+    sslState: String
+    certificateArn: String
+    lastVerifiedAt: Date
+    verificationCname: String
+    verificationCnameValue: String
+    verificationTxt: String
+  }
+`

api/typeDefs/index.js

@@ -19,6 +19,7 @@ import blockHeight from './blockHeight'
 import chainFee from './chainFee'
 import paidAction from './paidAction'
 import vault from './vault'
+import domain from './domain'
 
 const common = gql`
   type Query {
@@ -39,4 +40,4 @@ const common = gql`
 `
 
 export default [common, user, item, itemForward, message, wallet, lnurl, notifications, invite,
-  sub, upload, growth, rewards, referrals, price, admin, blockHeight, chainFee, paidAction, vault]
+  sub, upload, growth, rewards, referrals, price, admin, blockHeight, chainFee, domain, paidAction, vault]

api/typeDefs/sub.js

@@ -55,7 +55,7 @@ export default gql`
     nposts(when: String, from: String, to: String): Int!
     ncomments(when: String, from: String, to: String): Int!
     meSubscription: Boolean!
-
+    customDomain: CustomDomain
     optional: SubOptional!
   }
 

components/login.js

@@ -122,6 +122,8 @@ export default function Login ({ providers, callbackUrl, multiAuth, error, text,
                 text={`${text || 'Login'} with`}
               />
             )
+          case 'Sync': // TODO: remove this
+            return null
           default:
             return (
               <OverlayTrigger

components/nav/common.js

@@ -12,7 +12,7 @@ import NoteIcon from '../../svgs/notification-4-fill.svg'
 import { useMe } from '../me'
 import { abbrNum } from '../../lib/format'
 import { useServiceWorker } from '../serviceworker'
-import { signOut } from 'next-auth/react'
+import { signIn, signOut } from 'next-auth/react'
 import Badges from '../badge'
 import { randInRange } from '../../lib/rand'
 import { useLightning } from '../lightning'
@@ -252,18 +252,30 @@ export function SignUpButton ({ className = 'py-0', width }) {
 
 export default function LoginButton () {
   const router = useRouter()
-  const handleLogin = useCallback(async pathname => await router.push({
-    pathname,
-    query: { callbackUrl: window.location.origin + router.asPath }
-  }), [router])
+
+  // TODO: alternative to this, for test only
+  useEffect(() => {
+    console.log(router.query)
+    if (router.query.type === 'sync') {
+      signIn('sync', { token: router.query.token, callbackUrl: router.query.callbackUrl, redirect: false })
+    }
+  }, [router.query])
+
+  const handleLogin = useCallback(async () => {
+    // normal login on main domain
+    await router.push({
+      pathname: '/login',
+      query: { callbackUrl: window.location.origin + router.asPath }
+    })
+  }, [router])
 
   return (
     <Button
       className='align-items-center px-3 py-1'
       id='login'
       style={{ borderWidth: '2px', width: SWITCH_ACCOUNT_BUTTON_WIDTH }}
       variant='outline-grey-darkmode'
-      onClick={() => handleLogin('/login')}
+      onClick={handleLogin}
     >
       login
     </Button>
@@ -275,6 +287,11 @@ function LogoutObstacle ({ onClose }) {
   const { removeLocalWallets } = useWallets()
   const { nextAccount } = useAccounts()
   const router = useRouter()
+  const [isCustomDomain, setIsCustomDomain] = useState(false)
+
+  useEffect(() => {
+    setIsCustomDomain(router.host !== process.env.NEXT_PUBLIC_URL.replace(/^https?:\/\//, ''))
+  }, [router.host])
 
   return (
     <div className='d-flex m-auto flex-column w-fit-content'>
@@ -306,7 +323,7 @@ function LogoutObstacle ({ onClose }) {
 
             removeLocalWallets()
 
-            await signOut({ callbackUrl: '/' })
+            await signOut({ callbackUrl: '/', redirect: !isCustomDomain })
           }}
         >
           logout

components/nav/desktop/second-bar.js

@@ -3,16 +3,18 @@ import { NavSelect, PostItem, Sorts, hasNavSelect } from '../common'
 import styles from '../../header.module.css'
 
 export default function SecondBar (props) {
-  const { prefix, topNavKey, sub } = props
+  const { prefix, topNavKey, isCustomDomain, sub } = props
   if (!hasNavSelect(props)) return null
   return (
     <Navbar className='pt-0 pb-2'>
       <Nav
         className={styles.navbarNav}
         activeKey={topNavKey}
       >
-        <NavSelect sub={sub} size='medium' className='me-1' />
-        <div className='ms-2 d-flex'><Sorts {...props} className='ms-1' /></div>
+        {!isCustomDomain && <NavSelect sub={sub} size='medium' className='me-1' />}
+        <div className={`${!isCustomDomain ? 'ms-2' : ''} d-flex`}>
+          <Sorts {...props} className={`${!isCustomDomain ? 'ms-1' : ''}`} />
+        </div>
         <PostItem className='ms-auto me-0 d-none d-md-flex' prefix={prefix} />
       </Nav>
     </Navbar>

components/nav/index.js

@@ -7,12 +7,19 @@ import { PriceCarouselProvider } from './price-carousel'
 export default function Navigation ({ sub }) {
   const router = useRouter()
   const path = router.asPath.split('?')[0]
+  // TODO: this works but it can be better
+  const isCustomDomain = sub && !path.includes(`/~${sub}`)
   const props = {
     prefix: sub ? `/~${sub}` : '',
     path,
     pathname: router.pathname,
-    topNavKey: path.split('/')[sub ? 2 : 1] ?? '',
-    dropNavKey: path.split('/').slice(sub ? 2 : 1).join('/'),
+    topNavKey: isCustomDomain
+      ? path.split('/')[1] ?? ''
+      : path.split('/')[sub ? 2 : 1] ?? '',
+    dropNavKey: isCustomDomain
+      ? path.split('/').slice(1).join('/')
+      : path.split('/').slice(sub ? 2 : 1).join('/'),
+    isCustomDomain,
     sub
   }
 

components/nav/mobile/top-bar.js

@@ -3,8 +3,9 @@ import styles from '../../header.module.css'
 import { Back, NavPrice, NavSelect, NavWalletSummary, SignUpButton, hasNavSelect } from '../common'
 import { useMe } from '@/components/me'
 
-export default function TopBar ({ prefix, sub, path, pathname, topNavKey, dropNavKey }) {
+export default function TopBar ({ prefix, sub, path, pathname, topNavKey, dropNavKey, isCustomDomain }) {
   const { me } = useMe()
+  if (hasNavSelect({ path, pathname }) && isCustomDomain) return null
   return (
     <Navbar>
       <Nav