Decoding JWT response help

Wappler General How To
,
#1

Hello! I really enjoyed using wappler to start, but there’s something I cannot figure out and hoping someone here can help :slight_smile:

We have built our own API and authentication service. I am using wappler to build the front end of the application. Right now, when someone logs in, we send an API request to an endpoint, which returns a jwt access token and refresh token. I am attempting to decode the token that I receive using wappler server actions, so that I can determine if someone is logged in or not.

Currently, I am using an API form to send to the endpoint, and then set a global session variable to store the token I receive.

On the next page (called /dashboard) I am redirected to, I use a server connect component to call my server action. the server action reads the global session variable, then in my EXEcute commands, I use jwt decode to read my session variable.

On the /dashboard page, after the server connect component finishes running (it is the first component I call for reference), I would expect to be able to parse any of the data from the server connect component that decoded the jwt token. For testing purposes, in my markup I wrote {{serverconnect1.data}} and get [object Object] to print out, but there is nothing more I can do with this. I tried the parseJSON() and toJSON() formatters, I’ve tried to drill down to the next data element that I see on jwt.io (like {{serverconnect1.data.sub}}), but nothing seems to help me understand what’s inside of this object so that I can move to my next step of using the data for verification.

I’m happy to post screenshots and code, but wonder if there’s something I’m missing easily… It’s very possible!

#2

More specifically, I am not able to set the variable properly it looks like. Here is the core of the issue:

image
image1680×1010 65.6 KB

That’s my server action. I’m trying to use the global $_SESSION.token in my NodeJS setup.

I know the Session token exists from the browser here:

image
image1920×1030 153 KB

But the server action isn’t picking that up at all. It’s returning undefined (I figured this out by adding a Set Cookie action to my server action and trying to set the value to $_SESSION.token, and it returned undefined).

Am I missing something easy and important here?

#3

It looks to me you’re looking for $_COOKIE.token

Session values aren’t exposed like that on the browser console, session values are stored server-side and the browser only has a cookie “session” with some ID to identify the session

#4

Thanks @Apple for checking in on this!!

During my API call to our login endpoint in Wappler, I do the following on Success:

image
image460×720 12.9 KB

(I am storing it twice in two different ways trying to get this to work, which is why i’m setting the session twice under two different names.)

There is no option within that Flow Editor to set a cookie.

image
image1174×678 22.2 KB

And here, there is no cookie with anything named session or token. The all capitals _TOKEN was a test I was running previously that I’ve deleted from my server action.

image
image1920×1030 169 KB

I’m going to try to use Set Global to see if I can do it that way… but maybe there is some way you know to set the cookie!

#5

I think I understand what’s going on here, but I lack the front-end experience to give you a clear direction (I’ll try anyway).

It seems you’re using “session storage” from HTML5 Web Storage, which is different from “session storage” of Wappler’s backend, and this is why you can’t access those variables on your server action.

So, two different things with the same name…

Easiest way I imagine to solve this is, when you get the token, you send it as a $_GET or $_POST parameter to a server action, which in turn uses the Set Session step to save $_SESSION.token

#6

I think I’m getting closer…here’s the new workflow:

During API call, do a server connect with action set_session_token:

image
image460×720 15 KB

Here is the server action:

image
image1680×1010 63.6 KB

I can see the cookie being set:

image
image1920×1030 157 KB

Now I have that set, I go to the page I want to run the server action to decode. This is a content page… not sure if that matters. It happens in serverconnect2. I even included an input parameter of test with the session1.data.token to make sure I have something to $_GET as a further test.

Now I head to my decode_token server action:

image
image1680×1010 63.8 KB

I use the values of $_COOKIE._TOKEN to set a new cookie tokentest for testing. I also set another cookie with my $_GET value from input parameter called get_test. Both get set by the browser, no problem! This is good:

image
image1920×1030 156 KB

However, now my final step in the server action, the JWT decode step is still undefined for some reason, even though I know I am feeding it a proper token. Here I am calling serverconnect2.data.identity:

image
image1680×1010 115 KB

And here I am getting false from the identity parameter:

image
image1920×1030 152 KB

