Authentication in FlutterFlow

I want to give users of my FlutterFlow mobile/web app full access to a dynamic folder path from within my app, without the user knowing they are in Box. This means a custom app using JWT authentication using key pairs and the config.json for authentication: https://developer.box.com/guides/authentication/jwt/without-sdk/

However, FlutterFlow does not have native support for SDKs, python, or any of the languages supported in the documentation. I was wondering if anyone else has any experience using Box.com integrations with Flutter/FlutterFlow apps and if so how they did it.

Hi @DavidKing , welcome to the forum!

I’m not familiar with FlutterFlow but I suppose you could use direct HTTP calls to the API.

For JWT all you need is to request an access token.

To request an access token you will need:

  • assertion
  • box_subject_id - typically the enterprise id, can be a specific user id
  • box_subject_type - enterprise or user
  • client_id
  • client_secret
  • grant_type - urn:ietf:params:oauth:grant-type:jwt-bearer

This will be valid for 60 minutes, so remember to check if it is about to, or expired to get a new one.

Creating a JWT assertion is a rather complex process, involving decrypting the private key, creating the assertion it self and then signing the assertion.

You might want to consider the CCG, client credential grants authentication, which only requires the client id and secret.

Very important, assuming this is a web ui, it might be possible to introspect the requests and javascript and intersect the bearer token. This is a quite common issue with all web applications.

To avoid this problem you should always downscope the access token with the minimum priviledges necessary to complete the task.

I’m not sure if FlutterFlow can use REACT 17 components, if so, you might want to take a look at our UI Elements and check if there is something that suites your needs.

Let us know if this helps

Cheers

My understanding from the documentation was that to use JWT without a box.com SDK, I had to use the key pair approach to authentication. You’re saying just getting a token from an API call will work? Then, I could just setup my own UI in FlutterFlow and use a bunch of API calls for authentication, files, etc. without ever needing to find a way to incorporate Python or other code.

For a JWT configured Box application, the JWT assertion is required to get an access token and any other API request.
Might be trickier to implement in FlutterFlow, but again I’m not familiar with it.
I’ve managed to implement a JWT assertion creation using a common javascript library, your milage may vary here.

Yes! Whatever authentication method (OAuth 2.0, CCG, JWT), whatever programing language you choose, it all ends up being HTTP requests to the API.

Let me exemplify with cUrl for a simple HTTP request, using CCG authentication as it is simpler and does not need to construct an assertion.

Requesting an access token:

curl --location 'https://api.box.com/oauth2/token' \
--header 'Content-Type: application/x-www-form-urlencoded' \
--data-urlencode 'grant_type=client_credentials' \
--data-urlencode 'client_id=h5...qi' \
--data-urlencode 'client_secret=Tq...38' \
--data-urlencode 'box_subject_type=enterprise' \
--data-urlencode 'box_subject_id=877840855'

Returns:

{
    "access_token": "2L...Izy",
    "expires_in": 4299,
    "restricted_to": [],
    "token_type": "bearer"
}

With this bearer token (aka access token) I can query the API.

For example:

curl --location 'https://api.box.com/2.0/users/me?fields=id%2Ctype%2Cname%2Clogin' \
--header 'Authorization: Bearer 2L...Izy'

Returns:

{
    "type": "user",
    "id": "20706451735",
    "name": "CCG",
    "login": "AutomationUser_1803368_9rbDFPFJSf@boxdevedition.com"
}

The Box documentation you mention has examples for creating the JWT assertions in different languages. From that point on it relies on those languages support to make direct HTTP requests to the API.
The SDK versions have methods, responses and error handlers already prepared for you.

Cheers