[APP-1674] Add bday fallback for app passwords (#9513)

* Add bday fallback for app passwords

* Update birthdate copy, add isAppPassword handling on NoAccessScreen

* Update copy

* Update usage

* Bump API package

* HmmMMMmmm

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* s/a/your

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Say hello

---------

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
(cherry picked from commit b47f5f023e)

src/ageAssurance/components/NoAccessScreen.tsx

@@ -9,11 +9,12 @@ import {
   useCreateSupportLink,
 } from '#/lib/hooks/useCreateSupportLink'
 import {dateDiff, useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
+import {isAppPassword} from '#/lib/jwt'
 import {logger} from '#/logger'
 import {isWeb} from '#/platform/detection'
 import {isNative} from '#/platform/detection'
 import {useIsBirthdateUpdateAllowed} from '#/state/birthdate'
-import {useSessionApi} from '#/state/session'
+import {useSession, useSessionApi} from '#/state/session'
 import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {Admonition} from '#/components/Admonition'
 import {AgeAssuranceAppealDialog} from '#/components/ageAssurance/AgeAssuranceAppealDialog'
@@ -29,7 +30,7 @@ import {ShieldCheck_Stroke2_Corner0_Rounded as ShieldIcon} from '#/components/ic
 import {createStaticClick, SimpleInlineLinkText} from '#/components/Link'
 import {Outlet as PortalOutlet} from '#/components/Portal'
 import * as Toast from '#/components/Toast'
-import {Text} from '#/components/Typography'
+import {Span, Text} from '#/components/Typography'
 import {BottomSheetOutlet} from '#/../modules/bottom-sheet'
 import {useAgeAssurance} from '#/ageAssurance'
 import {useAgeAssuranceDataContext} from '#/ageAssurance/data'
@@ -54,6 +55,9 @@ export function NoAccessScreen() {
   const {logoutCurrentAccount} = useSessionApi()
   const createSupportLink = useCreateSupportLink()
 
+  const {currentAccount} = useSession()
+  const isUsingAppPassword = isAppPassword(currentAccount?.accessJwt || '')
+
   const aa = useAgeAssurance()
   const isBlocked = aa.state.status === aa.Status.Blocked
   const isAARegion = !!region
@@ -139,6 +143,9 @@ export function NoAccessScreen() {
               {isAARegion ? (
                 <>
                   <View style={[a.gap_lg]}>
+                    <Text style={[textStyles]}>
+                      <Trans>Hey there!</Trans>
+                    </Text>
                     <Text style={[textStyles]}>
                       <Trans>
                         You are accessing Bluesky from a region that legally
@@ -167,10 +174,20 @@ export function NoAccessScreen() {
             </>
           ) : (
             <View style={[a.gap_lg]}>
+              <Text style={[textStyles]}>
+                <Trans>Hi there!</Trans>
+              </Text>
               <Text style={[textStyles]}>
                 <Trans>
-                  It looks like you haven't added your birthdate. You must
-                  provide an accurate date of birth to use Bluesky.
+                  In order to provide an age-appropriate experience, we need to
+                  know your birthdate. This is a one-time thing, and your data
+                  will be kept private.
+                </Trans>
+              </Text>
+              <Text style={[textStyles]}>
+                <Trans>
+                  Set your birthdate below and we'll get you back to posting and
+                  exploring in no time!
                 </Trans>
               </Text>
               <Button
@@ -182,6 +199,17 @@ export function NoAccessScreen() {
                   <Trans>Add your birthdate</Trans>
                 </ButtonText>
               </Button>
+
+              {isUsingAppPassword && (
+                <Admonition type="info">
+                  <Trans>
+                    Hmm, it looks like you're logged in with an{' '}
+                    <Span style={[a.italic]}>App Password</Span>. To set your
+                    birthdate, you'll need to log in with your main account
+                    password, or ask whomever controls this account to do so.
+                  </Trans>
+                </Admonition>
+              )}
             </View>
           )}
 

src/ageAssurance/data.tsx

@@ -22,7 +22,10 @@ import {
 import {useAgent, useSession} from '#/state/session'
 import * as debug from '#/ageAssurance/debug'
 import {logger} from '#/ageAssurance/logger'
-import {isLegacyBirthdateBug} from '#/ageAssurance/util'
+import {
+  getBirthdateStringFromAge,
+  isLegacyBirthdateBug,
+} from '#/ageAssurance/util'
 import {IS_DEV} from '#/env'
 import {device} from '#/storage'
 
@@ -324,6 +327,22 @@ export async function getOtherRequiredData({
   const data: OtherRequiredData = {
     birthdate: prefs.birthDate ? prefs.birthDate.toISOString() : undefined,
   }
+
+  /**
+   * If we can't read a birthdate, it may be due to the user accessing the
+   * account via an app password. In that case, fall-back to declared age
+   * flags.
+   */
+  if (!data.birthdate) {
+    if (prefs.declaredAge?.isOverAge18) {
+      data.birthdate = getBirthdateStringFromAge(18)
+    } else if (prefs.declaredAge?.isOverAge16) {
+      data.birthdate = getBirthdateStringFromAge(16)
+    } else if (prefs.declaredAge?.isOverAge13) {
+      data.birthdate = getBirthdateStringFromAge(13)
+    }
+  }
+
   const did = getDidFromAgentSession(agent)
   if (data && did && birthdateCache.has(did)) {
     /*

src/ageAssurance/util.ts

@@ -86,3 +86,12 @@ export function isUserUnderMinimumAge(birthDate: string) {
 export function isUserUnderAdultAge(birthDate: string) {
   return getAge(new Date(birthDate)) < 18
 }
+
+export function getBirthdateStringFromAge(age: number) {
+  const today = new Date()
+  return new Date(
+    today.getFullYear() - age,
+    today.getMonth(),
+    today.getDate() - 1, // set to day before to ensure age is reached
+  ).toISOString()
+}

src/lib/jwt.ts

@@ -21,3 +21,9 @@ export function isJwtExpired(token: string) {
     return true // invalid token or parse error
   }
 }
+
+export function isAppPassword(token: string) {
+  const payload = jwtDecode(token)
+  // @ts-ignore
+  return payload.scope === 'com.atproto.appPass'
+}