LogoLogo
Sign UpSupported Devices
  • Seam Documentation
  • 🚲Quick Start
  • 🚀Go Live!
  • Contact Us
  • Core Concepts
    • Overview
    • Seam Console
      • Seam Online CLI
    • Workspaces
    • Authentication
      • API Keys
      • Personal Access Tokens
      • Client Sessions and Client Session Tokens
        • Implementing Client Sessions for Device Management in the Backend
    • Devices
      • Displaying Device Health
      • Displaying Device Power Status
      • Managed and Unmanaged Devices
      • Adding Custom Metadata to a Device
      • Filtering Devices by Custom Metadata
      • Testing Your App Against Device Disconnection and Removal
    • Connected Accounts
      • Adding Custom Metadata to a Connected Account
      • Filtering Connected Accounts by Custom Metadata
      • Reconnecting an Account
    • Action Attempts
  • Capability Guides
    • 📋Device and System Capabilities
    • 🔒Smart Locks
      • Locking and Unlocking Smart Locks
      • Creating and Managing Smart Lock Access Codes
        • Creating Access Codes
        • Retrieving Access Codes
        • Modifying Access Codes
        • Deleting Access Codes
        • Lifecycle of Access Codes
        • Access Code Requirements for Door Locks
        • Streamlining Access Code Management from the Manufacturer App
        • Troubleshooting Access Codes
        • Managing Backup Access Codes
        • Managing Offline Access Codes
        • Creating and Updating Multiple Linked Access Codes
        • Migrating Existing Unmanaged Access Codes
    • 🏢Access Control Systems
      • ACS Quick Starts
        • PIN Code Quick Start
        • Encodable Key Card Quick Start
        • Mobile Key Quick Start
      • Connect an ACS to Seam
        • Retrieving ACS System Details
        • Access Control System Resources
        • Understanding Access Control System Differences
      • Managing ACS Users
        • Suspending and Unsuspending ACS Users
        • Assigning ACS Users to Access Groups
      • Retrieving Entrance Details
      • Managing Credentials
        • Assigning Credentials to ACS Users
        • Listing Credentials and Associated Entrances
      • Working with Card Encoders and Scanners
        • Creating and Encoding Card-based Credentials
        • Scanning Encoded Cards
      • Troubleshooting Your Access Control System
    • 📱Mobile Access
      • Prepare your Workspace
      • Managing Mobile App User Accounts with User Identities
      • Managing Phones for a User Identity
      • Issuing Mobile Credentials from an Access Control System
      • Developing in a Sandbox Workspace
      • Integrating into your Mobile Application
        • Initializing the Seam Mobile SDK
        • Handling System Permissions
        • Using Unlock With Tap
    • 🌡️Thermostats
      • Understanding Thermostat Concepts
        • HVAC Mode
        • Set Points
      • Retrieving Thermostats
      • Setting and Monitoring Temperature Thresholds
      • Setting the Current HVAC and Fan Mode Settings
      • Creating and Managing Climate Presets
        • Setting the Fallback Climate Preset
        • Activating a Climate Preset
      • Creating and Managing Thermostat Schedules
      • Testing Your Thermostat App with Simulate Endpoints
    • 👂Noise Sensors
      • Configuring Noise Threshold Settings
    • 📡Seam Bridge
  • 💻UI Components
    • 🔌Connect Webviews
      • Connect Webview Process
      • Embedding a Connect Webview in Your App
      • Verifying Successful Account Connection
      • Retrieving Devices or Access Control Systems Connected Through a Connect Webview
      • Attaching Custom Metadata to the Connect Webview
      • Filtering Connect Webviews by Custom Metadata
      • Customizing Connect Webviews
    • 🧱Seam Components
      • Getting Started with Seam Components
        • Get Started with React
        • Get started with Angular
        • Get started with Vue
        • Get started with Client Side Components
      • Components
        • Device Details
        • Device Table
        • Access Code Table
        • Access Code Details
        • Create Access Code Form
        • Update Access Code Form
        • Supported Devices Table
        • Seam Provider
        • Connect Account Button
      • Make a Supported Devices Page
      • Using User Identities to Scope Users' Device Access
  • 📋API Reference
    • Overview
    • Installation
    • Authentication
    • Workspaces
      • Get Workspace
      • Reset Workspace
    • Client Sessions
      • Create a Client Session
      • Get or Create a Client Session
      • List Client Sessions
      • Get a Client Session
      • Grant Access to a Client Session
      • Delete a Client Session
    • Connect Webviews
      • Create a Connect Webview
      • List Connect Webviews
      • Get a Connect Webview
      • Delete a Connect Webview
    • Connected Accounts
      • Get a Connected Account
      • List Connected Accounts
      • Update a Connected Account
      • Delete a Connected Account
    • Devices
      • List Devices
      • List Device Providers
      • Device Provider Metadata
      • Get a Device
      • Update a Device
      • Unmanaged Devices
        • Update an Unmanaged Device
        • List Unmanaged Devices
        • Get an Unmanaged Device
    • Access Codes
      • Create an Access Code
      • Create Multiple Linked Access Codes
      • List Access Codes
      • Get an Access Code
      • Update an Access Code
      • Update Multiple Linked Access Codes
      • Report Device Access Code Constraints
      • Delete an Access Code
      • Pull Backup Access Code
      • Unmanaged Access Codes
        • List Unmanaged Access Codes
        • Convert an Unmanaged Access Code
        • Delete an Unmanaged Access Code
    • Locks
      • Get Lock
      • Lock a Lock
      • Unlock a Lock
      • List Locks
    • Access Control Systems
      • Systems
        • List ACS Systems
        • Get an ACS System
        • List Compatible Credential Manager ACS Systems
      • ACS Users
        • Create an ACS User
        • List ACS Users
        • Get an ACS User
        • Update an ACS User
        • Suspend an ACS User
        • Unsuspend an ACS User
        • Delete an ACS User
        • Add an ACS User to an Access Group
        • Remove an ACS User from an Access Group
      • Entrances
        • List Entrances
        • Get an Entrance
        • List Credentials with Access to an Entrance
      • Access Groups
        • List Access Groups
        • Get an Access Group
        • Add an ACS User to an Access Group
        • Remove an ACS User from an Access Group
        • List ACS Users in an Access Group
      • Credentials
        • Create a Credential for an ACS User
        • Assign a Credential to an ACS User
        • List Credentials
        • Get a Credential
        • Update a Credential
        • Unassign a Credential from an ACS User
        • Delete a Credential
        • List Accessible Entrances
      • Encoders
        • Encode a Credential
        • Get an Encoder
        • List Encoders
        • Scan a Credential
        • Encoder Simulations
          • Simulate that the Next Credential Encoding Will Fail
          • Simulate that the Next Credential Encoding Will Succeed
          • Simulate that the Next Credential Scan Will Fail
          • Simulate that the Next Credential Scan Will Succeed
    • Noise Sensors
      • Noise Thresholds
        • Create Noise Thresholds
        • List Noise Thresholds
        • Update Noise Threshold
        • Delete Noise Threshold
    • Phones
      • Get a Phone
      • List Phones
      • Deactivate a Phone
      • Phone Simulations
        • Create a Sandbox Phone
    • Thermostats
      • List Thermostats
      • Set to Heat Mode
      • Set to Cool Mode
      • Set to Heat-Cool (Auto) Mode
      • Set to Off Mode
      • Set the HVAC Mode
      • Set Fan Mode
      • Activate a Climate Preset
      • Create a Climate Preset
      • Update a Climate Preset
      • Delete a Climate Preset
      • Set a Fallback Climate Preset
      • Set a Temperature Threshold
      • Thermostat Schedules
        • Get a Thermostat Schedule
        • List Thermostat Schedules
        • Create a Thermostat Schedule
        • Update a Thermostat Schedule
        • Delete a Thermostat Schedule
      • Thermostat Simulations
        • Temperature Reached
        • HVAC Mode Adjusted
    • User Identities
      • Create a User Identity
      • List User Identities
      • Get a User Identity
      • Update a User Identity
      • Add an ACS User to a User Identity
      • List ACS Users Associated with a User Identity
      • List ACS Systems Associated with a User Identity
      • Remove an ACS User from a User Identity
      • Grant a User Identity Access to a Device
      • List Accessible Devices for a User Identity
      • Revoke Access to a Device from a User Identity
      • Delete a User Identity
      • Enrollment Automations
        • Launch an Enrollment Automation
        • List Enrollment Automations
        • Get an Enrollment Automation
        • Delete an Enrollment Automation
    • Action Attempts
      • Get Action Attempt
    • Events
      • List Events
      • Get an Event
  • 🛠️Developer Tools
    • Webhooks
    • Seam CLI
    • Sandbox Devices and Systems
      • Sandbox 2N Intercoms
      • Sandbox 4SUITES Locks
      • Sandbox Akiles Locks
      • Sandbox ASSA ABLOY Credential Services
      • Sandbox ASSA ABLOY Visionline Access Control System
      • Sandbox August Locks
      • Sandbox Avigilon Alta Access System
      • Sandbox Brivo Access
      • Sandbox ControlByWeb Relays
      • Sandbox Doorking Callboxes
      • Sandbox dormakaba Oracode Locks
      • Sandbox ecobee Thermostats
      • Sandbox Genie Garage Openers
      • Sandbox Google Nest Thermostats
      • Sandbox Honeywell Resideo Thermostats
      • Sandbox igloohome Locks
      • Sandbox Kwikset Locks
      • Sandbox Latch Access Control System
      • Sandbox Linear Callboxes
      • Sandbox Lockly Locks
      • Sandbox Minut Sensors
      • Sandbox NoiseAware Sensors
      • Sandbox Nuki Locks
      • Sandbox PTI Storlogix Cloud
      • Sandbox Salto KS Access Control System
      • Sandbox Salto Locks
      • Sandbox Salto Space Access System
      • Sandbox Schlage Encode Locks
      • Sandbox Seam Bridge
      • Sandbox SmartThings Hub
      • Sandbox Tedee Locks
      • Sandbox TTLock Locks
      • Sandbox Wyze Locks
      • Sandbox Yale Locks
    • Rate Limits and Guardrails
    • Mobile SDKs
      • Android SDK
      • iOS SDK
  • 🎛️Device and System Integration Guides
    • Overview
    • 2N Intercom Systems
      • Get started with 2N Intercoms
    • 33 Lock Devices
      • Get started with 33 Lock devices
    • 4SUITES Locks
      • Get started with 4SUITES locks
    • Akiles Locks
      • Get started with Akiles locks
    • ASSA ABLOY Credential Services
    • ASSA ABLOY Visionline Access Control System
      • Visionline ACS Setup Instructions
        • Developing and Launching Your Visionline Plastic Card Encoding App
          • Developing Your Visionline Plastic Card Encoding App Using a Real Visionline Server
            • Step 1: Install Your Visionline Application
            • Step 2: Unblock Required Ports
            • Step 3: Configure a Visionline User Account
            • Step 4: Install a Visionline Card Encoder
            • Step 5: Set up Door Locks
            • Step 6: Program Door Locks
            • Step 7: Create a Production Workspace
            • Step 8: Connect Your Visionline Development Account to Seam
            • Next Steps
          • Developing Your Visionline Plastic Card Encoding App Using a Sandbox Workspace
            • Step 1: Create a Sandbox Workspace
            • Step 2: Connect the Virtual Visionline ACS to Seam
            • Next Steps
          • Launching Your Visionline Plastic Card Encoding App to a Live Site
            • Step 1: Confirm That Your Visionline Site Meets the Requirements
            • Step 2: Configure a Visionline User Account
            • Step 3: Purchase and Import the Callback Option from ASSA ABLOY
            • Step 4: Create a Production Workspace
            • Step 5: Connect Your Visionline Production Account to Seam
        • Developing and Launching Your Visionline Mobile Key App
          • Developing Your Visionline Mobile Key App
            • Step 1: Complete the ASSA ABLOY Mobile Development Course
            • Step 2: Install Your Visionline Application
            • Step 3: Unblock Required Ports
            • Step 4: Configure a Visionline User Account
            • Step 5: Set up Your Credential Services Account in Visionline
            • Step 6: Configure the Mobile Access UUID in Visionline
            • Step 7: Set up Door Locks with BLE Profiles
            • Step 8: Program Door Locks
            • Step 9: Create a Production Workspace
            • Step 10: Connect Your Visionline Development Account to Seam
            • Next Steps
          • Launching Your Visionline Mobile Key App
            • Step 1: Obtain ASSA ABLOY Certification for Your Mobile Key App
            • Step 2: Confirm That Your Visionline Site Meets the Requirements
            • Step 3: Confirm BLE Module on All Locks
            • Step 4: Set up Door Locks with BLE Profiles
            • Step 5: Program Door Locks
            • Step 6: Configure a Visionline User Account
            • Step 7: Purchase and Import the Callback and Mobile Service Options from ASSA ABLOY
            • Step 8: Create a Production Workspace
            • Step 9: Connect Your Visionline Production Account to Seam
      • Configuring Visionline Mobile Credentials
        • Issuing Various Types of Guest Mobile Credentials
        • Issuing Various Types of Guest Joiner Mobile Credentials
        • Retrieving Guest and Common Entrances
        • Checking if a User Identity Has a Phone That Is Set up for a Credential Manager
        • Updating Guest Mobile Credentials
        • Revoking Mobile Credentials
      • Mobile Credential-Related Properties
      • Common Use Cases
      • Special Requirements for Android Mobile Access SDK Development
      • Special Requirements for iOS Mobile Access SDK Development
      • Creating Visionline Card-based Credentials
    • August Locks
      • Get started with August locks
    • Avigilon Alta Access System
    • Brivo Access
    • Get started with ControlByWeb Devices
    • dormakaba Oracode Locks
      • Get started with dormakaba Oracode Locks
      • Creating dormakaba Oracode Offline Access Codes
    • ecobee Thermostats
      • Get Started with ecobee Thermostats
    • Google Nest Thermostats
      • Get Started with Nest Thermostats
      • Obtain Google Nest Device Access and Commercial Development
    • Honeywell Resideo Thermostats
      • Get Started with Honeywell Resideo Thermostats
    • igloohome Locks
      • Get started with igloohome Locks
      • Creating igloohome Offline Access Codes
    • Kwikset Locks
      • Get started with Kwikset Wi-Fi Locks
    • Latch Access Control System
      • Latch ACS Setup Instructions
      • Programming Code-Based Latch Credentials
      • Programming Latch ACS Mobile Credentials
    • Lockly Locks
      • Creating Lockly Offline Access Codes
    • Minut Sensors
      • Get started with Minut Sensors
    • NoiseAware Sensors
      • Get started with NoiseAware Sensors
    • Nuki Locks
      • Get Started with Nuki Locks
    • PTI Storlogix Cloud
    • Salto KS Access Control System
      • Salto KS Setup Instructions
      • Programming Salto KS PIN Code Credentials
      • Programming Salto KS Mobile Credentials
      • Special Requirements for Android Mobile Access SDK Development
    • Salto KS Locks
      • Get started with Salto KS Locks
    • Salto ProAccess Space Access System
      • Salto Space Setup Instructions
      • Programming Salto Space Card-based Credentials
      • Programming Salto Space Mobile Credentials
    • Schlage Locks
      • Schlage Locks Setup Instructions
      • Get started with Schlage Locks
    • SmartThings Hubs + Smart Locks
      • Get started with SmartThings Hubs + Smart Locks
    • Tedee Locks
      • Get Started with Tedee Locks
    • TTLock Locks
      • Get started with TTLock Locks
    • Wyze Locks
      • Get started with Wyze Locks
    • Yale Locks
      • Get started with Yale Locks
    • Get started with Smart Locks
  • Device Manufacturer Guidance
    • Creating a Seam-Compatible Intercom API
      • Creating OAuth Endpoints
      • Creating Intercom CRUD Endpoints
      • Creating Access Code CRUD Endpoints
      • Creating the Health Endpoint
    • Creating a Seam-Compatible Door Locks API
      • Creating OAuth Endpoints
      • Creating Door Lock CRUD Endpoints
      • Creating Access Code CRUD Endpoints
      • Creating the Health Endpoint
Powered by GitBook
LogoLogo

Get Started

  • Sign Up
  • Supported Devices

News

  • Changelog
  • Blog

Company

  • About
  • Privacy Notice

© Seam Labs, Inc. All rights reserved.

On this page
  • Overview
  • What is a Client Session Token?
  • 1 — Install the Seam SDK on your Server
  • 2 - Install @seamapi/react in your React application
  • 3 — Create a Seam Client Session on your Server, and pass it to the Client
  • 4 - Use Your Client Session Token to Display a User's Devices
  • Next Steps

Was this helpful?

Edit on GitHub
  1. UI Components
  2. Seam Components
  3. Getting Started with Seam Components

Get Started with React

Learn to use Seam Components with your React application

PreviousGetting Started with Seam ComponentsNextGet started with Angular

Last updated 5 months ago

Was this helpful?

Overview

Seam Components may be used on any website, in any web app, and with any framework.

For this guide, we expect you to have a backend server and a client frontend react application. If you want to integrate Seam using only a client without a backend, you'll need to .

Seam provides React components and hooks to connect and control many types of smart devices. This guide provides a rapid introduction to using React components with Client Sessions.

What is a Client Session Token?

A Client Session Token allows a device owner to make API requests to Seam where interactions are restricted only to the devices they own. To enable your users to interact with their devices, you'll need to create a client session and pass its token to the <SeamProvider />.

1 — Install the Seam SDK on your Server

Seam provides client libraries for many languages such as Javascript, Python, Ruby, and PHP, as well as a Postman collection and spec.

  • Javascript: npm i seam (, )

  • Python: pip install seam (, )

  • Ruby: bundle add seam (, )

  • PHP: composer require seamapi/seam (, )

Once installed, to get your API key, and export it as an environment variable:

$ export SEAM_API_KEY=seam_test2ZTo_0mEYQW2TvNDCxG5Atpj85Ffw

This guide uses a Sandbox Workspace. Only virtual devices can be connected. If you need to connect a real August Lock, use a non-sandbox workspace and API key.

2 - Install @seamapi/react in your React application

npm install --save @seamapi/react

3 — Create a Seam Client Session on your Server, and pass it to the Client

We'll start by writing some server code that returns a client session. There are a lot of ways to do this depending on your server framework:

  • Create an endpoint such as /api/seam/get_client_session and call it from your frontend app.

  • Inject the client session token in your html if you're using an HTML templating engine.

For this guide, we'll assume you're creating an endpoint that will return a client session token. This is often appropriate for Single Page Applications.

import { Seam } from "seamapi"

export default (req, res) => {
  // Handle authentication logic.
  const userId = req.auth.userId

  // Pull any connected accounts associated with this user.
  // If the user will create connect webviews from the client using the client session token,
  // e.g., via the <ConnectAccountButton /> component,
  // ensure your application associates those connected account ids here,
  // otherwise the client will not see devices connected from those accounts.
  const accountsAssociatedWithUser = [{ seamConnectedAccountId: "..." }]

  const seam = new Seam()

  // Get or create the client session for the user.
  // Pass an array of connected_account_ids, connect_webview_ids or both.
  // If the client session already exists, Seam will update the allowed connected_account_ids
  // and connect_webview_ids to the latest value provided here.
  const clientSession = await seam.clientSessions.getOrCreate({
    user_identifier_key: userId,
    connected_account_ids: accountsAssociatedWithUser.map(
      (acc) => acc.seamConnectedAccountId
    ),
  })

  res.status(200).json({
    token: clientSession.token,
  })
}
<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class SeamController extends Controller
{
    public function getSeamClientSession()
    {
      // Handle authentication logic.
      $userId = request()->userId;

      // Pull any connected accounts associated with this user.
      // If the user will create connect webviews from the client using the client session token,
      // e.g., via the <ConnectAccountButton /> component,
      // ensure your application associates those connected account ids here,
      // otherwise the client will not see devices connected from those accounts.
      $accountsAssociatedWithUser = array(["seamConnectedAccountId" => "..."]);

        $data = [
            // Get or create the client session for the user.
            // Pass an array of connected_account_ids, connect_webview_ids or both.
            // If the client session already exists, Seam will update the allowed connected_account_ids
            // and connect_webview_ids to the latest value provided here.
            'seamClientSession' => $seam->client_sessions->get_or_create(
              connected_account_ids: array_column($accountsAssociatedWithUser, 'seamConnectedAccountId');
            )
        ];

        return response()->json($data);
    }
}
// routes/api.php
// ...
Route::get('/seam/get_seam_client_session', 'Api\SeamController@getSeamClientSession');
// ...

Awesome! We can now request this from the frontend client application using a hook like this:

// lib/hooks/use-seam-client-session-token.js
import { useState, useEffect } from "react"

export const useSeamClientSessionToken = () => {
  const { myAppAuthToken } = useAuth() // or however you manage client side auth
  const [token, setToken] = useState()

  useEffect(async () => {
    const res = await fetch("/api/seam/get_client_session", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${myAppAuthToken}`,
      },
    })
    if (res.ok) {
      const data = await res.json()
      setToken(res.token)
    }
  }, [myAppAuthToken])

  return token
}

Why do we need the backend for getting the Client Session Token? It allows you to use your application's existing authentication! If you want to have Seam handle all the user authentication, you can use a publishable key, but we recommend using client session tokens!

4 - Use Your Client Session Token to Display a User's Devices

import { SeamProvider, DeviceTable } from "@seamapi/react"
import { useSeamClientSessionToken } from "lib/hooks/use-seam-client-session-token"

export const App = () => {
  const clientSessionToken = useSeamClientSessionToken()
  if (clientSessionToken == null) return <p>Loading...</p>
  return (
    <SeamProvider clientSessionToken={clientSessionToken}>
      <DeviceTable />
    </SeamProvider>
  )
}

You should see a list of devices like what's shown below:

Next Steps

If you have any questions or want to report an issue, email us at support@seam.co.

For most applications, the user_identifier_key below should be be your internal user id. For a detailed explanation, see .

running Seam Components in various frameworks.

View and play with components in the

Check out some

💻
🧱
use a Publishable Key
OpenAPI
npm
github
pip
github
rubygem
github
packagist
github
sign-up for Seam
Minimal sample apps
interactive storybook component library
Full Example Apps
selecting a user Identifier key
Device Table React Component