This is why I feel like I’m missing something with this decode JWT… Here I am posting the JWT at JWT.io:

image
image1920×1030 132 KB

@Apple, your help moved me forward to make sure I was actually sending a real value in my server action step! Thank you!! Maybe there is still something I’m missing with this decode step though…

#7

Glad I was able to move you forward!

  1. What server action are you calling on serverconnect2?
  2. Show that server action steps. I want to check if there’s such “identity” variable
#8

I’m calling /api/decode_token

image
image1680×1010 116 KB

Here are the action steps:

image
image1680×1010 59.8 KB

#9

You’re doing this:

{{serverconnect2.data.identity}}

But I can clearly see in your screenshot, the variable identity is not defined:

image
image1680×1010 59.8 KB

The only variables defined are:

  1. tokentest
  2. get_test
  3. decode_token

The variable decode_token may be an object, which may contain variables from the data payload:

image
image1920×1030 132 KB

  1. jit
  2. sub
  3. name
    etc.

I’m not familiar with JWT, sorry if I say anything wrong

#10

For a further test, I added a step to put the decoded token into it’s own cookie, just to see if something was happening:

image
image1680×1010 64 KB

And this came out in the browser:

image
image1920×1030 142 KB

Copied and pasted, it looks like this:

j%3A%7B%22header%22%3A%7B%22alg%22%3A%22HS256%22%2C%22typ%22%3A%22JWT%22%7D%2C%22payload%22%3A%7B%22jit%22%3A%22b543aab4-a2cd-4d6b-9331-2b7aea671be3%22%2C%22sub%22%3A%22b6aec85e-7da2-4f8d-96b0-d36a6b6c6079%22%2C%22name%22%3A%22Cameron%20Underdown%22%2C%22iat%22%3A1690587961.466317%2C%22nbf%22%3A1690587961.466317%2C%22exp%22%3A1690591561.466317%2C%22reg%22%3A%5B%5D%2C%22type%22%3A%22access%22%7D%2C%22signature%22%3A%22IcNFgh1ERxTunizTPAKnmpF-_kwDtosNAi3Ei6rIBc8%22%7D

Don’t know if that helps at all to know something is happening…

#11

Go here:
https://ostermiller.org/calc/encode.html

Paste that gibberish there, and hit URL Decode, you get this:

j:{"header":{"alg":"HS256","typ":"JWT"},"payload":{"jit":"b543aab4-a2cd-4d6b-9331-2b7aea671be3","sub":"b6aec85e-7da2-4f8d-96b0-d36a6b6c6079","name":"Cameron Underdown","iat":1690587961.466317,"nbf":1690587961.466317,"exp":1690591561.466317,"reg":[],"type":"access"},"signature":"IcNFgh1ERxTunizTPAKnmpF-_kwDtosNAi3Ei6rIBc8"}

So you can see it’s working

Your expression on the front-end is wrong (see my previous post, I posted a few seconds before your reply), should be:

{{serverconnect2.data.decode_token.name}}
#12

image
image1680×1010 110 KB

I did add jit: {{serverconnect2.data.jit}} to see if something would come out…

But nothing:

image
image1920×1030 161 KB

#13

{{serverconnect2.data.decode_token.jit}}

Each step returns a variable, so the JWT Decode step is named “decode_token” (as you named it)

#14

OK, I see what you are saying now! I tried what you said:

image
image1680×1010 110 KB

But jit is still returning nothing unfortunately. I definitely need to decode the response I am getting, but not sure how to do that properly in a server action…

#15

Ok, please go to the network tab of your browser developer tools, and find there the request made by serverconnect2, and look at the response, to see the fields

#16

Network tab totally empty…

image
image1920×1030 118 KB

I am seriously so grateful for your patience and time @Apple. This is amazing.

#17

Refresh the page :smiley:

You’re welcome!

#18

https://watch.screencastify.com/v/MTfAjq3OGCadap0Yq6TX

That’s me refreshing :frowning: Nothing unfortunately.

#19

For some reason it seems you have a filter applied, take it out:

image
image1168×386 86.7 KB

#20

Took the filter off, refreshed, and still nothing :frowning: