Skip to content

Commit 815efeb

Browse files
docs: add Native to Web SSO support to changelog and examples
1 parent ca1786c commit 815efeb

File tree

2 files changed

+59
-0
lines changed

2 files changed

+59
-0
lines changed

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212

1313
**Added**
1414
- feat: add client prop to Auth0Provider [\#1041](https://github.com/auth0/auth0-react/pull/1041) ([yogeshchoudhary147](https://github.com/yogeshchoudhary147))
15+
- Native to Web SSO support (via [auth0-spa-js v2.18.0](https://github.com/auth0/auth0-spa-js/releases/tag/v2.18.0))
1516

1617
**Changed**
1718
- 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))

EXAMPLES.md

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
- [Access SDK Configuration](#access-sdk-configuration)
1616
- [Multi-Factor Authentication (MFA)](#multi-factor-authentication-mfa)
1717
- [Step-Up Authentication](#step-up-authentication)
18+
- [Native to Web SSO](#native-to-web-sso)
1819

1920
## Use with a Class Component
2021

@@ -1125,3 +1126,60 @@ export default ProtectedResource;
11251126
11261127
If the popup is blocked, cancelled, or times out, `getAccessTokenSilently` throws `PopupOpenError`, `PopupCancelledError`, or `PopupTimeoutError` respectively. These can be imported from `@auth0/auth0-react`.
11271128
1129+
## Native to Web SSO
1130+
1131+
[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.
1132+
1133+
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:
1134+
1135+
```jsx
1136+
import { Auth0Provider } from '@auth0/auth0-react';
1137+
1138+
function App() {
1139+
return (
1140+
<Auth0Provider
1141+
domain="YOUR_AUTH0_DOMAIN"
1142+
clientId="YOUR_AUTH0_CLIENT_ID"
1143+
authorizationParams={{
1144+
redirect_uri: window.location.origin,
1145+
}}
1146+
sessionTransferTokenQueryParamName="session_transfer_token"
1147+
>
1148+
<MyApp />
1149+
</Auth0Provider>
1150+
);
1151+
}
1152+
```
1153+
1154+
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()`.
1155+
1156+
### Using a custom parameter name
1157+
1158+
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:
1159+
1160+
```jsx
1161+
<Auth0Provider
1162+
domain="YOUR_AUTH0_DOMAIN"
1163+
clientId="YOUR_AUTH0_CLIENT_ID"
1164+
authorizationParams={{
1165+
redirect_uri: window.location.origin,
1166+
}}
1167+
sessionTransferTokenQueryParamName="stt"
1168+
>
1169+
<MyApp />
1170+
</Auth0Provider>
1171+
```
1172+
1173+
### Manually providing the session transfer token
1174+
1175+
You can pass the token directly via `authorizationParams`. This takes precedence over automatic URL detection:
1176+
1177+
```jsx
1178+
const { loginWithRedirect } = useAuth0();
1179+
1180+
await loginWithRedirect({
1181+
authorizationParams: {
1182+
session_transfer_token: 'YOUR_SESSION_TRANSFER_TOKEN',
1183+
},
1184+
});
1185+
```

0 commit comments

Comments
 (0)