fix login flow, temporarily disable auto-auth, fix OAuth login

Author: Soxasora

components/login.js

@@ -109,6 +109,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

@@ -249,34 +249,20 @@ export function SignUpButton ({ className = 'py-0', width }) {
 export default function LoginButton () {
   const router = useRouter()
 
-  // TODO: atp let main domain handle the login UX/UI
-  // decree a better position/way for this
+  // 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.type, router.query.token, router.query.callbackUrl])
+  }, [router.query])
 
   const handleLogin = useCallback(async () => {
-    // todo: custom domain check
-    const mainDomain = process.env.NEXT_PUBLIC_URL.replace(/^https?:\/\//, '')
-    const isCustomDomain = window.location.hostname !== mainDomain
-
-    if (isCustomDomain && router.query.type !== 'noAuth') {
-      // TODO: dirty of previous iterations, refactor
-      // redirect to sync endpoint on main domain
-      const protocol = window.location.protocol
-      const mainDomainUrl = `${protocol}//${mainDomain}`
-      const currentUrl = window.location.origin + router.asPath
-
-      window.location.href = `${mainDomainUrl}/api/auth/sync?redirectUrl=${encodeURIComponent(currentUrl)}`
-    } else {
-      // normal login on main domain
-      await router.push({
-        pathname: '/login',
-        query: { callbackUrl: window.location.origin + router.asPath }
-      })
-    }
+    // normal login on main domain
+    await router.push({
+      pathname: '/login',
+      query: { callbackUrl: window.location.origin + router.asPath }
+    })
   }, [router])
 
   return (
@@ -297,6 +283,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'>
@@ -328,7 +319,7 @@ function LogoutObstacle ({ onClose }) {
 
             removeLocalWallets()
 
-            await signOut({ callbackUrl: '/' })
+            await signOut({ callbackUrl: '/', redirect: !isCustomDomain })
           }}
         >
           logout

components/territory-header.js

@@ -12,6 +12,7 @@ import { gql, useMutation } from '@apollo/client'
 import { useToast } from './toast'
 import ActionDropdown from './action-dropdown'
 import { TerritoryTransferDropdownItem } from './territory-transfer'
+import { useRouter } from 'next/router'
 
 export function TerritoryDetails ({ sub, children }) {
   return (
@@ -77,6 +78,10 @@ export function TerritoryInfo ({ sub }) {
 export default function TerritoryHeader ({ sub }) {
   const { me } = useMe()
   const toaster = useToast()
+  const router = useRouter()
+  // TODO: this works but it can be better
+  const path = router.asPath.split('?')[0]
+  const isCustomDomain = sub && !path.includes(`/~${sub?.name}`)
 
   const [toggleMuteSub] = useMutation(
     gql`
@@ -96,6 +101,8 @@ export default function TerritoryHeader ({ sub }) {
 
   const isMine = Number(sub.userId) === Number(me?.id)
 
+  if (isCustomDomain && !isMine) return null
+
   return (
     <>
       <TerritoryPaymentDue sub={sub} />

lib/url.js

@@ -264,6 +264,20 @@ export function isMisleadingLink (text, href) {
   return misleading
 }
 
+export function isCustomDomain ({ req, url }) {
+  const mainDomain = new URL(process.env.NEXT_PUBLIC_URL).hostname
+  if (typeof window !== 'undefined') {
+    return window.location.hostname !== mainDomain
+  }
+  if (req) {
+    return req.headers.host !== mainDomain
+  }
+  if (url) {
+    return new URL(url).hostname !== mainDomain
+  }
+  return false
+}
+
 // eslint-disable-next-line
 export const URL_REGEXP = /^((https?|ftp):\/\/)?(www.)?(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i
 

middleware.js

@@ -14,7 +14,7 @@ const SN_REFERRER_NONCE = 'sn_referrer_nonce'
 const SN_REFEREE_LANDING = 'sn_referee_landing'
 
 const TERRITORY_PATHS = ['/~', '/recent', '/random', '/top', '/post', '/edit']
-const NO_REWRITE_PATHS = ['/api', '/_next', '/_error', '/404', '/500', '/offline', '/static', '/signup', '/login', '/logout']
+const NO_REWRITE_PATHS = ['/api', '/_next', '/_error', '/404', '/500', '/offline', '/static', '/logout']
 
 // TODO: move this to a separate file
 // fetch custom domain mappings from our API, caching it for 5 minutes
@@ -70,6 +70,14 @@ export async function customDomainMiddleware (request, referrerResp) {
   console.log('pathname', pathname)
   console.log('query', url.searchParams)
 
+  if (pathname === '/login' || pathname === '/signup') {
+    const redirectUrl = new URL(pathname, mainDomain)
+    redirectUrl.searchParams.set('domain', host)
+    redirectUrl.searchParams.set('callbackUrl', url.searchParams.get('callbackUrl'))
+    const redirectResp = NextResponse.redirect(redirectUrl)
+    return applyReferrerCookies(redirectResp, referrerResp)
+  }
+
   // if the url contains the territory path, remove it
   if (pathname.startsWith(`/~${domainInfo.subName}`)) {
     // remove the territory prefix from the path
@@ -80,12 +88,14 @@ export async function customDomainMiddleware (request, referrerResp) {
   }
 
   // if coming from main domain, handle auth automatically
-  if (referer && referer === mainDomain) {
+  // TODO: uncomment and work on this
+
+  /*   if (referer && referer === mainDomain) {
     const authResp = customDomainAuthMiddleware(request, url)
     if (authResp && authResp.status !== 200) {
       return applyReferrerCookies(authResp, referrerResp)
     }
-  }
+  } */
 
   const internalUrl = new URL(url)
   // rewrite to the territory path if we're at the root

pages/api/auth/[...nextauth].js

@@ -276,7 +276,7 @@ const getProviders = res => [
   }),
   CredentialsProvider({
     id: 'sync',
-    name: 'Auth Sync',
+    name: 'Sync',
     credentials: {
       token: { label: 'token', type: 'text' }
     },

pages/login.js

@@ -6,7 +6,7 @@ import { StaticLayout } from '@/components/layout'
 import Login from '@/components/login'
 import { isExternal } from '@/lib/url'
 
-export async function getServerSideProps ({ req, res, query: { callbackUrl, multiAuth = false, error = null } }) {
+export async function getServerSideProps ({ req, res, query: { callbackUrl, multiAuth = false, error = null, domain } }) {
   let session = await getServerSession(req, res, getAuthOptions(req))
 
   // required to prevent infinite redirect loops if we switch to anon
@@ -25,11 +25,17 @@ export async function getServerSideProps ({ req, res, query: { callbackUrl, mult
     console.error('error decoding callback:', callbackUrl, err)
   }
 
-  // TODO: custom domain mapping
   if (external) {
     callbackUrl = '/'
   }
 
+  // TODO: custom domain mapping security
+  if (domain) {
+    callbackUrl = '/api/auth/sync?redirectUrl=https://' + domain
+  }
+
+  console.log('callbackUrl', callbackUrl)
+
   if (session && callbackUrl && !multiAuth) {
     // in the case of auth linking we want to pass the error back to settings
     // in the case of multi auth, don't redirect if there is already a session

pages/~/index.js

@@ -21,13 +21,9 @@ export default function Sub ({ ssrData }) {
   if (!data && !ssrData) return <PageLoading />
   const { sub } = data || ssrData
 
-  const path = router.asPath.split('?')[0]
-  // TODO: this works but it can be better
-  const isCustomDomain = sub && !path.includes(`/~${sub?.name}`)
-
   return (
     <Layout sub={sub?.name}>
-      {sub && !isCustomDomain
+      {sub
         ? <TerritoryHeader sub={sub} />
         : (
           <>