WixProvider
The WixProvider component provides functionality for working with the Wix JavaScript SDK in a React project using the @wix/sdk-react package.
Note:
All @wix/sdk-react functionality must be wrapped inside a WixProvider component.
Props
| Name | Type | Description |
|---|---|---|
auth | AuthenticationStrategy | The authentication strategy to use for authenticating API calls, such as OAuthStrategy, AppOAuthStrategy, or APIKeyStrategy. |
host | Host | Optional. An API host. You only need to specify a host when using a client to access hosted modules, such as the dashboard module. |
Note:
In most scenarios, the React SDK is used on client environments such as browsers and mobile apps, and so shouldn't be initialized with an authentication strategy with administrative permissions, like the ApiKeyStategy. To learn more, see Authorization Strategies.
Examples
The following examples show how to pass the WixProvider the relevant authentication information for Wix Headless, Wix apps, and Wix apps with a dashboard page.
Authenticate with OAuth for Wix Headless
1<WixProvider2 auth={OAuthStrategy({3 clientId: '<CLIENT_ID>',4 })}5>6 {/* SDK usage */}7</WixProvider>
Authenticate with OAuth for Wix apps
1<WixProvider2 auth={AppOAuthStrategy({3 appId: '<YOUR_APP_ID>',4 appSecret: '<YOUR_APP_SECRET>',5 publicKey: '<YOUR_APP_PUBLIC_KEY_IF_YOU_USE_WEBHOOKS>',6 instanceId: '<APP_INSTANCE_ID>'7 })}8>9 {/* SDK usage */}10</WixProvider>
Authenticate with the dashboard strategy
The dashboard.auth() authentication strategy provides an access token for the currently logged-in user in the Wix Dashboard. This token allows your code to access APIs using the permissions of the logged-in user, limited to the permissions granted to your app.
The dashboard module is designed for use within the Wix platform environment, granting access to Wix Dashboard frontend APIs, like showToast. To use this module, initialize the WixProvider with the host object obtained from dashboard.host().
1<WixProvider auth={dashboard.auth()} host={dashboard.host()}>2 {/* SDK usage of hosted dashboard module */}3</WixProvider>