Skip to content

Commit 1162d69

Browse files
yashovardhanyashovardhan
committed
Update README.md
1 parent fb73d89 commit 1162d69

File tree

1 file changed

+154
-19
lines changed

1 file changed

+154
-19
lines changed

‎README.md‎

Lines changed: 154 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,170 @@
1-
# React Native SDK for Web3Auth
1+
# Web3Auth React Native SDK
22

3-
## Installation
3+
Web3Auth is where passwordless auth meets non-custodial key infrastructure for Web3 apps and wallets. By aggregating OAuth (Google, Twitter, Discord) logins, different wallets and innovative Multi Party Computation (MPC) - Web3Auth provides a seamless login experience to every user on your application.
4+
5+
## 📖 Documentation
6+
7+
Checkout the official [Web3Auth Documentation](https://web3auth.io/docs) and [SDK Reference](https://web3auth.io/docs/sdk/react-native/) to get started!
8+
9+
## 💡 Features
10+
- Plug and Play, OAuth based Web3 Authentication Service
11+
- Fully decentralized, non-custodial key infrastructure
12+
- End to end Whitelabelable solution
13+
- Threshold Cryptography based Key Reconstruction
14+
- Multi Factor Authentication Setup & Recovery (Includes password, backup phrase, device factor editing/deletion etc)
15+
- Support for WebAuthn & Passwordless Login
16+
- Support for connecting to multiple wallets
17+
- DApp Active Session Management
18+
19+
...and a lot more
20+
21+
## ⏪ Requirements
22+
23+
- For iOS, only iOS 12+ supported since we requires ASWebAuthenticationSession.
24+
25+
- For Android, Custom Tab support is required.
26+
27+
## Selecting your Workflow
28+
29+
In React Native, you have the choice to use one of the following workflows:
30+
31+
- **Bare Workflow**: Your React Native app is entirely built on your own machine. You can customize your app with Swift/Kotlin native modules.
32+
- **Expo Managed Workflow**: Your React Native Expo app is built on your Expo's cloud, so you don't have control over the native modules used in the app.
33+
34+
## ⚡ Installation
435

536
```sh
637
npm install @web3auth/react-native-sdk
738
```
839

40+
## 🌟 Configuration
41+
42+
### Configure your Web3Auth project
43+
44+
Hop on to the [Web3Auth Dashboard](https://dashboard.web3auth.io/) and create a new project. Use the Client ID of the project to start your integration.
45+
46+
![Web3Auth Dashboard](https://web3auth.io/docs/assets/images/project_plug_n_play-89c39ec42ad993107bb2485b1ce64b89.png)
47+
48+
- Add `{YOUR_APP_PACKAGE_NAME}://auth` to **Whitelist URLs**.
49+
50+
- Copy the Project ID for usage later.
51+
52+
### Expo Managed Workflow
53+
54+
When using our SDK with a Expo-based React Native app (aka managed workflow, you have to install the `expo-web-browser` package as a `WebBrowser` implementation.)
55+
56+
```sh
57+
expo install expo-web-browser
58+
```
59+
960
To allow the SDK to work with exported Expo Android apps, you need to place a designated scheme into `app.json`, like below:
1061

1162
```js
12-
"scheme": "web3authreactnativesdkexample",
63+
{
64+
"expo": {
65+
"scheme": "web3authreactnativesdkexample"
66+
}
67+
}
1368
```
1469

15-
## Usage
70+
### Bare workflow Configuration
1671

17-
Please see [App.tsx](./example/App.tsx) for detailed example.
72+
When using our SDK with a bare workflow React Native app, you have to install a `WebBrowser` implementation made by us.
1873

19-
```js
20-
import * as WebBrowser from "@toruslabs/react-native-web-browser";
21-
// or import * as WebBrowser from "expo-web-browser"; (for expo)
22-
23-
const web3auth = new Web3Auth(WebBrowser, {
24-
clientId: "BC5bANkU4-fil7C5s1uKzRfF0VGqbuaxDQiLnQ8WgF7SEA32lGegAhu7dk4dZf3Rk397blIvfWytXwsRvs9dOaQ",
25-
network: Network.TESTNET,
26-
});
27-
const state = await web3auth.login({
28-
loginProvider: LoginProvider.GOOGLE,
29-
redirectUrl: resolvedRedirectUrl,
30-
});
74+
```bash npm2yarn
75+
npm install --save @toruslabs/react-native-web-browser
3176
```
3277

33-
## License
78+
#### Android
79+
80+
- Perform the native [Android integration steps](https://web3auth.io/docs/sdk/android/).
81+
- For Android, the `redirectUrl` parameter is configurable, and has to be added into the `AndroidManifest.xml`.
82+
83+
#### iOS
84+
85+
- Perform the native [iOS integration steps](https://web3auth.io/docs/sdk/ios/).
86+
87+
- You may add the `redirectUrl` to your iOS `Info.plist`, but it is not required.
88+
89+
#### Register the URL scheme you intended to use for redirection
90+
91+
- Android `AndoidManifest.xml` (required)
92+
- iOS `Info.plist` (optional)
93+
94+
95+
## 💥 Initialization & Usage
96+
97+
In your sign-in activity', create an `Web3Auth` instance with your Web3Auth project's configurations and
98+
configure it like this:
99+
100+
```kotlin
101+
class MainActivity : AppCompatActivity() {
102+
// ...
103+
private lateinit var web3Auth: Web3Auth
104+
105+
override fun onCreate(savedInstanceState: Bundle?) {
106+
super.onCreate(savedInstanceState)
107+
setContentView(R.layout.activity_main)
108+
109+
web3Auth = Web3Auth(
110+
Web3AuthOptions(context = this,
111+
clientId = getString(R.string.web3auth_project_id),
112+
network = Web3Auth.Network.MAINNET,
113+
redirectUrl = Uri.parse("{YOUR_APP_PACKAGE_NAME}://auth"),
114+
whiteLabel = WhiteLabelData( // Optional param
115+
"Web3Auth Sample App", null, null, "en", true,
116+
hashMapOf(
117+
"primary" to "#123456"
118+
)
119+
)
120+
)
121+
)
122+
123+
// Handle user signing in when app is not alive
124+
web3Auth.setResultUrl(intent?.data)
125+
126+
// ...
127+
}
128+
129+
override fun onNewIntent(intent: Intent?) {
130+
super.onNewIntent(intent)
131+
132+
// Handle user signing in when app is active
133+
web3Auth.setResultUrl(intent?.data)
134+
135+
// ...
136+
}
137+
138+
private fun onClickLogin() {
139+
val selectedLoginProvider = Provider.GOOGLE // Can be Google, Facebook, Twitch etc
140+
val loginCompletableFuture: CompletableFuture<Web3AuthResponse> = web3Auth.login(LoginParams(selectedLoginProvider))
141+
142+
loginCompletableFuture.whenComplete { loginResponse, error ->
143+
if (error == null) {
144+
// render logged in UI
145+
} else {
146+
// render login error UI
147+
}
148+
149+
}
150+
}
151+
152+
//...
153+
}
154+
```
155+
156+
## 🩹 Examples
157+
158+
Checkout the examples for your preferred blockchain and platform in our [examples repository](https://github.com/Web3Auth/examples/)
159+
160+
## 🌐 Demo
161+
162+
Checkout the [Web3Auth Demo](https://demo-app.web3auth.io/) to see how Web3Auth can be used in an application.
163+
164+
Further checkout the [example folder](https://github.com/Web3Auth/web3auth-react-native-sdk/tree/master/example) within this repository, which contains a sample app.
165+
166+
## 💬 Troubleshooting and Discussions
34167

35-
MIT
168+
- Have a look at our [GitHub Discussions](https://github.com/Web3Auth/Web3Auth/discussions?discussions_q=sort%3Atop) to see if anyone has any questions or issues you might be having.
169+
- Checkout our [Troubleshooting Documentation Page](https://web3auth.io/docs/troubleshooting) to know the common issues and solutions
170+
- Join our [Discord](https://discord.gg/web3auth) to join our community and get private integration support or help with your integration.

0 commit comments

Comments
 (0)