Skip to content

feat: architectural refactor for multi-platform extensibility #1233

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 60 commits into from
Jul 21, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
60 commits
Select commit Hold shift + click to select a range
4a73548
feat: Support Turbo Modules (#1101)
guabu Apr 2, 2025
d64f194
Merge branch 'master' of https://github.com/auth0/react-native-auth0 …
subhankarmaiti Apr 17, 2025
c006eb8
Release v5.0.0 beta.0 (#1144)
subhankarmaiti Apr 17, 2025
aa723c6
Merge branch 'master' of https://github.com/auth0/react-native-auth0 …
subhankarmaiti Apr 30, 2025
84cec85
workflow updated to yarn (#1167)
subhankarmaiti May 9, 2025
46237bb
Upgrade SDK to React Native 0.79.2 and Add Support for Expo SDK 53 (#…
subhankarmaiti May 13, 2025
0d226bc
docs: Update setup guide for ios and platform compatibility in README…
subhankarmaiti May 13, 2025
53cc514
Merge master into beta to sync latest release changes (#1171)
subhankarmaiti May 13, 2025
018b3db
Release v5.0.0-beta.1 (#1173)
subhankarmaiti May 13, 2025
0d3a24b
updated workflow (#1174)
subhankarmaiti May 13, 2025
fa59fd8
Release v5.0.0-beta.1 (#1175)
subhankarmaiti May 13, 2025
c5d608a
fix: Add npm token verification step and set registry URL in workflow…
subhankarmaiti May 14, 2025
e9dc10e
Release v5.0.0-beta.1 (#1179)
subhankarmaiti May 14, 2025
f06fdd1
Fix: getBundleIdentifier Implementation (#1194)
subhankarmaiti May 27, 2025
d62d1f4
Fixed iOS Build Issues with Static Frameworks (#1195)
subhankarmaiti May 29, 2025
73eb8ef
Ensure Swift 5 compilation for SDK pods to improve Swift 6 compatibil…
subhankarmaiti Jun 9, 2025
6845ebf
Enforce Yarn-Only Policy & Auto-Cleanup Forbidden Lock Files (#1202)
subhankarmaiti Jun 11, 2025
d2463c9
Temporarily Remove preinstall Script (#1212)
subhankarmaiti Jun 13, 2025
a8e21b3
Fix: Update typedoc.json to replace additional Ruby code block syntax…
subhankarmaiti Jun 13, 2025
189c238
Release v5.0.0-beta.2 (#1214)
subhankarmaiti Jun 13, 2025
e838b47
change commonjs to ESM module build
subhankarmaiti Jun 1, 2025
460da28
Fix: Turbo Module & New Architecture Support! (#1204)
subhankarmaiti Jun 17, 2025
b271e64
Merge branch 'SDK-5762-rn-web-support' of https://github.com/auth0/re…
subhankarmaiti Jun 17, 2025
bc18281
React Native Webpack initial setup
subhankarmaiti Jun 21, 2025
9a42f14
Update dependencies and fix navigation stack import
subhankarmaiti Jun 21, 2025
8c2f041
Release v5.0.0-beta.3 (#1219)
subhankarmaiti Jun 23, 2025
b889997
Merge branch 'SDK-5762-rn-web-support' of https://github.com/auth0/re…
subhankarmaiti Jun 23, 2025
943b824
Merge branch 'SDK-6110-initial-setup' of https://github.com/auth0/rea…
subhankarmaiti Jun 23, 2025
80948bf
feat: add React Native Web support for Auth0 with class-based methods…
subhankarmaiti Jun 29, 2025
9463a99
Merge branch 'master' of https://github.com/auth0/react-native-auth0 …
subhankarmaiti Jun 30, 2025
036a32d
Merge branch 'SDK-5762-rn-web-support' of https://github.com/auth0/re…
subhankarmaiti Jun 30, 2025
7b08b25
Merge branch 'SDK-6110-initial-setup' of https://github.com/auth0/rea…
subhankarmaiti Jun 30, 2025
6d818ce
chore: update build scripts and add pre-push hook
subhankarmaiti Jul 1, 2025
947a9d0
feat(core): Introduce foundational types and interfaces for new archi…
subhankarmaiti Jul 10, 2025
a8f10b4
feat(core): Implement core data models and utility functions
subhankarmaiti Jul 10, 2025
4ea3e5f
feat(core): Implement platform-agnostic service orchestrators
subhankarmaiti Jul 10, 2025
9bfad16
feat(factory): Implement platform detector and client factory
subhankarmaiti Jul 10, 2025
8e51632
feat(platform): Implement native platform bridge and adapters
subhankarmaiti Jul 10, 2025
33f9782
feat(platform): Implement web platform adapters using auth0-spa-js
subhankarmaiti Jul 10, 2025
a6f5ecc
feat(platform): Implement web platform adapters using auth0-spa-js
subhankarmaiti Jul 10, 2025
04ebf03
test: Implement comprehensive test suite for new architecture
subhankarmaiti Jul 10, 2025
1e30423
refactor: remove unused utility functions and classes
subhankarmaiti Jul 10, 2025
9e96d3b
Add components and screens for Auth0 integration
subhankarmaiti Jul 10, 2025
9c82314
added back expo support and commonJS build
subhankarmaiti Jul 12, 2025
2f2007f
feat: Separate Auth0ClientFactory for native and web platforms, remov…
subhankarmaiti Jul 12, 2025
cfc2826
feat: Add telemetry version replacement script and update telemetry f…
subhankarmaiti Jul 12, 2025
e5200e2
refactor: Update Auth0Provider and related classes to improve client …
subhankarmaiti Jul 13, 2025
1f88157
feat: Add usage examples for React Native Auth0 on Web and update mig…
subhankarmaiti Jul 13, 2025
68da0e4
feat: Implement Auth0 authentication flow with user management featur…
subhankarmaiti Jul 13, 2025
659a260
refactor: Enhance documentation and structure in TypeScript interface…
subhankarmaiti Jul 13, 2025
9457fe6
refactor: Update WebAuth0Client, WebCredentialsManager, and WebWebAut…
subhankarmaiti Jul 14, 2025
3997d41
refactor: Update WebAuth0Client, WebCredentialsManager, and WebWebAut…
subhankarmaiti Jul 14, 2025
9e9603d
Merge branch 'refactor_v5' of https://github.com/auth0/react-native-a…
subhankarmaiti Jul 14, 2025
f07a79f
Merge branch 'master' of https://github.com/auth0/react-native-auth0 …
subhankarmaiti Jul 19, 2025
7d9a929
refactor: Enhance web authentication flow with hooks and class-based …
subhankarmaiti Jul 19, 2025
806f6af
Refactor authentication handling and improve error management
subhankarmaiti Jul 20, 2025
18e406a
fix: Improve snakeToCamel function to handle empty strings and ensure…
subhankarmaiti Jul 20, 2025
ed9ddc1
refactor: Remove unused CredentialsOrchestrator and its tests from th…
subhankarmaiti Jul 20, 2025
e1c7c71
refactor: Update getCredentials method to include parameters for impr…
subhankarmaiti Jul 20, 2025
f9c9b67
feat: Introduce CredentialsManagerError for improved error handling i…
subhankarmaiti Jul 20, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .husky/pre-push
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
npm run prepush
2 changes: 1 addition & 1 deletion .shiprc
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"files": {
"src/networking/telemetry.ts": [],
"src/core/utils/telemetry.ts": [],
".version": []
},
"postbump": "node scripts/jsdocs.js"
Expand Down
171 changes: 171 additions & 0 deletions EXAMPLES-WEB.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
# React Native Auth0 for Web: Examples

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.

## 1. The Hooks-Based Approach (Recommended)

This is the simplest and recommended way to integrate Auth0. The `Auth0Provider` handles all the complexity of the redirect flow automatically.

### Step 1: Wrap Your App in the `Auth0Provider`

In your main application entry point (e.g., `App.tsx`), wrap your application with the provider.

```jsx
// src/App.tsx
import React from 'react';
import { Auth0Provider } from 'react-native-auth0';
import config from './auth0-configuration';
import MainComponent from './MainComponent'; // Your main app UI

const App = () => (
<Auth0Provider domain={config.domain} clientId={config.clientId}>
<MainComponent />
</Auth0Provider>
);

export default App;
```

### Step 2: Use the `useAuth0` Hook in Your Components

The `Auth0Provider` will automatically handle the redirect callback when your app loads. The `useAuth0` hook will then provide the authentication state.

```jsx
// src/MainComponent.tsx
import React from 'react';
import { useAuth0 } from 'react-native-auth0';
import { View, Button, Text, ActivityIndicator } from 'react-native';

const MainComponent = () => {
const { authorize, clearSession, user, isLoading, error } = useAuth0();

const onLogin = async () => {
try {
// This triggers a redirect to the Auth0 Universal Login page.
await authorize({ scope: 'openid profile email' });
} catch (e) {
console.error('Login error:', e);
}
};

const onLogout = async () => {
try {
await clearSession();
} catch (e) {
console.error('Logout error:', e);
}
};

if (isLoading) {
return (
<View>
<ActivityIndicator size="large" />
</View>
);
}

return (
<View>
{error && <Text>Error: {error.message}</Text>}
{user ? (
<>
<Text>Welcome, {user.name}!</Text>
<Button title="Log Out" onPress={onLogout} />
</>
) : (
<Button title="Log In" onPress={onLogin} />
)}
</View>
);
};
```

## 2. The Class-Based / Manual Approach

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.

### Step 1: Instantiate the `Auth0` Client

Create a singleton instance of the client.

```javascript
// src/api/auth0.ts
import Auth0 from 'react-native-auth0';
import config from '../auth0-configuration';

const auth0 = new Auth0({
domain: config.domain,
clientId: config.clientId,
});

export default auth0;
```

### Step 2: Handle the Redirect Callback

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.

```jsx
// src/App.tsx
import React, { useEffect, useState } from 'react';
import { View, Button, Text } from 'react-native';
import auth0 from './api/auth0'; // Import your singleton
import type { User } from 'react-native-auth0';

const App = () => {
const [user, setUser] = useState<User | null>(null);
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
const checkSession = async () => {
// Check if the URL contains redirect parameters
if (window.location.search.includes('code=') && window.location.search.includes('state=')) {
try {
// Process the redirect
await auth0.webAuth.handleRedirectCallback();
} catch (e) {
console.error(e);
}
// Clean the URL
window.history.replaceState({}, document.title, '/');
}

// After handling a potential redirect, check for an existing session
try {
const credentials = await auth0.credentialsManager.getCredentials();
// Assuming you have a way to decode the idToken to get the user
// const decodedUser = jwt_decode(credentials.idToken);
// setUser(decodedUser);
} catch (e) {
// No credentials, user is not logged in
setUser(null);
}
setIsLoading(false);
};

checkSession();
}, []);

const onLogin = async () => {
await auth0.webAuth.authorize({ scope: 'openid profile email' });
};

const onLogout = async () => {
await auth0.webAuth.clearSession();
};

// ... Render UI based on isLoading and user state ...
};
```

## Unsupported Web Features

For security reasons, the web platform **does not support** direct authentication grants. The following methods from the `auth` provider will throw a `NotImplemented` error:

- `auth.passwordRealm()`
- `auth.loginWithOTP()`
- `auth.loginWithSMS()`
- `auth.loginWithEmail()`
- `auth.refreshToken()`

All these flows should be configured in your [Auth0 Universal Login](https://auth0.com/docs/universal-login) page and initiated via the `authorize()` method.
176 changes: 133 additions & 43 deletions MIGRATION_GUIDE.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,69 +2,159 @@

## Upgrading from v4 -> v5

### Compatibility Requirements
Version 5.0 of `react-native-auth0` is a significant update featuring a complete architectural overhaul. This new foundation improves performance, maintainability, and provides a more consistent API across all platforms.

- **React**: v5 requires React 19 or higher
- **React Native**: v5 requires React Native 0.78.0 or higher
- **Expo**: v5 requires Expo 53 or higher
Upgrading from v4.x requires addressing several breaking changes. Please follow this guide carefully.

### Breaking Changes
## 1. Compatibility & Installation

- **Platform Compatibility**: The minimum iOS deployment target is now 14.0. Update your iOS/Podfile with:
Before updating the library, ensure your project meets the new minimum requirements.

```
platform :ios, '14.0'
```
### Environment Requirements

- **Android Requirements**: Android SDK API level 35 or higher is now required
- **React:** `19.0.0` or higher
- **React Native:** `0.78.0` or higher
- **Expo:** SDK `53` or higher
- **iOS:** Deployment Target `14.0`
- **Android:** Target SDK `35` or higher

### Migration Steps
### Updating Your Project

#### For Regular React Native Projects
#### For Standard React Native Projects:

1. First, ensure your project uses React 19 and React Native 0.78.0 or higher:
1. **Upgrade React Native:**
```bash
npm install react@^19.0.0 react-native@^0.78.0
```
2. **Update this Library:**
```bash
npm install react-native-auth0@beta
```
3. **Update iOS Target:** In your `ios/Podfile`, set the platform version:
```ruby
platform :ios, '14.0'
```
4. **Install Pods:**
```bash
cd ios && pod install && cd ..
```

```bash
npm install react@^19.0.0
npm install react-native@^0.78.0
```
#### For Expo Projects:

2. Update the react-native-auth0 package:
1. **Upgrade Expo SDK:**
```bash
npx expo upgrade
```
2. **Update this Library:**
```bash
npm install react-native-auth0@beta
```
3. **Rebuild Native Code:**
```bash
npx expo prebuild --clean
```
> **Warning:** This will overwrite any manual changes in your `ios` and `android` directories.

```bash
npm install react-native-auth0@beta
```
## 2. Breaking API Changes

3. Update your iOS minimum deployment target in your Podfile:
The following API changes require code modifications in your application.

```ruby
platform :ios, '14.0'
```
### Change #1: User Profile Properties are now `camelCase`

4. Install the updated pods:
```bash
cd ios && pod install && cd ..
```
To align with modern JavaScript standards, all properties on the `user` object are now `camelCase`.

#### For Expo Projects
**✅ Action Required:** Update all references to `user` properties.

1. Update to Expo 53 or higher:
| Before (snake_case) | After (camelCase) |
| :-------------------- | :------------------- |
| `user.given_name` | `user.givenName` |
| `user.family_name` | `user.familyName` |
| `user.email_verified` | `user.emailVerified` |
| `user.phone_number` | `user.phoneNumber` |
| ...and so on. | |

```bash
npx expo upgrade
```
### Change #2: Credentials Object uses `expiresAt`

2. Update the react-native-auth0 package:
The `Credentials` object no longer includes `expiresIn` (a duration). It now provides `expiresAt`, an absolute **UNIX timestamp** (in seconds), making expiration checks simpler and less error-prone.

```bash
npm install react-native-auth0@beta
```
**✅ Action Required:** Replace all logic using `expiresIn` with `expiresAt`.

3. Rebuild your app:
```bash
npx expo prebuild --clean
```
Note: This will reset any manual changes to your native code.
**Before:**

```javascript
const expiresAt = Date.now() / 1000 + credentials.expiresIn;
if (isExpired(expiresAt)) {
// ...
}
```

**After:**

```javascript
// Direct comparison is now possible
if (credentials.expiresAt < Date.now() / 1000) {
// ...
}

// Or, use the new helper method (if you have an instance of the Credentials model):
if (credentials.isExpired()) {
// ...
}
```

### Change #3: Standardized `AuthError` Object

All errors thrown by the library are now instances of a single, consistent `AuthError` class. This replaces multiple error types like `CredentialsManagerError`.

**✅ Action Required:** Update your `try...catch` blocks to handle the new unified error object.

**Before:**

```javascript
catch (e) {
// Inconsistent properties like e.error, e.error_description
console.error(e.message);
}
```

**After:**

```javascript
import { AuthError } from 'react-native-auth0';

catch (e) {
if (e instanceof AuthError) {
// Consistent properties are now available
console.error(e.name, e.message); // e.g., 'invalid_grant', 'The refresh token is invalid.'
}
}
```

### Change #4: Updated `authorize` and `clearSession` Signatures

For improved clarity, SDK-specific options (like `ephemeralSession`) have been moved into a separate, second `options` object.

**✅ Action Required:** Restructure calls to `authorize` and `clearSession`.

**Before:**

```javascript
// Mixed parameters and options
await authorize({
scope: 'openid profile',
ephemeralSession: true,
});
```

**After:**

```javascript
// Parameters and options are now separate arguments
await authorize(
{ scope: 'openid profile' }, // 1. OIDC / Auth0 Parameters
{ ephemeralSession: true } // 2. SDK-Specific Options
);
```

## Upgrading from v3 -> v4

Expand Down
Loading