Authenticating Drop-Ins

To start with Drop-In UI Components (aka "Drop-Ins"), we first need to authenticate a client-side SDK with a user-specific accessToken. This ensures all communication from your frontend are secure and only for a specific user.

In this guide, we walk you through how to:

Create a User
Create an Access Token
Authenticate the Client SDK

Diagram showing how authentication works

1: Create a User

If you already have a userId skip to Step 2.

To create a new User call the POST /users API endpoint.

curl \
  --request POST \
  -url https://sandbox-api.withabound.com/v4/users \
  --header 'Authorization: Bearer appId_test48e7eaa3175a66354e00626542d2.appSecret_testf54672359db6693429e1d3e14e2c' \
  -header 'Content-Type: application/json' \
  --data '{
    "email": "[email protected]",
    "foreignId": "your-foreign-id"
  }'

2: Create an `accessToken`

From your app's backend request an accessToken by passing a specific userId and an expiration time in seconds . This accessToken can be passed to your app's frontend (as it does not expose your apiSecret) and can be used to securely authenticate the Client SDK during one of your end-user's authenticated sessions

curl \
  --request POST \
  --url https://sandbox-api.withabound.com/v4/access-tokens \
  --header 'accept: application/json' \
  --header 'content-type: application/json' \
  --data '{
    "userId": "userId_sampleXGMFnhOpeR",
    "expiresIn": 900
  }'

3: Authenticate the Client SDK

In your app's frontend, include the Client SDK and authenticate it using the accessToken created in Step 2.

<html>
    <head>
        <title>My App</title>
    </head>
    <body>
        <script type="module">
            import { renderW9Collection } from "https://js.withabound.com/latest-major/abound-client-sdk.js";
            
            // authenticate the Abound Client SDK for an Abound user and render the W9 Collection component
            renderW9Collection({
                accessToken: "<<testAccessToken_v4>>",
                // ...
            }}
        </script>
    </body>
</html>

import SwiftUI
import Abound

@main
struct MyApp: App {
    
    public static func main() {
        Abound.accessToken = "<<testAccessToken_v4>>"
    }
  
}

1: Create a User

2: Create an accessToken

3: Authenticate the Client SDK

2: Create an `accessToken`