saasufy-components 9.5.3 → 9.6.1

package/README.md

@@ -345,7 +345,7 @@ A Saasufy component which integrates with data from Saasufy is known as a `socke
 - `url` (required): Specifies the URL for the Saasufy service to use as the data store for all components which are placed inside it.
 - `auth-token-name`: Allows you to specify a custom key for your token - This will be used as the key in localStorage. You generally do not need to set this attribute. It is intended for situations were an app has multiple `socket-provider` elements connecting different services with different/separate authentication flows.
 - `disable-tab-sync`: By default, the socket provider synchronizes socket auth state across multiple tabs via localStorage. If this attribute is set, then the socket auth state will not sync automatically and a manual page refresh may be necessary to update to the latest auth state.
-- `socket-options`: Can be used to set options on the inner `socket`. Must be in the format `option1:type1=value1,option2:type2=value2`; the type of each option can be string, boolean or number. If not specified, the default type is string.
+- `socket-options`: Can be used to set options on the inner `socket`. Must be in the format `option1:type1=value1,option2:type2=value2`; the type of each option can be string, boolean or number. If not specified, the default type is string. Nested properties can be set like this: `autoReconnectOptions.initialDelay:number=2000,autoReconnectOptions.randomness:number=1000,autoReconnectOptions.multiplier:number=1.5,autoReconnectOptions.maxDelay:number=20000`.
 - `disconnect-on-deauth`: If this attribute is set, the underlying socket will be disconnected if the socket becomes unauthenticated. This means that components will not receive real-time updates until the user's next interaction (which will cause the socket to reconnect). If this attribute is not set, the socket will attempt to reconnect immediately after losing authentication.
 - `greedy-refresh`: If this attribute exists, the component will refresh itself whenever an attribute is set, even if that attribute's value did not change.
 
@@ -972,6 +972,8 @@ A link to initiate an OAuth flow to authenticate a user as part of log in. Can s
 
 - `provider` (required): The name of the provider. It must match the provider name specified on the `Authentication` page of your Saasufy control panel and also the value provided to the `oauth-handler` component at the end of the OAuth flow.
 - `client-id` (required): This is the client ID from the third-party OAuth provider.
+- `redirect-uri`: A URI to redirect the user to once OAuth is successful. This attribute may be required depending on the OAuth provider/client.
+- `grant-type`: The grant type for this OAuth flow. Typically set to `authorization_code`. This may be required depending on the OAuth provider/client.
 - `state-size`: This allows you to control the size (in bytes) of the random state string which is passed to the OAuth provider as part of the OAuth flow. Defaults to 20.
 - `state-storage-key`: The state string is stored in the browser's `sessionStorage` under this key. Defaults to `oauth.state`. It must match the value provided to the `oauth-handler` component at the end of the OAuth flow.
 - `use-session-storage`: By default, the state is stored inside localStorage. If this property is set, then the state will be stored inside sessionStorage instead. If set, this attribute should also be set on the related `oauth-handler` component.
@@ -998,6 +1000,7 @@ When using an OAuth provider, the callback URL which you register with the provi
 - `provider` (required): The name of the provider. It must match the provider name specified on the `Authentication` page of your Saasufy control panel and also the value provided to the `oauth-link` component at the start of the OAuth flow.
 - `success-location-hash`: If authentication is successful, the browser's `location.hash` will be set to this value. It can be used to redirect the user to their dashboard, for example.
 - `success-url`: If authentication is successful, the browser's `location.href` will be set to this value. It can be used to redirect the user to their dashboard, for example.
+- `redirect-uri`: A URI to redirect the user to once OAuth is successful. This attribute may be required depending on the OAuth provider/client.
 - `extra-data`: This attribute can be used to pass additional data to the OAuth `getAccessTokenURL` endpoint. For Google OAuth, for example, an additional `redirect_uri` field is required, so it should be set using `extra-data="redirect_uri=http://localhost.com:8000/"` (substitute the URI with your own).
 - `navigate-event-path`: If authentication is successful and a path is set via this attribute, the component will emit a `navigate` event which will bubble up the component hierarchy and can be used by a parent component to perform the success redirection. This approach can be used as an alternative to `success-location-hash` or `success-url` for doing the final redirect.
 - `state-storage-key`: The state string is stored in the browser's `sessionStorage` under this key. Defaults to `oauth.state`. It must match the value provided to the `oauth-link` component at the start of the OAuth flow.

package/oauth-handler.js

@@ -62,6 +62,11 @@ class OAuthHandler extends SocketConsumer {
     let stateParamName = this.getAttribute('state-param-name') || 'state';
     let extraDataString = this.getAttribute('extra-data') || '';
     let { fieldValues: extraData } = convertStringToFieldParams(extraDataString);
+    let redirectURI = this.getAttribute('redirect-uri');
+
+    if (redirectURI) {
+      extraData.redirectURI = redirectURI;
+    }
 
     let authTimeout = Number(this.getAttribute('auth-timeout') || DEFAULT_AUTH_TIMEOUT);
     let urlSearchParams = new URLSearchParams(location.search);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "9.5.3",
+  "version": "9.6.1",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {