Answered

Migrating from getToken() to getIdToken()

  • 15 June 2021
  • 1 reply
  • 25 views

Badge +2

I’m unsure how to go about migrating from getToken() to getIdToken(), currently I have this code to make a request to my Api.

        const appId = miro.getClientId();
const clientId = appId.toString();
let token = await miro.getToken();
let boardInfo = await miro.board.info.get();
let teamInfo = await miro.account.get();
console.log(token)
return this.makeCall(() => fetch(`${this.baseUrl}/${clientId}/team/${teamInfo.id}/JiraCard/board/${encodeURIComponent(boardInfo.id)}`, {
method: 'POST',
headers: {
'Authorization': 'Bearer ' + token,
'Content-Type': 'application/json'
},
body: JSON.stringify({ "issueKey": issueKey, "x": x, "y": y })
}), (successResponse) => successResponse.json())

If I replace getToken() with getIdToken() the OAuth Token is invalid, as getIdToken() returns a different type of token. How exactly do I go about decoding getIdToken()?

icon

Best answer by Anthony Roux 16 June 2021, 12:26

Hi @manavb1,

 

Did you take a look at this migration guide? For security reason, the getIdToken() doesn’t return the access_token but a JWT token. 

 

With the previous method it was possible to retrieve the access token on the front end side which was a security threat. 

Here are the steps to handle a JWT on your backend:

  1. Extract the JWT token from the Authorization parameter in the HTTP request header.
  2. Decode the Base64-encoded JWT token and verify it with your application secret.
  3. Lookup the user data received via OAuth flow for the user and team.
  4. Perform the required application logic.

In the guide you have 2 code samples, the first one is how to retrieve the JWT token and call your internal API (to call your backend), the second one is an example on how to handle it on the backend side.

 

 It this a path to an internal API you have built?

fetch(`${this.baseUrl}/${clientId}/team/${teamInfo.id}/JiraCard/board/${encodeURIComponent(boardInfo.id)}`, {

If yes, you need to implement, in your backend, the steps described above (1 to 4).

 

To summarise: 

  • Retrieve the JWT token in the FE (you have done using getIdToken())
  • Call an internal API using the JWT (it seems you have done it)
  • On the backend side Decode the JWT and check it is valid using your Client Secret Id
  • Read the content of the JWT (user id and team id)
  • Implement your logic/make your REST API call
View original

1 reply

Userlevel 4
Badge +6

Hi @manavb1,

 

Did you take a look at this migration guide? For security reason, the getIdToken() doesn’t return the access_token but a JWT token. 

 

With the previous method it was possible to retrieve the access token on the front end side which was a security threat. 

Here are the steps to handle a JWT on your backend:

  1. Extract the JWT token from the Authorization parameter in the HTTP request header.
  2. Decode the Base64-encoded JWT token and verify it with your application secret.
  3. Lookup the user data received via OAuth flow for the user and team.
  4. Perform the required application logic.

In the guide you have 2 code samples, the first one is how to retrieve the JWT token and call your internal API (to call your backend), the second one is an example on how to handle it on the backend side.

 

 It this a path to an internal API you have built?

fetch(`${this.baseUrl}/${clientId}/team/${teamInfo.id}/JiraCard/board/${encodeURIComponent(boardInfo.id)}`, {

If yes, you need to implement, in your backend, the steps described above (1 to 4).

 

To summarise: 

  • Retrieve the JWT token in the FE (you have done using getIdToken())
  • Call an internal API using the JWT (it seems you have done it)
  • On the backend side Decode the JWT and check it is valid using your Client Secret Id
  • Read the content of the JWT (user id and team id)
  • Implement your logic/make your REST API call

Reply