@auth-gate/react-native 0.9.3 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +203 -0
- package/icon.png +0 -0
- package/package.json +4 -3
package/README.md
ADDED
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="icon.png" alt="AuthGate" width="120" height="120" />
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
# @auth-gate/react-native
|
|
6
|
+
|
|
7
|
+
React Native / Expo SDK for [AuthGate](https://www.authgate.dev) — drop-in authentication with OAuth, email, SMS, and MFA for mobile apps.
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install @auth-gate/react-native
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
**Peer dependencies:** `react >= 18`, `react-native >= 0.72`, `expo-secure-store`, `expo-web-browser`, `expo-linking`
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npx expo install expo-secure-store expo-web-browser expo-linking
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Quick Start
|
|
22
|
+
|
|
23
|
+
### 1. Configure Deep Links
|
|
24
|
+
|
|
25
|
+
Add your custom URL scheme to `app.json`:
|
|
26
|
+
|
|
27
|
+
```json
|
|
28
|
+
{
|
|
29
|
+
"expo": {
|
|
30
|
+
"scheme": "myapp"
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
Register the callback URL `myapp://auth/callback` in the [Callbacks tab](/dashboard#registering-callback-urls) of your AuthGate dashboard.
|
|
36
|
+
|
|
37
|
+
### 2. Wrap Your App
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
import { AuthProvider } from "@auth-gate/react-native";
|
|
41
|
+
|
|
42
|
+
export default function App() {
|
|
43
|
+
return (
|
|
44
|
+
<AuthProvider
|
|
45
|
+
config={{
|
|
46
|
+
apiKey: "ag_...",
|
|
47
|
+
baseUrl: "https://www.authgate.dev",
|
|
48
|
+
scheme: "myapp",
|
|
49
|
+
}}
|
|
50
|
+
>
|
|
51
|
+
<Navigation />
|
|
52
|
+
</AuthProvider>
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### 3. Use the Hooks
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
import { useAuth } from "@auth-gate/react-native";
|
|
61
|
+
|
|
62
|
+
function ProfileScreen() {
|
|
63
|
+
const { user, loading, login, logout } = useAuth();
|
|
64
|
+
|
|
65
|
+
if (loading) return <ActivityIndicator />;
|
|
66
|
+
if (!user) return <LoginScreen />;
|
|
67
|
+
|
|
68
|
+
return (
|
|
69
|
+
<View>
|
|
70
|
+
<Text>Hello, {user.name}</Text>
|
|
71
|
+
<Button title="Sign out" onPress={logout} />
|
|
72
|
+
</View>
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
## Authentication Methods
|
|
78
|
+
|
|
79
|
+
### OAuth
|
|
80
|
+
|
|
81
|
+
Opens the system browser for the OAuth flow and returns via deep link.
|
|
82
|
+
|
|
83
|
+
```tsx
|
|
84
|
+
const { login } = useAuth();
|
|
85
|
+
|
|
86
|
+
// Google, GitHub, Discord, Azure (Microsoft), Apple
|
|
87
|
+
await login.withOAuth("google");
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
### Email
|
|
91
|
+
|
|
92
|
+
```tsx
|
|
93
|
+
const { login } = useAuth();
|
|
94
|
+
|
|
95
|
+
// Sign up
|
|
96
|
+
await login.signUp("alice@example.com", "password123", "Alice");
|
|
97
|
+
|
|
98
|
+
// Sign in
|
|
99
|
+
const result = await login.withEmail("alice@example.com", "password123");
|
|
100
|
+
|
|
101
|
+
if (result?.mfaRequired) {
|
|
102
|
+
// Handle MFA challenge
|
|
103
|
+
await login.verifyMfa(result.challenge, totpCode, "totp");
|
|
104
|
+
}
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
### Magic Link
|
|
108
|
+
|
|
109
|
+
```tsx
|
|
110
|
+
await login.withMagicLink("alice@example.com");
|
|
111
|
+
// User receives a link that opens the app via deep link
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
### SMS
|
|
115
|
+
|
|
116
|
+
```tsx
|
|
117
|
+
await login.withSms("+15551234567");
|
|
118
|
+
await login.verifySmsCode("+15551234567", "123456");
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
### MFA
|
|
122
|
+
|
|
123
|
+
```tsx
|
|
124
|
+
// After email sign-in returns mfaRequired
|
|
125
|
+
await login.verifyMfa(challenge, code, "totp"); // TOTP
|
|
126
|
+
await login.verifyMfa(challenge, code, "sms"); // SMS
|
|
127
|
+
await login.verifyMfa(challenge, code, "backup_code"); // Backup code
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
## Route Protection
|
|
131
|
+
|
|
132
|
+
```tsx
|
|
133
|
+
import { AuthGuard } from "@auth-gate/react-native";
|
|
134
|
+
|
|
135
|
+
function App() {
|
|
136
|
+
return (
|
|
137
|
+
<AuthProvider config={config}>
|
|
138
|
+
<AuthGuard
|
|
139
|
+
redirectTo="Login" // navigation route name
|
|
140
|
+
loadingFallback={<ActivityIndicator />}
|
|
141
|
+
>
|
|
142
|
+
<ProtectedScreens />
|
|
143
|
+
</AuthGuard>
|
|
144
|
+
</AuthProvider>
|
|
145
|
+
);
|
|
146
|
+
}
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
## Configuration
|
|
150
|
+
|
|
151
|
+
| Option | Type | Required | Description |
|
|
152
|
+
|--------|------|----------|-------------|
|
|
153
|
+
| `apiKey` | `string` | Yes | Your AuthGate API key |
|
|
154
|
+
| `baseUrl` | `string` | Yes | AuthGate instance URL |
|
|
155
|
+
| `scheme` | `string` | Yes | Deep link scheme (e.g. `"myapp"`) |
|
|
156
|
+
| `sessionMaxAge` | `number` | No | Session TTL in seconds (default: `604800` / 7 days) |
|
|
157
|
+
| `callbackPath` | `string` | No | Deep link callback path (default: `"auth/callback"`) |
|
|
158
|
+
|
|
159
|
+
## Hooks
|
|
160
|
+
|
|
161
|
+
### `useAuth()`
|
|
162
|
+
|
|
163
|
+
```ts
|
|
164
|
+
const { user, loading, login, logout, refresh } = useAuth();
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
| Property | Type | Description |
|
|
168
|
+
|----------|------|-------------|
|
|
169
|
+
| `user` | `AuthGateUser \| null` | Current user or null |
|
|
170
|
+
| `loading` | `boolean` | True while restoring session |
|
|
171
|
+
| `login` | `LoginMethods` | OAuth, email, SMS, magic link, and MFA methods |
|
|
172
|
+
| `logout` | `() => Promise<void>` | Sign out and clear secure storage |
|
|
173
|
+
| `refresh` | `() => Promise<void>` | Re-verify the stored token |
|
|
174
|
+
|
|
175
|
+
### `useSession()`
|
|
176
|
+
|
|
177
|
+
```ts
|
|
178
|
+
const user = useSession(); // AuthGateUser | null
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
## How It Works
|
|
182
|
+
|
|
183
|
+
- Tokens are stored in **Expo Secure Store** (Keychain on iOS, EncryptedSharedPreferences on Android)
|
|
184
|
+
- OAuth flows open the **system browser** via `expo-web-browser` and return via deep link
|
|
185
|
+
- Session is automatically restored on app launch by verifying the stored token
|
|
186
|
+
- Token refresh is scheduled automatically before expiry
|
|
187
|
+
|
|
188
|
+
## Types
|
|
189
|
+
|
|
190
|
+
```ts
|
|
191
|
+
import type {
|
|
192
|
+
AuthGateUser,
|
|
193
|
+
AuthGateNativeConfig,
|
|
194
|
+
AuthContextValue,
|
|
195
|
+
LoginMethods,
|
|
196
|
+
MfaChallengeResult,
|
|
197
|
+
OAuthProvider,
|
|
198
|
+
} from "@auth-gate/react-native";
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
## License
|
|
202
|
+
|
|
203
|
+
MIT
|
package/icon.png
ADDED
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@auth-gate/react-native",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.10.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -13,10 +13,11 @@
|
|
|
13
13
|
"module": "./dist/index.mjs",
|
|
14
14
|
"types": "./dist/index.d.ts",
|
|
15
15
|
"files": [
|
|
16
|
-
"dist"
|
|
16
|
+
"dist",
|
|
17
|
+
"icon.png"
|
|
17
18
|
],
|
|
18
19
|
"dependencies": {
|
|
19
|
-
"@auth-gate/core": "0.
|
|
20
|
+
"@auth-gate/core": "0.10.0"
|
|
20
21
|
},
|
|
21
22
|
"peerDependencies": {
|
|
22
23
|
"react": ">=18",
|