saasufy-components 3.22.0 → 3.23.0

package/README.md

@@ -811,6 +811,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.
+- `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-session-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.
 - `code-param-name`: The name of the query parameter which holds the `code` as provided by the OAuth provider within the OAuth callback URL. Defaults to `code`.

package/oauth-handler.js

@@ -1,5 +1,5 @@
 import { SocketConsumer } from './socket.js';
-import { generateRandomHexString } from './utils.js';
+import { generateRandomHexString, convertStringToFieldParams } from './utils.js';
 
 const DEFAULT_AUTH_TIMEOUT = 10000;
 
@@ -49,9 +49,10 @@ class OAuthHandler extends SocketConsumer {
 
     let codeParamName = this.getAttribute('code-param-name') || 'code';
     let stateParamName = this.getAttribute('state-param-name') || 'state';
+    let extraDataString = this.getAttribute('extra-data') || '';
+    let { fieldValues: extraData } = convertStringToFieldParams(extraDataString);
 
     let authTimeout = Number(this.getAttribute('auth-timeout') || DEFAULT_AUTH_TIMEOUT);
-
     let urlSearchParams = new URLSearchParams(location.search);
     let code = urlSearchParams.get(codeParamName);
 
@@ -63,7 +64,7 @@ class OAuthHandler extends SocketConsumer {
 
       if (state === expectedOAuthState) {
         try {
-          await socket.invoke('log-in-oauth', { provider, data: { code } });
+          await socket.invoke('log-in-oauth', { provider, data: { code, ...extraData } });
         } catch (error) {
           this.innerHTML = `
             <div class="error">OAuth authentication failed. ${error.message}</div>

package/package.json

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