Feat: add client side authentication

HubbeDev · Jan 7, 2024 · 8bedd21 · 8bedd21
1 parent 62fe938
commit 8bedd21
Show file tree

Hide file tree

Showing 10 changed files with 119 additions and 21 deletions.
diff --git a/apps/svelte-gravity-forms/.env.example b/apps/svelte-gravity-forms/.env.example
@@ -1,4 +1,3 @@
 PUBLIC_GF_CONSUMER_KEY=
 PUBLIC_GF_CONSUMER_SECRECT=
-PUBLIC_GF_API_URL=
-PUBLIC_GF_FORM_URL=
+PUBLIC_GF_API_URL=
diff --git a/apps/svelte-gravity-forms/package.json b/apps/svelte-gravity-forms/package.json
@@ -36,7 +36,9 @@
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@types/crypto-js": "^4.2.1",
 		"@types/eslint": "8.56.0",
+		"@types/js-sha1": "^0.6.2",
 		"@typescript-eslint/eslint-plugin": "^6.0.0",
 		"@typescript-eslint/parser": "^6.0.0",
 		"autoprefixer": "^10.4.16",
@@ -63,8 +65,11 @@
 	"dependencies": {
 		"bits-ui": "^0.13.0",
 		"clsx": "^2.1.0",
+		"crypto-js": "^4.2.0",
 		"formsnap": "^0.4.2",
+		"js-sha1": "^0.6.0",
 		"lucide-svelte": "^0.304.0",
+		"oauth-1.0a": "^2.2.6",
 		"sveltekit-superforms": "^1.13.1",
 		"tailwind-merge": "^2.2.0",
 		"tailwind-variants": "^0.1.20",

diff --git a/apps/svelte-gravity-forms/src/lib/components/root.svelte b/apps/svelte-gravity-forms/src/lib/components/root.svelte
@@ -8,7 +8,8 @@
 
 	export let formId: $$Props['formId'] = undefined;
 	export let backendUrl: $$Props['backendUrl'] = undefined;
-	export let formUrl: $$Props['formUrl'] = 'svelte-gravityforms/v1/gf';
+	export let consumerKey: $$Props['consumerKey'] = undefined;
+	export let consumerSecret: $$Props['consumerSecret'] = undefined;
 
 	const {
 		methods: { onSubmitForm },
@@ -17,7 +18,8 @@
 	} = setCtx({
 		formId: formId,
 		backendUrl: backendUrl,
-		formUrl: formUrl
+		consumerKey: consumerKey,
+		consumerSecret: consumerSecret
 	});
 
 	$: form = $formSchema

diff --git a/apps/svelte-gravity-forms/src/lib/components/types.ts b/apps/svelte-gravity-forms/src/lib/components/types.ts
@@ -1,5 +1,6 @@
 export type Props = {
 	formId: number | undefined;
 	backendUrl: string | undefined;
-	formUrl?: string;
+	consumerKey: string | undefined;
+	consumerSecret: string | undefined;
 };
diff --git a/apps/svelte-gravity-forms/src/lib/internal/gf.ts b/apps/svelte-gravity-forms/src/lib/internal/gf.ts
@@ -10,18 +10,21 @@ import type {
 	GFFormObjectProps
 } from './types.js';
 import type { HTMLAttributes } from 'svelte/elements';
-import { getFormObject, sendSubmission } from './helpers/gf-rest.js';
+import { getClientFormObject, sendSubmission } from './helpers/gf-rest.js';
 
 export type CreateGravityFromsProps = {
 	formId?: number | undefined;
 	backendUrl?: string;
-	formUrl?: string;
+	consumerKey?: string;
+	consumerSecret?: string;
 };
 
 const defaultProps = {
 	formId: undefined,
 	backendUrl: 'http://localhost:8888/wp-json',
-	formUrl: 'svelte-gravityforms/v1/gf'
+	formObjectData: undefined,
+	consumerKey: undefined,
+	consumerSecret: undefined
 };
 
 export function createSvelteGravityFroms(props: CreateGravityFromsProps) {
@@ -37,7 +40,7 @@ export function createSvelteGravityFroms(props: CreateGravityFromsProps) {
 		})
 	);
 
-	const { formId, backendUrl, formUrl } = options;
+	const { formId, backendUrl } = options;
 
 	// refs
 	const formRef = writable<HTMLFormElement | undefined>(undefined);
@@ -53,6 +56,8 @@ export function createSvelteGravityFroms(props: CreateGravityFromsProps) {
 	const formSubmtiButton = writable<GFButtonProps | undefined>(undefined);
 	const defaultConfirmation = writable<GFComfirmationProps>(undefined);
 	const isSubmitted = writable<boolean>(false);
+	const consumerKeyStore = writable(withDefaults.consumerKey);
+	const consumerSecretStore = writable(withDefaults.consumerSecret);
 
 	// Fetch form object from Gravity Forms API
 
@@ -176,7 +181,12 @@ export function createSvelteGravityFroms(props: CreateGravityFromsProps) {
 		if (!get(formIdStore)) {
 			return;
 		}
-		const formData = await getFormObject(backendUrl, formUrl, formIdStore);
+		const formData = await getClientFormObject(
+			backendUrl,
+			formIdStore,
+			consumerKeyStore,
+			consumerSecretStore
+		);
 		formObject.set(formData);
 	});
 
