connect-sdk

Install

npm install --save @affixapi/connect-sdk

Usage

typescript

import React, { useState } from 'react';
import { useConnect } from '@affixapi/connect-sdk';

const App = () => {
  const [authorizationCode, setAuthorizationCode] = useState<string | null>(
    null
  );
  const [state, setState] = useState<string | null>();

  const onSuccess = ({
    authorizationCode,
    state,
  }: {
    authorizationCode: string;
    state?: string;
  }): void => {
    setAuthorizationCode(authorizationCode);
    if (state) setState(state);
  };
  const onError = ({ errorMessage }: { errorMessage: string }) =>
    console.error({ errorMessage });
  const onClose = () => console.log('User exited Connect');

  const { open } = useConnect({
    clientId: '<your-client-id>',
    scopes: [
      // remove any you don't need
      '/2023-03-01/xhr/company',
      '/2023-03-01/xhr/employee',
      '/2023-03-01/xhr/employees',
      '/2023-03-01/xhr/groups',
      '/2023-03-01/xhr/identity',
      '/2023-03-01/xhr/payruns',
      '/2023-03-01/xhr/payruns/:payrun_id',
      '/2023-03-01/xhr/time-off-balances',
      '/2023-03-01/xhr/time-off-entries',
      '/2023-03-01/xhr/timesheets',
      '/2023-03-01/xhr/work-locations',
    ],
    mode: 'xhr',
    // provider: 'bamboohr', // optional param, will skip the provider selector page if set
    // sandbox: true, // if this flag is enabled, `provider` needs to be `provider: sandbox` above
    // state: '00000000-0000-0000-0000-000000000000', // optional - usually your internal identifier of a customer
    onSuccess,
    onError,
    onClose,
  });

  return (
    <div>
      <header>
        <p>Authorization Code: {authorizationCode}</p>
        <p>State (optional): {state}</p>
        <button type="button" onClick={() => open()}>
          open connect
        </button>
      </header>
    </div>
  );
};

javascript

import React, { useState } from 'react';
import { useConnect } from '@affixapi/connect-sdk';

const App = () => {
  const [authorizationCode, setAuthorizationCode] = useState(null);
  const [state, setState] = useState();

  const onSuccess = ({ authorizationCode, state }: {
    authorizationCode: string,
    state?: string
  }): void => {
    setAuthorizationCode(authorizationCode);
    if (state) setState(state);
  }
  const onError = ({ errorMessage }) => console.error(errorMessage);
  const onClose = () => console.log('User exited Connect');

  const { open } = useConnect({
    clientId: '<your-client-id>',
    scopes: [
      // remove any you don't need
      '/2023-03-01/xhr/company',
      '/2023-03-01/xhr/employee',
      '/2023-03-01/xhr/employees',
      '/2023-03-01/xhr/groups',
      '/2023-03-01/xhr/identity',
      '/2023-03-01/xhr/payruns',
      '/2023-03-01/xhr/payruns/:payrun_id',
      '/2023-03-01/xhr/time-off-balances',
      '/2023-03-01/xhr/time-off-entries',
      '/2023-03-01/xhr/timesheets',
      '/2023-03-01/xhr/work-locations',
    ],
    mode: 'xhr',
    // provider: 'bamboohr', // optional param, will skip the provider selector page if set
    // sandbox: true, // if this flag is enabled, `provider` needs to be `provider: sandbox` above
    // state: '00000000-0000-0000-0000-000000000000', // optional - usually your internal identifier of a customer
    onSuccess,
    onError,
    onClose,
  });

  return (
    <div>
      <header>
        <p>Authorization Code: {authorizationCode}</p>
        <p>State (optional): {state}</p>
        <button type="button" onClick={() => open()}>
          open affixapi connect
        </button>
      </header>
    </div>
  );
};

create the sdk

for affixapi engineer's reference only

in project root,

npm start

for local development,

example/index.tsx:

import { createRoot } from 'react-dom/client';
import React, { useState } from 'react';
// import { useConnect } from '@affixapi/connect-sdk'; <<< comment

import { useConnect } from '../src/index'; // for local testing <<< uncomment

in seperate shell,

cd example
npm start

server is now running on http://localhost:1234

troubleshooting:

• make sure to restart the vite server after making the comment change