|
15 | 15 | - [Access SDK Configuration](#access-sdk-configuration) |
16 | 16 | - [Multi-Factor Authentication (MFA)](#multi-factor-authentication-mfa) |
17 | 17 | - [Step-Up Authentication](#step-up-authentication) |
| 18 | +- [Native to Web SSO](#native-to-web-sso) |
18 | 19 |
|
19 | 20 | ## Use with a Class Component |
20 | 21 |
|
@@ -1125,3 +1126,60 @@ export default ProtectedResource; |
1125 | 1126 |
|
1126 | 1127 | If the popup is blocked, cancelled, or times out, `getAccessTokenSilently` throws `PopupOpenError`, `PopupCancelledError`, or `PopupTimeoutError` respectively. These can be imported from `@auth0/auth0-react`. |
1127 | 1128 |
|
| 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