Hailey
499 lines
16 KiB
TypeScript
499 lines
16 KiB
TypeScript
import React, {useRef, useState} from 'react'
|
|
import {
|
|
ActivityIndicator,
|
|
Keyboard,
|
|
LayoutAnimation,
|
|
TextInput,
|
|
View,
|
|
} from 'react-native'
|
|
import {
|
|
ComAtprotoServerCreateSession,
|
|
ComAtprotoServerDescribeServer,
|
|
} from '@atproto/api'
|
|
import {
|
|
AuthorizeOptions,
|
|
BrowserOAuthClient,
|
|
LoginContinuedInParentWindowError,
|
|
OAuthAgent,
|
|
} from '@atproto/oauth-client-browser'
|
|
import {msg, Trans} from '@lingui/macro'
|
|
import {useLingui} from '@lingui/react'
|
|
|
|
import {useAnalytics} from '#/lib/analytics/analytics'
|
|
import {isNetworkError} from '#/lib/strings/errors'
|
|
import {cleanError} from '#/lib/strings/errors'
|
|
import {createFullHandle} from '#/lib/strings/handles'
|
|
import {logger} from '#/logger'
|
|
import {useSessionApi} from '#/state/session'
|
|
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
|
|
import {useRequestNotificationsPermission} from 'lib/notifications/notifications'
|
|
import {useGate} from 'lib/statsig/statsig'
|
|
import {useSetHasCheckedForStarterPack} from 'state/preferences/used-starter-packs'
|
|
import {atoms as a, useTheme} from '#/alf'
|
|
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
|
|
import {FormError} from '#/components/forms/FormError'
|
|
import {HostingProvider} from '#/components/forms/HostingProvider'
|
|
import * as TextField from '#/components/forms/TextField'
|
|
import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At'
|
|
import {Lock_Stroke2_Corner0_Rounded as Lock} from '#/components/icons/Lock'
|
|
import {Ticket_Stroke2_Corner0_Rounded as Ticket} from '#/components/icons/Ticket'
|
|
import {Loader} from '#/components/Loader'
|
|
import {Text} from '#/components/Typography'
|
|
import {FormContainer} from './FormContainer'
|
|
|
|
type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema
|
|
|
|
const client = new BrowserOAuthClient({
|
|
plcDirectoryUrl: 'https://plc.directory',
|
|
handleResolver: 'https://bsky.social',
|
|
})
|
|
|
|
export function useOAuth(client: BrowserOAuthClient) {
|
|
const [agent, setAgent] = useState<null | OAuthAgent>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
const clientRef = useRef<typeof client>()
|
|
React.useEffect(() => {
|
|
// In strict mode, we don't want to reinitialize the client if it's the same
|
|
if (clientRef.current === client) return
|
|
clientRef.current = client
|
|
|
|
setLoading(true)
|
|
setAgent(null)
|
|
|
|
client
|
|
.init()
|
|
.then(async r => {
|
|
if (clientRef.current !== client) return
|
|
|
|
setAgent(r?.agent || null)
|
|
})
|
|
.catch(err => {
|
|
console.error('Failed to init:', err)
|
|
|
|
if (clientRef.current !== client) return
|
|
if (err instanceof LoginContinuedInParentWindowError) return
|
|
|
|
setAgent(null)
|
|
})
|
|
.finally(() => {
|
|
if (clientRef.current !== client) return
|
|
|
|
setLoading(false)
|
|
})
|
|
}, [client])
|
|
|
|
React.useEffect(() => {
|
|
if (!agent) return
|
|
|
|
const clear = ({detail}: {detail: {sub: string}}) => {
|
|
if (detail.sub === agent.sub) {
|
|
setAgent(null)
|
|
}
|
|
}
|
|
|
|
client.addEventListener('deleted', clear)
|
|
|
|
return () => {
|
|
client.removeEventListener('deleted', clear)
|
|
}
|
|
}, [client, agent])
|
|
|
|
const signOut = React.useCallback(async () => {
|
|
if (!agent) return
|
|
|
|
setAgent(null)
|
|
setLoading(true)
|
|
|
|
try {
|
|
await agent.signOut()
|
|
} catch (err) {
|
|
console.error('Failed to clear credentials', err)
|
|
throw err
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}, [agent])
|
|
|
|
const signIn = React.useCallback(
|
|
async (input: string, options?: AuthorizeOptions) => {
|
|
// if (agent) return
|
|
|
|
setLoading(true)
|
|
|
|
try {
|
|
const agent = await client.signIn(input, options)
|
|
setAgent(agent)
|
|
} catch (err) {
|
|
console.error('Failed to login', err)
|
|
throw err
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
},
|
|
[client],
|
|
)
|
|
|
|
return {
|
|
agent,
|
|
loading,
|
|
signedIn: agent != null,
|
|
signIn,
|
|
signOut,
|
|
}
|
|
}
|
|
|
|
export const LoginForm = ({
|
|
error,
|
|
serviceUrl,
|
|
serviceDescription,
|
|
initialHandle,
|
|
setError,
|
|
setServiceUrl,
|
|
onPressRetryConnect,
|
|
onPressBack,
|
|
onPressForgotPassword,
|
|
}: {
|
|
error: string
|
|
serviceUrl: string
|
|
serviceDescription: ServiceDescription | undefined
|
|
initialHandle: string
|
|
setError: (v: string) => void
|
|
setServiceUrl: (v: string) => void
|
|
onPressRetryConnect: () => void
|
|
onPressBack: () => void
|
|
onPressForgotPassword: () => void
|
|
}) => {
|
|
const {track} = useAnalytics()
|
|
const t = useTheme()
|
|
const [isProcessing, setIsProcessing] = useState<boolean>(false)
|
|
const [isReady, setIsReady] = useState<boolean>(false)
|
|
const [isAuthFactorTokenNeeded, setIsAuthFactorTokenNeeded] =
|
|
useState<boolean>(false)
|
|
const identifierValueRef = useRef<string>(initialHandle || '')
|
|
const passwordValueRef = useRef<string>('')
|
|
const authFactorTokenValueRef = useRef<string>('')
|
|
const passwordRef = useRef<TextInput>(null)
|
|
const {_} = useLingui()
|
|
const {login} = useSessionApi()
|
|
const requestNotificationsPermission = useRequestNotificationsPermission()
|
|
const {setShowLoggedOut} = useLoggedOutViewControls()
|
|
const setHasCheckedForStarterPack = useSetHasCheckedForStarterPack()
|
|
|
|
const gate = useGate()
|
|
const oauthEnabled = __DEV__ || gate('use_oauth')
|
|
const oauth = useOAuth(client)
|
|
const [handle, setHandle] = React.useState('')
|
|
|
|
const onPressSelectService = React.useCallback(() => {
|
|
Keyboard.dismiss()
|
|
track('Signin:PressedSelectService')
|
|
}, [track])
|
|
|
|
const onPressNextOauth = async () => {
|
|
await oauth.signIn(handle)
|
|
}
|
|
|
|
const onPressNext = async () => {
|
|
if (isProcessing) return
|
|
Keyboard.dismiss()
|
|
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
|
|
setError('')
|
|
setIsProcessing(true)
|
|
|
|
const identifier = identifierValueRef.current.toLowerCase().trim()
|
|
const password = passwordValueRef.current
|
|
const authFactorToken = authFactorTokenValueRef.current
|
|
|
|
try {
|
|
// try to guess the handle if the user just gave their own username
|
|
let fullIdent = identifier
|
|
if (
|
|
!identifier.includes('@') && // not an email
|
|
!identifier.includes('.') && // not a domain
|
|
serviceDescription &&
|
|
serviceDescription.availableUserDomains.length > 0
|
|
) {
|
|
let matched = false
|
|
for (const domain of serviceDescription.availableUserDomains) {
|
|
if (fullIdent.endsWith(domain)) {
|
|
matched = true
|
|
}
|
|
}
|
|
if (!matched) {
|
|
fullIdent = createFullHandle(
|
|
identifier,
|
|
serviceDescription.availableUserDomains[0],
|
|
)
|
|
}
|
|
}
|
|
|
|
// TODO remove double login
|
|
await login(
|
|
{
|
|
service: serviceUrl,
|
|
identifier: fullIdent,
|
|
password,
|
|
authFactorToken: authFactorToken.trim(),
|
|
},
|
|
'LoginForm',
|
|
)
|
|
setShowLoggedOut(false)
|
|
setHasCheckedForStarterPack(true)
|
|
requestNotificationsPermission('Login')
|
|
} catch (e: any) {
|
|
const errMsg = e.toString()
|
|
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
|
|
setIsProcessing(false)
|
|
if (
|
|
e instanceof ComAtprotoServerCreateSession.AuthFactorTokenRequiredError
|
|
) {
|
|
setIsAuthFactorTokenNeeded(true)
|
|
} else if (errMsg.includes('Token is invalid')) {
|
|
logger.debug('Failed to login due to invalid 2fa token', {
|
|
error: errMsg,
|
|
})
|
|
setError(_(msg`Invalid 2FA confirmation code.`))
|
|
} else if (errMsg.includes('Authentication Required')) {
|
|
logger.debug('Failed to login due to invalid credentials', {
|
|
error: errMsg,
|
|
})
|
|
setError(_(msg`Invalid username or password`))
|
|
} else if (isNetworkError(e)) {
|
|
logger.warn('Failed to login due to network error', {error: errMsg})
|
|
setError(
|
|
_(
|
|
msg`Unable to contact your service. Please check your Internet connection.`,
|
|
),
|
|
)
|
|
} else {
|
|
logger.warn('Failed to login', {error: errMsg})
|
|
setError(cleanError(errMsg))
|
|
}
|
|
}
|
|
}
|
|
|
|
const checkIsReady = () => {
|
|
if (
|
|
!!serviceDescription &&
|
|
!!identifierValueRef.current &&
|
|
!!passwordValueRef.current
|
|
) {
|
|
if (!isReady) {
|
|
setIsReady(true)
|
|
}
|
|
} else {
|
|
if (isReady) {
|
|
setIsReady(false)
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<FormContainer testID="loginForm" titleText={<Trans>Sign in</Trans>}>
|
|
{oauthEnabled ? (
|
|
<>
|
|
<TextField.LabelText>
|
|
<Trans>Handle</Trans>
|
|
</TextField.LabelText>
|
|
<View style={[a.gap_sm]}>
|
|
<TextField.Root>
|
|
<TextField.Icon icon={At} />
|
|
<TextField.Input
|
|
testID="loginUsernameInput"
|
|
label={_(msg`alice.test`)}
|
|
autoCapitalize="none"
|
|
autoFocus
|
|
autoCorrect={false}
|
|
autoComplete="username"
|
|
returnKeyType="next"
|
|
textContentType="username"
|
|
defaultValue={initialHandle || ''}
|
|
onChangeText={v => {
|
|
setHandle(v)
|
|
checkIsReady()
|
|
}}
|
|
onSubmitEditing={() => {
|
|
// @TODO submit
|
|
}}
|
|
blurOnSubmit={false} // prevents flickering due to onSubmitEditing going to next field
|
|
editable={!isProcessing}
|
|
accessibilityHint={_(msg`Input the handle for your account`)}
|
|
/>
|
|
</TextField.Root>
|
|
</View>
|
|
</>
|
|
) : (
|
|
<>
|
|
<View>
|
|
<TextField.LabelText>
|
|
<Trans>Hosting provider</Trans>
|
|
</TextField.LabelText>
|
|
<HostingProvider
|
|
serviceUrl={serviceUrl}
|
|
onSelectServiceUrl={setServiceUrl}
|
|
onOpenDialog={onPressSelectService}
|
|
/>
|
|
</View>
|
|
<View>
|
|
<TextField.LabelText>
|
|
<Trans>Account</Trans>
|
|
</TextField.LabelText>
|
|
<View style={[a.gap_sm]}>
|
|
<TextField.Root>
|
|
<TextField.Icon icon={At} />
|
|
<TextField.Input
|
|
testID="loginUsernameInput"
|
|
label={_(msg`Username or email address`)}
|
|
autoCapitalize="none"
|
|
autoFocus
|
|
autoCorrect={false}
|
|
autoComplete="username"
|
|
returnKeyType="next"
|
|
textContentType="username"
|
|
defaultValue={initialHandle || ''}
|
|
onChangeText={v => {
|
|
identifierValueRef.current = v
|
|
checkIsReady()
|
|
}}
|
|
onSubmitEditing={() => {
|
|
passwordRef.current?.focus()
|
|
}}
|
|
blurOnSubmit={false} // prevents flickering due to onSubmitEditing going to next field
|
|
editable={!isProcessing}
|
|
accessibilityHint={_(
|
|
msg`Input the username or email address you used at signup`,
|
|
)}
|
|
/>
|
|
</TextField.Root>
|
|
|
|
<TextField.Root>
|
|
<TextField.Icon icon={Lock} />
|
|
<TextField.Input
|
|
testID="loginPasswordInput"
|
|
inputRef={passwordRef}
|
|
label={_(msg`Password`)}
|
|
autoCapitalize="none"
|
|
autoCorrect={false}
|
|
autoComplete="password"
|
|
returnKeyType="done"
|
|
enablesReturnKeyAutomatically={true}
|
|
secureTextEntry={true}
|
|
textContentType="password"
|
|
clearButtonMode="while-editing"
|
|
onChangeText={v => {
|
|
passwordValueRef.current = v
|
|
checkIsReady()
|
|
}}
|
|
onSubmitEditing={onPressNext}
|
|
blurOnSubmit={false} // HACK: https://github.com/facebook/react-native/issues/21911#issuecomment-558343069 Keyboard blur behavior is now handled in onSubmitEditing
|
|
editable={!isProcessing}
|
|
accessibilityHint={_(msg`Input your password`)}
|
|
/>
|
|
<Button
|
|
testID="forgotPasswordButton"
|
|
onPress={onPressForgotPassword}
|
|
label={_(msg`Forgot password?`)}
|
|
accessibilityHint={_(msg`Opens password reset form`)}
|
|
variant="solid"
|
|
color="secondary"
|
|
style={[
|
|
a.rounded_sm,
|
|
// t.atoms.bg_contrast_100,
|
|
{marginLeft: 'auto', left: 6, padding: 6},
|
|
a.z_10,
|
|
]}>
|
|
<ButtonText>
|
|
<Trans>Forgot?</Trans>
|
|
</ButtonText>
|
|
</Button>
|
|
</TextField.Root>
|
|
</View>
|
|
</View>
|
|
</>
|
|
)}
|
|
{isAuthFactorTokenNeeded && (
|
|
<View>
|
|
<TextField.LabelText>
|
|
<Trans>2FA Confirmation</Trans>
|
|
</TextField.LabelText>
|
|
<TextField.Root>
|
|
<TextField.Icon icon={Ticket} />
|
|
<TextField.Input
|
|
testID="loginAuthFactorTokenInput"
|
|
label={_(msg`Confirmation code`)}
|
|
autoCapitalize="none"
|
|
autoFocus
|
|
autoCorrect={false}
|
|
autoComplete="off"
|
|
returnKeyType="done"
|
|
textContentType="username"
|
|
blurOnSubmit={false} // prevents flickering due to onSubmitEditing going to next field
|
|
onChangeText={v => {
|
|
authFactorTokenValueRef.current = v
|
|
}}
|
|
onSubmitEditing={onPressNext}
|
|
editable={!isProcessing}
|
|
accessibilityHint={_(
|
|
msg`Input the code which has been emailed to you`,
|
|
)}
|
|
/>
|
|
</TextField.Root>
|
|
<Text style={[a.text_sm, t.atoms.text_contrast_medium, a.mt_sm]}>
|
|
<Trans>Check your email for a login code and enter it here.</Trans>
|
|
</Text>
|
|
</View>
|
|
)}
|
|
<FormError error={error} />
|
|
<View style={[a.flex_row, a.align_center, a.pt_md]}>
|
|
<Button
|
|
label={_(msg`Back`)}
|
|
variant="solid"
|
|
color="secondary"
|
|
size="medium"
|
|
onPress={onPressBack}>
|
|
<ButtonText>
|
|
<Trans>Back</Trans>
|
|
</ButtonText>
|
|
</Button>
|
|
<View style={a.flex_1} />
|
|
{!serviceDescription && error ? (
|
|
<Button
|
|
testID="loginRetryButton"
|
|
label={_(msg`Retry`)}
|
|
accessibilityHint={_(msg`Retries login`)}
|
|
variant="solid"
|
|
color="secondary"
|
|
size="medium"
|
|
onPress={onPressRetryConnect}>
|
|
<ButtonText>
|
|
<Trans>Retry</Trans>
|
|
</ButtonText>
|
|
</Button>
|
|
) : !serviceDescription ? (
|
|
<>
|
|
<ActivityIndicator />
|
|
<Text style={[t.atoms.text_contrast_high, a.pl_md]}>
|
|
<Trans>Connecting...</Trans>
|
|
</Text>
|
|
</>
|
|
) : isReady || oauthEnabled ? (
|
|
<Button
|
|
testID="loginNextButton"
|
|
label={_(msg`Next`)}
|
|
accessibilityHint={_(msg`Navigates to the next screen`)}
|
|
variant="solid"
|
|
color="primary"
|
|
size="medium"
|
|
onPress={oauthEnabled ? onPressNextOauth : onPressNext}>
|
|
<ButtonText>
|
|
<Trans>Next</Trans>
|
|
</ButtonText>
|
|
{isProcessing && <ButtonIcon icon={Loader} />}
|
|
</Button>
|
|
) : undefined}
|
|
</View>
|
|
</FormContainer>
|
|
)
|
|
}
|