Provide geo-gated users optional GPS fallback for precise location data (#8973)

.env.example

···
 
 # Bitdrift API key. If undefined, Bitdrift will be disabled.
 EXPO_PUBLIC_BITDRIFT_API_KEY=
+
+# bapp-config web worker URL
+BAPP_CONFIG_DEV_URL=
+
+# Dev-only passthrough value for bapp-config web worker
+BAPP_CONFIG_DEV_BYPASS_SECRET=

app.config.js

···
           },
         ],
         ['expo-screen-orientation', {initialOrientation: 'PORTRAIT_UP'}],
+        ['expo-location'],
       ].filter(Boolean),
       extra: {
         eas: {

assets/icons/pinLocationFilled_stroke2_corner0_rounded.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12.591 21.806h.002l.001-.002.006-.004.018-.014a10 10 0 0 0 .304-.235 26 26 0 0 0 3.333-3.196C18.048 16.29 20 13.305 20 10a8 8 0 1 0-16 0c0 3.305 1.952 6.29 3.745 8.355a26 26 0 0 0 3.333 3.196 16 16 0 0 0 .304.235l.018.014.006.004.002.002a1 1 0 0 0 1.183 0Zm-.593-9.306a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" clip-rule="evenodd"/></svg>

assets/icons/pinLocation_stroke2_corner0_rounded.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M12 2a8 8 0 0 1 8 8c0 3.305-1.953 6.29-3.745 8.355a26 26 0 0 1-3.333 3.197q-.152.12-.237.184l-.067.05-.018.014-.005.004-.002.002h-.001c-.003-.004-.042-.055-.592-.806l.592.807a1 1 0 0 1-1.184 0v-.001l-.003-.002-.005-.004-.018-.014-.067-.05a24 24 0 0 1-1.066-.877 26 26 0 0 1-2.504-2.503C5.953 16.29 4 13.305 4 10a8 8 0 0 1 8-8Zm0 2a6 6 0 0 0-6 6c0 2.56 1.547 5.076 3.255 7.044A24 24 0 0 0 12 19.723a24 24 0 0 0 2.745-2.679C16.453 15.076 18 12.56 18 10a6 6 0 0 0-6-6Zm-.002 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7Zm0 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"/></svg>

package.json

···
     "expo-linear-gradient": "~14.1.5",
     "expo-linking": "~7.1.5",
     "expo-localization": "~16.1.5",
+    "expo-location": "~18.1.6",
     "expo-media-library": "~17.1.7",
     "expo-notifications": "~0.31.3",
     "expo-screen-orientation": "~8.1.7",

src/App.native.tsx

···
 import {Provider as EmailVerificationProvider} from '#/state/email-verification'
 import {listenSessionDropped} from '#/state/events'
 import {
-  beginResolveGeolocation,
-  ensureGeolocationResolved,
+  beginResolveGeolocationConfig,
+  ensureGeolocationConfigIsResolved,
   Provider as GeolocationProvider,
 } from '#/state/geolocation'
 import {GlobalGestureEventsProvider} from '#/state/global-gesture-events'
···
 /**
  * Begin geolocation ASAP
  */
-beginResolveGeolocation()
+beginResolveGeolocationConfig()
 
 function InnerApp() {
   const [isReady, setIsReady] = React.useState(false)
···
   const [isReady, setReady] = useState(false)
 
   React.useEffect(() => {
-    Promise.all([initPersistedState(), ensureGeolocationResolved()]).then(() =>
-      setReady(true),
-    )
+    Promise.all([
+      initPersistedState(),
+      ensureGeolocationConfigIsResolved(),
+    ]).then(() => setReady(true))
   }, [])
 
   if (!isReady) {

src/App.web.tsx

···
 import {Provider as EmailVerificationProvider} from '#/state/email-verification'
 import {listenSessionDropped} from '#/state/events'
 import {
-  beginResolveGeolocation,
-  ensureGeolocationResolved,
+  beginResolveGeolocationConfig,
+  ensureGeolocationConfigIsResolved,
   Provider as GeolocationProvider,
 } from '#/state/geolocation'
 import {Provider as HomeBadgeProvider} from '#/state/home-badge'
···
 /**
  * Begin geolocation ASAP
  */
-beginResolveGeolocation()
+beginResolveGeolocationConfig()
 
 function InnerApp() {
   const [isReady, setIsReady] = React.useState(false)
···
   const [isReady, setReady] = useState(false)
 
   React.useEffect(() => {
-    Promise.all([initPersistedState(), ensureGeolocationResolved()]).then(() =>
-      setReady(true),
-    )
+    Promise.all([
+      initPersistedState(),
+      ensureGeolocationConfigIsResolved(),
+    ]).then(() => setReady(true))
   }, [])
 
   if (!isReady) {

src/components/BlockedGeoOverlay.tsx

···
 
 import {logger} from '#/logger'
 import {isWeb} from '#/platform/detection'
+import {useDeviceGeolocationApi} from '#/state/geolocation'
 import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import {DeviceLocationRequestDialog} from '#/components/dialogs/DeviceLocationRequestDialog'
+import {Divider} from '#/components/Divider'
 import {Full as Logo, Mark} from '#/components/icons/Logo'
+import {PinLocation_Stroke2_Corner0_Rounded as LocationIcon} from '#/components/icons/PinLocation'
 import {SimpleInlineLinkText as InlineLinkText} from '#/components/Link'
+import {Outlet as PortalOutlet} from '#/components/Portal'
+import * as Toast from '#/components/Toast'
 import {Text} from '#/components/Typography'
+import {BottomSheetOutlet} from '#/../modules/bottom-sheet'
 
 export function BlockedGeoOverlay() {
   const t = useTheme()
   const {_} = useLingui()
   const {gtPhone} = useBreakpoints()
   const insets = useSafeAreaInsets()
+  const geoDialog = Dialog.useDialogControl()
+  const {setDeviceGeolocation} = useDeviceGeolocationApi()
 
   useEffect(() => {
     // just counting overall hits here
···
   ]
 
   return (
-    <ScrollView
-      contentContainerStyle={[
-        a.px_2xl,
-        {
-          paddingTop: isWeb ? a.p_5xl.padding : insets.top + a.p_2xl.padding,
-          paddingBottom: 100,
-        },
-      ]}>
-      <View
-        style={[
-          a.mx_auto,
-          web({
-            maxWidth: 440,
-            paddingTop: gtPhone ? '8vh' : undefined,
-          }),
+    <>
+      <ScrollView
+        contentContainerStyle={[
+          a.px_2xl,
+          {
+            paddingTop: isWeb ? a.p_5xl.padding : insets.top + a.p_2xl.padding,
+            paddingBottom: 100,
+          },
         ]}>
-        <View style={[a.align_start]}>
-          <View
-            style={[
-              a.pl_md,
-              a.pr_lg,
-              a.py_sm,
-              a.rounded_full,
-              a.flex_row,
-              a.align_center,
-              a.gap_xs,
-              {
-                backgroundColor: t.palette.primary_25,
-              },
-            ]}>
-            <Mark fill={t.palette.primary_600} width={14} />
-            <Text
+        <View
+          style={[
+            a.mx_auto,
+            web({
+              maxWidth: 380,
+              paddingTop: gtPhone ? '8vh' : undefined,
+            }),
+          ]}>
+          <View style={[a.align_start]}>
+            <View
               style={[
-                a.font_bold,
+                a.pl_md,
+                a.pr_lg,
+                a.py_sm,
+                a.rounded_full,
+                a.flex_row,
+                a.align_center,
+                a.gap_xs,
                 {
-                  color: t.palette.primary_600,
+                  backgroundColor: t.palette.primary_25,
                 },
               ]}>
-              <Trans>Announcement</Trans>
-            </Text>
+              <Mark fill={t.palette.primary_600} width={14} />
+              <Text
+                style={[
+                  a.font_bold,
+                  {
+                    color: t.palette.primary_600,
+                  },
+                ]}>
+                <Trans>Announcement</Trans>
+              </Text>
+            </View>
+          </View>
+
+          <View style={[a.gap_lg, {paddingTop: 32}]}>
+            {blocks.map((block, index) => (
+              <Text key={index} style={[textStyles]}>
+                {block}
+              </Text>
+            ))}
           </View>
-        </View>
+
+          {!isWeb && (
+            <>
+              <View style={[a.pt_2xl]}>
+                <Divider />
+              </View>
+
+              <View style={[a.mt_xl, a.align_start]}>
+                <Text
+                  style={[a.text_lg, a.font_heavy, a.leading_snug, a.pb_xs]}>
+                  <Trans>Not in Mississippi?</Trans>
+                </Text>
+                <Text
+                  style={[
+                    a.text_sm,
+                    a.leading_snug,
+                    t.atoms.text_contrast_medium,
+                    a.pb_md,
+                  ]}>
+                  <Trans>
+                    Confirm your location with GPS. Your location data is not
+                    tracked and does not leave your device.
+                  </Trans>
+                </Text>
+                <Button
+                  label={_(msg`Confirm your location`)}
+                  onPress={() => geoDialog.open()}
+                  size="small"
+                  color="primary_subtle">
+                  <ButtonIcon icon={LocationIcon} />
+                  <ButtonText>
+                    <Trans>Confirm your location</Trans>
+                  </ButtonText>
+                </Button>
+              </View>
+
+              <DeviceLocationRequestDialog
+                control={geoDialog}
+                onLocationAcquired={props => {
+                  if (props.geolocationStatus.isAgeBlockedGeo) {
+                    props.disableDialogAction()
+                    props.setDialogError(
+                      _(
+                        msg`We're sorry, but based on your device's location, you are currently located in a region we cannot provide access at this time.`,
+                      ),
+                    )
+                  } else {
+                    props.closeDialog(() => {
+                      // set this after close!
+                      setDeviceGeolocation({
+                        countryCode: props.geolocationStatus.countryCode,
+                        regionCode: props.geolocationStatus.regionCode,
+                      })
+                      Toast.show(_(msg`Thanks! You're all set.`), {
+                        type: 'success',
+                      })
+                    })
+                  }
+                }}
+              />
+            </>
+          )}
 
-        <View style={[a.gap_lg, {paddingTop: 32, paddingBottom: 48}]}>
-          {blocks.map((block, index) => (
-            <Text key={index} style={[textStyles]}>
-              {block}
-            </Text>
-          ))}
+          <View style={[{paddingTop: 48}]}>
+            <Logo width={120} textFill={t.atoms.text.color} />
+          </View>
         </View>
+      </ScrollView>
 
-        <Logo width={120} textFill={t.atoms.text.color} />
-      </View>
-    </ScrollView>
+      {/*
+       * While this blocking overlay is up, other dialogs in the shell
+       * are not mounted, so it _should_ be safe to use these here
+       * without fear of other modals showing up.
+       */}
+      <BottomSheetOutlet />
+      <PortalOutlet />
+    </>
   )
 }

src/components/ageAssurance/AgeAssuranceAccountCard.tsx

···
 import {useLingui} from '@lingui/react'
 
 import {dateDiff, useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
+import {isNative} from '#/platform/detection'
 import {useAgeAssurance} from '#/state/ageAssurance/useAgeAssurance'
 import {logger} from '#/state/ageAssurance/util'
+import {useDeviceGeolocationApi} from '#/state/geolocation'
 import {atoms as a, useBreakpoints, useTheme, type ViewStyleProp} from '#/alf'
 import {Admonition} from '#/components/Admonition'
 import {AgeAssuranceAppealDialog} from '#/components/ageAssurance/AgeAssuranceAppealDialog'
···
 import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
+import {DeviceLocationRequestDialog} from '#/components/dialogs/DeviceLocationRequestDialog'
 import {Divider} from '#/components/Divider'
 import {createStaticClick, InlineLinkText} from '#/components/Link'
+import * as Toast from '#/components/Toast'
 import {Text} from '#/components/Typography'
 
 export function AgeAssuranceAccountCard({style}: ViewStyleProp & {}) {
···
   const {_, i18n} = useLingui()
   const control = useDialogControl()
   const appealControl = Dialog.useDialogControl()
+  const locationControl = Dialog.useDialogControl()
   const getTimeAgo = useGetTimeAgo()
   const {gtPhone} = useBreakpoints()
+  const {setDeviceGeolocation} = useDeviceGeolocationApi()
 
   const copy = useAgeAssuranceCopy()
   const {status, lastInitiatedAt} = useAgeAssurance()
···
             </View>
           </View>
 
-          <View style={[a.pb_md]}>
+          <View style={[a.pb_md, a.gap_xs]}>
             <Text style={[a.text_sm, a.leading_snug]}>{copy.notice}</Text>
+
+            {isNative && (
+              <>
+                <Text style={[a.text_sm, a.leading_snug]}>
+                  <Trans>
+                    Is your location not accurate?{' '}
+                    <InlineLinkText
+                      label={_(msg`Confirm your location`)}
+                      {...createStaticClick(() => {
+                        locationControl.open()
+                      })}>
+                      Click here to confirm your location.
+                    </InlineLinkText>{' '}
+                  </Trans>
+                </Text>
+
+                <DeviceLocationRequestDialog
+                  control={locationControl}
+                  onLocationAcquired={props => {
+                    if (props.geolocationStatus.isAgeRestrictedGeo) {
+                      props.disableDialogAction()
+                      props.setDialogError(
+                        _(
+                          msg`We're sorry, but based on your device's location, you are currently located in a region that requires age assurance.`,
+                        ),
+                      )
+                    } else {
+                      props.closeDialog(() => {
+                        // set this after close!
+                        setDeviceGeolocation({
+                          countryCode: props.geolocationStatus.countryCode,
+                          regionCode: props.geolocationStatus.regionCode,
+                        })
+                        Toast.show(_(msg`Thanks! You're all set.`), {
+                          type: 'success',
+                        })
+                      })
+                    }
+                  }}
+                />
+              </>
+            )}
           </View>
 
           {isBlocked ? (

src/components/dialogs/DeviceLocationRequestDialog.tsx

···
+import {useState} from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {wait} from '#/lib/async/wait'
+import {isNetworkError, useCleanError} from '#/lib/hooks/useCleanError'
+import {logger} from '#/logger'
+import {isWeb} from '#/platform/detection'
+import {
+  computeGeolocationStatus,
+  type GeolocationStatus,
+  useGeolocationConfig,
+} from '#/state/geolocation'
+import {useRequestDeviceLocation} from '#/state/geolocation/useRequestDeviceLocation'
+import {atoms as a, useTheme, web} from '#/alf'
+import {Admonition} from '#/components/Admonition'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import {PinLocation_Stroke2_Corner0_Rounded as LocationIcon} from '#/components/icons/PinLocation'
+import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'
+
+export type Props = {
+  onLocationAcquired?: (props: {
+    geolocationStatus: GeolocationStatus
+    setDialogError: (error: string) => void
+    disableDialogAction: () => void
+    closeDialog: (callback?: () => void) => void
+  }) => void
+}
+
+export function DeviceLocationRequestDialog({
+  control,
+  onLocationAcquired,
+}: Props & {
+  control: Dialog.DialogOuterProps['control']
+}) {
+  const {_} = useLingui()
+  return (
+    <Dialog.Outer control={control}>
+      <Dialog.Handle />
+
+      <Dialog.ScrollableInner
+        label={_(msg`Confirm your location`)}
+        style={[web({maxWidth: 380})]}>
+        <DeviceLocationRequestDialogInner
+          onLocationAcquired={onLocationAcquired}
+        />
+        <Dialog.Close />
+      </Dialog.ScrollableInner>
+    </Dialog.Outer>
+  )
+}
+
+function DeviceLocationRequestDialogInner({onLocationAcquired}: Props) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {close} = Dialog.useDialogContext()
+  const requestDeviceLocation = useRequestDeviceLocation()
+  const {config} = useGeolocationConfig()
+  const cleanError = useCleanError()
+
+  const [isRequesting, setIsRequesting] = useState(false)
+  const [error, setError] = useState<string>('')
+  const [dialogDisabled, setDialogDisabled] = useState(false)
+
+  const onPressConfirm = async () => {
+    setError('')
+    setIsRequesting(true)
+
+    try {
+      const req = await wait(1e3, requestDeviceLocation())
+
+      if (req.granted) {
+        const location = req.location
+
+        if (location && location.countryCode) {
+          const geolocationStatus = computeGeolocationStatus(location, config)
+          onLocationAcquired?.({
+            geolocationStatus,
+            setDialogError: setError,
+            disableDialogAction: () => setDialogDisabled(true),
+            closeDialog: close,
+          })
+        } else {
+          setError(_(msg`Failed to resolve location. Please try again.`))
+        }
+      } else {
+        setError(
+          _(
+            msg`Unable to access location. You'll need to visit your system settings to enable location services for Bluesky`,
+          ),
+        )
+      }
+    } catch (e: any) {
+      const {clean, raw} = cleanError(e)
+      setError(clean || raw || e.message)
+      if (!isNetworkError(e)) {
+        logger.error(`blockedGeoOverlay: unexpected error`, {
+          safeMessage: e.message,
+        })
+      }
+    } finally {
+      setIsRequesting(false)
+    }
+  }
+
+  return (
+    <View style={[a.gap_md]}>
+      <Text style={[a.text_xl, a.font_heavy]}>
+        <Trans>Confirm your location</Trans>
+      </Text>
+      <View style={[a.gap_sm, a.pb_xs]}>
+        <Text style={[a.text_md, a.leading_snug, t.atoms.text_contrast_medium]}>
+          <Trans>
+            Click below to allow Bluesky to access your GPS location. We will
+            then use that data to more accurately determine the content and
+            features available in your region.
+          </Trans>
+        </Text>
+
+        <Text
+          style={[
+            a.text_md,
+            a.leading_snug,
+            t.atoms.text_contrast_medium,
+            a.pb_xs,
+          ]}>
+          <Trans>
+            Your location data is not tracked and does not leave your device.
+          </Trans>
+        </Text>
+      </View>
+
+      {error && (
+        <View style={[a.pb_xs]}>
+          <Admonition type="error">{error}</Admonition>
+        </View>
+      )}
+
+      <View style={[a.gap_sm]}>
+        {!dialogDisabled && (
+          <Button
+            disabled={isRequesting}
+            label={_(msg`Confirm your location`)}
+            onPress={onPressConfirm}
+            size={isWeb ? 'small' : 'large'}
+            color="primary">
+            <ButtonIcon icon={isRequesting ? Loader : LocationIcon} />
+            <ButtonText>
+              <Trans>Allow location access</Trans>
+            </ButtonText>
+          </Button>
+        )}
+
+        {!isWeb && (
+          <Button
+            label={_(msg`Confirm your location`)}
+            onPress={() => close()}
+            size={isWeb ? 'small' : 'large'}
+            color="secondary">
+            <ButtonText>
+              <Trans>Cancel</Trans>
+            </ButtonText>
+          </Button>
+        )}
+      </View>
+    </View>
+  )
+}

src/components/icons/PinLocation.tsx

···
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const PinLocation_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M12 2a8 8 0 0 1 8 8c0 3.305-1.953 6.29-3.745 8.355a25.964 25.964 0 0 1-3.333 3.197c-.101.08-.181.142-.237.184l-.067.05-.018.014-.005.004-.002.002h-.001c-.003-.004-.042-.055-.592-.806l.592.807a1.001 1.001 0 0 1-1.184 0v-.001l-.003-.002-.005-.004-.018-.014-.067-.05a23.449 23.449 0 0 1-1.066-.877 25.973 25.973 0 0 1-2.504-2.503C5.953 16.29 4 13.305 4 10a8 8 0 0 1 8-8Zm0 2a6 6 0 0 0-6 6c0 2.56 1.547 5.076 3.255 7.044A23.978 23.978 0 0 0 12 19.723a23.976 23.976 0 0 0 2.745-2.679C16.453 15.076 18 12.56 18 10a6 6 0 0 0-6-6Zm-.002 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7Zm0 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z',
+})
+
+export const PinLocationFilled_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M12.591 21.806h.002l.001-.002.006-.004.018-.014a10.028 10.028 0 0 0 .304-.235 25.952 25.952 0 0 0 3.333-3.196C18.048 16.29 20 13.305 20 10a8 8 0 1 0-16 0c0 3.305 1.952 6.29 3.745 8.355a25.955 25.955 0 0 0 3.333 3.196 15.733 15.733 0 0 0 .304.235l.018.014.006.004.002.002a1 1 0 0 0 1.183 0Zm-.593-9.306a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z',
+})

src/env/common.ts

···
   process.env.EXPO_PUBLIC_GCP_PROJECT_ID === undefined
     ? 0
     : Number(process.env.EXPO_PUBLIC_GCP_PROJECT_ID)
+
+/**
+ * URL for the bapp-config web worker _development_ environment. Can be a
+ * locally running server, see `env.example` for more.
+ */
+export const BAPP_CONFIG_DEV_URL = process.env.BAPP_CONFIG_DEV_URL
+
+/**
+ * Dev environment passthrough value for bapp-config web worker. Allows local
+ * dev access to the web worker running in `development` mode.
+ */
+export const BAPP_CONFIG_DEV_BYPASS_SECRET: string =
+  process.env.BAPP_CONFIG_DEV_BYPASS_SECRET

src/lib/currency.ts

···
 import React from 'react'
 
 import {deviceLocales} from '#/locale/deviceLocales'
-import {useGeolocation} from '#/state/geolocation'
+import {useGeolocationStatus} from '#/state/geolocation'
 import {useLanguagePrefs} from '#/state/preferences'
 
 /**
···
 export function useFormatCurrency(
   options?: Parameters<typeof Intl.NumberFormat>[1],
 ) {
-  const {geolocation} = useGeolocation()
+  const {location: geolocation} = useGeolocationStatus()
   const {appLanguage} = useLanguagePrefs()
   return React.useMemo(() => {
     const locale = deviceLocales.at(0)

src/logger/types.ts

···
   PostSource = 'post-source',
   AgeAssurance = 'age-assurance',
   PolicyUpdate = 'policy-update',
+  Geolocation = 'geolocation',
 
   /**
    * METRIC IS FOR INTERNAL USE ONLY, don't create any other loggers using this

src/state/ageAssurance/index.tsx

···
 } from '#/state/ageAssurance/types'
 import {useIsAgeAssuranceEnabled} from '#/state/ageAssurance/useIsAgeAssuranceEnabled'
 import {logger} from '#/state/ageAssurance/util'
-import {useGeolocation} from '#/state/geolocation'
+import {useGeolocationStatus} from '#/state/geolocation'
 import {useAgent} from '#/state/session'
 
 export const createAgeAssuranceQueryKey = (did: string) =>
···
  */
 export function Provider({children}: {children: React.ReactNode}) {
   const agent = useAgent()
-  const {geolocation} = useGeolocation()
+  const {status: geolocation} = useGeolocationStatus()
   const isAgeAssuranceEnabled = useIsAgeAssuranceEnabled()
   const getAndRegisterPushToken = useGetAndRegisterPushToken()
   const [refetchWhilePending, setRefetchWhilePending] = useState(false)

src/state/ageAssurance/useInitAgeAssurance.ts

···
 import {isNetworkError} from '#/lib/hooks/useCleanError'
 import {logger} from '#/logger'
 import {createAgeAssuranceQueryKey} from '#/state/ageAssurance'
-import {useGeolocation} from '#/state/geolocation'
+import {useGeolocationStatus} from '#/state/geolocation'
 import {useAgent} from '#/state/session'
 
 let APPVIEW = PUBLIC_APPVIEW
···
 export function useInitAgeAssurance() {
   const qc = useQueryClient()
   const agent = useAgent()
-  const {geolocation} = useGeolocation()
+  const {status: geolocation} = useGeolocationStatus()
   return useMutation({
     async mutationFn(
       props: Omit<AppBskyUnspeccedInitAgeAssurance.InputSchema, 'countryCode'>,

src/state/ageAssurance/useIsAgeAssuranceEnabled.ts

···
 import {useMemo} from 'react'
 
-import {useGeolocation} from '#/state/geolocation'
+import {useGeolocationStatus} from '#/state/geolocation'
 
 export function useIsAgeAssuranceEnabled() {
-  const {geolocation} = useGeolocation()
+  const {status: geolocation} = useGeolocationStatus()
 
   return useMemo(() => {
     return !!geolocation?.isAgeRestrictedGeo

src/state/geolocation.tsx

···
-import React from 'react'
-import EventEmitter from 'eventemitter3'
-
-import {networkRetry} from '#/lib/async/retry'
-import {logger} from '#/logger'
-import {type Device, device} from '#/storage'
-
-const IPCC_URL = `https://bsky.app/ipcc`
-const BAPP_CONFIG_URL = `https://ip.bsky.app/config`
-
-const events = new EventEmitter()
-const EVENT = 'geolocation-updated'
-const emitGeolocationUpdate = (geolocation: Device['geolocation']) => {
-  events.emit(EVENT, geolocation)
-}
-const onGeolocationUpdate = (
-  listener: (geolocation: Device['geolocation']) => void,
-) => {
-  events.on(EVENT, listener)
-  return () => {
-    events.off(EVENT, listener)
-  }
-}
-
-/**
- * Default geolocation value. IF undefined, we fail closed and apply all
- * additional mod authorities.
- */
-export const DEFAULT_GEOLOCATION: Device['geolocation'] = {
-  countryCode: undefined,
-  isAgeBlockedGeo: undefined,
-  isAgeRestrictedGeo: false,
-}
-
-function sanitizeGeolocation(
-  geolocation: Device['geolocation'],
-): Device['geolocation'] {
-  return {
-    countryCode: geolocation?.countryCode ?? undefined,
-    isAgeBlockedGeo: geolocation?.isAgeBlockedGeo ?? false,
-    isAgeRestrictedGeo: geolocation?.isAgeRestrictedGeo ?? false,
-  }
-}
-
-async function getGeolocation(url: string): Promise<Device['geolocation']> {
-  const res = await fetch(url)
-
-  if (!res.ok) {
-    throw new Error(`geolocation: lookup failed ${res.status}`)
-  }
-
-  const json = await res.json()
-
-  if (json.countryCode) {
-    return {
-      countryCode: json.countryCode,
-      isAgeBlockedGeo: json.isAgeBlockedGeo ?? false,
-      isAgeRestrictedGeo: json.isAgeRestrictedGeo ?? false,
-      // @ts-ignore
-      regionCode: json.regionCode ?? undefined,
-    }
-  } else {
-    return undefined
-  }
-}
-
-async function compareWithIPCC(bapp: Device['geolocation']) {
-  try {
-    const ipcc = await getGeolocation(IPCC_URL)
-
-    if (!ipcc || !bapp) return
-
-    logger.metric(
-      'geo:debug',
-      {
-        bappCountryCode: bapp.countryCode,
-        // @ts-ignore
-        bappRegionCode: bapp.regionCode,
-        bappIsAgeBlockedGeo: bapp.isAgeBlockedGeo,
-        bappIsAgeRestrictedGeo: bapp.isAgeRestrictedGeo,
-        ipccCountryCode: ipcc.countryCode,
-        ipccIsAgeBlockedGeo: ipcc.isAgeBlockedGeo,
-        ipccIsAgeRestrictedGeo: ipcc.isAgeRestrictedGeo,
-      },
-      {
-        statsig: false,
-      },
-    )
-  } catch {}
-}
-
-/**
- * Local promise used within this file only.
- */
-let geolocationResolution: Promise<{success: boolean}> | undefined
-
-/**
- * Begin the process of resolving geolocation. This should be called once at
- * app start.
- *
- * THIS METHOD SHOULD NEVER THROW.
- *
- * This method is otherwise not used for any purpose. To ensure geolocation is
- * resolved, use {@link ensureGeolocationResolved}
- */
-export function beginResolveGeolocation() {
-  /**
-   * In dev, IP server is unavailable, so we just set the default geolocation
-   * and fail closed.
-   */
-  if (__DEV__) {
-    geolocationResolution = new Promise(y => y({success: true}))
-    if (!device.get(['geolocation'])) {
-      device.set(['geolocation'], DEFAULT_GEOLOCATION)
-    }
-    return
-  }
-
-  geolocationResolution = new Promise(async resolve => {
-    let success = true
-
-    try {
-      // Try once, fail fast
-      const geolocation = await getGeolocation(BAPP_CONFIG_URL)
-      if (geolocation) {
-        device.set(['geolocation'], sanitizeGeolocation(geolocation))
-        emitGeolocationUpdate(geolocation)
-        logger.debug(`geolocation: success`, {geolocation})
-        compareWithIPCC(geolocation)
-      } else {
-        // endpoint should throw on all failures, this is insurance
-        throw new Error(`geolocation: nothing returned from initial request`)
-      }
-    } catch (e: any) {
-      success = false
-
-      logger.debug(`geolocation: failed initial request`, {
-        safeMessage: e.message,
-      })
-
-      // set to default
-      device.set(['geolocation'], DEFAULT_GEOLOCATION)
-
-      // retry 3 times, but don't await, proceed with default
-      networkRetry(3, () => getGeolocation(BAPP_CONFIG_URL))
-        .then(geolocation => {
-          if (geolocation) {
-            device.set(['geolocation'], sanitizeGeolocation(geolocation))
-            emitGeolocationUpdate(geolocation)
-            logger.debug(`geolocation: success`, {geolocation})
-            success = true
-            compareWithIPCC(geolocation)
-          } else {
-            // endpoint should throw on all failures, this is insurance
-            throw new Error(`geolocation: nothing returned from retries`)
-          }
-        })
-        .catch((e: any) => {
-          // complete fail closed
-          logger.debug(`geolocation: failed retries`, {safeMessage: e.message})
-        })
-    } finally {
-      resolve({success})
-    }
-  })
-}
-
-/**
- * Ensure that geolocation has been resolved, or at the very least attempted
- * once. Subsequent retries will not be captured by this `await`. Those will be
- * reported via {@link events}.
- */
-export async function ensureGeolocationResolved() {
-  if (!geolocationResolution) {
-    throw new Error(`geolocation: beginResolveGeolocation not called yet`)
-  }
-
-  const cached = device.get(['geolocation'])
-  if (cached) {
-    logger.debug(`geolocation: using cache`, {cached})
-  } else {
-    logger.debug(`geolocation: no cache`)
-    const {success} = await geolocationResolution
-    if (success) {
-      logger.debug(`geolocation: resolved`, {
-        resolved: device.get(['geolocation']),
-      })
-    } else {
-      logger.error(`geolocation: failed to resolve`)
-    }
-  }
-}
-
-type Context = {
-  geolocation: Device['geolocation']
-}
-
-const context = React.createContext<Context>({
-  geolocation: DEFAULT_GEOLOCATION,
-})
-context.displayName = 'GeolocationContext'
-
-export function Provider({children}: {children: React.ReactNode}) {
-  const [geolocation, setGeolocation] = React.useState(() => {
-    const initial = device.get(['geolocation']) || DEFAULT_GEOLOCATION
-    return initial
-  })
-
-  React.useEffect(() => {
-    return onGeolocationUpdate(geolocation => {
-      setGeolocation(geolocation!)
-    })
-  }, [])
-
-  const ctx = React.useMemo(() => {
-    return {
-      geolocation,
-    }
-  }, [geolocation])
-
-  return <context.Provider value={ctx}>{children}</context.Provider>
-}
-
-export function useGeolocation() {
-  return React.useContext(context)
-}

src/state/geolocation/config.ts

···
+import {networkRetry} from '#/lib/async/retry'
+import {
+  DEFAULT_GEOLOCATION_CONFIG,
+  GEOLOCATION_CONFIG_URL,
+} from '#/state/geolocation/const'
+import {emitGeolocationConfigUpdate} from '#/state/geolocation/events'
+import {logger} from '#/state/geolocation/logger'
+import {BAPP_CONFIG_DEV_BYPASS_SECRET, IS_DEV} from '#/env'
+import {type Device, device} from '#/storage'
+
+async function getGeolocationConfig(
+  url: string,
+): Promise<Device['geolocation']> {
+  const res = await fetch(url, {
+    headers: IS_DEV
+      ? {
+          'x-dev-bypass-secret': BAPP_CONFIG_DEV_BYPASS_SECRET,
+        }
+      : undefined,
+  })
+
+  if (!res.ok) {
+    throw new Error(`geolocation config: fetch failed ${res.status}`)
+  }
+
+  const json = await res.json()
+
+  if (json.countryCode) {
+    /**
+     * Only construct known values here, ignore any extras.
+     */
+    const config: Device['geolocation'] = {
+      countryCode: json.countryCode,
+      regionCode: json.regionCode ?? undefined,
+      ageRestrictedGeos: json.ageRestrictedGeos ?? [],
+      ageBlockedGeos: json.ageBlockedGeos ?? [],
+    }
+    logger.debug(`geolocation config: success`)
+    return config
+  } else {
+    return undefined
+  }
+}
+
+/**
+ * Local promise used within this file only.
+ */
+let geolocationConfigResolution: Promise<{success: boolean}> | undefined
+
+/**
+ * Begin the process of resolving geolocation config. This should be called
+ * once at app start.
+ *
+ * THIS METHOD SHOULD NEVER THROW.
+ *
+ * This method is otherwise not used for any purpose. To ensure geolocation
+ * config is resolved, use {@link ensureGeolocationConfigIsResolved}
+ */
+export function beginResolveGeolocationConfig() {
+  /**
+   * Here for debug purposes. Uncomment to prevent hitting the remote geo service, and apply whatever data you require for testing.
+   */
+  // if (__DEV__) {
+  //   geolocationConfigResolution = new Promise(y => y({success: true}))
+  //   device.set(['deviceGeolocation'], undefined) // clears GPS data
+  //   device.set(['geolocation'], DEFAULT_GEOLOCATION_CONFIG) // clears bapp-config data
+  //   return
+  // }
+
+  geolocationConfigResolution = new Promise(async resolve => {
+    let success = true
+
+    try {
+      // Try once, fail fast
+      const config = await getGeolocationConfig(GEOLOCATION_CONFIG_URL)
+      if (config) {
+        device.set(['geolocation'], config)
+        emitGeolocationConfigUpdate(config)
+      } else {
+        // endpoint should throw on all failures, this is insurance
+        throw new Error(
+          `geolocation config: nothing returned from initial request`,
+        )
+      }
+    } catch (e: any) {
+      success = false
+
+      logger.debug(`geolocation config: failed initial request`, {
+        safeMessage: e.message,
+      })
+
+      // set to default
+      device.set(['geolocation'], DEFAULT_GEOLOCATION_CONFIG)
+
+      // retry 3 times, but don't await, proceed with default
+      networkRetry(3, () => getGeolocationConfig(GEOLOCATION_CONFIG_URL))
+        .then(config => {
+          if (config) {
+            device.set(['geolocation'], config)
+            emitGeolocationConfigUpdate(config)
+            success = true
+          } else {
+            // endpoint should throw on all failures, this is insurance
+            throw new Error(`geolocation config: nothing returned from retries`)
+          }
+        })
+        .catch((e: any) => {
+          // complete fail closed
+          logger.debug(`geolocation config: failed retries`, {
+            safeMessage: e.message,
+          })
+        })
+    } finally {
+      resolve({success})
+    }
+  })
+}
+
+/**
+ * Ensure that geolocation config has been resolved, or at the very least attempted
+ * once. Subsequent retries will not be captured by this `await`. Those will be
+ * reported via {@link emitGeolocationConfigUpdate}.
+ */
+export async function ensureGeolocationConfigIsResolved() {
+  if (!geolocationConfigResolution) {
+    throw new Error(
+      `geolocation config: beginResolveGeolocationConfig not called yet`,
+    )
+  }
+
+  const cached = device.get(['geolocation'])
+  if (cached) {
+    logger.debug(`geolocation config: using cache`)
+  } else {
+    logger.debug(`geolocation config: no cache`)
+    const {success} = await geolocationConfigResolution
+    if (success) {
+      logger.debug(`geolocation config: resolved`)
+    } else {
+      logger.info(`geolocation config: failed to resolve`)
+    }
+  }
+}

src/state/geolocation/const.ts

···
+import {type GeolocationStatus} from '#/state/geolocation/types'
+import {BAPP_CONFIG_DEV_URL, IS_DEV} from '#/env'
+import {type Device} from '#/storage'
+
+export const IPCC_URL = `https://bsky.app/ipcc`
+export const BAPP_CONFIG_URL_PROD = `https://ip.bsky.app/config`
+export const BAPP_CONFIG_URL = IS_DEV
+  ? (BAPP_CONFIG_DEV_URL ?? BAPP_CONFIG_URL_PROD)
+  : BAPP_CONFIG_URL_PROD
+export const GEOLOCATION_CONFIG_URL = BAPP_CONFIG_URL
+
+/**
+ * Default geolocation config.
+ */
+export const DEFAULT_GEOLOCATION_CONFIG: Device['geolocation'] = {
+  countryCode: undefined,
+  regionCode: undefined,
+  ageRestrictedGeos: [],
+  ageBlockedGeos: [],
+}
+
+/**
+ * Default geolocation status.
+ */
+export const DEFAULT_GEOLOCATION_STATUS: GeolocationStatus = {
+  countryCode: undefined,
+  regionCode: undefined,
+  isAgeRestrictedGeo: false,
+  isAgeBlockedGeo: false,
+}

src/state/geolocation/events.ts

···
+import EventEmitter from 'eventemitter3'
+
+import {type Device} from '#/storage'
+
+const events = new EventEmitter()
+const EVENT = 'geolocation-config-updated'
+
+export const emitGeolocationConfigUpdate = (config: Device['geolocation']) => {
+  events.emit(EVENT, config)
+}
+
+export const onGeolocationConfigUpdate = (
+  listener: (config: Device['geolocation']) => void,
+) => {
+  events.on(EVENT, listener)
+  return () => {
+    events.off(EVENT, listener)
+  }
+}

src/state/geolocation/index.tsx

···
+import React from 'react'
+
+import {
+  DEFAULT_GEOLOCATION_CONFIG,
+  DEFAULT_GEOLOCATION_STATUS,
+} from '#/state/geolocation/const'
+import {onGeolocationConfigUpdate} from '#/state/geolocation/events'
+import {logger} from '#/state/geolocation/logger'
+import {
+  type DeviceLocation,
+  type GeolocationStatus,
+} from '#/state/geolocation/types'
+import {useSyncedDeviceGeolocation} from '#/state/geolocation/useSyncedDeviceGeolocation'
+import {
+  computeGeolocationStatus,
+  mergeGeolocation,
+} from '#/state/geolocation/util'
+import {type Device, device} from '#/storage'
+
+export * from '#/state/geolocation/config'
+export * from '#/state/geolocation/types'
+export * from '#/state/geolocation/util'
+
+type DeviceGeolocationContext = {
+  deviceGeolocation: DeviceLocation | undefined
+}
+
+type DeviceGeolocationAPIContext = {
+  setDeviceGeolocation(deviceGeolocation: DeviceLocation): void
+}
+
+type GeolocationConfigContext = {
+  config: Device['geolocation']
+}
+
+type GeolocationStatusContext = {
+  /**
+   * Merged geolocation from config and device GPS (if available).
+   */
+  location: DeviceLocation
+  /**
+   * Computed geolocation status based on the merged location and config.
+   */
+  status: GeolocationStatus
+}
+
+const DeviceGeolocationContext = React.createContext<DeviceGeolocationContext>({
+  deviceGeolocation: undefined,
+})
+DeviceGeolocationContext.displayName = 'DeviceGeolocationContext'
+
+const DeviceGeolocationAPIContext =
+  React.createContext<DeviceGeolocationAPIContext>({
+    setDeviceGeolocation: () => {},
+  })
+DeviceGeolocationAPIContext.displayName = 'DeviceGeolocationAPIContext'
+
+const GeolocationConfigContext = React.createContext<GeolocationConfigContext>({
+  config: DEFAULT_GEOLOCATION_CONFIG,
+})
+GeolocationConfigContext.displayName = 'GeolocationConfigContext'
+
+const GeolocationStatusContext = React.createContext<GeolocationStatusContext>({
+  location: {
+    countryCode: undefined,
+    regionCode: undefined,
+  },
+  status: DEFAULT_GEOLOCATION_STATUS,
+})
+GeolocationStatusContext.displayName = 'GeolocationStatusContext'
+
+/**
+ * Provider of geolocation config and computed geolocation status.
+ */
+export function GeolocationStatusProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const {deviceGeolocation} = React.useContext(DeviceGeolocationContext)
+  const [config, setConfig] = React.useState(() => {
+    const initial = device.get(['geolocation']) || DEFAULT_GEOLOCATION_CONFIG
+    return initial
+  })
+
+  React.useEffect(() => {
+    return onGeolocationConfigUpdate(config => {
+      setConfig(config!)
+    })
+  }, [])
+
+  const configContext = React.useMemo(() => ({config}), [config])
+  const statusContext = React.useMemo(() => {
+    if (deviceGeolocation) {
+      logger.debug('geolocation: has device geolocation available')
+    }
+    const geolocation = mergeGeolocation(deviceGeolocation, config)
+    const status = computeGeolocationStatus(geolocation, config)
+    return {location: geolocation, status}
+  }, [config, deviceGeolocation])
+
+  return (
+    <GeolocationConfigContext.Provider value={configContext}>
+      <GeolocationStatusContext.Provider value={statusContext}>
+        {children}
+      </GeolocationStatusContext.Provider>
+    </GeolocationConfigContext.Provider>
+  )
+}
+
+/**
+ * Provider of providers. Provides device geolocation data to lower-level
+ * `GeolocationStatusProvider`, and device geolocation APIs to children.
+ */
+export function Provider({children}: {children: React.ReactNode}) {
+  const [deviceGeolocation, setDeviceGeolocation] = useSyncedDeviceGeolocation()
+
+  const handleSetDeviceGeolocation = React.useCallback(
+    (location: DeviceLocation) => {
+      logger.debug('geolocation: setting device geolocation')
+      setDeviceGeolocation({
+        countryCode: location.countryCode ?? undefined,
+        regionCode: location.regionCode ?? undefined,
+      })
+    },
+    [setDeviceGeolocation],
+  )
+
+  return (
+    <DeviceGeolocationAPIContext.Provider
+      value={React.useMemo(
+        () => ({setDeviceGeolocation: handleSetDeviceGeolocation}),
+        [handleSetDeviceGeolocation],
+      )}>
+      <DeviceGeolocationContext.Provider
+        value={React.useMemo(() => ({deviceGeolocation}), [deviceGeolocation])}>
+        <GeolocationStatusProvider>{children}</GeolocationStatusProvider>
+      </DeviceGeolocationContext.Provider>
+    </DeviceGeolocationAPIContext.Provider>
+  )
+}
+
+export function useDeviceGeolocationApi() {
+  return React.useContext(DeviceGeolocationAPIContext)
+}
+
+export function useGeolocationConfig() {
+  return React.useContext(GeolocationConfigContext)
+}
+
+export function useGeolocationStatus() {
+  return React.useContext(GeolocationStatusContext)
+}

src/state/geolocation/logger.ts

···
+import {Logger} from '#/logger'
+
+export const logger = Logger.create(Logger.Context.Geolocation)

src/state/geolocation/types.ts

···
+export type DeviceLocation = {
+  countryCode: string | undefined
+  regionCode: string | undefined
+}
+
+export type GeolocationStatus = DeviceLocation & {
+  isAgeRestrictedGeo: boolean
+  isAgeBlockedGeo: boolean
+}

src/state/geolocation/useRequestDeviceLocation.ts

···
+import {useCallback} from 'react'
+import * as Location from 'expo-location'
+
+import {type DeviceLocation} from '#/state/geolocation/types'
+import {getDeviceGeolocation} from '#/state/geolocation/util'
+
+export {PermissionStatus} from 'expo-location'
+
+export function useRequestDeviceLocation(): () => Promise<
+  | {
+      granted: true
+      location: DeviceLocation | undefined
+    }
+  | {
+      granted: false
+      status: {
+        canAskAgain: boolean
+        /**
+         * Enum, use `PermissionStatus` export for comparisons
+         */
+        permissionStatus: Location.PermissionStatus
+      }
+    }
+> {
+  return useCallback(async () => {
+    const status = await Location.requestForegroundPermissionsAsync()
+
+    if (status.granted) {
+      return {
+        granted: true,
+        location: await getDeviceGeolocation(),
+      }
+    } else {
+      return {
+        granted: false,
+        status: {
+          canAskAgain: status.canAskAgain,
+          permissionStatus: status.status,
+        },
+      }
+    }
+  }, [])
+}

src/state/geolocation/useSyncedDeviceGeolocation.ts

···
+import {useEffect, useRef} from 'react'
+import * as Location from 'expo-location'
+
+import {logger} from '#/state/geolocation/logger'
+import {getDeviceGeolocation} from '#/state/geolocation/util'
+import {device, useStorage} from '#/storage'
+
+/**
+ * Hook to get and sync the device geolocation from the device GPS and store it
+ * using device storage. If permissions are not granted, it will clear any cached
+ * storage value.
+ */
+export function useSyncedDeviceGeolocation() {
+  const synced = useRef(false)
+  const [status] = Location.useForegroundPermissions()
+  const [deviceGeolocation, setDeviceGeolocation] = useStorage(device, [
+    'deviceGeolocation',
+  ])
+
+  useEffect(() => {
+    async function get() {
+      // no need to set this more than once per session
+      if (synced.current) return
+
+      logger.debug('useSyncedDeviceGeolocation: checking perms')
+
+      if (status?.granted) {
+        const location = await getDeviceGeolocation()
+        if (location) {
+          logger.debug('useSyncedDeviceGeolocation: syncing location')
+          setDeviceGeolocation(location)
+          synced.current = true
+        }
+      } else {
+        const hasCachedValue = device.get(['deviceGeolocation']) !== undefined
+
+        /**
+         * If we have a cached value, but user has revoked permissions,
+         * quietly (will take effect lazily) clear this out.
+         */
+        if (hasCachedValue) {
+          logger.debug(
+            'useSyncedDeviceGeolocation: clearing cached location, perms revoked',
+          )
+          device.set(['deviceGeolocation'], undefined)
+        }
+      }
+    }
+
+    get().catch(e => {
+      logger.error('useSyncedDeviceGeolocation: failed to sync', {
+        safeMessage: e,
+      })
+    })
+  }, [status, setDeviceGeolocation])
+
+  return [deviceGeolocation, setDeviceGeolocation] as const
+}

src/state/geolocation/util.ts

···
+import {
+  getCurrentPositionAsync,
+  type LocationGeocodedAddress,
+  reverseGeocodeAsync,
+} from 'expo-location'
+
+import {logger} from '#/state/geolocation/logger'
+import {type DeviceLocation} from '#/state/geolocation/types'
+import {type Device} from '#/storage'
+
+/**
+ * Maps full US region names to their short codes.
+ *
+ * Context: in some cases, like on Android, we get the full region name instead
+ * of the short code. We may need to expand this in the future to other
+ * countries, hence the prefix.
+ */
+export const USRegionNameToRegionCode: {
+  [regionName: string]: string
+} = {
+  Alabama: 'AL',
+  Alaska: 'AK',
+  Arizona: 'AZ',
+  Arkansas: 'AR',
+  California: 'CA',
+  Colorado: 'CO',
+  Connecticut: 'CT',
+  Delaware: 'DE',
+  Florida: 'FL',
+  Georgia: 'GA',
+  Hawaii: 'HI',
+  Idaho: 'ID',
+  Illinois: 'IL',
+  Indiana: 'IN',
+  Iowa: 'IA',
+  Kansas: 'KS',
+  Kentucky: 'KY',
+  Louisiana: 'LA',
+  Maine: 'ME',
+  Maryland: 'MD',
+  Massachusetts: 'MA',
+  Michigan: 'MI',
+  Minnesota: 'MN',
+  Mississippi: 'MS',
+  Missouri: 'MO',
+  Montana: 'MT',
+  Nebraska: 'NE',
+  Nevada: 'NV',
+  ['New Hampshire']: 'NH',
+  ['New Jersey']: 'NJ',
+  ['New Mexico']: 'NM',
+  ['New York']: 'NY',
+  ['North Carolina']: 'NC',
+  ['North Dakota']: 'ND',
+  Ohio: 'OH',
+  Oklahoma: 'OK',
+  Oregon: 'OR',
+  Pennsylvania: 'PA',
+  ['Rhode Island']: 'RI',
+  ['South Carolina']: 'SC',
+  ['South Dakota']: 'SD',
+  Tennessee: 'TN',
+  Texas: 'TX',
+  Utah: 'UT',
+  Vermont: 'VT',
+  Virginia: 'VA',
+  Washington: 'WA',
+  ['West Virginia']: 'WV',
+  Wisconsin: 'WI',
+  Wyoming: 'WY',
+}
+
+/**
+ * Normalizes a `LocationGeocodedAddress` into a `DeviceLocation`.
+ *
+ * We don't want or care about the full location data, so we trim it down and
+ * normalize certain fields, like region, into the format we need.
+ */
+export function normalizeDeviceLocation(
+  location: LocationGeocodedAddress,
+): DeviceLocation {
+  let {isoCountryCode, region} = location
+
+  if (region) {
+    if (isoCountryCode === 'US') {
+      region = USRegionNameToRegionCode[region] ?? region
+    }
+  }
+
+  return {
+    countryCode: isoCountryCode ?? undefined,
+    regionCode: region ?? undefined,
+  }
+}
+
+/**
+ * Combines precise location data with the geolocation config fetched from the
+ * IP service, with preference to the precise data.
+ */
+export function mergeGeolocation(
+  location?: DeviceLocation,
+  config?: Device['geolocation'],
+): DeviceLocation {
+  if (location?.countryCode) return location
+  return {
+    countryCode: config?.countryCode,
+    regionCode: config?.regionCode,
+  }
+}
+
+/**
+ * Computes the geolocation status (age-restricted, age-blocked) based on the
+ * given location and geolocation config. `location` here should be merged with
+ * `mergeGeolocation()` ahead of time if needed.
+ */
+export function computeGeolocationStatus(
+  location: DeviceLocation,
+  config: Device['geolocation'],
+) {
+  /**
+   * We can't do anything if we don't have this data.
+   */
+  if (!location.countryCode) {
+    return {
+      ...location,
+      isAgeRestrictedGeo: false,
+      isAgeBlockedGeo: false,
+    }
+  }
+
+  const isAgeRestrictedGeo = config?.ageRestrictedGeos?.some(rule => {
+    if (rule.countryCode === location.countryCode) {
+      if (!rule.regionCode) {
+        return true // whole country is blocked
+      } else if (rule.regionCode === location.regionCode) {
+        return true
+      }
+    }
+  })
+
+  const isAgeBlockedGeo = config?.ageBlockedGeos?.some(rule => {
+    if (rule.countryCode === location.countryCode) {
+      if (!rule.regionCode) {
+        return true // whole country is blocked
+      } else if (rule.regionCode === location.regionCode) {
+        return true
+      }
+    }
+  })
+
+  return {
+    ...location,
+    isAgeRestrictedGeo: !!isAgeRestrictedGeo,
+    isAgeBlockedGeo: !!isAgeBlockedGeo,
+  }
+}
+
+export async function getDeviceGeolocation(): Promise<DeviceLocation> {
+  try {
+    const geocode = await getCurrentPositionAsync()
+    const locations = await reverseGeocodeAsync({
+      latitude: geocode.coords.latitude,
+      longitude: geocode.coords.longitude,
+    })
+    const location = locations.at(0)
+    const normalized = location ? normalizeDeviceLocation(location) : undefined
+    return {
+      countryCode: normalized?.countryCode ?? undefined,
+      regionCode: normalized?.regionCode ?? undefined,
+    }
+  } catch (e) {
+    logger.error('getDeviceGeolocation: failed', {
+      safeMessage: e,
+    })
+    return {
+      countryCode: undefined,
+      regionCode: undefined,
+    }
+  }
+}

src/storage/schema.ts

···
   fontScale: '-2' | '-1' | '0' | '1' | '2'
   fontFamily: 'system' | 'theme'
   lastNuxDialog: string | undefined
+
+  /**
+   * Geolocation config, fetched from the IP service. This previously did
+   * double duty as the "status" for geolocation state, but that has since
+   * moved here to the client.
+   */
   geolocation?: {
     countryCode: string | undefined
-    isAgeRestrictedGeo: boolean | undefined
-    isAgeBlockedGeo: boolean | undefined
+    regionCode: string | undefined
+    ageRestrictedGeos: {
+      countryCode: string
+      regionCode: string | undefined
+    }[]
+    ageBlockedGeos: {
+      countryCode: string
+      regionCode: string | undefined
+    }[]
   }
+  /**
+   * The GPS-based geolocation, if the user has granted permission.
+   */
+  deviceGeolocation?: {
+    countryCode: string | undefined
+    regionCode: string | undefined
+  }
+
   trendingBetaEnabled: boolean
   devMode: boolean
   demoMode: boolean

src/view/shell/index.tsx

···
 import {isStateAtTabRoot} from '#/lib/routes/helpers'
 import {isAndroid, isIOS} from '#/platform/detection'
 import {useDialogFullyExpandedCountContext} from '#/state/dialogs'
-import {useGeolocation} from '#/state/geolocation'
+import {useGeolocationStatus} from '#/state/geolocation'
 import {useSession} from '#/state/session'
 import {
   useIsDrawerOpen,
···
 
 export function Shell() {
   const t = useTheme()
-  const {geolocation} = useGeolocation()
+  const {status: geolocation} = useGeolocationStatus()
   const fullyExpandedCount = useDialogFullyExpandedCountContext()
 
   useIntentHandler()

src/view/shell/index.web.tsx

···
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {type NavigationProp} from '#/lib/routes/types'
 import {useGate} from '#/lib/statsig/statsig'
-import {useGeolocation} from '#/state/geolocation'
+import {useGeolocationStatus} from '#/state/geolocation'
 import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell'
 import {useComposerKeyboardShortcut} from '#/state/shell/composer/useComposerKeyboardShortcut'
 import {useCloseAllActiveElements} from '#/state/util'
···
 
 export function Shell() {
   const t = useTheme()
-  const {geolocation} = useGeolocation()
+  const {status: geolocation} = useGeolocationStatus()
   return (
     <View style={[a.util_screen_outer, t.atoms.bg]}>
       {geolocation?.isAgeBlockedGeo ? (

yarn.lock

···
   dependencies:
     rtl-detect "^1.0.2"
 
+expo-location@~18.1.6:
+  version "18.1.6"
+  resolved "https://registry.yarnpkg.com/expo-location/-/expo-location-18.1.6.tgz#b855e14e8b4e29a1bde470fc4dc2a341abecf631"
+  integrity sha512-l5dQQ2FYkrBgNzaZN1BvSmdhhcztFOUucu2kEfDBMV4wSIuTIt/CKsho+F3RnAiWgvui1wb1WTTf80E8zq48hA==
+
 expo-manifests@~0.16.5:
   version "0.16.5"
   resolved "https://registry.yarnpkg.com/expo-manifests/-/expo-manifests-0.16.5.tgz#bb57ceff3db4eb74679d4a155b2ca2050375ce10"