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:

  1. Create a User
  2. Create an Access Token
  3. Authenticate the Client SDK


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
1curl \
2  --request POST \
3  -url https://sandbox-api.withabound.com/v4/users \
4  --header 'Authorization: Bearer appId_test48e7eaa3175a66354e00626542d2.appSecret_testf54672359db6693429e1d3e14e2c' \
5  -header 'Content-Type: application/json' \
6  --data '{
7    "email": "your-users-email@domain.com",
8    "foreignId": "your-foreign-id"
9  }'

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
1curl \
2  --request POST \
3  --url https://sandbox-api.withabound.com/v4/access-tokens \
4  --header 'accept: application/json' \
5  --header 'content-type: application/json' \
6  --data '{
7    "userId": "userId_sampleXGMFnhOpeR",
8    "expiresIn": 900
9  }'

3: Authenticate the Client SDK

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

1<html>
2    <head>
3        <title>My App</title>
4    </head>
5    <body>
6        <script type="module">
7            import { renderW9Collection } from "https://js.withabound.com/latest-major/abound-client-sdk.js";
8
9            // authenticate the Abound Client SDK for an Abound user and render the W9 Collection component
10            renderW9Collection({
11                accessToken: "accessToken_sampleeyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE2OTY5ODczNTcsImV4cCI6MTY5Njk4NzY1NywiYXVkIjoiYXBwSWRfc2FtcGxlcU5oVmNkWVFZVSIsImlzcyI6Imh0dHBzOi8vc2FuZGJveC1hcGkud2l0aGFib3VuZC5jb20vdjQiLCJzdWIiOiJ1c2VySWRfc2FtcGxlWEdNRm5oT3BlUiJ9.-NrPVQvsnM8vJouyuP5yeFGlYb1xGgR-gS3v87p5BQk",
12                // ...
13            })
14        </script>
15    </body>
16
17</html>