saasufy-components 9.5.2 → 9.6.0

package/README.md

@@ -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

@@ -25,6 +25,13 @@ class OAuthHandler extends SocketConsumer {
     }
   }
 
+  getProviderFromState(state) {
+    if (typeof state !== 'string') return '';
+    let lastDashIndex = state.lastIndexOf('-');
+    if (lastDashIndex === -1) return state;
+    return state.slice(0, lastDashIndex);
+  }
+
   async connectedCallback() {
     this.innerHTML = '';
 
@@ -45,7 +52,7 @@ class OAuthHandler extends SocketConsumer {
 
     let relevantStates = expectedOAuthState
       .split(',')
-      .filter(expectedState => expectedState && expectedState.split('-')[0] === provider);
+      .filter(expectedState => this.getProviderFromState(expectedState) === provider);
 
     // Do not process. The state may have been set for a different provider
     // which is handled on the same page.
@@ -55,12 +62,17 @@ 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);
     let state = urlSearchParams.get(stateParamName);
 
-    let stateProvider = (state || '').split('-')[0];
+    let stateProvider = this.getProviderFromState(state);
     if (stateProvider !== provider) return;
     
     let code = urlSearchParams.get(codeParamName);

package/package.json

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