You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: EXAMPLES-WEB.md
+99-63Lines changed: 99 additions & 63 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,119 +2,159 @@
2
2
3
3
This guide provides usage examples specifically for developers targeting **React Native Web**. The web platform uses the underlying `@auth0/auth0-spa-js` library, and its features are aligned with browser security best practices.
4
4
5
-
## Setup: The `Auth0Provider`
5
+
## 1. The Hooks-Based Approach (Recommended)
6
6
7
-
All web-based authentication starts with wrapping your application in the `Auth0Provider`. You can also pass `auth0-spa-js` specific options.
7
+
This is the simplest and recommended way to integrate Auth0. The `Auth0Provider` handles all the complexity of the redirect flow automatically.
8
+
9
+
### Step 1: Wrap Your App in the `Auth0Provider`
10
+
11
+
In your main application entry point (e.g., `App.tsx`), wrap your application with the provider.
### Step 2: Use the `useAuth0` Hook in Your Components
31
30
32
-
Use the `useAuth0` hook to access authentication methods and state. The primary flow involves redirecting the user to the Auth0 Universal Login page.
31
+
The `Auth0Provider` will automatically handle the redirect callback when your app loads. The `useAuth0` hook will then provide the authentication state.
If you are not using React Hooks or need more fine-grained control, you can instantiate the `Auth0` class and handle the redirect callback manually.
86
+
87
+
### Step 1: Instantiate the `Auth0` Client
88
+
89
+
Create a singleton instance of the client.
90
+
91
+
```javascript
92
+
// src/api/auth0.ts
93
+
importAuth0from'react-native-auth0';
94
+
importconfigfrom'../auth0-configuration';
95
+
96
+
constauth0=newAuth0({
97
+
domain:config.domain,
98
+
clientId:config.clientId,
99
+
});
100
+
101
+
exportdefaultauth0;
102
+
```
103
+
104
+
### Step 2: Handle the Redirect Callback
84
105
85
-
After a user is logged in, you can access their profile from the `user` object. To get a fresh access token for calling a protected API, use `getCredentials`.
106
+
In your application's root component or entry point, you need to add logic to process the result from Auth0 after the user is redirected back.
86
107
87
108
```jsx
88
-
import { useAuth0 } from'react-native-auth0';
109
+
// src/App.tsx
110
+
importReact, { useEffect, useState } from'react';
111
+
import { View, Button, Text } from'react-native';
112
+
importauth0from'./api/auth0'; // Import your singleton
113
+
importtype { User } from'react-native-auth0';
89
114
90
-
constProfile= () => {
91
-
const { user } =useAuth0();
92
-
return user ?<Text>Welcome, {user.name}!</Text>:null;
// ... Render UI based on isLoading and user state ...
118
158
};
119
159
```
120
160
@@ -129,7 +169,3 @@ For security reasons, the web platform **does not support** direct authenticatio
129
169
-`auth.refreshToken()`
130
170
131
171
All these flows should be configured in your [Auth0 Universal Login](https://auth0.com/docs/universal-login) page and initiated via the `authorize()` method.
Copy file name to clipboardExpand all lines: README.md
+1Lines changed: 1 addition & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -673,6 +673,7 @@ This library provides a unified API across Native (iOS/Android) and Web platform
673
673
|**Web Authentication**||| --- |
674
674
|`webAuth.authorize()`| ✅ | ✅ |**Primary login method.** Uses `ASWebAuthenticationSession`/`Custom Tabs` on Native and `loginWithRedirect` on Web. |
675
675
|`webAuth.clearSession()`| ✅ | ✅ |**Primary logout method.** Clears the session cookie on the server via a browser redirect. |
676
+
|`webAuth.handleRedirectCallback()`| ❌ | ✅ |**Web-only.** Manually processes the callback from Auth0. Handled automatically when using the `Auth0Provider` hook. |
676
677
|**Credential Management**||| --- |
677
678
|`credentialsManager.getCredentials()`| ✅ | ✅ | Retrieves stored tokens. On Native, it uses the secure Keychain/Keystore. On Web, it uses the `@auth0/auth0-spa-js` cache and `getTokenSilently`. |
678
679
|`credentialsManager.hasValidCredentials()`| ✅ | ✅ | Checks for a valid local session. |
0 commit comments