Skip to content

Commit

Permalink
docs(rn): make OTP the auth example
Browse files Browse the repository at this point in the history
  • Loading branch information
moldy530 committed Jan 28, 2025
1 parent 84a7ee5 commit 3013a26
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 17 deletions.
38 changes: 27 additions & 11 deletions site/pages/react-native/signer/setup-guide.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -32,16 +32,28 @@ Setting up the React Native Signer is similar to setting up the [React Signer](/

<br />
<u>**Email auth**</u>

To use email auth, toggle on email.

- To use email auth in your React Native app, your app needs to be set up to handle deep links that can be served via http or https.
- In production scenarios, you would want to set up [Android App Links](https://developer.android.com/training/app-links) on android or [Universal Links](https://developer.apple.com/documentation/xcode/supporting-universal-links-in-your-app) on iOS to gracefully handle deep links.
- For testing, simply setting up a simple server on [http://localhost:3000](http://localhost:3000/) or any other server you control which redirects an incoming request to your app scheme is the easiest way to get started.
a sample implementation of this can be found the [`example`](https://github.com/alchemyplatform/aa-sdk/blob/main/examples/react-native-expo-example/redirect-server/index.ts) folder of the `React Native Signer` repo.
- The http or https url you set up in the previous step would need to be added as the **Redirect URL** in the Account Kit Dashboard.
- This is the url that the user will be redirected to if you use the magic link email flow to log in your users.
- Optionally stylize ✨ the email with your brand color and logo!
If you're using OTP Auth, toggle on email fill in the required fields. For
**Redirect URL**, you can just pass in the URL of your website (it doesn't
get used during OTP flows).
<br />
If you're using Magic Link Auth:
<br />- To use email auth in your React Native app, your app needs to be set
up to handle deep links that can be served via http or https. - In
production scenarios, you would want to set up [Android App
Links](https://developer.android.com/training/app-links) on android or
[Universal
Links](https://developer.apple.com/documentation/xcode/supporting-universal-links-in-your-app)
on iOS to gracefully handle deep links. - For testing, simply setting up a
simple server on [http://localhost:3000](http://localhost:3000/) or any
other server you control which redirects an incoming request to your app
scheme is the easiest way to get started. a sample implementation of this
can be found the
[`example`](https://github.com/alchemyplatform/aa-sdk/blob/main/examples/react-native-expo-example/redirect-server/index.ts)
folder of the `React Native Signer` repo. - The http or https url you set up
in the previous step would need to be added as the **Redirect URL** in the
Account Kit Dashboard. - This is the url that the user will be redirected to
if you use the magic link email flow to log in your users. - Optionally
stylize ✨ the email with your brand color and logo!

<br />
<img
Expand Down Expand Up @@ -76,7 +88,11 @@ Setting up the React Native Signer is similar to setting up the [React Signer](/

## Ensure Deep Linking is properly configured

If you plan on using email or social auth, you'll need to ensure deep linking is properly configured in your app.
:::tip
If you're using OTP Auth, skip this step! We recommend starting with OTP flows as they are easier to set up.
:::

If you plan on using email maigc link auth or social auth, you'll need to ensure deep linking is properly configured in your app.

Depending on if your app uses `expo-router`, `react-navigation`, or some other navigation library, you'll need to configure deep linking accordingly.

Expand Down
4 changes: 2 additions & 2 deletions site/shared/react-native/prerequisites.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@
- iOS Minumum Deployment Target: 17.0
- The Signer package requires you to be on React Native's new architecture. For information on how to enable it in your Expo project, check their [documentation](https://docs.expo.dev/guides/new-architecture/).
- The Signer package is incompatible with Expo Go and as a result, you'd
need to use a Development Build. Check the [Expo Development Builds documentation](https://docs.expo.dev/guides/local-app-development/)
for more information.
need to use a Development Build. Check the [Expo Development Builds documentation](https://docs.expo.dev/guides/local-app-development/)
for more information.
8 changes: 4 additions & 4 deletions site/sidebar/react-native.ts

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 3013a26

Please sign in to comment.