Getting Started

To start with Drop-In Components, we first need to authenticate a client-side SDK with a user-specific accessToken. This ensures all communication from the Drop-In Components are secure and only for a specifc user.

In this guide, we walk you through how to:

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. You can also follow the Getting Started guide to create a User.

curl \
  --request POST \
  --url https://sandbox-api.withabound.com/<<apiVersion>>/users \
  --header 'Authorization: Bearer <<apiKey>>' \
  --header 'Content-Type: application/json' \
  --data '{
    "user": {
      "email": "[email protected]",
      "profile": {
        "firstName": "Ada",
        "lastName": "Lovelace",
        "address": "256 Byron Street",
        "address2": "Suite 32",
        "city": "Palo Alto",
        "state": "CA",
        "zipcode": "94306",
        "country": "US",
        "phoneNumber": "6505551010",
        "dateOfBirth": "1815-12-10",
        "socialSecurityNumber": "101456789"
      }
    }
  }'

const { default: Abound, Environment } = require("@withabound/node-sdk");

const abound = new Abound({
  appId: "<<sandbox_app_id>>",
  appSecret: "<<sandbox_app_secret>>",
  environment: Environment.SANDBOX,
  apiVersion: "<<apiVersion>>",
});

(async () => {
  const response = await abound.users.create({
    email: "[email protected]",
    profile: {
      firstName: "Ada",
      lastName: "Lovelace",
      address: "256 Byron Street",
      address2: "Suite 32",
      city: "Palo Alto",
      state: "CA",
      zipcode: "94306",
      country: "US",
      phoneNumber: "6505551010",
      dateOfBirth: "1815-12-10",
      socialSecurityNumber: "101456789",
    },
  });

  console.log(response);
})();

import requests

url = "https://sandbox-api.withabound.com/<<apiVersion>>/users"

payload = {"user": {
        "profile": {
            "firstName": "Ada",
            "lastName": "Lovelace",
            "address": "256 Byron Street",
            "address2": "Suite 32",
            "city": "Palo Alto",
            "state": "CA",
            "zipcode": "94306",
            "country": "US",
            "phoneNumber": "6505551010",
            "dateOfBirth": "1815-12-10",
            "socialSecurityNumber": "101456789"
        },
        "email": "[email protected]"
    }}
headers = {
    "Accept": "application/json",
    "Content-Type": "application/json",
    "Authorization": "Bearer <<apiKey>>"
}

response = requests.request("POST", url, json=payload, headers=headers)

print(response.text)

//import com.withabound.AboundConfig;
//import com.withabound.models.*;
//import  com.withabound.resources.base*;

AboundConfig aboundConfig = new AboundConfig(
  "<<sandbox_app_id>>",
  "<<sandbox_app_secret>>",
  AboundEnvironment.SANDBOX,
  AboundApiVersion.<<apiVersionUppercase>>
);

AboundResponse<User> response = abound.users().create(UserRequest.builder()
  .email("[email protected]")
  .profile(UserProfile.builder()
    .firstName("Ada")
    .lastName("Lovelace")
    .address("256 Byron Street")
    .address2("Suite 32")
    .city("Palo Alto")
    .state("CA")
    .zipcode("94306")
    .phoneNumber("6505551010")
    .dateOfBirth("1815-12-10")
    .socialSecurityNumber("101456789")
    .build())
  .build());

System.out.println(response.getData().getUserId());

package main

import (
    "bytes"
    "fmt"
    "net/http"
    "io/ioutil"
)

func main() {

    url := "https://sandbox-api.withabound.com/<<apiVersion>>/users"

    var requestBody = []byte(`{
        "user": {
            "email": "[email protected]",
            "profile": {
                "firstName": "Ada",
                "lastName": "Lovelace",
                "address": "256 Byron Street",
                "address2": "Suite 32",
                "city": "Palo Alto",
                "state": "CA",
                "zipcode": "94306",
                "country": "US",
                "phoneNumber": "6505551010",
                "dateOfBirth": "1815-12-10",
                "socialSecurityNumber": "101456789"
            }
        }
    }`)

    req, _ := http.NewRequest("POST", url, bytes.NewBuffer(requestBody))

    req.Header.Add("Accept", "application/json")
    req.Header.Add("Content-Type", "application/json")
    req.Header.Add("Authorization", "Bearer <<apiKey>>")

    res, _ := http.DefaultClient.Do(req)

    defer res.Body.Close()
    body, _ := ioutil.ReadAll(res.Body)

    fmt.Println(res)
    fmt.Println(string(body))

}

// using RestSharp;

var client = new RestClient("https://sandbox-api.withabound.com/<<apiVersion>>/users");
var request = new RestRequest(Method.POST);
request.AddHeader("Accept", "application/json");
request.AddHeader("Content-Type", "application/json");
request.AddHeader("Authorization", "Bearer <<apiKey>>");
request.AddJsonBody(new {
  user = new {
    email = "[email protected]",
    profile = new {
      firstName =  "Ada",
      lastName = "Lovelace",
      address = "256 Byron Street",
      address2 = "Suite 32",
      city = "Palo Alto",
      state = "CA",
      zipcode = "94306",
      country = "US",
      phoneNumber = "6505551010",
      dateOfBirth = "1815-12-10",
      socialSecurityNumber = "101456789"
    }
  }
});
IRestResponse response = client.Execute(request);

require 'uri'
require 'net/http'
require 'openssl'
require 'json'