@@ -292,8 +302,7 @@ export function createSvelteGravityFroms(props: CreateGravityFromsProps) {
 			isSubmitted,
 			defaultConfirmation,
 			formId,
-			backendUrl,
-			formUrl
+			backendUrl
 		},
 		methods: {
 			onSubmitForm

diff --git a/apps/svelte-gravity-forms/src/lib/internal/helpers/gf-rest.ts b/apps/svelte-gravity-forms/src/lib/internal/helpers/gf-rest.ts
@@ -1,12 +1,15 @@
 import { get, type Writable } from 'svelte/store';
 import type { GFFormObjectProps } from '../types.js';
 
+import OAuth from 'oauth-1.0a';
+import CryptoJS from 'crypto-js';
+
 export async function sendSubmission(
 	req: { [x: string]: unknown },
 	backendUrl: Writable<string | undefined>,
 	formId: Writable<number>
 ) {
-	const res = await fetch(`${get(backendUrl)}gravityforms/v2/forms/${get(formId)}/submissions`, {
+	const res = await fetch(`${get(backendUrl)}gf/v2/forms/${get(formId)}/submissions`, {
 		method: 'POST',
 		headers: {
 			Accept: 'application/json',
@@ -17,14 +20,43 @@ export async function sendSubmission(
 	return data;
 }
 
-export async function getFormObject(
+export async function getClientFormObject(
 	backendUrl: Writable<string | undefined>,
-	formUrl: Writable<string>,
-	formId: Writable<number>
+	formId: Writable<number>,
+	consumer_key: Writable<string>,
+	consumer_secret: Writable<string>
 ) {
-	const res = await fetch(`${get(backendUrl)}${get(formUrl)}/forms/${get(formId)}`, {
+	const oauth = new OAuth({
+		consumer: {
+			key: get(consumer_key),
+			secret: get(consumer_secret)
+		},
+		signature_method: 'HMAC-SHA1',
+		hash_function(base_string, key) {
+			return CryptoJS.HmacSHA1(base_string, key).toString(CryptoJS.enc.Base64);
+		}
+	});
+
+	// Generate OAuth 1.0 parameters
+	const oauthData = oauth.authorize({
+		url: `${get(backendUrl)}gf/v2/forms/${get(formId)}`,
 		method: 'GET'
 	});
+
+	// Convert OAuth parameters to URL parameters
+	const params = new URLSearchParams({
+		oauth_consumer_key: oauthData.oauth_consumer_key,
+		oauth_nonce: oauthData.oauth_nonce,
+		oauth_signature_method: oauthData.oauth_signature_method,
+		oauth_timestamp: oauthData.oauth_timestamp.toString(),
+		oauth_version: oauthData.oauth_version,
+		oauth_signature: oauthData.oauth_signature
+	});
+
+	// Append OAuth parameters to URL
+	const url = `${get(backendUrl)}gf/v2/forms/${get(formId)}?${params.toString()}`;
+
+	const res = await fetch(url, { method: 'GET' });
 	// eslint-disable-next-line no-console
 	console.log(res);
 	const data = (await res.json()) as GFFormObjectProps;

diff --git a/apps/svelte-gravity-forms/src/lib/internal/types.ts b/apps/svelte-gravity-forms/src/lib/internal/types.ts
@@ -58,7 +58,7 @@ export type GFButtonProps = {
 	id?: string;
 };
 
-type GFComfirmationProps = {
+export type GFComfirmationProps = {
 	type?: string;
 	id?: string;
 	isDefault?: boolean;

diff --git a/apps/svelte-gravity-forms/src/routes/+page.svelte b/apps/svelte-gravity-forms/src/routes/+page.svelte
@@ -1,6 +1,15 @@
 <script lang="ts">
 	import { SvelteGravityForm } from '$lib/index.js';
-	import { PUBLIC_GF_API_URL, PUBLIC_GF_FORM_URL } from '$env/static/public';
+	import {
+		PUBLIC_GF_API_URL,
+		PUBLIC_GF_CONSUMER_KEY,
+		PUBLIC_GF_CONSUMER_SECRECT
+	} from '$env/static/public';
 </script>
 
-<SvelteGravityForm formId={1} backendUrl={PUBLIC_GF_API_URL} formUrl={PUBLIC_GF_FORM_URL} />
+<SvelteGravityForm
+	formId={1}
+	backendUrl={PUBLIC_GF_API_URL}
+	consumerKey={PUBLIC_GF_CONSUMER_KEY}
+	consumerSecret={PUBLIC_GF_CONSUMER_SECRECT}
+/>
diff --git a/apps/wp/config/.htaccess b/apps/wp/config/.htaccess
@@ -14,4 +14,10 @@ RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /index.php [L]
 </IfModule>
 
-# END WordPress
+
+# END WordPress
+
+#allow cors
+<IfModule mod_headers.c>
+    Header set Access-Control-Allow-Origin "*"
+</IfModule>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml