@psychic-api/link

Psychic Link

@psychic-api/link is a React library that provides a hook for easy authentication with popular SaaS applications such as Notion, Google Drive, and more. Find us at https://psychic.dev

Table of Contents

• Installation
• Usage
• Troubleshooting

Installation

Install the library using npm:

npm install @psychic-api/link

Usage

Here's an example of how to use the library:

import React, { useEffect, useState } from 'react';
import { usePsychicLink } from '@psychic-api/link';

const App = () => {
  const [newConnection, setNewConnection] = useState(null);
  // Your Psychic.dev public API key
  const publicKey = '5c362fda-bb72-4a6c-b930-71f33ad45f79';
  
  // Unique ID for the account that is requesting this connection
  const accountId = '2cbaa840-0b21-4d8e-924c-e418a08ce53f';

  // usePsychicLink accepts a callback that handles your application logic once a new connection is established
  const { open, isReady, isLoading, error } = usePsychicLink(publicKey, (newConnection: {accountId: string, connectorId: string}) => setNewConnection(newConnection));

  useEffect(() => {
    // Shows the Psychic Link modal to the user
    open(accountId);
  }, []);

  return (
    <div className="App">
      {newConnection && <div>{newConnection}</div>}
    </div>
  );
};

export default App;

Open to a specific connector

By default, the Psychic modal displays a list of connectors for the user to pick. If you want the modal to open to a specific connector, such as Notion, use the optional connectorId parameter in the open function:

// Import the ConnectorId enum
import { usePsychicLink, ConnectorId } from '@psychic-api/link';

// Pass in the connector that you want to display to the user
open(accountId, ConnectorId.Notion);

Troubleshooting

For assistance, join the Psychic community Slack here

Invalid Hook Call Warning

If you encounter an "Invalid hook call" warning when importing the library into another project, it might be caused by the library using a different version of React than the project. To resolve this issue, follow the instructions provided in this StackOverflow post: Invalid hook call warning - linking a React app and a local npm package