Socket
Socket
Sign inDemoInstall

react-pelm-connect

Package Overview
Dependencies
9
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-pelm-connect

This package provides a react wrapper over Connect, a javascript plugin that allows your users to securely and seamlessly connect their utility accounts.


Version published
Maintainers
1
0

Weekly downloads

Readme

Source

Pelm Connect

This package provides a react wrapper over Connect, a javascript plugin that allows your users to securely and seamlessly connect their utility accounts.

Install

npm install react-pelm-connect

Connect Token

The first step is creating a Connect Token. This is an extra security measure that abstracts away information like your Pelm-Client-Id and Pelm-Secret from the client.

You can obtain a Connect Token by making the following request.

curl --request POST 'https://api.pelm.com/auth/connect-token' \
--header 'Pelm-Client-Id: YOUR_PELM_CLIENT_ID' \
--header 'Pelm-Secret: YOUR_PELM_SECRET' \
--form 'user_id="USER_ID"'
--form 'utility_id="UTILITY_ID"'

Include the optional utility_id parameter if you want your User to skip the Utility Selection Screen. You can find a list of utility_ids here.

More information on the Connect Token can be found in the docs here.

Config

The next step is creating a Config object to initialize Connect.

The Config option takes in the following parameters.

  • connectToken: the Connect Token created in the previous step
  • onSuccess: this is the callback that is called when your User successfully connects their utility account. This callback should take an - authorizationCode: string parameter, which you'll use to get an access_token.
  • onExit: this is the callback that is called when Connect is exited but the user has not successfully connected their utility account. The callback will be called if the user manually exits Connect or if an error occurs causing Connect to close. This callback accepts status: string and metadata: any arguments.
    • The status argument indicates what caused Connect to exit. This is safe for programmatic use and can take one of the following values:
      • user_initiated_exit: the user closed Connect by clicking the "x" button or clicking outside the modal.
      • unavailable_utility_credentials_submitted: the user submitted credentials for a utility that Pelm does not yet support.
    • The metadata argument provides additional context. In the case of unavailable_utility_credentials_submitted, metadata will provide information on which utility the user submitted credentials for as an object like {utility_id: '8', utility_name: 'Cherokee Electric Cooperative'}

Example Config object:

config: Config = {
    connectToken: 'CONNECT_TOKEN',
    onSuccess: (authorizationCode: string) => {...},
    onExit: (status: string, metadata: any) => {}
}

Using Connect

Hook Implementation

Implementation using React Hooks.

import { useConnect, Config } from 'react-pelm-connect';

const Connect = (props: Props) => {
    const config: Config = {
        connectToken: 'CONNECT_TOKEN',
        onSuccess: (authorizationCode: string) => {...},
        onExit: () => {...}
    };

    const { open, ready, error } = useConnect(config);

    return <button
        type="button"
        className="button"
        onClick={() => open()}
        disabled={!ready}
    >
        Connect your utility
    </button>
}

export default Connect

Styled Button

We also provide a styled button you can use.

import { ConnectButton, Config } from 'react-pelm-connect';

const Connect = (props: Props) => {
    const config: Config = {
        connectToken: 'CONNECT_TOKEN',
        onSuccess: (authorizationCode: string) => {...},
        onExit: () => {...}
    };

    return <ConnectButton config={config} />
}

export default Connect

Directly loading javascript script

If you want to implement Connect into a non-React web application, follow this implementation.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Pelm Connect Javascript Demo</title>
    <script src='https://cdn.pelm.com/initialize.js'></script>
    <script>
      (async () => {
        const generateConnectToken = async function() {
          // This should be a call to your server, which then makes a request to Pelm.
          // We're making a request directly to Pelm here for your convenience.
          const options = {
            method: 'POST',
            headers: {
              'Accept': 'application/json',
              'Pelm-Client-Id': 'YOUR_CLIENT_ID',
              'Pelm-Secret': 'YOUR_SECRET',
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: new URLSearchParams({
              user_id: 'YOUR_SUBMITTED_USER_ID',
            })
          };
          return await fetch('https://api.pelm.com/auth/connect-token', options)
            .then(response => response.json())
            .then(response => {return response['connect_token']})
            .catch(err => console.error(err));
        }
        
        const connectToken = await generateConnectToken();
        const onSuccess = (authorizationCode) => {
          // Send authorizationCode to your server and exchange for access_token
          console.log(`onSuccess called with authorizationCode: ${authorizationCode}`);
        };
        const onExit = (status, metadata) => {
          console.log(`onExit called with status ${status} and metadata ${metadata}`);
        };
        const config = {
            connectToken,
            onSuccess,
            onExit,
        }
        const handler = window.PelmConnect.create(config)

        const connectUtilityButton = document.getElementById("connect-utility-button");
        connectUtilityButton.disabled = false;
        connectUtilityButton.addEventListener("click", (event) => {
          handler.open();
        });
      })()
    </script>
  </head>
  <body>
    <h1>Pelm Connect Javascript Demo</h1>
    <button id='connect-utility-button' disabled>Connect utility</button>
  </body>
</html>

Keywords

FAQs

Last updated on 26 Oct 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc