Embedding authentication (2022-12-12)

Polytomic Connect allows you to embed Polytomic’s API in your own product, thus adding the ability to sync and ETL data between your customers’ systems and your own.

As an alternative to building your own authentication flow, Polytomic Connect can handle all authentication to your customers’ systems, whether to databases, data warehouses, CRMs, spreadsheets, or even arbitrary HTTP APIs. Through an API call to Polytomic Connect, you can present your users with Polytomic-provided authentication flows without worrying about building the right input form or OAuth flow.

For example, here are example modals generated by Polytomic Connect to authenticate to HubSpot and Snowflake:

Polytomic supports many other integrations. For each one, you’re able to pop up authentication modals like the above without having to know what authentication parameters are required.

Code example

Below is an example of both frontend and backend code that authenticates to PostgreSQL using the Polytomic Connect API. Note that PostgreSQL can easily be replaced by any other integration; the caller does not need any knowledge of the required authentication inputs because that is automatically handled by Polytomic Connect.

Important: Polytomic Connect requires an API key. If you haven’t already, learn how to obtain an API Key.

Requests should be proxied through a backend server so that the API token can be securely added to all outgoing requests. Demonstrated below are two parts broken up by frontend and backend

Frontend

1 const PROXY = "https://localhost:8081";
2 const REDIRECT_URL = "http://localhost:8080/connect_complete";
3 
4 async function initiatePolytomicConnect() {
5   const response = await fetch(`/_/api/connections/connect`, {
6     method: "POST",
7     mode: 'cors',
8     cache: 'no-cache', 
9     credentials: 'same-origin',
10     body: JSON.stringify({
11       type: "postgresql",
12       name: "My Postgres connection",
13       redirect_url: REDIRECT_URL,
14     }),
15   });
16   if (response.ok) {
17     const data = await response.json();
18     window.open(data.data.redirect_url, "_blank")
19     return;
20   }
21   const { error } = await response.json();
22   throw new Error(error);
23 }

Backend

1 import requests
2 
3 from fastapi import FastAPI, Request, Response
4 from fastapi.middleware.cors import CORSMiddleware
5 
6 
7 token = "YOUR-API-TOKEN"
8 
9 app = FastAPI()
10 origins = ["*"]
11 
12 app.add_middleware(
13     CORSMiddleware,
14     allow_origins=origins,
15     allow_credentials=True,
16     allow_methods=["*"],
17     allow_headers=["*"],
18 )
19 
20 
21 # Proxy requrest from frontend, inject token
22 @app.post("/_/api/connections/connect/")
23 async def connect(request: Request):
24     body = await request.json()
25     response = requests.post(
26         url="https://app.polytomic.com/api/connections/connect/", 
27         headers={
28             "Authorization": f"Bearer {token}",
29             "Content-Type": "application/json",
30             "X-Polytomic-Version": "2023-04-25"
31         },
32         json=body,
33     )
34 
35     return Response(
36         content=response.content,
37         status_code=response.status_code,
38         headers=dict(response.headers),
39     )

Note that you can provide Polytomic Connect with a specific list of connections that your user will be able to choose from. Here’s a frontend example that will pop up a modal listing HubSpot, Marketo, Outreach, and Salesforce as connection options:

1 onst PROXY = "https://localhost:8081";
2 const REDIRECT_URL = "http://localhost:8080/connect_complete";
3 
4 async function initiatePolytomicConnect() {
5   const response = await fetch(`/_/api/connections/connect`, {
6     method: "POST",
7     mode: "cors",
8     cache: "no-cache",
9     credentials: "same-origin",
10     body: JSON.stringify({
11       whitelist: ["salesforce", "hubspot", "marketo", "outreach"],
12       name: "Polytomic connection",
13       redirect_url: REDIRECT_URL,
14     }),
15   });
16   if (response.ok) {
17     const data = await response.json();
18     window.open(data.data.redirect_url, "_blank")
19     return;
20   }
21   const { error } = await response.json();
22   throw new Error(error);
23 }

1	const PROXY = "https://localhost:8081";
2	const REDIRECT_URL = "http://localhost:8080/connect_complete";
3
4	async function initiatePolytomicConnect() {
5	const response = await fetch(`/_/api/connections/connect`, {
6	method: "POST",
7	mode: 'cors',
8	cache: 'no-cache',
9	credentials: 'same-origin',
10	body: JSON.stringify({
11	type: "postgresql",
12	name: "My Postgres connection",
13	redirect_url: REDIRECT_URL,
14	}),
15	});
16	if (response.ok) {
17	const data = await response.json();
18	window.open(data.data.redirect_url, "_blank")
19	return;
20	}
21	const { error } = await response.json();
22	throw new Error(error);
23	}

1	import requests
2
3	from fastapi import FastAPI, Request, Response
4	from fastapi.middleware.cors import CORSMiddleware
5
6
7	token = "YOUR-API-TOKEN"
8
9	app = FastAPI()
10	origins = ["*"]
11
12	app.add_middleware(
13	CORSMiddleware,
14	allow_origins=origins,
15	allow_credentials=True,
16	allow_methods=["*"],
17	allow_headers=["*"],
18	)
19
20
21	# Proxy requrest from frontend, inject token
22	@app.post("/_/api/connections/connect/")
23	async def connect(request: Request):
24	body = await request.json()
25	response = requests.post(
26	url="https://app.polytomic.com/api/connections/connect/",
27	headers={
28	"Authorization": f"Bearer {token}",
29	"Content-Type": "application/json",
30	"X-Polytomic-Version": "2023-04-25"
31	},
32	json=body,
33	)
34
35	return Response(
36	content=response.content,
37	status_code=response.status_code,
38	headers=dict(response.headers),
39	)

1	onst PROXY = "https://localhost:8081";
2	const REDIRECT_URL = "http://localhost:8080/connect_complete";
3
4	async function initiatePolytomicConnect() {
5	const response = await fetch(`/_/api/connections/connect`, {
6	method: "POST",
7	mode: "cors",
8	cache: "no-cache",
9	credentials: "same-origin",
10	body: JSON.stringify({
11	whitelist: ["salesforce", "hubspot", "marketo", "outreach"],
12	name: "Polytomic connection",
13	redirect_url: REDIRECT_URL,
14	}),
15	});
16	if (response.ok) {
17	const data = await response.json();
18	window.open(data.data.redirect_url, "_blank")
19	return;
20	}
21	const { error } = await response.json();
22	throw new Error(error);
23	}