react-pelm-connect
Advanced tools
Weekly downloads
Readme
This package provides a react wrapper over Connect, a javascript plugin that allows your users to securely and seamlessly connect their utility accounts.
npm install react-pelm-connect
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_id
s here.
More information on the Connect Token can be found in the docs here.
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 steponSuccess
: 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.
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.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) => {}
}
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
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
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>
FAQs
This package provides a react wrapper over Connect, a javascript plugin that allows your users to securely and seamlessly connect their utility accounts.
The npm package react-pelm-connect receives a total of 50 weekly downloads. As such, react-pelm-connect popularity was classified as not popular.
We found that react-pelm-connect demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.