https://github.com/streamplace/atproto-oauth-client-react-native
@aquareum/atproto-oauth-client-react-native
https://github.com/streamplace/atproto-oauth-client-react-native
Last synced: about 1 year ago
JSON representation
@aquareum/atproto-oauth-client-react-native
- Host: GitHub
- URL: https://github.com/streamplace/atproto-oauth-client-react-native
- Owner: streamplace
- License: mit
- Created: 2024-11-29T23:47:25.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-03T22:00:26.000Z (over 1 year ago)
- Last Synced: 2025-06-12T23:03:25.475Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@aquareum/atproto-oauth-client-react-native
- Size: 88.9 KB
- Stars: 20
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# atproto OAuth Client for React Native
This package implements an atproto OAuth client usable on the React Native
platform. It uses [react-native-quick-crypto] for cryptographic operations and
[expo-sqlite] for persistence. Its usage is very similar to the atproto OAuth
client for the browser, so refer to that [README] and [example] for general
usage. Some differences are noted below.
## expo-sqlite
This library uses [expo-sqlite] to store the OAuth state and session data in a
SQLite database. The schema is automatically created when the client is
instantiated.
Because this database is storing sensitive cryptographic keys, it is highly
reccomended to use the optional SQLCipher extension. This can be accomplished in
your app.json file:
```json
{
"expo": {
"plugins": [
[
"expo-sqlite",
{
"useSQLCipher": true
}
]
]
}
}
```
## Login and session restore flow
The basic login flow will involve popping up a web browser and allowing users to
authenticate with their selected PDS. This can be accomplished with the
`expo-web-browser` library:
```tsx
import { openAuthSessionAsync } from 'expo-web-browser'
// inside your login onPress, perhaps:
const loginUrl = await oauthClient.authorize(pds)
const res = await openAuthSessionAsync(loginUrl)
if (res.type === 'success') {
const params = new URLSearchParams(url.split('?')[1])
const { session, state } = await oauthClient.callback(params)
console.log(`logged in as ${session.sub}`)
}
```
## Development on localhost
The atproto OAuth specification has a special case for development on localhost,
but it is required to use a redirectUrl that returns to `127.0.0.1` or `[::1]`.
This prevents the localhost OAuth flow from returning you directly to your app.
As a workaround, you can host a static HTML server on 127.0.0.1 that recieves
the incoming OAuth callback and then redirects to your app. (If you have a web
version of your React Native app, you can just use that.) Such a redirect page
might look something like this:
```tsx
import { useEffect } from 'react'
import { View, Text } from 'react-native'
export default function AppReturnScreen({ route }) {
useEffect(() => {
document.location.href = `com.example.app:/app-return${document.location.search}`
}, [])
return (
Redirecting you back to the app...
)
}
```
This flow will work on the iOS simulator and on Android devices provided you've
forwarded the port with `adb reverse`. For testing on iOS hardware, you'll
instead need to set up TLS.
[react-native-quick-crypto]:
https://github.com/margelo/react-native-quick-crypto
[expo-sqlite]: https://docs.expo.dev/versions/latest/sdk/sqlite/
[README]:
https://github.com/bluesky-social/atproto/tree/main/packages/oauth/oauth-client-browser
[example]:
https://github.com/bluesky-social/atproto/tree/main/packages/oauth/oauth-client-browser-example