Part IV ➝ Accounts, organizations, organization membership and data upload

[jimmylee]

What will I know after finishing this?

We will be managing accounts that need access to our APIs and services, so I've built a simple system to start with. This system will extend easily if we decide to add "Sign in with Bluesky" in the future.

By the way... to the people reading this on the internet, these aren't real keys or values. In addition only accounts that have been verified can do anything, and there is no way to verify publicly right now :-)

You will learn the following things:

• How to create accounts and get api keys.
• How to create an organization
• How to upload data using pre-signed URLs.

If you have any questions, do not hesitate to ask!

How do I create an account?

Not a developer?
Want to try this on a website? Visit: https://users.garden

Run the following CURL script in your terminal:

curl -X POST "https://api.internet.dev/api/users/authenticate" \
     -H "Content-Type: application/json" \
     -d '{"email": "cupcake@internet.dev", "password": "dadada", "source": "users.garden"}'

You'll get this as a response on success:

{
  "user": {
    "id": "9d764479-12a3-439a-99b0-258459455054",
    "email": "cupcake@internet.dev",
    "key": "INT-f35d29a1-fab4-4a99-b669-DEV-41ca8a3e-5136-4e0e-b76a",
    "level": "2",
    "data": {},
    "created_at": "2023-12-28T09:37:18.201Z",
    "updated_at": "2023-12-28T09:37:18.201Z",
    "deleted_at": null
  },
  "existing": true
}

If this is a new account, you will receive an e-mail you have to verify within 30 minutes.

Be careful with how you use the key, based on your level you have access to different API methods. If you leak it, we'll have to delete your user.

How do I create an organization?

If you are an admin at the Internet Development Studio Company, you can create an organization by following the instructions below. Otherwise, you should join yours by visiting https://users.garden.

An organization is required before you upload data. Data is organized by the organization it is part of. Organizations are based on the domain name of your e-mail. However, admin accounts can create organizations freely without this restriction.

Run the following CURL script in your terminal with your API key:

curl -X POST "https://api.internet.dev/api/organizations/create" \
     -H "Content-Type: application/json" \
     -H "X-API-KEY: INT-f35d29a1-fab4-4a99-b669-DEV-41ca8a3e-5136-4e0e-b76a" \
     -d '{"domain": "internet.dev"}'

You'll get this as a response on success:

{
  "organization": {
    "id": "73fd0539-a480-4ad9-bb80-ee0fb021f3a8",
    "name": null,
    "domain": "internet.dev",
    "data": null,
    "created_at": "2023-12-28T09:41:13.816Z",
    "updated_at": "2023-12-28T09:41:13.816Z",
    "deleted_at": null
  },
  "existing": false

Afterwards, you need to add yourself as an administrator of the organization.

curl -X POST "http://localhost:10001/api/organizations/users/add" \
     -H "Content-Type: application/json" \
     -H "X-API-KEY: ADMIN_KEY_ONLY" \
     -d '{"email": "j@internet.dev", "domain": "internet.dev", "level": 100}'

With a

• user account
• an associated organization

You can now upload a file

How do I upload a file?

Not a developer?
Want to try this on a website? Visit: https://wireframes.internet.dev/examples/features/files-s3

Uploading a file is a two part process. First have a file on your computer, you will also need to know its MIME type. If you don't know the MIME type it is easy to grab, here is a screenshot:

By using file --mime 293144301-502ab1bc-0de4-414d-8b9c-f87225d48ddc.png I was able to get the MIME type.

Next, you can run the following CURL script in your terminal with your API key:

curl -X POST "https://api.internet.dev/api/data/generate-presigned-url" \
     -H "Content-Type: application/json" \
     -H "X-API-KEY: INT-f35d29a1-fab4-4a99-b669-DEV-41ca8a3e-5136-4e0e-b76a" \
     -d '{"domain": "internet.dev", "type": "image/png", "file": "293144301-502ab1bc-0de4-414d-8b9c-f87225d48ddc.png"}'

You'll get this as a response on success:

{
  "uploadURL": "THIS_IS_A_MAGICAL_URL_REPLACE_ME",
  "fileURL": "https://intdev-global.s3.us-west-2.amazonaws.com/public/internet-dev/d6fbbf06-dc03-40be-bb3c-e33eff8bbdd2.png",
  "file": {
    "id": "48d3ecc6-24e2-41cc-a02b-0e501692e007",
    "user_id": "9d764479-12a3-439a-99b0-258459455054",
    "organization_id": "73fd0539-a480-4ad9-bb80-ee0fb021f3a8",
    "data": {
      "src": "https://intdev-global.s3.us-west-2.amazonaws.com/public/internet-dev/d6fbbf06-dc03-40be-bb3c-e33eff8bbdd2.png",
      "name": "293144301-502ab1bc-0de4-414d-8b9c-f87225d48ddc.png",
      "type": "image/png",
      "newName": "d6fbbf06-dc03-40be-bb3c-e33eff8bbdd2.png",
      "extension": "png"
    },
    "created_at": "2023-12-28T11:12:53.343Z",
    "updated_at": "2023-12-28T11:12:53.343Z",
    "deleted_at": null
  }
}

If you got here, all you need to do now is run this CURL script next with the uploadURL, you need to make sure the Content-Type is correct here:

curl -X PUT -H "Content-Type: FILE_MIME_TYPE" \
"THIS_IS_A_MAGICAL_URL_REPLACE_ME" \
--data-binary "@293144301-502ab1bc-0de4-414d-8b9c-f87225d48ddc.png"

And if you're successful, you can visit the fileURL upon success immediately.

When uploading a file using the argument --data-binary, you can either use @file-name.png or @/path/to/file-name.png if you want to call the script from a different location.

How do I see all of my uploads?

Based on who you are, you can run this CURL script:

curl -X GET "https://api.internet.dev/api/data" \
     -H "X-API-KEY: INT-f35d29a1-fab4-4a99-b669-DEV-41ca8a3e-5136-4e0e-b76a"

And if successful you'll get a response like this

{
  "data": [
    {
      "id": "48d3ecc6-24e2-41cc-a02b-0e501692e007",
      "user_id": "9d764479-12a3-439a-99b0-258459455054",
      "organization_id": "73fd0539-a480-4ad9-bb80-ee0fb021f3a8",
      "data": {
        "src": "https://intdev-global.s3.us-west-2.amazonaws.com/public/internet-dev/d6fbbf06-dc03-40be-bb3c-e33eff8bbdd2.png",
        "name": "293144301-502ab1bc-0de4-414d-8b9c-f87225d48ddc.png",
        "type": "image/png",
        "newName": "d6fbbf06-dc03-40be-bb3c-e33eff8bbdd2.png",
        "extension": "png"
      },
      "created_at": "2023-12-28T11:12:53.343Z",
      "updated_at": "2023-12-28T11:12:53.343Z",
      "deleted_at": null
    }
  ]
}

If you want to see the uploads for a specific domain, and you have admin access, run this CURL script:

curl -X GET "https://api.internet.dev/api/data" \
     -H "Content-Type: application/json" \
     -H "X-API-KEY: INT-f35d29a1-fab4-4a99-b669-DEV-41ca8a3e-5136-4e0e-b76a" \
     -d '{"domain": "your-domain.your-tld"}'

And if successful you'll get a response like this

{
  "data": [],
  "global": false,
  "domain": "your-domain.your-tld"
}

Thats it

And viola, you can see the rendered image below and now you can use it anywhere.

And now you know everything you need to use the API. Obviously you can integrate this into clients-side and server-side code and use fetch instead if you need to.