From de87ec17d1673855fdfe2ccd125d734591969dd4 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Wed, 15 Jun 2022 22:33:16 -0500 Subject: [PATCH] Fix web build --- README.md | 1 + src/env.native.ts | 8 +++ src/env.ts | 6 +-- src/platform/auth-flow.native.ts | 53 +++++++++++++++++++ src/platform/auth-flow.ts | 19 +++++++ src/platform/polyfills.native.ts | 3 +- .../{polyfills.web.ts => polyfills.ts} | 1 + src/state/auth.ts | 52 ++---------------- src/state/index.ts | 1 - 9 files changed, 88 insertions(+), 56 deletions(-) create mode 100644 src/env.native.ts create mode 100644 src/platform/auth-flow.native.ts create mode 100644 src/platform/auth-flow.ts rename src/platform/{polyfills.web.ts => polyfills.ts} (58%) diff --git a/README.md b/README.md index 9e252f3f..bbd39046 100644 --- a/README.md +++ b/README.md @@ -33,6 +33,7 @@ Uses: - Annoyingly this must be re-set via XCode after every pod install - The android simulator won't be able to access localhost services unless you run `adb reverse tcp:{PORT} tcp:{PORT}` - For instance, the localhosted dev-wallet will need `adb reverse tcp:3001 tcp:3001` + - For some reason, the typescript compiler chokes on platform-specific files (e.g. `foo.native.ts`) but only when compiling for Web thus far. Therefore we always have one version of the file which doesn't use a platform specifier, and that should bee the Web version. ([More info](https://stackoverflow.com/questions/44001050/platform-specific-import-component-in-react-native-with-typescript).) ## Various notes diff --git a/src/env.native.ts b/src/env.native.ts new file mode 100644 index 00000000..581b211c --- /dev/null +++ b/src/env.native.ts @@ -0,0 +1,8 @@ +// @ts-ignore types not available -prf +import {REACT_APP_AUTH_LOBBY} from '@env' + +if (typeof REACT_APP_AUTH_LOBBY !== 'string') { + throw new Error('ENV: No auth lobby provided') +} + +export const AUTH_LOBBY = REACT_APP_AUTH_LOBBY diff --git a/src/env.ts b/src/env.ts index 47bceac7..78fb88ac 100644 --- a/src/env.ts +++ b/src/env.ts @@ -1,7 +1,5 @@ -import {REACT_APP_AUTH_LOBBY} from '@env' - -if (typeof REACT_APP_AUTH_LOBBY !== 'string') { +if (typeof process.env.REACT_APP_AUTH_LOBBY !== 'string') { throw new Error('ENV: No auth lobby provided') } -export const AUTH_LOBBY = REACT_APP_AUTH_LOBBY +export const AUTH_LOBBY = process.env.REACT_APP_AUTH_LOBBY diff --git a/src/platform/auth-flow.native.ts b/src/platform/auth-flow.native.ts new file mode 100644 index 00000000..596632f1 --- /dev/null +++ b/src/platform/auth-flow.native.ts @@ -0,0 +1,53 @@ +import {Linking} from 'react-native' +import * as auth from '@adxp/auth' +import * as ucan from 'ucans' +import {InAppBrowser} from 'react-native-inappbrowser-reborn' +import {isWeb} from '../platform/detection' +import {extractHashFragment, makeAppUrl} from '../platform/urls' +import {ReactNativeStore, parseUrlForUcan} from '../state/auth' +import * as env from '../env' + +export async function requestAppUcan( + authStore: ReactNativeStore, + scope: ucan.Capability, +) { + const did = await authStore.getDid() + const returnUrl = makeAppUrl() + const fragment = auth.requestAppUcanHashFragment(did, scope, returnUrl) + const url = `${env.AUTH_LOBBY}#${fragment}` + + if (isWeb) { + // @ts-ignore window is defined -prf + window.location.href = url + return false + } + + if (await InAppBrowser.isAvailable()) { + // use in-app browser + const res = await InAppBrowser.openAuth(url, returnUrl, { + // iOS Properties + ephemeralWebSession: false, + // Android Properties + showTitle: false, + enableUrlBarHiding: true, + enableDefaultShare: false, + }) + if (res.type === 'success' && res.url) { + const fragment = extractHashFragment(res.url) + if (fragment) { + const ucan = await parseUrlForUcan(fragment) + if (ucan) { + await authStore.addUcan(ucan) + return true + } + } + } else { + console.log('Not completed', res) + return false + } + } else { + // use system browser + Linking.openURL(url) + } + return true +} diff --git a/src/platform/auth-flow.ts b/src/platform/auth-flow.ts new file mode 100644 index 00000000..b96fc58e --- /dev/null +++ b/src/platform/auth-flow.ts @@ -0,0 +1,19 @@ +import * as auth from '@adxp/auth' +import * as ucan from 'ucans' +import {makeAppUrl} from '../platform/urls' +import {ReactNativeStore} from '../state/auth' +import * as env from '../env' + +export async function requestAppUcan( + authStore: ReactNativeStore, + scope: ucan.Capability, +) { + const did = await authStore.getDid() + const returnUrl = makeAppUrl() + const fragment = auth.requestAppUcanHashFragment(did, scope, returnUrl) + const url = `${env.AUTH_LOBBY}#${fragment}` + + // @ts-ignore window is defined -prf + window.location.href = url + return false +} diff --git a/src/platform/polyfills.native.ts b/src/platform/polyfills.native.ts index 0c9f3058..dd1ecf7e 100644 --- a/src/platform/polyfills.native.ts +++ b/src/platform/polyfills.native.ts @@ -1,12 +1,11 @@ -// import {generateSecureRandom} from 'react-native-securerandom' import {NativeModules} from 'react-native' const {AppSecureRandomModule} = NativeModules import {toByteArray} from 'base64-js' +// @ts-ignore we dont have types for this -prf import crypto from 'msrcrypto' import '@zxing/text-encoding' // TextEncoder / TextDecoder async function generateSecureRandom(bytes: number) { - console.log('a') return toByteArray( await AppSecureRandomModule.generateSecureRandomAsBase64(bytes), ) diff --git a/src/platform/polyfills.web.ts b/src/platform/polyfills.ts similarity index 58% rename from src/platform/polyfills.web.ts rename to src/platform/polyfills.ts index c6035e5e..ac31e55e 100644 --- a/src/platform/polyfills.web.ts +++ b/src/platform/polyfills.ts @@ -1 +1,2 @@ // do nothing +export {} diff --git a/src/state/auth.ts b/src/state/auth.ts index ee0fe981..a8483b92 100644 --- a/src/state/auth.ts +++ b/src/state/auth.ts @@ -1,16 +1,8 @@ -import {Linking} from 'react-native' import * as auth from '@adxp/auth' import * as ucan from 'ucans' -import {InAppBrowser} from 'react-native-inappbrowser-reborn' -import {isWeb} from '../platform/detection' -import { - getInitialURL, - extractHashFragment, - clearHash, - makeAppUrl, -} from '../platform/urls' +import {getInitialURL, extractHashFragment, clearHash} from '../platform/urls' +import * as authFlow from '../platform/auth-flow' import * as storage from './storage' -import * as env from '../env' const SCOPE = auth.writeCap( 'did:key:z6MkfRiFMLzCxxnw6VMrHK8pPFt4QAHS3jX3XM87y9rta6kP', @@ -48,45 +40,7 @@ export async function initialLoadUcanCheck(authStore: ReactNativeStore) { } export async function requestAppUcan(authStore: ReactNativeStore) { - const did = await authStore.getDid() - const returnUrl = makeAppUrl() - const fragment = auth.requestAppUcanHashFragment(did, SCOPE, returnUrl) - const url = `${env.AUTH_LOBBY}#${fragment}` - - if (isWeb) { - // @ts-ignore window is defined -prf - window.location.href = url - return false - } - - if (await InAppBrowser.isAvailable()) { - // use in-app browser - const res = await InAppBrowser.openAuth(url, returnUrl, { - // iOS Properties - ephemeralWebSession: false, - // Android Properties - showTitle: false, - enableUrlBarHiding: true, - enableDefaultShare: false, - }) - if (res.type === 'success' && res.url) { - const fragment = extractHashFragment(res.url) - if (fragment) { - const ucan = await parseUrlForUcan(fragment) - if (ucan) { - await authStore.addUcan(ucan) - return true - } - } - } else { - console.log('Not completed', res) - return false - } - } else { - // use system browser - Linking.openURL(url) - } - return true + return authFlow.requestAppUcan(authStore, SCOPE) } export class ReactNativeStore extends auth.AuthStore { diff --git a/src/state/index.ts b/src/state/index.ts index 460815d1..6040f8f9 100644 --- a/src/state/index.ts +++ b/src/state/index.ts @@ -7,7 +7,6 @@ import { import {Environment} from './env' import * as storage from './storage' import * as auth from './auth' -import * as urls from '../platform/urls' const ROOT_STATE_STORAGE_KEY = 'root'