url = URI("https://sandbox-api.withabound.com/<<apiVersion>>/users")
requestBody = {
  user: {
    email: '[email protected]',
    profile: {
      firstName: 'Ada',
      lastName: 'Lovelace',
      address: '256 Byron Street',
      address2: 'Suite 32',
      city: 'Palo Alto',
      state: 'CA',
      zipcode: '94306',
      country: 'US',
      phoneNumber: '6505551010',
      dateOfBirth: '1815-12-10',
      socialSecurityNumber: '101456789'
    }
  }
}

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Accept"] = 'application/json'
request["Content-Type"] = 'application/json'
request["Authorization"] = 'Bearer <<apiKey>>'
request.body = requestBody.to_json

response = http.request(request)
puts response.read_body

2: Create an `accessToken`

From your app's backend request an accessToken by passing in a specific userId . This access token can be securely sent to your app's frontend and should be used to authenticate the Client SDK during one of your end-user's authenticated sessions.

❗
An accessToken will expire after 24 hours. Use the expirationTimestamp to know when you will need to generate a new accessToken.

const { default: Abound, Environment } = require("@withabound/node-sdk");

const abound = new Abound({
  appId: "<<sandbox_app_id>>",
  appSecret: "<<sandbox_app_secret>>",
  environment: Environment.SANDBOX,
  apiVersion: "<<apiVersion>>",
});

(async () => {
  const response = await abound.accessTokens.create({
    userId: "<<testUserId>>"
  });
  
  const { accessToken, expirationTimestamp } = response.data

  console.log(accessToken); // <<testAccessToken>>
  console.log(expirationTimestamp); // 1655150065507
})();

import requests

url = "https://sandbox-api.withabound.com/<<apiVersion>>/users/userId_test24b05d761ff58b5931bd07778c67b4e818e4/accessToken"

payload = {}
headers = {
    "Accept": "application/json",
    "Content-Type": "application/json",
    "Authorization": "Bearer appId_test48e7eaa3175a66354e00626542d2.appSecret_testf54672359db6693429e1d3e14e2c"
}

response = requests.request("POST", url, json=payload, headers=headers)

print(response.data.accessToken) #accessToken_e502629a0a4a4f06a836fdf817dda2a4

import org.json.simple.JSONObject;
import com.withabound.*;

public static void main(String[] args) {
    AboundConfig aboundConfig = new AboundConfig(
    "appId_test48e7eaa3175a66354e00626542d2",
    "appSecret_testf54672359db6693429e1d3e14e2c",
    AboundEnvironment.SANDBOX,
    AboundApiVersion.<<apiVersionUppercase>>
  );

  Abound abound = new Abound(aboundConfig);
  AboundResponse<AccessToken> response = abound
    .accessTokens()
    .create();

  JSONParser parser = new JSONParser();
  
  JSONObject jsonObject = (JSONObject) parser.parse(response);
  System.out.println(jsonObject.data.accessToken); //accessToken_e502629a0a4a4f06a836fdf817dda2a4
}

curl \
  --request POST \
  --url https://sandbox-api.withabound.com/<<apiVersion>>/accessTokens \
  --header 'Authorization: Bearer <<apiKey>>' \
  --header 'Content-Type: application/json' \
  --data '{
    "accessToken":{
        "userId":"<<testUserId>>"
    }
  }'

require 'uri'
require 'net/http'
require 'openssl'
require 'json'

url = URI("https://sandbox-api.withabound.com/<<apiVersion>>/accessTokens")
requestBody = {
    userId:'<<testUserId>>'
}

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Accept"] = 'application/json'
request["Content-Type"] = 'application/json'
request["Authorization"] = 'Bearer <<apiKey>>'
request.body = requestBody.to_json

response = http.request(request)
puts response.read_body

// using RestSharp;

var client = new RestClient("https://sandbox-api.withabound.com/<<apiVersion>>/accessTokens");
var request = new RestRequest(Method.POST);
request.AddHeader("Accept", "application/json");
request.AddHeader("Content-Type", "application/json");
request.AddHeader("Authorization", "Bearer <<apiKey>>");
request.AddJsonBody(new {
  userId = "<<testUserId>>"
});
IRestResponse response = client.Execute(request);

package main

import (
    "bytes"
    "fmt"
    "net/http"
    "io/ioutil"
)

func main() {

    url := "https://sandbox-api.withabound.com/<<apiVersion>>/accessTokens"

    var requestBody = []byte(`{
        "userId": "<<testUserId>>"
    }`)

    req, _ := http.NewRequest("POST", url, bytes.NewBuffer(requestBody))

    req.Header.Add("Accept", "application/json")
    req.Header.Add("Content-Type", "application/json")
    req.Header.Add("Authorization", "Bearer <<apiKey>>")

    res, _ := http.DefaultClient.Do(req)

    defer res.Body.Close()
    body, _ := ioutil.ReadAll(res.Body)

    fmt.Println(res)
    fmt.Println(string(body))

}

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 Abound from "https://js.withabound.com/latest/abound-client-sdk.js";

            // authenticate the Abound Client SDK for an Abound user
            const abound = new Abound({
                accessToken: "<<testAccessToken>>",
            });
        </script>
    </body>
</html>

import React, { useCallback, useState } from "react";
import { Abound } from "@withabound/react-client-sdk";

const abound = new Abound({
  accessToken: "<<testAccessToken>>",
});

const { TaxProfile } = abound;

import React, { useCallback, useState } from "react";
import { View, Text } from "react-native";
import { Abound } from "@withabound/react-native-client-sdk";

const abound = new Abound({
  accessToken: "<<testAccessToken>>",
});

const { TaxProfile } = abound;

import SwiftUI
import Abound

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

1: Create a User

2: Create an accessToken

❗

3: Authenticate the Client SDK

2: Create an `accessToken`