Skip to content

Bubble Token Gating

alt text

Sign in your bubble application with token gating through the XYZ App.

General Flow:

  1. You will need to have xyz app installed in your mobile phone
  2. Login to unbox studio https://clx-cladmin.uat.unboxuniverse.io/
  3. Create oauth2 app in unbox studio with type Public
  4. Once you have the oauth2 app you will need at least client id and redirect uri as mandatory field
  5. Follow instruction to generate the access token that we will describe in this doc https://clx-webx-authorization- server.dev.unboxuniverse.io/documentation/index.html#requirements
  6. With regards the bubble integration you will need to create plugin to manage the flow to get the access token

Bubble Integration

alt text

As the picture attached above you will see the workflow to generate the QR to scan it with ZYZ app and you will get the access token. Before we explain the workflow above here is the plugins that need to be created in Bubble:

  1. Plugin verifierActionCreate is the plugin action to generate 12 random string as per webx authorization requirements and this result will next be called as code_verifier. You can refer to the function that created in here https://github.com/curityio/pkce- javascript-example?tab=readme-ov-file#creating-the-verifier
  2. Plugin generateCode codeChallengeInput A is the plugin elements that will generate code challenge with parameter code_verifier in verifierActionCreate’s result. You can refer to the function here https://github.com/curityio/pkce- javascript-example?tab=readme-ov-file#hashing-the-verifier

Login Page Flow

  1. Create button login that will use for to generate and redirect it to infinity login contains QR to login
  2. Generate the code_verifier with plugin verifierActionCreate and save it as localstorage browser or cookies or state that can be use to decode the code_challenge after redirected browser
  3. Generate the code_challenge based on code_verifier in previous step with plugin element called generateCode codeChallengeInput A
  4. Prepare to open external URL flow with the code_challenge result generated as params in the url.

[https://clx-webx-authorization- server.dev.unboxuniverse.io/oauth2/authorize?response_type=code&client_id=${client_id} &code_challenge_method=S256&scope=openid&redirect_uri=${redirect_uri}&code_challe nge=${code_challenge_params}]

alt text

If you look detail in the url there are some parameter like: client_id: is generated by unbox studio when you create oauth2 app redirect_uri: is url in bubble for the next callback after you successfully scan the QR.

code_challenge_params is the code that generated by plugin in bubble that you created

alt text

If everything goes well, your website will be open the url above and redirected back to your bubble website depend on your input in studio for redirect_uri.

Redirect URI or Callback Page

alt text

In this step you will need to get url params called as code returnset from webx authorization server. Next step you will need to use that code to exchange it as

access_token to internal api access such as access the pubkey and vault check presence. Here is the detail endpoin that you will need to trigger once you have the code.

BASE_URI_WEBX_AUTH: https://clx-webx-authorization-server.dev.unboxuniverse.io BASE_URI_OFFCHAIN_BACKEND: https://clx-pgcluster-offchain- backend.dev.unboxuniverse.io

1. RequestToken: Request call POST endpoint

Endpoint:

BASE_URI_WEBX_AUTH/oauth2/token with this options details:

Body payload:

grant_type: “authorization_code”, code: ${code_params_in_url}, redirect_uri: ${redirect_uri}, client_id: ${client_id} code_verifier: ${code_verifier}

*code_verifier is the code that you use to generate the code challenge in login page

Headers:

‘Content-Type’: ‘application/x-www-form-urlencoded’

Response:

Access_token: ‘ey ’, expires: 3000, refresh_token: null, scope: “openid”, token_type: “Bearer”,

2. GetUserInfo: Request call GET with header Authorization access_token from requestToken.

Endpoint:

BASE_URI_WEBX_AUTH/openid/userinfo

Headers:

‘Authorization’: ‘Bearer ${access_token}’

Response:

pubkey: “ed25519_pk ”

3. GetVaultPresence: request GET to offchain url to get tokens in someone’s vault

Endpoint:

BASE_URI_OFFCHAIN_BACKEND/identity/${pubkey}/identity_token

*pubkey is the response from endopint getUserInfo

Response:

{ “content”: [ { “ucoin_id”: “616331383537353161646132623836353461636265356338653930373535313430 31653638396437393861373436356663653131376336316334323764316338”, “ucoin_name”: “string”, “items”: [ { “amount”: 0, “coin_type”: “Spendable”, “funder_pkh”: “42758663e0930595d6beddb20c9364d16b925ce7c1a3a16be0e97183e01875b1”, “minting”: “string” } ] } ], “total_pages”: 0, “total_elements”: 0, “time”: “2024-08-29T09:19:08.818Z” }