cleanup captcha step

This commit is contained in:
Hailey
2025-08-05 08:35:22 -07:00
parent 47ca4d5728
commit 9328c13201
@@ -1,5 +1,4 @@
import React, {useEffect, useRef} from 'react'
import {StyleSheet} from 'react-native'
import {useEffect, useMemo, useRef} from 'react'
import {WebView, type WebViewNavigation} from 'react-native-webview'
import {type ShouldStartLoadRequest} from 'react-native-webview/lib/WebViewTypes'
@@ -43,7 +42,7 @@ export function CaptchaWebView({
}
}, [])
const redirectHost = React.useMemo(() => {
const redirectHost = useMemo(() => {
if (!state?.serviceUrl) return 'bsky.app'
return state?.serviceUrl &&
@@ -52,49 +51,47 @@ export function CaptchaWebView({
: 'bsky.app'
}, [state?.serviceUrl])
const wasSuccessful = React.useRef(false)
const wasSuccessful = useRef(false)
const onShouldStartLoadWithRequest = React.useCallback(
(event: ShouldStartLoadRequest) => {
const urlp = new URL(event.url)
return ALLOWED_HOSTS.includes(urlp.host)
},
[],
)
const onShouldStartLoadWithRequest = (event: ShouldStartLoadRequest) => {
const urlp = new URL(event.url)
return ALLOWED_HOSTS.includes(urlp.host)
}
const onNavigationStateChange = React.useCallback(
(e: WebViewNavigation) => {
if (wasSuccessful.current) return
const onNavigationStateChange = (e: WebViewNavigation) => {
if (wasSuccessful.current) return
const urlp = new URL(e.url)
if (urlp.host !== redirectHost || urlp.pathname === '/gate/signup') return
const urlp = new URL(e.url)
if (urlp.host !== redirectHost || urlp.pathname === '/gate/signup') return
const code = urlp.searchParams.get('code')
if (urlp.searchParams.get('state') !== stateParam || !code) {
onError({error: 'Invalid state or code'})
return
}
const code = urlp.searchParams.get('code')
if (urlp.searchParams.get('state') !== stateParam || !code) {
onError({error: 'Invalid state or code'})
return
}
// We want to delay the completion of this screen ever so slightly so that it doesn't appear to be a glitch if it completes too fast
wasSuccessful.current = true
const now = Date.now()
const timeTaken = now - startedAt.current
if (timeTaken < MIN_DELAY) {
successTo.current = setTimeout(() => {
onSuccess(code)
}, MIN_DELAY - timeTaken)
} else {
// We want to delay the completion of this screen ever so slightly so that it doesn't appear to be a glitch if it completes too fast
wasSuccessful.current = true
const now = Date.now()
const timeTaken = now - startedAt.current
if (timeTaken < MIN_DELAY) {
successTo.current = setTimeout(() => {
onSuccess(code)
}
},
[redirectHost, stateParam, onSuccess, onError],
)
}, MIN_DELAY - timeTaken)
} else {
onSuccess(code)
}
}
return (
<WebView
source={{uri: url}}
javaScriptEnabled
style={styles.webview}
style={{
flex: 1,
backgroundColor: 'transparent',
borderRadius: 10,
}}
onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
onNavigationStateChange={onNavigationStateChange}
scrollEnabled={false}
@@ -107,11 +104,3 @@ export function CaptchaWebView({
/>
)
}
const styles = StyleSheet.create({
webview: {
flex: 1,
backgroundColor: 'transparent',
borderRadius: 10,
},
})