Skyflow React JS SDK with Vite

This project demonstrates how to integrate the Skyflow React JS SDK into a Vite + React application.

---

Table of Contents

• Prerequisites
• Getting Started
  • Create a Vite React App
  • Install Skyflow React SDK
  • Create the vault
    • Create a service account
    • Create a bearer token generation endpoint
  • Configure environment variables
  • Setup Provider
  • Use Skyflow Elements
  • Run the Project
• Resources

---

🧰 Prerequisites

• Vite version 6.3.5 or higher
• A Skyflow account (Sign up at Try Skyflow)
• React 17.x or above

🚀 Getting Started

1. Create a Vite React App

npm create vite@latest skyflow-sample -- --template react
cd skyflow-sample
npm install

For TypeScript, use --template react-ts instead.

---

2. Install Skyflow React SDK

npm install skyflow-react-js

---

3. Create the vault

1. In a browser, navigate to Skyflow Studio.
2. Create a vault by clicking Add Vault > Start With a Template > Quickstart vault.
3. Once the vault is created, click the gear icon and select Vault Details.
4. Note your Vault URL and Vault ID values. You'll need these later.

Create a service account

1. In the side navigation click, Access > Service Accounts > Add Service Account.
2. For Name, enter "SDK Samples". For Roles, choose Vault Editor.
3. Click Create. Your browser downloads a credentials.json file. Keep this file secure. You'll need it for each of the samples.

Create a bearer token generation endpoint

1. Create a new directory named bearer-token-generator.

    mkdir bearer-token-generator
   

2. Navigate to bearer-token-generator directory.

    cd bearer-token-generator
   

3. Initialize npm

    npm init
   

4. Install skyflow-node

    npm i skyflow-node
   

5. Move the downloaded “credentials.json” file #Create a service account account into the bearer-token-generator directory.

6. Create index.js file

7. Open index.js file

8. Populate index.js file with below code snippet

const express = require("express");
const app = express();
const cors = require("cors");
const port = 3000;
const {
   generateBearerToken,
   isExpired
} = require("skyflow-node");

app.use(cors());

let filepath = "credentials.json";
let bearerToken = "";

const getSkyflowBearerToken = () => {
   return new Promise(async (resolve, reject) => {
       try {
           if (!isExpired(bearerToken)) {
               resolve(bearerToken);
           }
           else {
               let response = await generateBearerToken(filepath);
               bearerToken = response.accessToken;
               resolve(bearerToken);
           }
       } catch (e) {
           reject(e);
       }
   });
}

app.get("/", async (req, res) => {
 let bearerToken = await getSkyflowBearerToken();
 res.json({"accessToken" : bearerToken});
});

app.listen(port, () => {
 console.log(`Server is listening on port ${port}`);
})

9. Start the server

node index.js

Server will start at localhost:3000

4. Configure environment variables

• Create .env if doesn't exist in project directory

  touch .env 

• Update the environment variables:

  • Replace <VAULT_ID>, <VAULT_URL>, and <TOKEN_ENDPOINT_URL> with the actual values.

    echo VAULT_ID=<VAULT_ID> VAULT_URL=<VAULT_URL> TOKEN_ENDPOINT_URL=<TOKEN_ENDPOINT_URL> > .env

• Note: TOKEN_ENDPOINT_URL is the actual endpoint URL which will return the bearer token.

5. Setup Provider in main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import {Env, LogLevel, SkyflowElements} from 'skyflow-react-js'
import App from './App'

const getBearerToken = () => {
  return new Promise<string>((resolve, reject) => {
    const Http = new XMLHttpRequest();

    Http.onreadystatechange = () => {
      if (Http.readyState === 4) {
        if (Http.status === 200) {
          const response = JSON.parse(Http.responseText);
          resolve(response.accessToken);
        } else {
          reject('Error occured');
        }
      }
    };

    Http.onerror = () => {
      reject('Error occured');
    };

    const url = process.env.TOKEN_ENDPOINT_URL || ""
    Http.open('GET', url)
    Http.send()
  })
}

const config = {
  vaultID: process.env.VAULT_ID || "",
  vaultURL: process.env.VAULT_URL || "",
  getBearerToken: getBearerToken,
  options: {
    logLevel: LogLevel.DEBUG,
    env: Env.PROD,
  },
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <SkyflowElements config={config}>
    <App />
  </SkyflowElements>
)

---

6. Use Skyflow Elements in App.tsx

import React from 'react'
import { CardNumberElement, useCollectContainer } from 'skyflow-react-js'

export default function App() {
  const container = useCollectContainer()

  const handleSubmit = async () => {
    try {
      const res = await container.collect()
      console.log(res)
    } catch (err) {
      console.error(err)
    }
  }

  return (
    <div>
      <CardNumberElement
        container={container}
        table="cards"
        column="cardNumber"
        label="Card Number"
      />
      <button onClick={handleSubmit}>Collect</button>
    </div>
  )
}

🧷 To explore more working examples, refer to the Skyflow React sample here

---

7. Run the Project

npm run dev

---

📚 Resources

• Skyflow React JS SDK
• Vite Documentation
• Skyflow Developer Docs

---