diff --git a/CHANGELOG.md b/CHANGELOG.md index 70ce3ec1..81ffc9f2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ **Added** - feat: add client prop to Auth0Provider [\#1041](https://github.com/auth0/auth0-react/pull/1041) ([yogeshchoudhary147](https://github.com/yogeshchoudhary147)) +- Native to Web SSO support (via [auth0-spa-js v2.18.0](https://github.com/auth0/auth0-spa-js/releases/tag/v2.18.0)) **Changed** - chore(deps): bump @auth0/auth0-spa-js from 2.17.1 to 2.18.0 [\#1059](https://github.com/auth0/auth0-react/pull/1059) ([yogeshchoudhary147](https://github.com/yogeshchoudhary147)) diff --git a/EXAMPLES.md b/EXAMPLES.md index 38fbdb90..b35fecfd 100644 --- a/EXAMPLES.md +++ b/EXAMPLES.md @@ -15,6 +15,8 @@ - [Access SDK Configuration](#access-sdk-configuration) - [Multi-Factor Authentication (MFA)](#multi-factor-authentication-mfa) - [Step-Up Authentication](#step-up-authentication) +- [Native to Web SSO](#native-to-web-sso) +- [Native to Web SSO](#native-to-web-sso) ## Use with a Class Component @@ -1125,3 +1127,60 @@ export default ProtectedResource; If the popup is blocked, cancelled, or times out, `getAccessTokenSilently` throws `PopupOpenError`, `PopupCancelledError`, or `PopupTimeoutError` respectively. These can be imported from `@auth0/auth0-react`. +## Native to Web SSO + +[Native to Web SSO](https://auth0.com/docs/authenticate/single-sign-on/native-to-web) enables seamless single sign-on when users transition from a native mobile app to a web app. The SDK can automatically extract a session transfer token from the URL and include it in the authorization request. + +The feature is **disabled by default**. To enable it, set `sessionTransferTokenQueryParamName` on `Auth0Provider` with the name of the query parameter your native app appends to the web app URL: + +```jsx +import { Auth0Provider } from '@auth0/auth0-react'; + +function App() { + return ( + + + + ); +} +``` + +When the web app is opened with `?session_transfer_token=xyz` in the URL, the SDK extracts the token, includes it in the `/authorize` request, and removes it from the URL via `window.history.replaceState()`. + +### Using a custom parameter name + +If your native app uses a different query parameter name, configure that name instead. The token is always forwarded to Auth0 as `session_transfer_token` regardless: + +```jsx + + + +``` + +### Manually providing the session transfer token + +You can pass the token directly via `authorizationParams`. This takes precedence over automatic URL detection: + +```jsx +const { loginWithRedirect } = useAuth0(); + +await loginWithRedirect({ + authorizationParams: { + session_transfer_token: 'YOUR_SESSION_TRANSFER_TOKEN', + }, +}); +```